From e98e8a223e7fcdf88ee8483cbfc7789d2504e8d3 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 26 Nov 2024 17:05:00 +0800
Subject: [PATCH 001/138] Change all species and communities urls to use hyphen
 instead of underscore in url so that correct primary menu item is always
 selected when it should be.

---
 boranga/components/history/api.py                      |  2 +-
 boranga/components/species_and_communities/models.py   |  4 ++--
 boranga/frontend/boranga/src/api.js                    | 10 +++++-----
 .../src/components/common/communities_dashboard.vue    |  8 ++++----
 .../common/species_communities/community_profile.vue   |  2 +-
 .../src/components/common/species_fauna_dashboard.vue  |  8 ++++----
 .../src/components/common/species_flora_dashboard.vue  |  8 ++++----
 .../boranga/src/components/external/routes/index.js    |  2 +-
 .../internal/occurrence/occurrence_report.vue          |  4 ++--
 .../boranga/src/components/internal/routes/index.js    |  2 +-
 boranga/urls.py                                        |  6 +++---
 11 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/boranga/components/history/api.py b/boranga/components/history/api.py
index 1bf06bd6..5f567e73 100644
--- a/boranga/components/history/api.py
+++ b/boranga/components/history/api.py
@@ -286,7 +286,7 @@ def get(self, request, app_label, component_name, model_name, pk):
 
         Example:
 
-        api/history/boranga/species_communities/SpeciesDocument/729
+        api/history/boranga/species-communities/SpeciesDocument/729
         """
         super().get(request, model_name)
 
diff --git a/boranga/components/species_and_communities/models.py b/boranga/components/species_and_communities/models.py
index f260009b..633a0f06 100644
--- a/boranga/components/species_and_communities/models.py
+++ b/boranga/components/species_and_communities/models.py
@@ -767,7 +767,7 @@ def as_related_item(self):
             descriptor=self.related_item_descriptor,
             status=self.related_item_status,
             action_url=(
-                f'<a href="/internal/species_communities/{self.id}'
+                f'<a href="/internal/species-communities/{self.id}'
                 f'?group_type_name={self.group_type.name}" target="_blank">View '
                 '<i class="bi bi-box-arrow-up-right"></i></a>'
             ),
@@ -1546,7 +1546,7 @@ def as_related_item(self):
             descriptor=self.related_item_descriptor,
             status=self.related_item_status,
             action_url=(
-                f'<a href="/internal/species_communities/{self.id}'
+                f'<a href="/internal/species-communities/{self.id}'
                 f'?group_type_name={self.group_type.name}" target="_blank">View '
                 '<i class="bi bi-box-arrow-up-right"></i></a>'
             ),
diff --git a/boranga/frontend/boranga/src/api.js b/boranga/frontend/boranga/src/api.js
index d491426b..ead72597 100644
--- a/boranga/frontend/boranga/src/api.js
+++ b/boranga/frontend/boranga/src/api.js
@@ -210,16 +210,16 @@ module.exports = {
         return `/api/observer_detail/${id}.json`;
     },
     lookup_history_species_document: function (id) {
-      return `/api/history/boranga/species_communities/SpeciesDocument/${id}/`;
+      return `/api/history/boranga/species-communities/SpeciesDocument/${id}/`;
     },
     lookup_history_species: function (id) {
-      return `/api/history/boranga/species_communities/Species/${id}/`;
+      return `/api/history/boranga/species-communities/Species/${id}/`;
     },
     lookup_history_community_document: function (id) {
-      return `/api/history/boranga/species_communities/CommunityDocument/${id}/`;
+      return `/api/history/boranga/species-communities/CommunityDocument/${id}/`;
     },
     lookup_history_community: function (id) {
-      return `/api/history/boranga/species_communities/Community/${id}/`;
+      return `/api/history/boranga/species-communities/Community/${id}/`;
     },
 
     lookup_history_conservation_status_document: function (id) {
@@ -248,7 +248,7 @@ module.exports = {
     },
 
     lookup_history_conservation_threat: function (id) {
-      return `/api/history/boranga/species_communities/ConservationThreat/${id}/`;
+      return `/api/history/boranga/species-communities/ConservationThreat/${id}/`;
     },
 
     lookup_history_ocr_conservation_threat: function (id) {
diff --git a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
index 84caacff..1695c802 100644
--- a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
@@ -562,7 +562,7 @@ export default {
                             if (full.processing_status == 'Discarded') {
                                 links += `<a href='#' data-reinstate-community-proposal='${full.id}'>Reinstate</a><br/>`;
                             } else {
-                                links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}'>Continue</a><br/>`;
+                                links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}'>Continue</a><br/>`;
                                 links += `<a href='#${full.id}' data-discard-community-proposal='${full.id}'>Discard</a><br/>`;
                                 links += `<a href='#' data-history-community='${full.id}'>History</a><br>`;
                             }
@@ -570,13 +570,13 @@ export default {
                         else {
                             if (full.user_process) {
 
-                                links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
+                                links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
                             }
-                            links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
+                            links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                             links += `<a href='#' data-history-community='${full.id}'>History</a><br>`;
                         }
                     } else {
-                        links += `<a href='/external/species_communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
+                        links += `<a href='/external/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                     }
                     return links;
                 }
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
index cee308b8..6cb9a201 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
@@ -18,7 +18,7 @@
                 </div>
                 <div class="col-sm-2">
                     <a class="btn btn-primary" role="button" target="_blank"
-                        :href="`/internal/species_communities/${species_community.renamed_from.id}?group_type_name=${species_community.group_type}`">
+                        :href="`/internal/species-communities/${species_community.renamed_from.id}?group_type_name=${species_community.group_type}`">
                         <i class="bi bi-box-arrow-up-right"></i> {{ species_community.renamed_from.community_number }}
                     </a>
                 </div>
diff --git a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
index 94049ebd..2802dbc8 100644
--- a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
@@ -677,20 +677,20 @@ export default {
                             if (full.processing_status == 'Discarded') {
                                 links += `<a href='#${full.id}' data-reinstate-species-proposal='${full.id}'>Reinstate</a><br/>`;
                             } else {
-                                links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}'>Continue</a><br/>`;
+                                links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}'>Continue</a><br/>`;
                                 links += `<a href='#${full.id}' data-discard-species-proposal='${full.id}'>Discard</a><br/>`;
                                 links += `<a href='#' data-history-species='${full.id}'>History</a><br>`;
                             }
                         }
                         else {
                             if (full.user_process) {
-                                links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
+                                links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
                             }
-                            links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
+                            links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                             links += `<a href='#' data-history-species='${full.id}'>History</a><br>`;
                         }
                     } else {
-                        links += `<a href='/external/species_communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
+                        links += `<a href='/external/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                     }
                     return links;
                 }
diff --git a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
index 717583a2..96ab54ea 100755
--- a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
@@ -689,20 +689,20 @@ export default {
                             if (full.processing_status == 'Discarded') {
                                 links += `<a href='#${full.id}' data-reinstate-species-proposal='${full.id}'>Reinstate</a><br/>`;
                             } else {
-                                links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}'>Continue</a><br/>`;
+                                links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}'>Continue</a><br/>`;
                                 links += `<a href='#${full.id}' data-discard-species-proposal='${full.id}'>Discard</a><br/>`;
                                 links += `<a href='#' data-history-species='${full.id}'>History</a><br>`;
                             }
                         }
                         else {
                             if (full.user_process) {
-                                links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
+                                links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
                             }
-                            links += `<a href='/internal/species_communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
+                            links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                             links += `<a href='#' data-history-species='${full.id}'>History</a><br>`;
                         }
                     } else {
-                        links += `<a href='/external/species_communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
+                        links += `<a href='/external/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                     }
                     return links;
                 }
diff --git a/boranga/frontend/boranga/src/components/external/routes/index.js b/boranga/frontend/boranga/src/components/external/routes/index.js
index 11b91a40..0a5b592f 100755
--- a/boranga/frontend/boranga/src/components/external/routes/index.js
+++ b/boranga/frontend/boranga/src/components/external/routes/index.js
@@ -29,7 +29,7 @@ export default
                 name: "external-species-communities-dash"
             },
             {
-                path: 'species_communities',
+                path: 'species-communities',
                 component: {
                     render(c) {
                         return c('router-view')
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
index 98a12927..e20d18d3 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
@@ -19,7 +19,7 @@
                         <template v-if="isCommunity">
                             <template v-if="occurrence_report.community_id">
                                 Community: {{ occurrence_report.community_number }}<small><a
-                                        :href="`/internal/species_communities/${occurrence_report.community_id}?group_type_name=${occurrence_report.group_type}&action=view`"
+                                        :href="`/internal/species-communities/${occurrence_report.community_id}?group_type_name=${occurrence_report.group_type}&action=view`"
                                         target="_blank"><i class="bi bi-box-arrow-up-right ms-2"></i></a></small>
                             </template>
                             <template v-else>
@@ -29,7 +29,7 @@
                         <template v-else>
                             <template v-if="occurrence_report.species_id">
                                 Species: {{ occurrence_report.species_number }}<small><a
-                                        :href="`/internal/species_communities/${occurrence_report.species_id}?group_type_name=${occurrence_report.group_type}&action=view`"
+                                        :href="`/internal/species-communities/${occurrence_report.species_id}?group_type_name=${occurrence_report.group_type}&action=view`"
                                         target="_blank"><i class="bi bi-box-arrow-up-right ms-2"></i></a></small>
                             </template>
                             <template v-else>
diff --git a/boranga/frontend/boranga/src/components/internal/routes/index.js b/boranga/frontend/boranga/src/components/internal/routes/index.js
index f1c3d8c5..0c6ce7d5 100755
--- a/boranga/frontend/boranga/src/components/internal/routes/index.js
+++ b/boranga/frontend/boranga/src/components/internal/routes/index.js
@@ -119,7 +119,7 @@ export default
                 ]
             },
             {
-                path: 'species_communities',
+                path: 'species-communities',
                 component: {
                     render(c) {
                         return c('router-view')
diff --git a/boranga/urls.py b/boranga/urls.py
index ae60d758..b7441bfc 100755
--- a/boranga/urls.py
+++ b/boranga/urls.py
@@ -369,7 +369,7 @@ def trigger_error(request):
         name="species-communities",
     ),
     re_path(
-        r"^external/species_communities/(?P<species_proposal_pk>\d+)",
+        r"^external/species-communities/(?P<species_proposal_pk>\d+)",
         views.SpeciesView.as_view(),
         name="external-species-detail",
     ),
@@ -407,12 +407,12 @@ def trigger_error(request):
         name="external-conservation-status-referral-detail",
     ),
     re_path(
-        r"^internal/species_communities/(?P<species_proposal_pk>\d+)/$",
+        r"^internal/species-communities/(?P<species_proposal_pk>\d+)/$",
         views.InternalSpeciesView.as_view(),
         name="internal-species-detail",
     ),
     re_path(
-        r"^internal/species_communities/(?P<community_proposal_pk>\d+)/$",
+        r"^internal/species-communities/(?P<community_proposal_pk>\d+)/$",
         views.InternalCommunityView.as_view(),
         name="internal-community-detail",
     ),

From 9397247498ff271c801f70db3ccc05720f03c941 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 27 Nov 2024 10:06:37 +0800
Subject: [PATCH 002/138] Change all conservation status urls to use hyphen
 instead of underscore in url so that correct primary menu item is always
 selected when it should be.

---
 .../common/conservation_status/community_status.vue    |  4 ++--
 .../common/conservation_status/species_status.vue      |  4 ++--
 .../common/conservation_status_community_dashboard.vue |  8 ++++----
 .../common/conservation_status_fauna_dashboard.vue     |  8 ++++----
 .../common/conservation_status_flora_dashboard.vue     |  8 ++++----
 .../common/cs_community_referrals_dashboard.vue        |  2 +-
 .../common/cs_external_referrals_dashboard.vue         |  2 +-
 .../components/common/cs_fauna_referrals_dashboard.vue |  2 +-
 .../components/common/cs_flora_referrals_dashboard.vue |  2 +-
 .../species_communities/basic_conservation_status.vue  |  2 +-
 .../conservation_status_proposal_table.vue             |  4 ++--
 .../boranga/src/components/external/routes/index.js    |  2 +-
 .../conservation_status/conservation_status.vue        | 10 +++++-----
 .../src/components/internal/meetings/cs_queue.vue      |  4 ++--
 .../boranga/src/components/internal/routes/index.js    |  8 ++++----
 boranga/urls.py                                        |  8 ++++----
 16 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
index a4730243..62b5a107 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
@@ -398,7 +398,7 @@
                                 v-if="conservation_status_obj.conservation_status_under_review &&
                                     conservation_status_obj.id != conservation_status_obj.conservation_status_under_review.id">
                                 <div>
-                                    <a :href="`/internal/conservation_status/${conservation_status_obj.conservation_status_under_review.id}`"
+                                    <a :href="`/internal/conservation-status/${conservation_status_obj.conservation_status_under_review.id}`"
                                         target="_blank" class="btn btn-primary">{{
                                             conservation_status_obj.conservation_status_under_review.conservation_status_number
                                         }}<i class="bi bi-box-arrow-up-right ps-2"></i></a>
@@ -416,7 +416,7 @@
                         <label for="conservation_status_number" class="col-sm-5 col-form-label">Conservation Status
                             Number:</label>
                         <div class="col-sm-7">
-                            <a :href="`/internal/conservation_status/${conservation_status_obj.current_conservation_status.id}`"
+                            <a :href="`/internal/conservation-status/${conservation_status_obj.current_conservation_status.id}`"
                                 target="_blank" class="btn btn-primary">{{
                                     conservation_status_obj.current_conservation_status.conservation_status_number }}<i
                                     class="bi bi-box-arrow-up-right ps-2"></i></a>
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
index 38ebb6ad..47326657 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
@@ -403,7 +403,7 @@
                             <div
                                 v-if="conservation_status_obj.conservation_status_under_review && conservation_status_obj.id != conservation_status_obj.conservation_status_under_review.id">
                                 <div>
-                                    <a :href="`/internal/conservation_status/${conservation_status_obj.conservation_status_under_review.id}`"
+                                    <a :href="`/internal/conservation-status/${conservation_status_obj.conservation_status_under_review.id}`"
                                         target="_blank" class="btn btn-primary">{{
                                             conservation_status_obj.conservation_status_under_review.conservation_status_number
                                         }}<i class="bi bi-box-arrow-up-right ps-2"></i></a>
@@ -421,7 +421,7 @@
                         <label for="conservation_status_number" class="col-sm-5 col-form-label">Conservation Status
                             Number:</label>
                         <div class="col-sm-7">
-                            <a :href="`/internal/conservation_status/${conservation_status_obj.current_conservation_status.id}`"
+                            <a :href="`/internal/conservation-status/${conservation_status_obj.current_conservation_status.id}`"
                                 target="_blank" class="btn btn-primary">{{
                                     conservation_status_obj.current_conservation_status.conservation_status_number }}<i
                                     class="bi bi-box-arrow-up-right ps-2"></i></a>
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
index df033983..2952e5f2 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
@@ -817,7 +817,7 @@ export default {
                     let links = "";
                     if (vm.is_for_agenda == false) {
                         if (full.internal_user_edit) {
-                            links += `<a href='/internal/conservation_status/${full.id}'>Continue</a><br/>`;
+                            links += `<a href='/internal/conservation-status/${full.id}'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-cs-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-conservation-status-community='${full.id}'
                             data-history-community='${full.community_number}'
@@ -825,7 +825,7 @@ export default {
                         }
                         else {
                             if (full.assessor_process || full.approver_process) {
-                                links += `<a href='/internal/conservation_status/${full.id}'>Process</a><br/>`;
+                                links += `<a href='/internal/conservation-status/${full.id}'>Process</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-community='${full.id}'
                                     data-history-community='${full.community_number}'
                                     data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
@@ -834,7 +834,7 @@ export default {
                                 if (full.processing_status == constants.PROPOSAL_STATUS.DISCARDED.TEXT) {
                                     links += `<a href='#' data-reinstate-conservation-status-community='${full.id}'>Reinstate</a><br/>`;
                                 }
-                                links += `<a href='/internal/conservation_status/${full.id}?action=view'>View</a><br/>`;
+                                links += `<a href='/internal/conservation-status/${full.id}?action=view'>View</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-community='${full.id}'
                                 data-history-community='${full.community_number}'
                                 data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
@@ -1166,7 +1166,7 @@ export default {
                         console.log(err);
                     }
                     this.$router.push({
-                        name: 'internal-conservation_status',
+                        name: 'internal-conservation-status',
                         params: { conservation_status_id: newCommunityCSId },
                     });
                 }
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
index 15674c2e..36ec1269 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
@@ -897,7 +897,7 @@ export default {
                     let links = "";
                     if (vm.is_for_agenda == false) {
                         if (full.internal_user_edit) {
-                            links += `<a href='/internal/conservation_status/${full.id}'>Continue</a><br/>`;
+                            links += `<a href='/internal/conservation-status/${full.id}'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-cs-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                 data-history-species='${full.species_number}'
@@ -905,7 +905,7 @@ export default {
                         }
                         else {
                             if (full.assessor_process) {
-                                links += `<a href='/internal/conservation_status/${full.id}'>Process</a><br/>`;
+                                links += `<a href='/internal/conservation-status/${full.id}'>Process</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                         data-history-species='${full.species_number}'
                                         data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
@@ -914,7 +914,7 @@ export default {
                                 if (full.processing_status == constants.PROPOSAL_STATUS.DISCARDED.TEXT) {
                                     links += `<a href='#' data-reinstate-conservation-status-species='${full.id}'>Reinstate</a><br/>`;
                                 }
-                                links += `<a href='/internal/conservation_status/${full.id}?action=view'>View</a><br/>`;
+                                links += `<a href='/internal/conservation-status/${full.id}?action=view'>View</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                     data-history-species='${full.species_number}'
                                     data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
@@ -1370,7 +1370,7 @@ export default {
                         console.log(err);
                     }
                     this.$router.push({
-                        name: 'internal-conservation_status',
+                        name: 'internal-conservation-status',
                         params: { conservation_status_id: newFaunaCSId },
                     });
                 }
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
index 737d96dc..792216c0 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
@@ -887,7 +887,7 @@ export default {
                     let links = "";
                     if (vm.is_for_agenda == false) {
                         if (full.internal_user_edit) {
-                            links += `<a href='/internal/conservation_status/${full.id}'>Continue</a><br/>`;
+                            links += `<a href='/internal/conservation-status/${full.id}'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-cs-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                 data-history-species='${full.species_number}'
@@ -895,7 +895,7 @@ export default {
                         }
                         else {
                             if (full.assessor_process || full.approver_process) {
-                                links += `<a href='/internal/conservation_status/${full.id}'>Process</a><br/>`;
+                                links += `<a href='/internal/conservation-status/${full.id}'>Process</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                         data-history-species='${full.species_number}'
                                         >History</a><br>`;
@@ -904,7 +904,7 @@ export default {
                                 if (full.processing_status == constants.PROPOSAL_STATUS.DISCARDED.TEXT) {
                                     links += `<a href='#' data-reinstate-conservation-status-species='${full.id}'>Reinstate</a><br/>`;
                                 }
-                                links += `<a href='/internal/conservation_status/${full.id}?action=view'>View</a><br/>`;
+                                links += `<a href='/internal/conservation-status/${full.id}?action=view'>View</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                     data-history-species='${full.species_number}'
                                     >History</a><br>`;
@@ -1359,7 +1359,7 @@ export default {
                         console.log(err);
                     }
                     this.$router.push({
-                        name: 'internal-conservation_status',
+                        name: 'internal-conservation-status',
                         params: { conservation_status_id: newFloraCSId },
                     });
                 }
diff --git a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
index 1365b166..7a83ef3e 100644
--- a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
@@ -243,7 +243,7 @@ export default {
                 visible: true,
                 'render': function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/internal/conservation_status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation_status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed ? `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 }
             }
diff --git a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
index c03de3f1..3b479f11 100644
--- a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
@@ -206,7 +206,7 @@ export default {
                 visible: true,
                 'render': function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/external/conservation_status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/external/conservation_status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed ? `<a href='/external/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/external/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
             }
diff --git a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
index 87160e0d..b2b68bac 100644
--- a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
@@ -275,7 +275,7 @@ export default {
                 visible: true,
                 'render': function (data, type, full) {
                     let links = '';
-                    links += full.can_user_process ? `<a href='/internal/conservation_status/${full.conservation_status}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation_status/${full.conservation_status}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_user_process ? `<a href='/internal/conservation-status/${full.conservation_status}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation-status/${full.conservation_status}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
             }
diff --git a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
index bc4716c4..e70bef3f 100644
--- a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
@@ -303,7 +303,7 @@ export default {
                 visible: true,
                 'render': function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/internal/conservation_status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation_status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed ? `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
             }
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue b/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue
index 105ce894..49b71152 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue
@@ -5,7 +5,7 @@
                 <label for="conservation_status_number" class="col-sm-4 col-form-label">Conservation Status
                     Number:</label>
                 <div class="col-sm-8">
-                    <a :href="`/internal/conservation_status/${conservation_status.id}`" target="_blank"
+                    <a :href="`/internal/conservation-status/${conservation_status.id}`" target="_blank"
                         class="btn btn-primary">{{
                             conservation_status.conservation_status_number }}<i
                             class="bi bi-box-arrow-up-right ps-2"></i></a>
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
index 7e6eec4a..e76d0779 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
@@ -322,11 +322,11 @@ export default {
                 'render': function (data, type, full) {
                     let links = "";
                     if (full.can_user_edit) {
-                        links += `<a href='/external/conservation_status/${full.id}'>Continue</a><br/>`;
+                        links += `<a href='/external/conservation-status/${full.id}'>Continue</a><br/>`;
                         links += `<a href='#${full.id}' data-discard-cs-proposal='${full.id}'>Discard</a><br/>`;
                     }
                     else if (full.can_user_view) {
-                        links += `<a href='/external/conservation_status/${full.id}'>View</a>`;
+                        links += `<a href='/external/conservation-status/${full.id}'>View</a>`;
                     }
                     else if (full.processing_status == 'discarded') {
                         links += `<a <a href='#${full.id}' data-reinstate-cs-proposal='${full.id}'>Reinstate</a>`;
diff --git a/boranga/frontend/boranga/src/components/external/routes/index.js b/boranga/frontend/boranga/src/components/external/routes/index.js
index 0a5b592f..b7e0eb8a 100755
--- a/boranga/frontend/boranga/src/components/external/routes/index.js
+++ b/boranga/frontend/boranga/src/components/external/routes/index.js
@@ -89,7 +89,7 @@ export default
                 name: "external-conservation_status-dash"
             },
             {
-                path: 'conservation_status',
+                path: 'conservation-status',
                 component: {
                     render(c) {
                         return c('router-view')
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index 06d1e902..ae0283ee 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -378,7 +378,7 @@
                                                 <div class="col-md-6">
                                                     <p class="pull-right" style="margin-top:5px;">
                                                         <router-link class="btn btn-primary"
-                                                            :to="{ name: 'internal-conservation_status-dash' }">Back to
+                                                            :to="{ name: 'internal-conservation-status-dash' }">Back to
                                                             Dashboard</router-link>
                                                     </p>
                                                 </div>
@@ -805,7 +805,7 @@ export default {
                                 },
                             });
                             vm.$router.push({
-                                name: 'internal-conservation_status-dash'
+                                name: 'internal-conservation-status-dash'
                             });
                         }, (error) => {
                             console.log(error);
@@ -857,7 +857,7 @@ export default {
                                 },
                             });
                             vm.$router.push({
-                                name: 'internal-conservation_status-dash'
+                                name: 'internal-conservation-status-dash'
                             });
                         }, (error) => {
                             console.log(error);
@@ -981,7 +981,7 @@ export default {
             await this.save(e).then(() => {
                 if (vm.isSaved === true) {
                     vm.$router.push({
-                        name: 'internal-conservation_status-dash'
+                        name: 'internal-conservation-status-dash'
                     });
                 } else {
                     vm.saveExitConservationStatus = false;
@@ -1093,7 +1093,7 @@ export default {
                         vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/submit'), payload).then(res => {
                             vm.conservation_status_obj = res.body;
                             vm.$router.push({
-                                name: 'internal-conservation_status-dash'
+                                name: 'internal-conservation-status-dash'
                             });
                         }, err => {
                             swal.fire({
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index 8aa543df..d902db09 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -148,7 +148,7 @@ export default {
                             if (!vm.isReadOnly) {
                                 links += `<a href='#${full.conservation_status_id}' data-remove-agenda-item='${full.conservation_status_id}'>Remove</a><br/>`
                             }
-                            links += `<a target="_blank" href='/internal/conservation_status/${full.conservation_status_id}?action=view'>View <i class="bi bi-arrow-up-right-square"></i></a><br/>`;
+                            links += `<a target="_blank" href='/internal/conservation-status/${full.conservation_status_id}?action=view'>View <i class="bi bi-arrow-up-right-square"></i></a><br/>`;
                             return links;
 
                         },
@@ -280,7 +280,7 @@ export default {
                             vm.meeting_obj.agenda_items_arr = res.body;
                             vm.$refs.cs_queue_datatable.vmDataTable.ajax.reload(vm.addTableListeners, false);
                             // Open the CS details page in a new tab
-                            var new_window = window.open(`/internal/conservation_status/${conservation_status_id}?action=view`, '_blank');
+                            var new_window = window.open(`/internal/conservation-status/${conservation_status_id}?action=view`, '_blank');
                             new_window.blur();
                             window.focus();
                         }, (error) => {
diff --git a/boranga/frontend/boranga/src/components/internal/routes/index.js b/boranga/frontend/boranga/src/components/internal/routes/index.js
index 0c6ce7d5..ac2be99d 100755
--- a/boranga/frontend/boranga/src/components/internal/routes/index.js
+++ b/boranga/frontend/boranga/src/components/internal/routes/index.js
@@ -36,7 +36,7 @@ export default
             {
                 path: 'conservation-status',
                 component: ConservationStatusDash,
-                name: "internal-conservation_status-dash"
+                name: "internal-conservation-status-dash"
             },
             {
                 path: 'meetings',
@@ -134,7 +134,7 @@ export default
                 ]
             },
             {
-                path: 'conservation_status',
+                path: 'conservation-status',
                 component: {
                     render(c) {
                         return c('router-view')
@@ -152,12 +152,12 @@ export default
                             {
                                 path: '/',
                                 component: ConservationStatus,
-                                name: "internal-conservation_status"
+                                name: "internal-conservation-status"
                             },
                             {
                                 path: 'referral/:referral_id',
                                 component: ConservationStatusReferral,
-                                name: "internal-conservation_status-referral"
+                                name: "internal-conservation-status-referral"
                             }
                         ]
                     },
diff --git a/boranga/urls.py b/boranga/urls.py
index b7441bfc..d133e87b 100755
--- a/boranga/urls.py
+++ b/boranga/urls.py
@@ -382,12 +382,12 @@ def trigger_error(request):
     re_path(r"^private-media/", views.getPrivateFile, name="view_private_file"),
     # following url is defined so that to include url path when sending Proposal amendment request to user.
     re_path(
-        r"^external/conservation_status/(?P<cs_proposal_pk>\d+)/$",
+        r"^external/conservation-status/(?P<cs_proposal_pk>\d+)/$",
         views.ExternalConservationStatusView.as_view(),
         name="external-conservation-status-detail",
     ),
     re_path(
-        r"^internal/conservation_status/(?P<cs_proposal_pk>\d+)/$",
+        r"^internal/conservation-status/(?P<cs_proposal_pk>\d+)/$",
         views.InternalConservationStatusView.as_view(),
         name="internal-conservation-status-detail",
     ),
@@ -397,12 +397,12 @@ def trigger_error(request):
         name="internal-conservation-status-dashboard",
     ),
     re_path(
-        r"^internal/conservation_status/(?P<cs_proposal_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
+        r"^internal/conservation-status/(?P<cs_proposal_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
         views.ConservationStatusReferralView.as_view(),
         name="internal-conservation-status-referral-detail",
     ),
     re_path(
-        r"^external/conservation_status/(?P<cs_proposal_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
+        r"^external/conservation-status/(?P<cs_proposal_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
         views.ConservationStatusReferralView.as_view(),
         name="external-conservation-status-referral-detail",
     ),

From f992aae8ea9572050f4e063ecf7d53237490e48b Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 27 Nov 2024 10:13:43 +0800
Subject: [PATCH 003/138] Change all occurrence report urls to use hyphen
 instead of underscore in url so that correct primary menu item is always
 selected when it should be.

---
 boranga/components/occurrence/models.py                   | 2 +-
 .../common/occurrence/occ_related_ocr_table.vue           | 8 ++++----
 .../common/occurrence_report_community_dashboard.vue      | 8 ++++----
 .../common/occurrence_report_fauna_dashboard.vue          | 8 ++++----
 .../common/occurrence_report_flora_dashboard.vue          | 8 ++++----
 .../common/ocr_external_referrals_dashboard.vue           | 2 +-
 .../src/components/common/ocr_referrals_dashboard.vue     | 2 +-
 .../external/occurrence/occurrence_report_proposal.vue    | 4 ++--
 .../external/occurrence/occurrence_report_table.vue       | 4 ++--
 .../external/occurrence/ocr_proposal_submit.vue           | 4 ++--
 .../boranga/src/components/external/routes/index.js       | 4 ++--
 .../components/internal/occurrence/bulk_import_schema.vue | 6 +++---
 .../internal/occurrence/bulk_import_schema_list.vue       | 6 +++---
 .../boranga/src/components/internal/routes/index.js       | 2 +-
 .../templates/webtemplate_dbca/includes/staff_menu.html   | 2 +-
 boranga/urls.py                                           | 6 +++---
 16 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index ba6c510c..a9a58306 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -594,7 +594,7 @@ def as_related_item(self):
             descriptor=self.related_item_descriptor,
             status=self.related_item_status,
             action_url=(
-                f'<a href="/internal/occurrence_report/{self.id}'
+                f'<a href="/internal/occurrence-report/{self.id}'
                 f'?action=view" target="_blank">View '
                 '<i class="bi bi-box-arrow-up-right"></i></a>'
             ),
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
index db4df8eb..fc06e83f 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
@@ -146,7 +146,7 @@ export default {
                 searchable: false,
                 visible: true,
             }
-        },     
+        },
         column_action: function(){
             return {
                 //name: 'action',
@@ -156,7 +156,7 @@ export default {
                 visible: true,
                 'render': function(row, type, full){
                     let links = '';
-                    links += `<a href='/internal/occurrence_report/${full.id}' target="_blank">View</a><br>`;
+                    links += `<a href='/internal/occurrence-report/${full.id}' target="_blank">View</a><br>`;
                     return links;
                 }
             }
@@ -298,7 +298,7 @@ export default {
             },
             err => {
                 console.log(err);
-            });  
+            });
         },
         copySection:function (id,merge) {
             let vm = this;
@@ -312,7 +312,7 @@ export default {
             vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence,vm.occurrence_obj.id+"/copy_ocr_section"), formData, {
                     emulateJSON: true,
                 }).then((response) => {
-                    vm.$refs.related_ocr_datatable.vmDataTable.ajax.reload();                    
+                    vm.$refs.related_ocr_datatable.vmDataTable.ajax.reload();
                     vm.$emit('copyUpdate', response.body, vm.section_type);
                 },
                 (error) => {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
index 9a09e4a9..68838e35 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
@@ -60,7 +60,7 @@
 
         <div v-if="addCommunityOCRVisibility" class="col-md-12">
             <div class="text-end">
-                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence_report/bulk_import/?group_type=community`"><i
+                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence-report/bulk_import/?group_type=community`"><i
                     class="bi bi-download pe-2"></i>Bulk Import</a>
                 <button type="button" class="btn btn-primary mb-2 " @click.prevent="createCommunityOccurrenceReport"><i
                         class="fa-solid fa-circle-plus"></i> Add Community Occurrence Report</button>
@@ -425,17 +425,17 @@ export default {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
                         } else {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=edit'>Continue</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                         }
                     }
                     else {
                         if (full.can_user_assess || full.can_user_approve) {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=edit'>Process</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Process</a><br/>`;
                         }
                         else {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=view'>View</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=view'>View</a><br/>`;
                         }
                         links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                     }
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
index 5c3fbaeb..27be143e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
@@ -60,7 +60,7 @@
         </CollapsibleFilters>
         <div v-if="addFaunaOCRVisibility" class="col-md-12">
             <div class="text-end">
-                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence_report/bulk_import/?group_type=fauna`"><i
+                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence-report/bulk_import/?group_type=fauna`"><i
                     class="bi bi-download pe-2"></i>Bulk Import</a>
                 <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFaunaOccurrenceReport"><i
                         class="fa-solid fa-circle-plus"></i> Add Fauna Occurrence Report</button>
@@ -426,17 +426,17 @@ export default {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
                         } else {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=edit'>Continue</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                         }
                     }
                     else {
                         if (full.can_user_assess || full.can_user_approve) {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=edit'>Process</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Process</a><br/>`;
                         }
                         else {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=view'>View</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=view'>View</a><br/>`;
                         }
                         links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                     }
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
index 7407af05..54d49a6d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
@@ -60,7 +60,7 @@
         </CollapsibleFilters>
         <div v-if="addFloraOCRVisibility" class="col-md-12">
             <div class="text-end">
-                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence_report/bulk_import/?group_type=flora`"><i
+                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence-report/bulk_import/?group_type=flora`"><i
                         class="bi bi-download pe-2"></i>Bulk Import</a>
 
                 <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFloraOccurrenceReport"><i
@@ -429,17 +429,17 @@ export default {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
                         } else {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=edit'>Continue</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                         }
                     }
                     else {
                         if (full.can_user_assess || full.can_user_approve) {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=edit'>Process</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Process</a><br/>`;
                         }
                         else {
-                            links += `<a href='/internal/occurrence_report/${full.id}?action=view'>View</a><br/>`;
+                            links += `<a href='/internal/occurrence-report/${full.id}?action=view'>View</a><br/>`;
                         }
                         links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                     }
diff --git a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
index 9ca030de..5f95fce0 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
@@ -206,7 +206,7 @@ export default {
                 visible: true,
                 'render': function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/external/occurrence_report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/external/occurrence_report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed ? `<a href='/external/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/external/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
             }
diff --git a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
index 6ae133b7..5633d066 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
@@ -271,7 +271,7 @@ export default {
                 visible: true,
                 'render': function (data, type, full) {
                     let links = "";
-                    links += full.can_be_processed ? `<a href='/internal/occurrence_report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/occurrence_report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed ? `<a href='/internal/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
             }
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
index f203f8bd..a73d1232 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
@@ -56,7 +56,7 @@
                                     <div class="col-md-6" style="margin-top:5px">
                                         <p class="pull-right" style="margin-top:5px;">
                                             <router-link class="btn btn-primary"
-                                                :to="{ name: 'external-occurrence_report-dash' }">Back
+                                                :to="{ name: 'external-occurrence-report-dash' }">Back
                                                 to
                                                 Dashboard</router-link>
                                         </p>
@@ -275,7 +275,7 @@ export default {
             await this.save().then(() => {
                 if (vm.isSaved === true) {
                     vm.$router.push({
-                        name: 'external-occurrence_report-dash',
+                        name: 'external-occurrence-report-dash',
                     });
                 } else {
                     this.saveExitOCRProposal = false;
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
index f5340b8e..a3b4d408 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
@@ -277,12 +277,12 @@ export default {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
                         } else {
-                            links += `<a href='/external/occurrence_report/${full.id}'>Continue</a><br/>`;
+                            links += `<a href='/external/occurrence-report/${full.id}'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                         }
                     }
                     else if (full.can_user_view) {
-                        links += `<a href='/external/occurrence_report/${full.id}'>View</a><br />`;
+                        links += `<a href='/external/occurrence-report/${full.id}'>View</a><br />`;
                     }
                     links += `<a href='#${full.id}' data-copy-ocr-proposal='${full.id}'>Copy</a>`;
                     return links;
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
index f2556b35..84c809e6 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
@@ -28,11 +28,11 @@
                         </table>
                         <br/>
                         <label>You will receive a notification email if there is any incomplete information or documents missing from the proposal.</label>
-                        <router-link :to="{name:'external-occurrence_report-dash'}" style="margin-top:15px;" class="btn btn-primary">Back to home</router-link>
+                        <router-link :to="{name:'external-occurrence-report-dash'}" style="margin-top:15px;" class="btn btn-primary">Back to home</router-link>
                     </div>
                     <div v-else class="col-sm-offset-3 col-sm-6 borderDecoration">
                         <strong>Sorry it looks like there isn't any application currently in your session.</strong>
-                        <br /><router-link :to="{name:'external-occurrence_report-dash'}" style="margin-top:15px;" class="btn btn-primary">Back to home</router-link>
+                        <br /><router-link :to="{name:'external-occurrence-report-dash'}" style="margin-top:15px;" class="btn btn-primary">Back to home</router-link>
                     </div>
                 </div>
             </div>
diff --git a/boranga/frontend/boranga/src/components/external/routes/index.js b/boranga/frontend/boranga/src/components/external/routes/index.js
index b7e0eb8a..b322f039 100755
--- a/boranga/frontend/boranga/src/components/external/routes/index.js
+++ b/boranga/frontend/boranga/src/components/external/routes/index.js
@@ -56,10 +56,10 @@ export default
             {
                 path: 'occurrence-report',
                 component: ExternalOccurrenceReportDash,
-                name: "external-occurrence_report-dash"
+                name: "external-occurrence-report-dash"
             },
             {
-                path: 'occurrence_report',
+                path: 'occurrence-report',
                 component: {
                     render(c) {
                         return c('router-view')
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index 6f0747ee..b45e8a73 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -504,7 +504,7 @@
                 <div class="container">
                     <div class="col-md-6">
                         <div class="col-md-6"><a role="button" class="btn btn-primary me-2 float-start"
-                                href="/internal/occurrence_report/bulk_import_schema/">Return to Dashboard </a>
+                                href="/internal/occurrence-report/bulk_import_schema/">Return to Dashboard </a>
                         </div>
                     </div>
                     <div v-if="schema.can_user_edit" class="col-md-6 text-end"><button
@@ -1041,7 +1041,7 @@ export default {
         },
         saveAndExit() {
             this.save()
-            this.$router.push(`/internal/occurrence_report/bulk_import_schema/`)
+            this.$router.push(`/internal/occurrence-report/bulk_import_schema/`)
         },
         copySchema(id) {
             this.$http.post(`${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`)
@@ -1054,7 +1054,7 @@ export default {
                             showConfirmButton: false,
                             timer: 1500
                         })
-                        this.$router.push(`/internal/occurrence_report/bulk_import_schema/${response.data.id}`)
+                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${response.data.id}`)
                         this.fetchBulkImportSchema()
                     }
                 })
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
index 384d06ba..7cdc640f 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
@@ -62,7 +62,7 @@
                                             Date(schema.datetime_updated).toLocaleTimeString() }}</td>
                                     <td>
                                         <a class="btn btn-sm btn-primary my-0 me-2" role="button"
-                                            :href="`/internal/occurrence_report/bulk_import_schema/${schema.id}`"><i
+                                            :href="`/internal/occurrence-report/bulk_import_schema/${schema.id}`"><i
                                                 class="bi me-2" :class="schema.can_user_edit ? 'bi-pencil-fill' : 'bi-eye-fill'"></i> <template v-if="schema.can_user_edit">Edit</template><template v-else>View</template></a>
 
                                         <button class="btn btn-sm btn-primary my-0"
@@ -145,7 +145,7 @@ export default {
                             showConfirmButton: false,
                             timer: 1500
                         })
-                        this.$router.push(`/internal/occurrence_report/bulk_import_schema/${response.data.id}`)
+                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${response.data.id}`)
                     }
                 })
                 .catch(error => {
@@ -165,7 +165,7 @@ export default {
                             showConfirmButton: false,
                             timer: 1500
                         })
-                        this.$router.push(`/internal/occurrence_report/bulk_import_schema/${response.data.id}`)
+                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${response.data.id}`)
                     }
                 })
                 .catch(error => {
diff --git a/boranga/frontend/boranga/src/components/internal/routes/index.js b/boranga/frontend/boranga/src/components/internal/routes/index.js
index ac2be99d..d0388997 100755
--- a/boranga/frontend/boranga/src/components/internal/routes/index.js
+++ b/boranga/frontend/boranga/src/components/internal/routes/index.js
@@ -59,7 +59,7 @@ export default
                 name: "internal-occurrence-detail"
             },
             {
-                path: 'occurrence_report',
+                path: 'occurrence-report',
                 component: {
                     render(c) {
                         return c('router-view')
diff --git a/boranga/templates/webtemplate_dbca/includes/staff_menu.html b/boranga/templates/webtemplate_dbca/includes/staff_menu.html
index 923daeda..9cfea952 100644
--- a/boranga/templates/webtemplate_dbca/includes/staff_menu.html
+++ b/boranga/templates/webtemplate_dbca/includes/staff_menu.html
@@ -6,5 +6,5 @@
     <li><a class="dropdown-item" href="{% url 'admin:index' %}">Admin</a></li>
 {% endif %}
 {% if request.user.is_superuser or is_django_admin_user or is_occurrence_approver %}
-    <li><a class="dropdown-item" href="/internal/occurrence_report/bulk_import_schema/">OCR Bulk Import Schema</a></li>
+    <li><a class="dropdown-item" href="/internal/occurrence-report/bulk_import_schema/">OCR Bulk Import Schema</a></li>
 {% endif %}
diff --git a/boranga/urls.py b/boranga/urls.py
index d133e87b..f598e95f 100755
--- a/boranga/urls.py
+++ b/boranga/urls.py
@@ -432,17 +432,17 @@ def trigger_error(request):
         name="external-occurrence-report-detail",
     ),
     re_path(
-        r"^internal/occurrence_report/(?P<occurrence_report_pk>\d+)/$",
+        r"^internal/occurrence-report/(?P<occurrence_report_pk>\d+)/$",
         views.InternalOccurrenceReportView.as_view(),
         name="internal-occurrence-report-detail",
     ),
     re_path(
-        r"^internal/occurrence_report/(?P<occurrence_report_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
+        r"^internal/occurrence-report/(?P<occurrence_report_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
         views.InternalOccurrenceReportReferralView.as_view(),
         name="internal-occurrence-report-referral-detail",
     ),
     re_path(
-        r"^external/occurrence_report/(?P<occurrence_report_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
+        r"^external/occurrence-report/(?P<occurrence_report_pk>\d+)/referral/(?P<referral_pk>\d+)/$",
         views.InternalOccurrenceReportReferralView.as_view(),
         name="external-occurrence-report-referral-detail",
     ),

From e5da39ca5d8f30aded576e8c0b2f4b68d8a5c2b2 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 27 Nov 2024 14:33:09 +0800
Subject: [PATCH 004/138] Remove assessor_recipients and approver_recipients
 properties from models.

---
 .../components/conservation_status/models.py  | 20 ----------------
 boranga/components/occurrence/models.py       | 16 -------------
 .../species_and_communities/models.py         | 23 +------------------
 3 files changed, 1 insertion(+), 58 deletions(-)

diff --git a/boranga/components/conservation_status/models.py b/boranga/components/conservation_status/models.py
index 6a6dbb1e..3bc73ace 100644
--- a/boranga/components/conservation_status/models.py
+++ b/boranga/components/conservation_status/models.py
@@ -820,26 +820,6 @@ def allowed_assessors(self):
         )
         return users
 
-    @property
-    def assessor_recipients(self):
-        recipients = []
-        group_ids = member_ids(
-            GROUP_NAME_CONSERVATION_STATUS_ASSESSOR, include_superusers=False
-        )
-        for id in group_ids:
-            recipients.append(EmailUser.objects.get(id=id).email)
-        return recipients
-
-    @property
-    def approver_recipients(self):
-        recipients = []
-        group_ids = member_ids(
-            GROUP_NAME_CONSERVATION_STATUS_APPROVER, include_superusers=False
-        )
-        for id in group_ids:
-            recipients.append(EmailUser.objects.get(id=id).email)
-        return recipients
-
     @property
     def current_conservation_status(self):
         if self.species:
diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index a9a58306..f4505f9d 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -555,22 +555,6 @@ def has_unlocked_mode(self, request):
     def get_approver_group(self):
         return SystemGroup.objects.get(name=GROUP_NAME_OCCURRENCE_APPROVER)
 
-    @property
-    def assessor_recipients(self):
-        recipients = []
-        group_ids = member_ids(GROUP_NAME_OCCURRENCE_ASSESSOR, include_superusers=False)
-        for id in group_ids:
-            recipients.append(EmailUser.objects.get(id=id).email)
-        return recipients
-
-    @property
-    def approver_recipients(self):
-        recipients = []
-        group_ids = member_ids(GROUP_NAME_OCCURRENCE_APPROVER, include_superusers=False)
-        for id in group_ids:
-            recipients.append(EmailUser.objects.get(id=id).email)
-        return recipients
-
     @property
     def related_item_identifier(self):
         return self.occurrence_report_number
diff --git a/boranga/components/species_and_communities/models.py b/boranga/components/species_and_communities/models.py
index 633a0f06..1d7237a1 100644
--- a/boranga/components/species_and_communities/models.py
+++ b/boranga/components/species_and_communities/models.py
@@ -13,7 +13,6 @@
 from django.db.models import Sum
 from django.db.models.functions import Cast
 from django.utils.functional import cached_property
-from ledger_api_client.ledger_models import EmailUserRO as EmailUser
 from ledger_api_client.managed_models import SystemGroup
 from multiselectfield import MultiSelectField
 from pyproj import Geod
@@ -26,11 +25,7 @@
     UserAction,
 )
 from boranga.components.main.related_item import RelatedItem
-from boranga.helpers import (
-    is_species_communities_approver,
-    member_ids,
-    no_commas_validator,
-)
+from boranga.helpers import is_species_communities_approver, no_commas_validator
 from boranga.ledger_api_utils import retrieve_email_user
 from boranga.settings import GROUP_NAME_SPECIES_COMMUNITIES_APPROVER
 
@@ -586,14 +581,6 @@ def parent_species_list(self):
     def get_approver_group(self):
         return SystemGroup.objects.get(name=GROUP_NAME_SPECIES_COMMUNITIES_APPROVER)
 
-    @property
-    def approver_recipients(self):
-        recipients = []
-        group_ids = member_ids(GROUP_NAME_SPECIES_COMMUNITIES_APPROVER)
-        for id in group_ids:
-            recipients.append(EmailUser.objects.get(id=id).email)
-        return recipients
-
     @property
     def status_without_assessor(self):
         status_without_assessor = [
@@ -1401,14 +1388,6 @@ def is_community_application(self):
     def get_approver_group(self):
         return SystemGroup.objects.get(name=GROUP_NAME_SPECIES_COMMUNITIES_APPROVER)
 
-    @property
-    def approver_recipients(self):
-        recipients = []
-        group_ids = member_ids(GROUP_NAME_SPECIES_COMMUNITIES_APPROVER)
-        for id in group_ids:
-            recipients.append(EmailUser.objects.get(id=id).email)
-        return recipients
-
     @property
     def status_without_assessor(self):
         status_without_assessor = [

From 31009c4a4b6b950bfc705fd29fef966f8b2c5cf8 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 27 Nov 2024 14:34:21 +0800
Subject: [PATCH 005/138] Update email functions to use system email groups
 instead of assessor / approver recipients.

---
 .../components/conservation_status/email.py   | 57 ++++++++++++++++---
 boranga/components/occurrence/email.py        | 29 ++++++++--
 .../species_and_communities/email.py          | 12 +++-
 3 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/boranga/components/conservation_status/email.py b/boranga/components/conservation_status/email.py
index 791524e4..379475ad 100644
--- a/boranga/components/conservation_status/email.py
+++ b/boranga/components/conservation_status/email.py
@@ -10,6 +10,7 @@
 from ledger_api_client.ledger_models import EmailUserRO as EmailUser
 
 from boranga.components.emails.emails import TemplateEmailBase
+from boranga.components.species_and_communities.models import SystemEmailGroup
 from boranga.components.users.email import _log_user_email
 from boranga.helpers import (
     convert_external_url_to_internal_url,
@@ -157,9 +158,14 @@ def send_submit_email_notification(request, cs_proposal):
     )
     url = convert_external_url_to_internal_url(url)
 
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=cs_proposal.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
     context = {"cs_proposal": cs_proposal, "url": url}
 
-    msg = email.send(cs_proposal.assessor_recipients, context=context)
+    msg = email.send(recipients, context=context)
 
     sender = request.user if request else settings.DEFAULT_FROM_EMAIL
 
@@ -427,7 +433,12 @@ def send_approver_decline_email_notification(reason, request, conservation_statu
     )
     context = {"cs_proposal": conservation_status, "reason": reason, "url": url}
 
-    msg = email.send(conservation_status.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=conservation_status.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -450,7 +461,12 @@ def send_approver_propose_delist_email_notification(
     )
     context = {"cs_proposal": conservation_status, "reason": reason, "url": url}
 
-    msg = email.send(conservation_status.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=conservation_status.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -477,7 +493,12 @@ def send_approver_approve_email_notification(request, conservation_status):
         "url": url,
     }
 
-    msg = email.send(conservation_status.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=conservation_status.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -499,7 +520,12 @@ def send_approver_proposed_for_agenda_email_notification(
         "assessor_comment": assessor_comment,
     }
 
-    msg = email.send(conservation_status.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=conservation_status.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -521,7 +547,12 @@ def send_assessor_ready_for_agenda_email_notification(
         "assessor_comment": assessor_comment,
     }
 
-    msg = email.send(conservation_status.assessor_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=conservation_status.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -552,7 +583,12 @@ def send_proposal_approver_sendback_email_notification(request, conservation_sta
         "approver_comment": approver_comment,
     }
 
-    msg = email.send(conservation_status.assessor_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=conservation_status.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -578,7 +614,12 @@ def send_approver_defer_email_notification(request, conservation_status, reason)
         "reason": reason,
     }
 
-    msg = email.send(conservation_status.assessor_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=conservation_status.group_type,
+        area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
diff --git a/boranga/components/occurrence/email.py b/boranga/components/occurrence/email.py
index cbcc191f..b9b08b8b 100644
--- a/boranga/components/occurrence/email.py
+++ b/boranga/components/occurrence/email.py
@@ -8,6 +8,7 @@
 from ledger_api_client.ledger_models import EmailUserRO as EmailUser
 
 from boranga.components.emails.emails import TemplateEmailBase
+from boranga.components.species_and_communities.models import SystemEmailGroup
 from boranga.components.users.email import _log_user_email
 from boranga.helpers import (
     convert_external_url_to_internal_url,
@@ -129,7 +130,12 @@ def send_submit_email_notification(request, occurrence_report):
 
     context = {"occurrence_report": occurrence_report, "url": url}
 
-    msg = email.send(occurrence_report.assessor_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=occurrence_report.group_type,
+        area=SystemEmailGroup.AREA_OCCURRENCE,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = request.user if request else settings.DEFAULT_FROM_EMAIL
 
@@ -407,7 +413,12 @@ def send_approver_decline_email_notification(reason, request, occurrence_report)
     )
     context = {"occurrence_report": occurrence_report, "reason": reason, "url": url}
 
-    msg = email.send(occurrence_report.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=occurrence_report.group_type,
+        area=SystemEmailGroup.AREA_OCCURRENCE,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -489,7 +500,12 @@ def send_approver_approve_email_notification(request, occurrence_report):
         "url": url,
     }
 
-    msg = email.send(occurrence_report.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=occurrence_report.group_type,
+        area=SystemEmailGroup.AREA_OCCURRENCE,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
@@ -517,7 +533,12 @@ def send_approver_back_to_assessor_email_notification(
         "url": url,
     }
 
-    msg = email.send(occurrence_report.assessor_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=occurrence_report.group_type,
+        area=SystemEmailGroup.AREA_OCCURRENCE,
+    )
+
+    msg = email.send(recipients, context=context)
 
     sender = get_sender_user()
 
diff --git a/boranga/components/species_and_communities/email.py b/boranga/components/species_and_communities/email.py
index 8aeae426..648030ea 100644
--- a/boranga/components/species_and_communities/email.py
+++ b/boranga/components/species_and_communities/email.py
@@ -99,7 +99,11 @@ def send_species_create_email_notification(request, species_proposal):
 
     context = {"species_community_proposal": species_proposal, "url": url}
 
-    msg = email.send(species_proposal.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=species_proposal.group_type,
+    )
+
+    msg = email.send(recipients, context=context)
     sender = request.user if request else settings.DEFAULT_FROM_EMAIL
 
     _log_species_email(msg, species_proposal, sender=sender)
@@ -450,7 +454,11 @@ def send_community_create_email_notification(request, community_proposal):
 
     context = {"species_community_proposal": community_proposal, "url": url}
 
-    msg = email.send(community_proposal.approver_recipients, context=context)
+    recipients = SystemEmailGroup.emails_by_group_and_area(
+        group_type=community_proposal.group_type,
+    )
+
+    msg = email.send(recipients, context=context)
     sender = request.user if request else settings.DEFAULT_FROM_EMAIL
 
     _log_community_email(msg, community_proposal, sender=sender)

From a9227754e954e17167ddfdec10cf5f5c172408e9 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 28 Nov 2024 13:44:58 +0800
Subject: [PATCH 006/138] Modify emails_by_group_and_area method to log warning
 if no group type available or if no group found with specied gropu type and
 area.

---
 boranga/components/species_and_communities/models.py | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/boranga/components/species_and_communities/models.py b/boranga/components/species_and_communities/models.py
index 1d7237a1..2c0abd67 100644
--- a/boranga/components/species_and_communities/models.py
+++ b/boranga/components/species_and_communities/models.py
@@ -2745,10 +2745,18 @@ def email_address_list_str(self):
         return ", ".join(self.email_address_list)
 
     @classmethod
-    def emails_by_group_and_area(cls, group_type, area=None):
+    def emails_by_group_and_area(
+        cls, group_type: GroupType, area: str | None = None
+    ) -> list[str]:
+        if not group_type:
+            logger.warning("No group_type provided. Returning empty list.")
+            return []
         try:
             group = cls.objects.get(group_type=group_type, area=area)
         except cls.DoesNotExist:
+            logger.warning(
+                f"No SystemEmailGroup found for group_type {group_type} and area {area}. Returning empty list."
+            )
             return []
         return group.email_address_list
 

From 364a90beedc510555283ebee467053a07d31a152 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 28 Nov 2024 13:45:32 +0800
Subject: [PATCH 007/138] Modify email functions to select recipients based on
 the group type of the CS the email is in relation to.

---
 .../components/conservation_status/email.py   | 64 ++++++++++++++++---
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/boranga/components/conservation_status/email.py b/boranga/components/conservation_status/email.py
index 379475ad..b6c62e2b 100644
--- a/boranga/components/conservation_status/email.py
+++ b/boranga/components/conservation_status/email.py
@@ -158,8 +158,14 @@ def send_submit_email_notification(request, cs_proposal):
     )
     url = convert_external_url_to_internal_url(url)
 
+    group_type = (
+        cs_proposal.species.group_type
+        if cs_proposal.species
+        else cs_proposal.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=cs_proposal.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 
@@ -433,8 +439,14 @@ def send_approver_decline_email_notification(reason, request, conservation_statu
     )
     context = {"cs_proposal": conservation_status, "reason": reason, "url": url}
 
+    group_type = (
+        conservation_status.species.group_type
+        if conservation_status.species
+        else conservation_status.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=conservation_status.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 
@@ -461,8 +473,14 @@ def send_approver_propose_delist_email_notification(
     )
     context = {"cs_proposal": conservation_status, "reason": reason, "url": url}
 
+    group_type = (
+        conservation_status.species.group_type
+        if conservation_status.species
+        else conservation_status.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=conservation_status.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 
@@ -493,8 +511,14 @@ def send_approver_approve_email_notification(request, conservation_status):
         "url": url,
     }
 
+    group_type = (
+        conservation_status.species.group_type
+        if conservation_status.species
+        else conservation_status.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=conservation_status.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 
@@ -520,8 +544,14 @@ def send_approver_proposed_for_agenda_email_notification(
         "assessor_comment": assessor_comment,
     }
 
+    group_type = (
+        conservation_status.species.group_type
+        if conservation_status.species
+        else conservation_status.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=conservation_status.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 
@@ -547,8 +577,14 @@ def send_assessor_ready_for_agenda_email_notification(
         "assessor_comment": assessor_comment,
     }
 
+    group_type = (
+        conservation_status.species.group_type
+        if conservation_status.species
+        else conservation_status.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=conservation_status.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 
@@ -583,8 +619,14 @@ def send_proposal_approver_sendback_email_notification(request, conservation_sta
         "approver_comment": approver_comment,
     }
 
+    group_type = (
+        conservation_status.species.group_type
+        if conservation_status.species
+        else conservation_status.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=conservation_status.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 
@@ -614,8 +656,14 @@ def send_approver_defer_email_notification(request, conservation_status, reason)
         "reason": reason,
     }
 
+    group_type = (
+        conservation_status.species.group_type
+        if conservation_status.species
+        else conservation_status.community.group_type
+    )
+
     recipients = SystemEmailGroup.emails_by_group_and_area(
-        group_type=conservation_status.group_type,
+        group_type=group_type,
         area=SystemEmailGroup.AREA_CONSERVATION_STATUS,
     )
 

From 7ecb5fe9d7f5fd27af8ed67f84b614aa6c0f4969 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 29 Nov 2024 09:14:49 +0800
Subject: [PATCH 008/138] Allow overriding Allow Blank for occurrence_number
 field only. As otherwise there is no way to create a brand new occurrence
 from the bulk importer.

---
 .../src/components/internal/occurrence/bulk_import_schema.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index 6f0747ee..03486dc5 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -343,7 +343,7 @@
                                                 <span class="input-group-text" id="allow-blank-label">Allow
                                                     Blank</span>
                                                 <select class="form-select w-50" aria-label="Allow Blank"
-                                                    :disabled="!selectedField.allow_null"
+                                                    :disabled="!selectedField.allow_null && selectedField.name != 'occurrence_number'"
                                                     v-model="selectedColumn.xlsx_data_validation_allow_blank">
                                                     <option :value="true">Yes</option>
                                                     <option :value="false">No</option>

From c66f0e5b5630f7ca21eb51dd4ec3833c1b5a0571 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 29 Nov 2024 09:16:28 +0800
Subject: [PATCH 009/138] Catch TypeError when attempting to load geometry
 field as json. In the case of a None value a TypeError is raised rather than
 a JSONDecodeError.

---
 boranga/components/occurrence/models.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index ba6c510c..0c728515 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -7425,7 +7425,7 @@ def validate(self, task, cell_value, mode, index, headers, row, errors):
         if isinstance(field, gis_models.GeometryField):
             try:
                 geom_json = json.loads(cell_value)
-            except json.JSONDecodeError:
+            except (json.JSONDecodeError, TypeError):
                 error_message = f"Value {cell_value} in column {self.xlsx_column_header_name} is not a valid JSON"
                 errors.append(
                     {

From 5ef215b851955d863971c6dc09e475a63aac95b5 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 29 Nov 2024 09:33:18 +0800
Subject: [PATCH 010/138] Return NOTIFICATION_EMAIL value if there are no email
 addresses in the system email group.

---
 .../species_and_communities/models.py         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/boranga/components/species_and_communities/models.py b/boranga/components/species_and_communities/models.py
index 2c0abd67..4710e32c 100644
--- a/boranga/components/species_and_communities/models.py
+++ b/boranga/components/species_and_communities/models.py
@@ -2749,15 +2749,26 @@ def emails_by_group_and_area(
         cls, group_type: GroupType, area: str | None = None
     ) -> list[str]:
         if not group_type:
-            logger.warning("No group_type provided. Returning empty list.")
-            return []
+            logger.warning(
+                "No group_type provided. Returning value from NOTIFICATION_EMAIL env instead."
+            )
+            return settings.NOTIFICATION_EMAIL.split(",")
         try:
             group = cls.objects.get(group_type=group_type, area=area)
         except cls.DoesNotExist:
             logger.warning(
-                f"No SystemEmailGroup found for group_type {group_type} and area {area}. Returning empty list."
+                f"No SystemEmailGroup found for group_type {group_type} and area {area}. "
+                "Returning value from NOTIFICATION_EMAIL env instead."
+            )
+            return settings.NOTIFICATION_EMAIL.split(",")
+
+        if len(group.email_address_list) == 0:
+            logger.warning(
+                f"No SystemEmailGroup email addresses found for group_type {group_type} and area {area}. "
+                "Returning value from NOTIFICATION_EMAIL env instead."
             )
-            return []
+            return settings.NOTIFICATION_EMAIL.split(",")
+
         return group.email_address_list
 
 

From 52f4b25ba35e1621ff85e40cde1ab47497bf8d04 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 29 Nov 2024 10:28:49 +0800
Subject: [PATCH 011/138] Add code that can coerce common string values that
 represent a boolean state to a python boolean as I have become aware that
 .xlsx programs often automatically convert strings such as 'TRUE' or 'FALSE'
 to other values such as '=TRUE()' or '=FALSE()'.

---
 boranga/components/occurrence/models.py | 27 +++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index 88502d39..0cb4a94d 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -7680,6 +7680,33 @@ def validate(self, task, cell_value, mode, index, headers, row, errors):
                     errors_added += 1
                 return cell_value, errors_added
 
+            # Convert the cell value to a boolean as the application that was used
+            # to create the xlsx may have stored it as a string. For example, it often
+            # automatically formats cells with a text value of 'TRUE' or 'FALSE' as a boolean
+            # then when the file is saved the value in the cell will be converted to '=TRUE()' or '=FALSE()'
+            if isinstance(cell_value, str):
+                cell_value = cell_value.lower()
+                if cell_value in ["=true()", "true", "1", "yes", "y"]:
+                    cell_value = True
+                elif cell_value in ["=false()", "false", "0", "no", "n"]:
+                    cell_value = False
+                else:
+                    error_message = (
+                        f"Value {cell_value} in column {self.xlsx_column_header_name} "
+                        "is not a valid boolean. The bulk importer is able to convert "
+                        "the following values to booleans: 'True', '1', 'yes', 'y', "
+                        "'=TRUE()', 'False', '0', 'no', 'n', '=False()'"
+                    )
+                    errors.append(
+                        {
+                            "row_index": index,
+                            "error_type": "column",
+                            "data": cell_value,
+                            "error_message": error_message,
+                        }
+                    )
+                    errors_added += 1
+
             if cell_value not in [True, False]:
                 error_message = (
                     f"Value {cell_value} in column {self.xlsx_column_header_name} "

From 5e81378c235eadaee6af5266f9d3d017474ad352 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 29 Nov 2024 11:05:27 +0800
Subject: [PATCH 012/138] Enforce the requirement for a mandatory OCR Migrated
 From ID when processing rows in the bulk importer. If it's missing add
 appropriate error message and move on to processing the next row.

---
 boranga/components/occurrence/models.py | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index 0cb4a94d..940a6405 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -5626,6 +5626,20 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
             return
 
         ocr_migrated_from_id = row[0]
+
+        # If the migrated from id is None then complain and return
+        if not ocr_migrated_from_id:
+            error_message = "Row does not have a migrated from id"
+            errors.append(
+                {
+                    "row_index": index,
+                    "error_type": "missing_migrated_from_id",
+                    "data": row,
+                    "error_message": error_message,
+                }
+            )
+            return
+
         mode = "create"
         if (
             ocr_migrated_from_id in ocr_migrated_from_ids

From 6f04c9066986334a086ffa6191c16d3e3b72dbbc Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 29 Nov 2024 13:49:52 +0800
Subject: [PATCH 013/138] Fix wild status drop down when wild status for
 occurrence has not yet been selected.

---
 .../src/components/common/occurrence/community_occurrence.vue | 4 ++--
 .../src/components/common/occurrence/species_occurrence.vue   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
index 85be572c..a86cdced 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
@@ -29,14 +29,14 @@
                         v-if="wild_status_list && wild_status_list.length > 0 && occurrence_obj.wild_status && !wild_status_list.map((d) => d.id).includes(occurrence_obj.wild_status)">
                         <input type="text" v-if="occurrence_obj.wild_status_name" class="form-control mb-3"
                             :value="occurrence_obj.wild_status_name + ' (Now Archived)'" disabled />
-                        <div class="mb-3 text-muted">
+                        <div v-if="occurrence_obj.wild_status" class="mb-3 text-muted">
                             Change wild status to:
                         </div>
                     </template>
                     <select :disabled="isReadOnly"
                         class="form-select"
                         v-model="occurrence_obj.wild_status">
-                        <option value="" selected disabled>Select Wild Status</option>
+                        <option :value="null" selected disabled>Select Wild Status</option>
                         <option v-for="option in wild_status_list" :value="option.id" :key="option.id">
                             {{ option.name }}
                         </option>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
index 00ad6484..11d03835 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
@@ -46,12 +46,12 @@
                         v-if="wild_status_list && wild_status_list.length > 0 && !wild_status_list.map((d) => d.id).includes(occurrence_obj.wild_status)">
                         <input type="text" v-if="occurrence_obj.wild_status_name" class="form-control mb-3"
                             :value="occurrence_obj.wild_status_name + ' (Now Archived)'" disabled />
-                        <div class="mb-3 text-muted">
+                        <div v-if="occurrence_obj.wild_status" class="mb-3 text-muted">
                             Change wild status to:
                         </div>
                     </template>
                     <select :disabled="isReadOnly" class="form-select" v-model="occurrence_obj.wild_status">
-                        <option value="" selected disabled>Select Wild Status</option>
+                        <option :value="null" selected disabled>Select Wild Status</option>
                         <option v-for="option in wild_status_list" :value="option.id" :key="option.id">
                             {{ option.name }}
                         </option>

From d0c67a3485ab1d67c6e8771fb32a7f445fd56f3f Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 29 Nov 2024 13:51:33 +0800
Subject: [PATCH 014/138] Add code to check if occurrence name already exists
 (when occurrence number and occ migrated from id not specied in row). Also,
 set occurrence source to OCR for newly created occurrences and make sure the
 appropriate species or community is assigned to newly created occurrences.

---
 boranga/components/occurrence/models.py | 48 ++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index 940a6405..d23b7968 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -5629,7 +5629,7 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
 
         # If the migrated from id is None then complain and return
         if not ocr_migrated_from_id:
-            error_message = "Row does not have a migrated from id"
+            error_message = "Row does not have an Occurrence Report migrated from id"
             errors.append(
                 {
                     "row_index": index,
@@ -5799,10 +5799,42 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
                         )
                         return
                 else:
+                    if (
+                        model_data.get("occurrence_name", None)
+                        and Occurrence.objects.filter(
+                            occurrence_name=model_data["occurrence_name"]
+                        ).exists()
+                    ):
+                        error_message = (
+                            f"An occurrence with the name '{model_data['occurrence_name']}' "
+                            "already exists in the database. Please populate the Occurrence "
+                            "Number or OCC Occurrence Migrated From ID field instead."
+                        )
+                        errors.append(
+                            {
+                                "row_index": index,
+                                "error_type": "duplicate_occurrence_name",
+                                "data": model_data,
+                                "error_message": error_message,
+                            }
+                        )
+                        return
+
                     if not occ_migrated_from_id:
                         if not model_data.get("group_type"):
                             model_data["group_type"] = self.schema.group_type
+
                         current_model_instance = Occurrence(**model_data)
+                        current_model_instance.occurrence_source = (
+                            Occurrence.OCCURRENCE_CHOICE_OCR
+                        )
+                        ocr_instance = model_instances[
+                            OccurrenceReport._meta.model_name
+                        ]
+                        if ocr_instance.species:
+                            current_model_instance.species = ocr_instance.species
+                        else:
+                            current_model_instance.community = ocr_instance.community
                     else:
                         if Occurrence.objects.filter(
                             migrated_from_id=occ_migrated_from_id
@@ -5814,11 +5846,17 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
                             current_model_instance = Occurrence.objects.create(
                                 migrated_from_id=occ_migrated_from_id,
                                 group_type=self.schema.group_type,
-                                species=model_instances[
-                                    OccurrenceReport._meta.model_name
-                                ].species,
+                                occurrence_source=Occurrence.OCCURRENCE_CHOICE_OCR,
                             )
-
+                            ocr_instance = model_instances[
+                                OccurrenceReport._meta.model_name
+                            ]
+                            if ocr_instance.species:
+                                current_model_instance.species = ocr_instance.species
+                            else:
+                                current_model_instance.community = (
+                                    ocr_instance.community
+                                )
                         if (
                             not current_model_instance.group_type
                             == self.schema.group_type

From d61e680b12bda029538cc8e0e6875f130f2ba5d5 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 2 Dec 2024 15:18:54 +0800
Subject: [PATCH 015/138] Add fixes for dealing with m2m fields (e.g. OCR
 Associated Species, related_species field) Also, update str methods for the
 models related to ocr so that they return more meaningful values rather than
 just the OCR number they are related to.

---
 boranga/components/occurrence/models.py | 47 +++++++++++++++++++------
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index d23b7968..122de995 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -2455,7 +2455,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCRHabitat Condition: {self.id} for Occurrence Report: {self.occurrence_report}"
 
 
 class OCRVegetationStructure(models.Model):
@@ -2486,7 +2486,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCR Vegetation Structure: {self.id} for Occurrence Report: {self.occurrence_report}"
 
 
 class Intensity(ArchivableModel):
@@ -2544,7 +2544,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCR Fire History: {self.id} for Occurrence Report: {self.occurrence_report}"
 
 
 class OCRAssociatedSpecies(models.Model):
@@ -2573,7 +2573,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCR Associated Species {self.id} for Occurrence Report {self.occurrence_report}"
 
 
 class ObservationMethod(ArchivableModel):
@@ -2631,7 +2631,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCR Observation Detail: {self.id} for Occurrence Report: {self.occurrence_report}"
 
 
 class PlantCountMethod(ArchivableModel):
@@ -2815,7 +2815,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCR Plant Count: {self.id} for Occurrence Report: {self.occurrence_report}"
 
 
 # used for Animal Observation(MultipleSelect)
@@ -3019,7 +3019,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCR Animal Observation: {self.id} for Occurrence Report: {self.occurrence_report}"
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -3179,7 +3179,7 @@ class Meta:
         app_label = "boranga"
 
     def __str__(self):
-        return str(self.occurrence_report)
+        return f"OCR Identification: {self.id} for Occurrence Report: {self.occurrence_report}"
 
 
 class OccurrenceReportDocument(Document):
@@ -5702,9 +5702,6 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
                     {"field": column.django_import_field_name, "value": cell_value}
                 )
 
-                # Continue to the next column without adding the cell value to the model data
-                continue
-
             column_error_count += errors_added
 
             row_error_count += column_error_count
@@ -5719,6 +5716,12 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
                 models[model_name] = {"field_names": [], "values": []}
 
             models[model_name]["field_names"].append(column.django_import_field_name)
+
+            # Attempting to assign the cell value directly to the m2m field
+            # will raise an error, so we skip it here and handle it later
+            if type(field) is ManyToManyField:
+                continue
+
             models[model_name]["values"].append(cell_value)
 
         if row_error_count > 0:
@@ -7710,6 +7713,28 @@ def validate(self, task, cell_value, mode, index, headers, row, errors):
                 errors_added += 1
                 return cell_value, errors_added
 
+            if related_model_instances.count() == 0:
+                error_message = (
+                    f"Can't find any {self.django_import_field_name} records by looking up "
+                    f"{lookup_field} with value {cell_value} "
+                    f"for column {self.xlsx_column_header_name}"
+                )
+                if "," in cell_value[0]:
+                    error_message += (
+                        " (Hint: The delimiter for many to many fields is '"
+                        f"{settings.OCR_BULK_IMPORT_M2M_DELIMITER}' not ',')"
+                    )
+                errors.append(
+                    {
+                        "row_index": index,
+                        "error_type": "column",
+                        "data": cell_value,
+                        "error_message": error_message,
+                    }
+                )
+                errors_added += 1
+                return cell_value, errors_added
+
             # Replace the lookup cell_value with a list of model instances to be assigned
             cell_value = list(related_model_instances)
             return cell_value, errors_added

From 6a8be71ea0fe37fd164205ae522f86227288cdb2 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 2 Dec 2024 16:12:57 +0800
Subject: [PATCH 016/138] Add in check for when importing bulk community OCRs
 that makes sure if linking to an occurrence that the occurrence is for the
 same community as the OCR.

---
 boranga/components/occurrence/models.py | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index 122de995..dc6e10bc 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -5882,7 +5882,8 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
                             OccurrenceReport._meta.model_name
                         ]
                         if (
-                            not current_model_instance.species
+                            current_model_instance.species
+                            and not current_model_instance.species
                             == occurrence_report.species
                         ):
                             error_message = (
@@ -5899,6 +5900,25 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
                             )
                             return
 
+                        if (
+                            current_model_instance.community
+                            and not current_model_instance.community
+                            == occurrence_report.community
+                        ):
+                            error_message = (
+                                "The community of the occurrence does not match "
+                                "the community of the occurrence report"
+                            )
+                            errors.append(
+                                {
+                                    "row_index": index,
+                                    "error_type": "invalid_occurrence_community",
+                                    "data": model_data,
+                                    "error_message": error_message,
+                                }
+                            )
+                            return
+
                         for field, value in model_data.items():
                             setattr(current_model_instance, field, value)
 

From ef406bd9b9ed7f32d285a6586c2e081aeec29647 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 3 Dec 2024 10:55:24 +0800
Subject: [PATCH 017/138] Add code to allow bulk imports to proceed if ALL the
 columns relating to a specific django model are empty (i.e. say if all OCR
 Document columns are empty then the bulk importer just doesn't attempt to
 process those columns. Same for OCR Threats etc. This makes the larger (e.g.
 whole) schemas much more flexible/useful.

---
 boranga/components/occurrence/models.py | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/boranga/components/occurrence/models.py b/boranga/components/occurrence/models.py
index dc6e10bc..1aadfe1a 100644
--- a/boranga/components/occurrence/models.py
+++ b/boranga/components/occurrence/models.py
@@ -5661,8 +5661,31 @@ def process_row(self, ocr_migrated_from_ids, index, headers, row, errors):
         geometries = {}
         many_to_many_fields = {}
 
-        # Validate each cell
+        # Find any sets of columns (models) where the fields are all empty
+        # so that we can exclude them from the row data (and therefor not bother validating them)
+        required_content_types = []
+        for column_index, column in enumerate(self.schema.columns.all()):
+            cell_value = row[column_index]
+            if (
+                cell_value is not None
+                and column.django_import_content_type not in required_content_types
+            ):
+                required_content_types.append(column.django_import_content_type)
+
+        indexes_to_remove = []
         for column_index, column in enumerate(self.schema.columns.all()):
+            if column.django_import_content_type not in required_content_types:
+                indexes_to_remove.append(column_index)
+
+        row = [i for j, i in enumerate(row) if j not in indexes_to_remove]
+        headers = [i for j, i in enumerate(headers) if j not in indexes_to_remove]
+
+        # Validate each cell
+        for column_index, column in enumerate(
+            self.schema.columns.filter(
+                django_import_content_type__in=required_content_types
+            )
+        ):
             column_error_count = 0
 
             cell_value = row[column_index]

From c2a83fadaeaf4ab5bf2acb3dad2c674ff029d45b Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 3 Dec 2024 14:34:28 +0800
Subject: [PATCH 018/138] npm update.

---
 boranga/frontend/boranga/package-lock.json | 143 ++++++++++++---------
 1 file changed, 80 insertions(+), 63 deletions(-)

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index 143546ad..ca0bc259 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -342,9 +342,9 @@
             }
         },
         "node_modules/@fortawesome/fontawesome-free": {
-            "version": "6.6.0",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
-            "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
+            "version": "6.7.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.1.tgz",
+            "integrity": "sha512-ALIk/MOh5gYe1TG/ieS5mVUsk7VUIJTJKPMK9rFFqOgfp0Q3d5QiBXbcOMwUvs37fyZVCz46YjOE6IFeOAXCHA==",
             "engines": {
                 "node": ">=6"
             }
@@ -520,9 +520,9 @@
             }
         },
         "node_modules/@petamoriken/float16": {
-            "version": "3.8.7",
-            "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.7.tgz",
-            "integrity": "sha512-/Ri4xDDpe12NT6Ex/DRgHzLlobiQXEW/hmG08w1wj/YU7hLemk97c+zHQFp0iZQ9r7YqgLEXZR2sls4HxBf9NA=="
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.0.tgz",
+            "integrity": "sha512-rYUZ+VFjPHD0NT2JYKj64NxXxrV642IiyaUxxorTEj0S3hT7B5Ixezyc9Fn+XvSk0ETEBp5VWjGIErzh0ug0Xw=="
         },
         "node_modules/@polka/url": {
             "version": "1.0.0-next.28",
@@ -2607,9 +2607,9 @@
             }
         },
         "node_modules/@types/express-serve-static-core": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.1.tgz",
-            "integrity": "sha512-CRICJIl0N5cXDONAdlTv5ShATZ4HEwk6kDDIW2/w9qOWKg+NU/5F8wYRWCrONad0/UKkloNSmmyN/wX4rtpbVA==",
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz",
+            "integrity": "sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==",
             "dependencies": {
                 "@types/node": "*",
                 "@types/qs": "*",
@@ -2685,11 +2685,11 @@
             "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag=="
         },
         "node_modules/@types/node": {
-            "version": "22.9.0",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
-            "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
+            "version": "22.10.1",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+            "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
             "dependencies": {
-                "undici-types": "~6.19.8"
+                "undici-types": "~6.20.0"
             }
         },
         "node_modules/@types/node-forge": {
@@ -3748,9 +3748,9 @@
             "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         },
         "node_modules/bonjour-service": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.2.1.tgz",
-            "integrity": "sha512-oSzCS2zV14bh2kji6vNe7vrpJYCHGvcZnlffFQ1MEoX/WOeQ/teD8SYWKR942OI3INjq8OMNJlbPK5LLLUxFDw==",
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
+            "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
             "dependencies": {
                 "fast-deep-equal": "^3.1.3",
                 "multicast-dns": "^7.2.5"
@@ -3970,9 +3970,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001680",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-            "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+            "version": "1.0.30001686",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
+            "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -4435,9 +4435,9 @@
             }
         },
         "node_modules/cross-spawn": {
-            "version": "7.0.5",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
-            "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
             "dependencies": {
                 "path-key": "^3.1.0",
                 "shebang-command": "^2.0.0",
@@ -5215,9 +5215,9 @@
             "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.62",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.62.tgz",
-            "integrity": "sha512-t8c+zLmJHa9dJy96yBZRXGQYoiCEnHYgFwn1asvSPZSUdVxnB62A4RASd7k41ytG3ErFBA0TpHlKg9D9SQBmLg=="
+            "version": "1.5.68",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz",
+            "integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ=="
         },
         "node_modules/emoji-regex": {
             "version": "8.0.0",
@@ -5727,9 +5727,9 @@
             }
         },
         "node_modules/execa/node_modules/cross-spawn": {
-            "version": "6.0.5",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-            "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+            "version": "6.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+            "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
             "dependencies": {
                 "nice-try": "^1.0.4",
                 "path-key": "^2.0.1",
@@ -6084,9 +6084,9 @@
             }
         },
         "node_modules/flatted": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-            "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
+            "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
             "dev": true
         },
         "node_modules/follow-redirects": {
@@ -6398,11 +6398,14 @@
             }
         },
         "node_modules/gopd": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-            "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.1.0.tgz",
+            "integrity": "sha512-FQoVQnqcdk4hVM4JN1eromaun4iuS34oStkdlLENLdpULsuQcTyXj8w7ayhuUfPwEYZ1ZOooOTT6fdA9Vmx/RA==",
             "dependencies": {
-                "get-intrinsic": "^1.1.3"
+                "get-intrinsic": "^1.2.4"
+            },
+            "engines": {
+                "node": ">= 0.4"
             },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -6482,9 +6485,12 @@
             }
         },
         "node_modules/has-proto": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-            "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.1.0.tgz",
+            "integrity": "sha512-QLdzI9IIO1Jg7f9GT1gXpPpXArAn6cS31R1eEZqz08Gc+uQ8/XiqHWt17Fiw+2p6oTTIq5GXEpQkAlA88YRl/Q==",
+            "dependencies": {
+                "call-bind": "^1.0.7"
+            },
             "engines": {
                 "node": ">= 0.4"
             },
@@ -6493,9 +6499,9 @@
             }
         },
         "node_modules/has-symbols": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-            "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+            "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -7575,9 +7581,9 @@
             }
         },
         "node_modules/magic-string": {
-            "version": "0.30.12",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
-            "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+            "version": "0.30.14",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
+            "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.5.0"
             }
@@ -7952,9 +7958,9 @@
             }
         },
         "node_modules/nanoid": {
-            "version": "3.3.7",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
             "funding": [
                 {
                     "type": "github",
@@ -8590,9 +8596,17 @@
             "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
         },
         "node_modules/point-in-polygon-hao": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.1.0.tgz",
-            "integrity": "sha512-3hTIM2j/v9Lio+wOyur3kckD4NxruZhpowUbEgmyikW+a2Kppjtu1eN+AhnMQtoHW46zld88JiYWv6fxpsDrTQ=="
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.3.tgz",
+            "integrity": "sha512-uZsWylGd8nthIYS8F7aSyM7Pot+4L/bgXheJcCNdRr4eLpsM/rMb3hIi5SqNxAVjUoDDao3QzCtdaVDzmeF9Cw==",
+            "dependencies": {
+                "robust-predicates": "^3.0.2"
+            }
+        },
+        "node_modules/point-in-polygon-hao/node_modules/robust-predicates": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+            "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
         },
         "node_modules/polygon-clipping": {
             "version": "0.15.7",
@@ -9293,12 +9307,12 @@
             }
         },
         "node_modules/proj4": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.14.0.tgz",
-            "integrity": "sha512-fumDL50ThQ3issOLxaLYwv1j4LePEzYleY6vqsX+2uWOcvKzqpzHhtTTH18CvIDg+nf8MYl0/XF6yYyESKDi4w==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.15.0.tgz",
+            "integrity": "sha512-LqCNEcPdI03BrCHxPLj29vsd5afsm+0sV1H/O3nTDKrv8/LA01ea1z4QADDMjUqxSXWnrmmQDjqFm1J/uZ5RLw==",
             "dependencies": {
                 "mgrs": "1.0.0",
-                "wkt-parser": "^1.3.3"
+                "wkt-parser": "^1.4.0"
             }
         },
         "node_modules/protocol-buffers-schema": {
@@ -10013,9 +10027,12 @@
             }
         },
         "node_modules/shell-quote": {
-            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
-            "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
+            "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
+            "engines": {
+                "node": ">= 0.4"
+            },
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
@@ -10089,9 +10106,9 @@
             }
         },
         "node_modules/sortablejs": {
-            "version": "1.15.3",
-            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.3.tgz",
-            "integrity": "sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg=="
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
+            "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A=="
         },
         "node_modules/source-map": {
             "version": "0.6.1",
@@ -10616,9 +10633,9 @@
             }
         },
         "node_modules/undici-types": {
-            "version": "6.19.8",
-            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-            "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
+            "version": "6.20.0",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+            "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="
         },
         "node_modules/universalify": {
             "version": "2.0.1",

From 58090d36c267dfa1884b966bac40f978070c3e95 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:09:25 +0800
Subject: [PATCH 019/138] Update package.json for vue 3.

---
 boranga/frontend/boranga/package-lock.json | 3954 +++-----------------
 boranga/frontend/boranga/package.json      |   82 +-
 2 files changed, 632 insertions(+), 3404 deletions(-)

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index ca0bc259..2ce0b09e 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -7,49 +7,45 @@
         "": {
             "name": "boranga",
             "version": "1.0.0",
-            "license": "BSD-3-Clause",
             "dependencies": {
-                "@babel/runtime": "^7.22.10",
-                "@fortawesome/fontawesome-free": "^6.4.2",
-                "@riophae/vue-treeselect": "^0.4.0",
-                "@turf/turf": "^7.0.0",
-                "@vue/cli-service": "^5.0.8",
+                "@fortawesome/fontawesome-free": "^6.0",
+                "@turf/area": "^7.1.0",
+                "@turf/boolean-intersects": "^7.1.0",
+                "@turf/boolean-within": "^7.1.0",
+                "@turf/helpers": "^7.1.0",
+                "@turf/intersect": "^7.1.0",
+                "@vue/cli-service": "^5.0.4",
                 "babel-polyfill": "^6.26.0",
-                "buffer": "^6.0.3",
-                "datatables.net-bs5": "^1.13.6",
-                "datatables.net-buttons": "^2.4.1",
-                "datatables.net-buttons-bs5": "^2.4.1",
-                "datatables.net-responsive-bs5": "^2.5.0",
-                "depcheck": "^1.4.7",
-                "jquery": "^3.7.0",
-                "jquery-easing": "^0.0.1",
-                "jquery-validation": "^1.19.5",
-                "jszip": "^3.10.1",
+                "datatables.net-bs5": "^2.0.0",
+                "datatables.net-buttons": "^3.0.0",
+                "datatables.net-buttons-bs5": "^3.0.0",
+                "datatables.net-responsive-bs5": "^3.0.2",
+                "jquery": "^3.6",
+                "jquery-validation": "^1.21.0",
+                "jszip": "^3.9",
+                "lodash": "^4.17",
                 "moment-locales-webpack-plugin": "^1.2.0",
                 "moment-range": "^4.0.2",
-                "ol": "^9.2",
-                "ol-ext": "^4.0.18",
-                "postcss-loader": "^6.2.1",
-                "select2": "*",
+                "ol": "^10.1",
+                "ol-ext": "^4.0.24",
+                "select2": "^4.1.0-rc.0",
                 "select2-bootstrap-5-theme": "^1.3.0",
-                "shpjs": "^5.0.0",
-                "sortablejs": "^1.15.3",
-                "sweetalert2": "^11.7.27",
-                "vue": "^2.7.16",
-                "vue-resource": "^1.5.3",
-                "vue-router": "^2.8.1",
-                "vue-select": "^3.20.2",
-                "webpack": "^5.88.2",
-                "webpack-cli": "^5.1.4"
+                "shpjs": "^6.1.0",
+                "sortablejs": "^1.15.6",
+                "sweetalert2": "^11.4",
+                "uuid": "^11.0",
+                "vue": "^3.4",
+                "vue-router": "^4.0"
             },
             "devDependencies": {
-                "eslint": "^8.15.0",
-                "eslint-config-prettier": "^8.8.0",
-                "eslint-plugin-prettier": "^4.2.1",
-                "prettier": "^2.8.4"
+                "eslint": "^9.0",
+                "eslint-config-prettier": "^9.0.0",
+                "eslint-plugin-prettier": "^5.0.1",
+                "prettier": "^3.3"
             },
             "engines": {
-                "node": ">= 20.11.1"
+                "node": ">= 20.0.0",
+                "npm": ">= 10.0.0"
             }
         },
         "node_modules/@achrinza/node-ipc": {
@@ -79,24 +75,9 @@
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.26.2",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
-            "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
-        "node_modules/@babel/generator": {
-            "version": "7.26.2",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
-            "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
-            "dependencies": {
-                "@babel/parser": "^7.26.2",
-                "@babel/types": "^7.26.0",
-                "@jridgewell/gen-mapping": "^0.3.5",
-                "@jridgewell/trace-mapping": "^0.3.25",
-                "jsesc": "^3.0.2"
-            },
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
+            "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
             "engines": {
                 "node": ">=6.9.0"
             }
@@ -141,11 +122,11 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.26.2",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
-            "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+            "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
             "dependencies": {
-                "@babel/types": "^7.26.0"
+                "@babel/types": "^7.26.3"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -154,51 +135,10 @@
                 "node": ">=6.0.0"
             }
         },
-        "node_modules/@babel/runtime": {
-            "version": "7.26.0",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-            "dependencies": {
-                "regenerator-runtime": "^0.14.0"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
-        "node_modules/@babel/template": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
-            "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
-            "dependencies": {
-                "@babel/code-frame": "^7.25.9",
-                "@babel/parser": "^7.25.9",
-                "@babel/types": "^7.25.9"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
-        "node_modules/@babel/traverse": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
-            "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
-            "dependencies": {
-                "@babel/code-frame": "^7.25.9",
-                "@babel/generator": "^7.25.9",
-                "@babel/parser": "^7.25.9",
-                "@babel/template": "^7.25.9",
-                "@babel/types": "^7.25.9",
-                "debug": "^4.3.1",
-                "globals": "^11.1.0"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
         "node_modules/@babel/types": {
-            "version": "7.26.0",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-            "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+            "version": "7.26.3",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+            "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.25.9",
                 "@babel/helper-validator-identifier": "^7.25.9"
@@ -233,6 +173,18 @@
                 "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
             }
         },
+        "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "dev": true,
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
         "node_modules/@eslint-community/regexpp": {
             "version": "4.12.1",
             "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
@@ -242,103 +194,83 @@
                 "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
             }
         },
-        "node_modules/@eslint/eslintrc": {
-            "version": "2.1.4",
-            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-            "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+        "node_modules/@eslint/config-array": {
+            "version": "0.19.1",
+            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz",
+            "integrity": "sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==",
             "dev": true,
             "dependencies": {
-                "ajv": "^6.12.4",
-                "debug": "^4.3.2",
-                "espree": "^9.6.0",
-                "globals": "^13.19.0",
-                "ignore": "^5.2.0",
-                "import-fresh": "^3.2.1",
-                "js-yaml": "^4.1.0",
-                "minimatch": "^3.1.2",
-                "strip-json-comments": "^3.1.1"
+                "@eslint/object-schema": "^2.1.5",
+                "debug": "^4.3.1",
+                "minimatch": "^3.1.2"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-            },
-            "funding": {
-                "url": "https://opencollective.com/eslint"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
-        "node_modules/@eslint/eslintrc/node_modules/argparse": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true
-        },
-        "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-            "version": "1.1.11",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+        "node_modules/@eslint/core": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.9.1.tgz",
+            "integrity": "sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==",
             "dev": true,
             "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
+                "@types/json-schema": "^7.0.15"
+            },
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
-        "node_modules/@eslint/eslintrc/node_modules/globals": {
-            "version": "13.24.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-            "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+        "node_modules/@eslint/eslintrc": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
+            "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
             "dev": true,
             "dependencies": {
-                "type-fest": "^0.20.2"
+                "ajv": "^6.12.4",
+                "debug": "^4.3.2",
+                "espree": "^10.0.1",
+                "globals": "^14.0.0",
+                "ignore": "^5.2.0",
+                "import-fresh": "^3.2.1",
+                "js-yaml": "^4.1.0",
+                "minimatch": "^3.1.2",
+                "strip-json-comments": "^3.1.1"
             },
             "engines": {
-                "node": ">=8"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-            "dev": true,
-            "dependencies": {
-                "argparse": "^2.0.1"
-            },
-            "bin": {
-                "js-yaml": "bin/js-yaml.js"
+                "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+        "node_modules/@eslint/js": {
+            "version": "9.16.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.16.0.tgz",
+            "integrity": "sha512-tw2HxzQkrbeuvyj1tG2Yqq+0H9wGoI2IMk4EOsQeX+vmd75FtJAzf+gTA69WF+baUKRYQ3x2kbLE08js5OsTVg==",
             "dev": true,
-            "dependencies": {
-                "brace-expansion": "^1.1.7"
-            },
             "engines": {
-                "node": "*"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
-        "node_modules/@eslint/eslintrc/node_modules/type-fest": {
-            "version": "0.20.2",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-            "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+        "node_modules/@eslint/object-schema": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.5.tgz",
+            "integrity": "sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==",
             "dev": true,
             "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
-        "node_modules/@eslint/js": {
-            "version": "8.57.1",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-            "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+        "node_modules/@eslint/plugin-kit": {
+            "version": "0.2.4",
+            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz",
+            "integrity": "sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==",
             "dev": true,
+            "dependencies": {
+                "levn": "^0.4.1"
+            },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
         "node_modules/@fortawesome/fontawesome-free": {
@@ -362,41 +294,39 @@
                 "@hapi/hoek": "^9.0.0"
             }
         },
-        "node_modules/@humanwhocodes/config-array": {
-            "version": "0.13.0",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-            "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-            "deprecated": "Use @eslint/config-array instead",
+        "node_modules/@humanfs/core": {
+            "version": "0.19.1",
+            "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+            "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
             "dev": true,
-            "dependencies": {
-                "@humanwhocodes/object-schema": "^2.0.3",
-                "debug": "^4.3.1",
-                "minimatch": "^3.0.5"
-            },
             "engines": {
-                "node": ">=10.10.0"
+                "node": ">=18.18.0"
             }
         },
-        "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
-            "version": "1.1.11",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+        "node_modules/@humanfs/node": {
+            "version": "0.16.6",
+            "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+            "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
             "dev": true,
             "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
+                "@humanfs/core": "^0.19.1",
+                "@humanwhocodes/retry": "^0.3.0"
+            },
+            "engines": {
+                "node": ">=18.18.0"
             }
         },
-        "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+        "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+            "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
             "dev": true,
-            "dependencies": {
-                "brace-expansion": "^1.1.7"
-            },
             "engines": {
-                "node": "*"
+                "node": ">=18.18"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
             }
         },
         "node_modules/@humanwhocodes/module-importer": {
@@ -412,12 +342,18 @@
                 "url": "https://github.com/sponsors/nzakas"
             }
         },
-        "node_modules/@humanwhocodes/object-schema": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-            "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-            "deprecated": "Use @eslint/object-schema instead",
-            "dev": true
+        "node_modules/@humanwhocodes/retry": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+            "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
+            "dev": true,
+            "engines": {
+                "node": ">=18.18"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
         },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.3.5",
@@ -524,6 +460,18 @@
             "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.0.tgz",
             "integrity": "sha512-rYUZ+VFjPHD0NT2JYKj64NxXxrV642IiyaUxxorTEj0S3hT7B5Ixezyc9Fn+XvSk0ETEBp5VWjGIErzh0ug0Xw=="
         },
+        "node_modules/@pkgr/core": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+            "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+            "dev": true,
+            "engines": {
+                "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/unts"
+            }
+        },
         "node_modules/@polka/url": {
             "version": "1.0.0-next.28",
             "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
@@ -539,24 +487,6 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
-        "node_modules/@riophae/vue-treeselect": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
-            "integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
-            "dependencies": {
-                "@babel/runtime": "^7.3.1",
-                "babel-helper-vue-jsx-merge-props": "^2.0.3",
-                "easings-css": "^1.0.0",
-                "fuzzysearch": "^1.0.3",
-                "is-promise": "^2.1.0",
-                "lodash": "^4.0.0",
-                "material-colors": "^1.2.6",
-                "watch-size": "^2.0.0"
-            },
-            "peerDependencies": {
-                "vue": "^2.2.0"
-            }
-        },
         "node_modules/@sideway/address": {
             "version": "4.1.5",
             "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -572,1645 +502,46 @@
         },
         "node_modules/@sideway/pinpoint": {
             "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
-            "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
-        },
-        "node_modules/@sindresorhus/is": {
-            "version": "4.6.0",
-            "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
-            "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sindresorhus/is?sponsor=1"
-            }
-        },
-        "node_modules/@soda/friendly-errors-webpack-plugin": {
-            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
-            "integrity": "sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==",
-            "dependencies": {
-                "chalk": "^3.0.0",
-                "error-stack-parser": "^2.0.6",
-                "string-width": "^4.2.3",
-                "strip-ansi": "^6.0.1"
-            },
-            "engines": {
-                "node": ">=8.0.0"
-            },
-            "peerDependencies": {
-                "webpack": "^4.0.0 || ^5.0.0"
-            }
-        },
-        "node_modules/@soda/get-current-script": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@soda/get-current-script/-/get-current-script-1.0.2.tgz",
-            "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w=="
-        },
-        "node_modules/@szmarczak/http-timer": {
-            "version": "4.0.6",
-            "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
-            "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
-            "dependencies": {
-                "defer-to-connect": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/@trysound/sax": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-            "engines": {
-                "node": ">=10.13.0"
-            }
-        },
-        "node_modules/@turf/along": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/along/-/along-7.1.0.tgz",
-            "integrity": "sha512-WLgBZJ/B6CcASF6WL7M+COtHlVP0hBrMbrtKyF7KBlicwRuijJZXDtEQA5oLgr+k1b2HqGN+UqH2A0/E719enQ==",
-            "dependencies": {
-                "@turf/bearing": "^7.1.0",
-                "@turf/destination": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/angle": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/angle/-/angle-7.1.0.tgz",
-            "integrity": "sha512-YMHEV/YrARsWgWoQuXEWrQMsvB8z67nTMw2eiLZ883V7jwkhWQGvCW6W+/mGgsWQdHppjCZNcKryryhD2GRWVA==",
-            "dependencies": {
-                "@turf/bearing": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/rhumb-bearing": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/area": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/area/-/area-7.1.0.tgz",
-            "integrity": "sha512-w91FEe02/mQfMPRX2pXua48scFuKJ2dSVMF2XmJ6+BJfFiCPxp95I3+Org8+ZsYv93CDNKbf0oLNEPnuQdgs2g==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/bbox": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-7.1.0.tgz",
-            "integrity": "sha512-PdWPz9tW86PD78vSZj2fiRaB8JhUHy6piSa/QXb83lucxPK+HTAdzlDQMTKj5okRCU8Ox/25IR2ep9T8NdopRA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/bbox-clip": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/bbox-clip/-/bbox-clip-7.1.0.tgz",
-            "integrity": "sha512-PhZubKCzF/afwStUzODqOJluiCbCw244lCtVhXA9F+Pgkhvk8KvbFdgpPquOZ45OwuktrchSB28BrBkSBiadHw==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/bbox-polygon": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/bbox-polygon/-/bbox-polygon-7.1.0.tgz",
-            "integrity": "sha512-fvZB09ErCZOVlWVDop836hmpKaGUmfXnR9naMhS73A/8nn4M3hELbQtMv2R8gXj7UakXCuxS/i9erdpDFZ2O+g==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/bearing": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/bearing/-/bearing-7.1.0.tgz",
-            "integrity": "sha512-X5lackrZ6FW+YhgjWxwVFRgWD1j4xm4t5VvE6EE6v/1PVaHQ5OCjf6u1oaLx5LSG+gaHUhjTlAHrn9MYPFaeTA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/bezier-spline": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/bezier-spline/-/bezier-spline-7.1.0.tgz",
-            "integrity": "sha512-bhBY70bcVYJEosuW7B/TFtnE5rmPTTpxmJvljhGC0eyM84oNVv7apDBuseb5KdlTOOBIvdD9nIE4qV8lmplp6w==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-clockwise": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-7.1.0.tgz",
-            "integrity": "sha512-H5DYno+gHwZx+VaiC8DUBZXZQlxYecdSvqCfCACWi1uMsKvlht/O+xy65hz2P57lk2smlcV+1ETFVxJlEZduYg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-concave": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-concave/-/boolean-concave-7.1.0.tgz",
-            "integrity": "sha512-IFCN25DI+hvngxIsv4+MPuRJQRl/Lz/xnZgpH82leCn4Jqn5wW7KqKFMz7G4GoKK+93cK5/6ioAxY7hVWBXxJw==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-contains": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-contains/-/boolean-contains-7.1.0.tgz",
-            "integrity": "sha512-ldy4j1/RVChYTYjEb4wWaE/JyF1jA87WpsB4eVLic6OcAYJGs7POF1kfKbcdkJJiRBmhI3CXNA+u+m9y4Z/j3g==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/boolean-point-on-line": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-crosses": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-crosses/-/boolean-crosses-7.1.0.tgz",
-            "integrity": "sha512-LK8UM3AENycuGinLCDaL0QSznGMnD0XsjFDGnY4KehshiL5Zd8ZsPyKmHOPygUJT9DWeH69iLx459lOc+5Vj2w==",
-            "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@turf/polygon-to-line": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-disjoint": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-disjoint/-/boolean-disjoint-7.1.0.tgz",
-            "integrity": "sha512-JapOG03kOCoGeYMWgTQjEifhr1nUoK4Os2cX0iC5X9kvZF4qCHeruX8/rffBQDx7PDKQKusSTXq8B1ISFi0hOw==",
-            "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/polygon-to-line": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-equal": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-equal/-/boolean-equal-7.1.0.tgz",
-            "integrity": "sha512-deghtFMApc7fNsdXtZdgYR4gsU+TVfowcv666nrvZbPPsXL6NTYGBhDFmYXsJ8gPTCGT9uT0WXppdgT8diWOxA==",
-            "dependencies": {
-                "@turf/clean-coords": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "geojson-equality-ts": "^1.0.2",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-intersects": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-intersects/-/boolean-intersects-7.1.0.tgz",
-            "integrity": "sha512-gpksWbb0RT+Z3nfqRfoACY3KEFyv2BPaxJ3L76PH67DhHZviq3Nfg85KYbpuhS64FSm+9tXe4IaKn6EjbHo20g==",
-            "dependencies": {
-                "@turf/boolean-disjoint": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-overlap": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-overlap/-/boolean-overlap-7.1.0.tgz",
-            "integrity": "sha512-mJRN0X8JiPm8eDZk5sLvIrsP03A2GId6ijx4VgSE1AvHwV6qB561KlUbWxga2AScocIfv/y/qd2OCs+/TQSZcg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@turf/line-overlap": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "geojson-equality-ts": "^1.0.2",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-parallel": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-parallel/-/boolean-parallel-7.1.0.tgz",
-            "integrity": "sha512-tA84Oux0X91CxUc6c/lZph5W9wUZGNT4fxFOg5Gp1IMTSwtxSYL1LMvKsr/VmMnwdOUkNcqAgU06+t4wBLtDfg==",
-            "dependencies": {
-                "@turf/clean-coords": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/line-segment": "^7.1.0",
-                "@turf/rhumb-bearing": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-point-in-polygon": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.1.0.tgz",
-            "integrity": "sha512-mprVsyIQ+ijWTZwbnO4Jhxu94ZW2M2CheqLiRTsGJy0Ooay9v6Av5/Nl3/Gst7ZVXxPqMeMaFYkSzcTc87AKew==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "point-in-polygon-hao": "^1.1.0",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-point-on-line": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-7.1.0.tgz",
-            "integrity": "sha512-Kd83EjeTyY4kVMAhcW3Lb8aChwh24BUIhmpE9Or8M+ETNsFGzn9M7qtIySJHLRzKAL3letvWSKXKQPuK1AhAzg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-touches": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-touches/-/boolean-touches-7.1.0.tgz",
-            "integrity": "sha512-qN4LCs3RfVtNAAdn5GpsUFBqoZyAaK9UzSnGSh67GP9sy5M8MEHwM/HAJ5zGWJqQADrczI3U6BRWGLcGfGSz3Q==",
-            "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/boolean-point-on-line": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-valid": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-valid/-/boolean-valid-7.1.0.tgz",
-            "integrity": "sha512-zq1QCfQEyn+piHlvxxDifjmsJn2xl53i4mnKFYdMQI/i09XiX+Fi/MVM3i2hf3D5AsEPsud8Tk7C7rWNCm4nVw==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/boolean-crosses": "^7.1.0",
-                "@turf/boolean-disjoint": "^7.1.0",
-                "@turf/boolean-overlap": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/boolean-point-on-line": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "geojson-polygon-self-intersections": "^1.2.1",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/boolean-within": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-within/-/boolean-within-7.1.0.tgz",
-            "integrity": "sha512-pgXgKCzYHssADQ1nClB1Q9aWI/dE1elm2jy3B5X59XdoFXKrKDZA+gCHYOYgp2NGO/txzVfl3UKvnxIj54Fa4w==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/boolean-point-on-line": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/buffer": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/buffer/-/buffer-7.1.0.tgz",
-            "integrity": "sha512-QM3JiCMYA19k5ouO8wJtvICX3Y8XntxVpDfHSKhFFidZcCkMTR2PWWOpwS6EoL3t75rSKw/FOLIPLZGtIu963w==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/center": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/jsts": "^2.7.1",
-                "@turf/meta": "^7.1.0",
-                "@turf/projection": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "d3-geo": "1.7.1"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/center": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/center/-/center-7.1.0.tgz",
-            "integrity": "sha512-p9AvBMwNZmRg65kU27cGKHAUQnEcdz8Y7f/i5DvaMfm4e8zmawr+hzPKXaUpUfiTyLs8Xt2W9vlOmNGyH+6X3w==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/center-mean": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/center-mean/-/center-mean-7.1.0.tgz",
-            "integrity": "sha512-NQZB1LUVsyAD+p0+D4huzX2XVnfVx1yEEI9EX602THmi+g+nkge4SK9OMV11ov/Tv8JJ6aVNVPo/cy1vm/LCIQ==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/center-median": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/center-median/-/center-median-7.1.0.tgz",
-            "integrity": "sha512-jx4/Ql5+v41Cd0J/gseNCUbLTzWUT2LUaiXn8eFWDrvmEgqHIx7KJcGcJd5HzV+9zJwng4AXxyh5NMvUR0NjwA==",
-            "dependencies": {
-                "@turf/center-mean": "^7.1.0",
-                "@turf/centroid": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/center-of-mass": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/center-of-mass/-/center-of-mass-7.1.0.tgz",
-            "integrity": "sha512-j38oBlj7LBoCjZbrIo8EoHVGhk7UQmMLQ1fe8ZPAF9pd05XEL1qxyHKZKdQ/deGISiaEhXCyfLNrKAHAuy25RA==",
-            "dependencies": {
-                "@turf/centroid": "^7.1.0",
-                "@turf/convex": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/centroid": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/centroid/-/centroid-7.1.0.tgz",
-            "integrity": "sha512-1Y1b2l+ZB1CZ+ITjUCsGqC4/tSjwm/R4OUfDztVqyyCq/VvezkLmTNqvXTGXgfP0GXkpv68iCfxF5M7QdM5pJQ==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/circle": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/circle/-/circle-7.1.0.tgz",
-            "integrity": "sha512-6qhF1drjwH0Dg3ZB9om1JkWTJfAqBcbtIrAj5UPlrAeHP87hGoCO2ZEsFEAL9Q18vntpivT89Uho/nqQUjJhYw==",
-            "dependencies": {
-                "@turf/destination": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/clean-coords": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/clean-coords/-/clean-coords-7.1.0.tgz",
-            "integrity": "sha512-q1U8UbRVL5cRdwOlNjD8mad8pWjFGe0s4ihg1pSiVNq7i47WASJ3k20yZiUFvuAkyNjV0rZ/A7Jd7WzjcierFg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/clone": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-7.1.0.tgz",
-            "integrity": "sha512-5R9qeWvL7FDdBIbEemd0eCzOStr09oburDvJ1hRiPCFX6rPgzcZBQ0gDmZzoF4AFcNLb5IwknbLZjVLaUGWtFA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/clusters": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/clusters/-/clusters-7.1.0.tgz",
-            "integrity": "sha512-7CY3Ai+5V6q2O9/IgqLpJQrmrTy7aUJjTW1iRan8Tz3WixvxyJHeS3iyRy8Oc0046chQIaHLtyTgKVt2QdsPSA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/clusters-dbscan": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/clusters-dbscan/-/clusters-dbscan-7.1.0.tgz",
-            "integrity": "sha512-BmrBTOEaKN5FIED6b3yb3V3ejfK0A2Q3pT9/ji3mcRLJiBaRGeiN5V6gtGXe7PeMYdoqhHykU5Ye2uUtREWRdQ==",
-            "dependencies": {
-                "@turf/clone": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "rbush": "^3.0.1",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/clusters-kmeans": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/clusters-kmeans/-/clusters-kmeans-7.1.0.tgz",
-            "integrity": "sha512-M8cCqR6iE1jDSUF/UU9QdPUFrobZS2fo59TfF1IRHZ2G1EjbcK4GzZcUfmQS6DZraGudYutpMYIuNdm1dPMqdQ==",
-            "dependencies": {
-                "@turf/clone": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "skmeans": "0.9.7",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/collect": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/collect/-/collect-7.1.0.tgz",
-            "integrity": "sha512-6indMWLiKeBh4AsioNeFeFnO0k9U5CBsWAFEje6tOEFI4c+P7LF9mNA9z91H8KkrhegR9XNO5Vm2rmdY63aYXw==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "rbush": "^3.0.1",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/combine": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/combine/-/combine-7.1.0.tgz",
-            "integrity": "sha512-Xl7bGKKjgzIq2T/IemS6qnIykyuxU6cMxKtz+qLeWJGoNww/BllwxXePSV+dWRPXZTFFj96KIhBXAW0aUjAQKQ==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/concave": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/concave/-/concave-7.1.0.tgz",
-            "integrity": "sha512-aSid53gYRee4Tjc4pfeI3KI+RoBUnL/hRMilxIPduagTgZZS+cvvk01OQWBKm5UTVfHRGuy0XIqnK8y9RFinDQ==",
-            "dependencies": {
-                "@turf/clone": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/tin": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "topojson-client": "3.x",
-                "topojson-server": "3.x",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/convex": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/convex/-/convex-7.1.0.tgz",
-            "integrity": "sha512-w9fUMZYE36bLrEWEj7L7aVMCB7NBtr2o8G+avRvUIwF4DPqbtcjlcZE9EEBfq44uYdn+/Pke6Iq42T/zyD/cpg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "concaveman": "^1.2.1",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/destination": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/destination/-/destination-7.1.0.tgz",
-            "integrity": "sha512-97XuvB0iaAiMg86hrnZ529WwP44TQAA9mmI5PMlchACiA4LFrEtWjjDzvO6234coieoqhrw6dZYcJvd5O2PwrQ==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/difference": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/difference/-/difference-7.1.0.tgz",
-            "integrity": "sha512-+JVzdskICQ8ULKQ9CpWUM5kBvoXxN4CO78Ez/Ki3/7NXl7+HM/nb12B0OyM8hkJchpb8TsOi0YwyJiKMqEpTBA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "polygon-clipping": "^0.15.3",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/dissolve": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/dissolve/-/dissolve-7.1.0.tgz",
-            "integrity": "sha512-fyOnCSYVUZ8SF9kt9ROnQYlkJTE0hpWSoWwbMZQCAR7oVZVPiuPq7eIbzTP+k5jzEAnofsqoGs5qVDTjHcWMiw==",
-            "dependencies": {
-                "@turf/flatten": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "polygon-clipping": "^0.15.3",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/distance": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-7.1.0.tgz",
-            "integrity": "sha512-hhNHhxCHB3ddzAGCNY4BtE29OZh+DAJPvUapQz+wOjISnlwvMcwLKvslgHWSYF536QDVe/93FEU2q67+CsZTPA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/distance-weight": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/distance-weight/-/distance-weight-7.1.0.tgz",
-            "integrity": "sha512-8m6s4y8Yyt6r3itf44yAJjXC+62UkrkhOpskIfaE0lHcBcvZz9wjboHoBf3bS4l/42E4StcanbFZdjOpODAdZw==",
-            "dependencies": {
-                "@turf/centroid": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/ellipse": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/ellipse/-/ellipse-7.1.0.tgz",
-            "integrity": "sha512-AfOahUmStDExWGPg8ZWxxkgom+fdJs7Mn9DzZH+fV/uZ+je1bLQpbPCUu9/ev6u/HhbYGl4VAL/CeQzjOyy6LQ==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/rhumb-destination": "^7.1.0",
-                "@turf/transform-rotate": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/envelope": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/envelope/-/envelope-7.1.0.tgz",
-            "integrity": "sha512-WeLQse9wuxsxhzSqrJA6Ha7rLWnLKgdKY9cfxmJKHSpgqcJyNk60m7+T3UpI/nkGwpfbpeyB3EGC1EWPbxiDUg==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/bbox-polygon": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/explode": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/explode/-/explode-7.1.0.tgz",
-            "integrity": "sha512-To+GUbU6HtcHZ8S0w/dw1EbdQIOCXALTr6Ug5/IFg8hIBMJelDpVr3Smwy8uqhDRFinY2eprBwQnDPcd10eCqA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/flatten": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/flatten/-/flatten-7.1.0.tgz",
-            "integrity": "sha512-Kb23pqEarcLsdBqnQcK0qTrSMiWNTVb9tOFrNlZc66DIhDLAdpOKG4eqk00CMoUzWTixlnawDgJRqcStRrR4WA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/flip": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/flip/-/flip-7.1.0.tgz",
-            "integrity": "sha512-vac73W8WblzzNFanzWYLBzWDIcqc5xczOrtEO07RDEiKEI3Heo0471Jed3v9W506uuOX6/HAiCjXbRjTLjiLfw==",
-            "dependencies": {
-                "@turf/clone": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/geojson-rbush": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/geojson-rbush/-/geojson-rbush-7.1.0.tgz",
-            "integrity": "sha512-j1C7Ohlxa1z644bNOpgibcFGaDLgLXGLOzwF1tfQaP5y7E4PJQUXL0DWIgNb3Ke7gZC05LPHM25a5TRReUfFBQ==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "rbush": "^3.0.1"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/great-circle": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/great-circle/-/great-circle-7.1.0.tgz",
-            "integrity": "sha512-92q5fqUp5oW+FYekUIrUVR5PZBWbOV6NHKHPIiNahiPvtkpZItbbjoO+tGn5+2i8mxZP9FGOthayJe4V0a1xkg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/helpers": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
-            "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
-            "dependencies": {
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/hex-grid": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/hex-grid/-/hex-grid-7.1.0.tgz",
-            "integrity": "sha512-I+Apx0smOPkMzaS5HHL44YOxSkSUvrz+wtSIETsDFWWLT2xKNkaaEcYU5MkgSoEfQsj082M7EkOIIpocXlA3kg==",
-            "dependencies": {
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/intersect": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/interpolate": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/interpolate/-/interpolate-7.1.0.tgz",
-            "integrity": "sha512-VWec1OW9gHZLPS3yYkUXAHKMGQuYO4aqh8WCltT7Ym4efrKqkSOE5T+mBqO68QgcL8nY4kiNa8lxwXd0SfXDSA==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/centroid": "^7.1.0",
-                "@turf/clone": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/hex-grid": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/point-grid": "^7.1.0",
-                "@turf/square-grid": "^7.1.0",
-                "@turf/triangle-grid": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/intersect": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/intersect/-/intersect-7.1.0.tgz",
-            "integrity": "sha512-T0VhI6yhptX9EoMsuuBETyqV+edyq31SUC8bfuM6kdJ5WwJ0EvUfQoC+3bhMtCOn60lHawrUuGBgW+vCO8KGMg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "polygon-clipping": "^0.15.3",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/invariant": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
-            "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/isobands": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/isobands/-/isobands-7.1.0.tgz",
-            "integrity": "sha512-iMLTOP/K5C05AttF4N1WeV+KrY4O5VWW/abO0N86XCWh1OeqmIUgqIBKEmhDzttAqC0UK2YrUfj0lI1Ez1fYZQ==",
-            "dependencies": {
-                "@turf/area": "^7.1.0",
-                "@turf/bbox": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/explode": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "marchingsquares": "^1.3.3",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/isolines": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/isolines/-/isolines-7.1.0.tgz",
-            "integrity": "sha512-V6QTHXBT5ZsL3s9ZVBJgHYtz3gCFKqNnQLysNE02LE0fVVqaSao3sFrcpghmdDxf0hBCDK8lZVvyRGO6o32LHQ==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "marchingsquares": "^1.3.3",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/jsts": {
-            "version": "2.7.1",
-            "resolved": "https://registry.npmjs.org/@turf/jsts/-/jsts-2.7.1.tgz",
-            "integrity": "sha512-+nwOKme/aUprsxnLSfr2LylV6eL6T1Tuln+4Hl92uwZ8FrmjDRCH5Bi1LJNVfWCiYgk8+5K+t2zDphWNTsIFDA==",
-            "dependencies": {
-                "jsts": "2.7.1"
-            }
-        },
-        "node_modules/@turf/kinks": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/kinks/-/kinks-7.1.0.tgz",
-            "integrity": "sha512-KKLYUsyJPU17fODwA81mhHzFYGQYocdbk9NxDPCcdRHvxzM8t95lptkGx/2k/9rXBs1DK7NmyzI4m7zDO0DK7g==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/length": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/length/-/length-7.1.0.tgz",
-            "integrity": "sha512-wUJj9WLKEudG1ngNao2ZwD+Dt6UkvWIbubuJ6lR6FndFDL3iezFhNGy0IXS+0xH9kXi2apiTnM9Vk5+i8BTEvQ==",
-            "dependencies": {
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-arc": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-arc/-/line-arc-7.1.0.tgz",
-            "integrity": "sha512-9/bM34PozTyJ5FXXPAzl/j0RpcTImgMFJZ0WhH0pZZEZRum6P0rJnENt2E2qI441zeozQ9H6X5DCiJogDmRUEw==",
-            "dependencies": {
-                "@turf/circle": "^7.1.0",
-                "@turf/destination": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-chunk": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-chunk/-/line-chunk-7.1.0.tgz",
-            "integrity": "sha512-1lIUfqAQvCWAuUNC2ip8UYmM5kDltXOidLPW45Ee1OAIKYGBeFNtjwnxc0mQ40tnfTXclTYLDdOOP9LShspT9w==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/length": "^7.1.0",
-                "@turf/line-slice-along": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-intersect": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-7.1.0.tgz",
-            "integrity": "sha512-JI3dvOsAoCqd4vUJ134FIzgcC42QpC/tBs+b4OJoxWmwDek3REv4qGaZY6wCg9X4hFSlCKFcnhMIQQZ/n720Qg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "sweepline-intersections": "^1.5.0",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-offset": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-offset/-/line-offset-7.1.0.tgz",
-            "integrity": "sha512-pz6irzhiQlJurU7DoXada6k3ei7PzY+VpsE/Wotm0D2KEAnoxqum2WK0rqqrhKPHKn+xpUGsHN9W/6K+qtmaHg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-overlap": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-overlap/-/line-overlap-7.1.0.tgz",
-            "integrity": "sha512-BdHuEoFAtqvVw3LkjCdivG035nfuwZuxji2ijst+mkmDnlv7uwSBudJqcDGjU6up2r8P1mXChS4im4xjUz+lwg==",
-            "dependencies": {
-                "@turf/boolean-point-on-line": "^7.1.0",
-                "@turf/geojson-rbush": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/line-segment": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/nearest-point-on-line": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "fast-deep-equal": "^3.1.3",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-segment": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-segment/-/line-segment-7.1.0.tgz",
-            "integrity": "sha512-9rgIIH6ZzC3IiWxDQtKsq+j6eu8fRinMkJeusfI9HqOTm4vO02Ll4F/FigjOMOO/6X3TJ+Pqe3gS99TUaBINkw==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-slice": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-slice/-/line-slice-7.1.0.tgz",
-            "integrity": "sha512-44xcjgMQxTa7tTAZlSD3t1cFjHi5SCfAqjg1ONv45EYKsQSonPaxD7LGzCbU5pR2RJjx3R7QRJx2G88hnGcXjQ==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/nearest-point-on-line": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-slice-along": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-slice-along/-/line-slice-along-7.1.0.tgz",
-            "integrity": "sha512-UwfnFORZnu4xdnuRXiQM3ODa8f9Q0FBjQF/XHNsPEI/xxmnwgQj3MZiULbAeHUbtU/7psTC7gEjfE3Lf0tcKQw==",
-            "dependencies": {
-                "@turf/bearing": "^7.1.0",
-                "@turf/destination": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-split": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-split/-/line-split-7.1.0.tgz",
-            "integrity": "sha512-QqUAmtlrnEu75cpLOmpEuiYU63BeVwpSKOBllBbu5gkP+7H/WBM/9fh7J0VgHNFHzqZCKiu8v4158k+CZr0QAg==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/geojson-rbush": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@turf/line-segment": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/nearest-point-on-line": "^7.1.0",
-                "@turf/square": "^7.1.0",
-                "@turf/truncate": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/line-to-polygon": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-to-polygon/-/line-to-polygon-7.1.0.tgz",
-            "integrity": "sha512-n/IWBRbo+l4XDTz4sfQsQm5bU9xex8KrthK397jQasd7a9PiOKGon9Z1t/lddTJhND6ajVyJ3hl+eZMtpQaghQ==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/clone": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/mask": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/mask/-/mask-7.1.0.tgz",
-            "integrity": "sha512-d+u3IIiRhe17TDfP/+UMn9qRlJYPJpK7sj6WorsssluGi0yIG/Z24uWpcLskWKSI8NNgkIbDrp+GIYkJi2t7SA==",
-            "dependencies": {
-                "@turf/clone": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "polygon-clipping": "^0.15.3",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/meta": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.1.0.tgz",
-            "integrity": "sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/midpoint": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/midpoint/-/midpoint-7.1.0.tgz",
-            "integrity": "sha512-uiUU9TwRZOCeiTUn8+7oE6MJUvclfq+n6KQ5VCMTZXiRUJjPu7nDLpBle1t2WSv7/w7O0kSQ4FfKXh0gHnkJOw==",
-            "dependencies": {
-                "@turf/bearing": "^7.1.0",
-                "@turf/destination": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/moran-index": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/moran-index/-/moran-index-7.1.0.tgz",
-            "integrity": "sha512-xsvAr3IRF/C6PlRMoN/ANrRx6c3QFUJgBCIVfI7re+Lkdprrzgw1HZA48ZjP4F91xbhgA1scnRgQdHFi2vO2SA==",
-            "dependencies": {
-                "@turf/distance-weight": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/nearest-neighbor-analysis": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/nearest-neighbor-analysis/-/nearest-neighbor-analysis-7.1.0.tgz",
-            "integrity": "sha512-FAhT8/op3DuvqH0XFhv055JhYq/FC4aaIxEZ4hj8c7W6sYhUHAQgdRZ0tJ1RLe5/h+eXhCTbQ+DFfnfv3klu8g==",
-            "dependencies": {
-                "@turf/area": "^7.1.0",
-                "@turf/bbox": "^7.1.0",
-                "@turf/bbox-polygon": "^7.1.0",
-                "@turf/centroid": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/nearest-point": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/nearest-point": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/nearest-point/-/nearest-point-7.1.0.tgz",
-            "integrity": "sha512-VyInmhqfVWp+jE7sCK95o46qc4tDjAgzbRfRjr+rTgfFS1Sndyy1PdwyNn6TjBFDxiM6e+mjMEeGPjb1smJlEg==",
-            "dependencies": {
-                "@turf/clone": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/nearest-point-on-line": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/nearest-point-on-line/-/nearest-point-on-line-7.1.0.tgz",
-            "integrity": "sha512-aTjAOm7ab0tl5JoxGYRx/J/IbRL1DY1ZCIYQDMEQjK5gOllhclgeBC0wDXDkEZFGaVftjw0W2RtE2I0jX7RG4A==",
-            "dependencies": {
-                "@turf/bearing": "^7.1.0",
-                "@turf/destination": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/nearest-point-to-line": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/nearest-point-to-line/-/nearest-point-to-line-7.1.0.tgz",
-            "integrity": "sha512-rY2F/iY4S6U8H0hIoOI25xMWYEiKywxeTvTvn5GP8KCu+2oemfZROWa7n2+hQDRwO2/uaegrGEpxO7zlFarvzg==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/point-to-line-distance": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/planepoint": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/planepoint/-/planepoint-7.1.0.tgz",
-            "integrity": "sha512-hFORBkCd7Q0kNUzLqksT4XglLgTQF9tCjG+dbnZ1VehpZu+w+vlHdoW/mY7XCX3Kj1ObiyzVmXffmVYgwXwF6Q==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/point-grid": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/point-grid/-/point-grid-7.1.0.tgz",
-            "integrity": "sha512-ihuuUcWuCu4Z1+34UYCM5NGsU2DJaB4uE8cS3jDQoUqlc+8ii2ng8kcGEtTwVn0HdPsoKA7bgvSZcisJO0v6Ww==",
-            "dependencies": {
-                "@turf/boolean-within": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/point-on-feature": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/point-on-feature/-/point-on-feature-7.1.0.tgz",
-            "integrity": "sha512-lOO5J9I0diuGbN+r6jViEKRH3qfymsBvv25b7U0MuP8g/YC19ncUXZ86dmKfJx1++Rb485DS9h0nFvPmJpaOdg==",
-            "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/center": "^7.1.0",
-                "@turf/explode": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/nearest-point": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/point-to-line-distance": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/point-to-line-distance/-/point-to-line-distance-7.1.0.tgz",
-            "integrity": "sha512-Ps9eTOCaiNgxDaSNQux0wAcSLcrI0y0zYFaD9HnVm+yCMRliQXneFti2XXotS+gR7TpgnLRAAzyx4VzJMSN2tw==",
-            "dependencies": {
-                "@turf/bearing": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/projection": "^7.1.0",
-                "@turf/rhumb-bearing": "^7.1.0",
-                "@turf/rhumb-distance": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/points-within-polygon": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/points-within-polygon/-/points-within-polygon-7.1.0.tgz",
-            "integrity": "sha512-SzqeD9Gcp11rEya+rCVMy6IPuYMrphNEkCiQ39W6ec9hsaqKlruqmtudKhhckMGVLVUUBCQAu5f55yjcDfVW2w==",
-            "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/polygon-smooth": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/polygon-smooth/-/polygon-smooth-7.1.0.tgz",
-            "integrity": "sha512-mTlmg4XUP5rKgCP/73N91owkAXIc3t1ZKLuwsJGQM1/Op48T3rJmDwVR/WZIMnVlxl5tFbssWCCB3blj4ivx9g==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/polygon-tangents": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/polygon-tangents/-/polygon-tangents-7.1.0.tgz",
-            "integrity": "sha512-ffBgHXtkrpgkNs8E6s9sVLSKG4lPGH3WBk294FNKBt9NS+rbhNCv8yTuOMeP0bOm/WizaCq/SUtVryJpUSoI/g==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/boolean-within": "^7.1.0",
-                "@turf/explode": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/nearest-point": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/polygon-to-line": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/polygon-to-line/-/polygon-to-line-7.1.0.tgz",
-            "integrity": "sha512-FBlfyBWNQZCTVGqlJH7LR2VXmvj8AydxrA8zegqek/5oPGtQDeUgIppKmvmuNClqbglhv59QtCUVaDK4bOuCTA==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/polygonize": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/polygonize/-/polygonize-7.1.0.tgz",
-            "integrity": "sha512-FBjxnOzO29MbE7MWnMPHHYtOo93cQopT5pXhkuPyoKgcTUCntR1+iVFpl5YFbMkYup0j5Oexjo/pbY38lVSZGw==",
-            "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/envelope": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/projection": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/projection/-/projection-7.1.0.tgz",
-            "integrity": "sha512-3wHluMoOvXnTe7dfi0kcluTyLNG5MwGsSsK5OA98vkkLH6a1xvItn8e9GcesuT07oB2km/bgefxYEIvjQG5JCA==",
-            "dependencies": {
-                "@turf/clone": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/quadrat-analysis": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/quadrat-analysis/-/quadrat-analysis-7.1.0.tgz",
-            "integrity": "sha512-4O5h9PyWgpqYXja9O+kzr+qk5MUz0IkJqPtt5oWWX5s4jRcLNqiEUf+zi/GDBQkVV8jH3S5klT5CLrF1fxK3hQ==",
-            "dependencies": {
-                "@turf/area": "^7.1.0",
-                "@turf/bbox": "^7.1.0",
-                "@turf/bbox-polygon": "^7.1.0",
-                "@turf/centroid": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/point-grid": "^7.1.0",
-                "@turf/random": "^7.1.0",
-                "@turf/square-grid": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/random": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/random/-/random-7.1.0.tgz",
-            "integrity": "sha512-22mXv8ejDMUWkz8DSMMqdZb0s7a0ISJzXt6T9cHovfT//vsotzkVH+5PDxJQjvmigKMnpaUgobHmQss23tAwEQ==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/rectangle-grid": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/rectangle-grid/-/rectangle-grid-7.1.0.tgz",
-            "integrity": "sha512-4d2AuDj4LfMMJxNHbds5yX1oFR3mIVAB5D7mx6pFB0e+YkQW0mE2dUWhDTFGJZM+n45yqbNQ5hg19bmiXv94ug==",
-            "dependencies": {
-                "@turf/boolean-intersects": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/rewind": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/rewind/-/rewind-7.1.0.tgz",
-            "integrity": "sha512-zX0KDZpeiH89m1vYLTEJdDL6mFyoAsCxcG0P94mXO7/JXWf0AaxzA9MkNnA/d2QYX0G4ioCMjZ5cD6nXb8SXzw==",
-            "dependencies": {
-                "@turf/boolean-clockwise": "^7.1.0",
-                "@turf/clone": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/rhumb-bearing": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/rhumb-bearing/-/rhumb-bearing-7.1.0.tgz",
-            "integrity": "sha512-ESZt70eOljHVnQMFKIdiu8LIHuQlpZgzh2nqSfV40BrYjsjI/sBKeK+sp2cBWk88nsSDlriPuMTNh4f50Jqpkw==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/rhumb-destination": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/rhumb-destination/-/rhumb-destination-7.1.0.tgz",
-            "integrity": "sha512-WA2TeO3qrv5ZrzNihtTLLYu8X4kd12WEC6JKElm99XhgLao1/4ao2SJUi43l88HqwbrnNiq4TueGQ6tYpXGU7A==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/rhumb-distance": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/rhumb-distance/-/rhumb-distance-7.1.0.tgz",
-            "integrity": "sha512-fR1V+yC4E1tnbdThomosiLcv0PQOwbfLSPM8rSWuxbMcJtffsncWxyJ0+N1F5juuHbcdaYhlduX8ri5I0ZCejw==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/sample": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/sample/-/sample-7.1.0.tgz",
-            "integrity": "sha512-9Iq/Ankr4+sgBoh4FpuVVvoW+AA10eej3FS89Zu79SFdCqUIdT7T42Nn3MlSVj4jMyA1oXyT2HIAlNWkwgLw6Q==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/sector": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/sector/-/sector-7.1.0.tgz",
-            "integrity": "sha512-2FI2rg//eXpa/l+WJtFfvHaf1NJ7ie2MoJ+RH5dKANtrfoof1Ed+y9dXSyuhem2tp/Srq2GhrjaSofFN5/g5vA==",
-            "dependencies": {
-                "@turf/circle": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/line-arc": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/shortest-path": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/shortest-path/-/shortest-path-7.1.0.tgz",
-            "integrity": "sha512-1UmFhS5zHNacLv5rszoFOXq02BGov1oJvjlDatXsSWAd+Z7tqxpDc8D+41edrXy0ZB0Yxsy6WPNagM6hG9PRaA==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/bbox-polygon": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/clean-coords": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/transform-scale": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
-        },
-        "node_modules/@turf/simplify": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/simplify/-/simplify-7.1.0.tgz",
-            "integrity": "sha512-JypymaoiSiFzGHwEoUkK0OPW1KQSnH3hEsEW3UIRS+apzltJ4HdFovYjsfqQgGZJZ+NJ9+dv7h8pgGLYuqcBUQ==",
-            "dependencies": {
-                "@turf/clean-coords": "^7.1.0",
-                "@turf/clone": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
-            }
+            "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+            "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
         },
-        "node_modules/@turf/square": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/square/-/square-7.1.0.tgz",
-            "integrity": "sha512-ANuA+WXZheGTLW6Veq0i+/B2S4KMhEHAixDv9gQEb9e6FTyqTJVwrqP4CHI3OzA3DZ/ytFf+NTKVofetO/BBQg==",
+        "node_modules/@soda/friendly-errors-webpack-plugin": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
+            "integrity": "sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==",
             "dependencies": {
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "chalk": "^3.0.0",
+                "error-stack-parser": "^2.0.6",
+                "string-width": "^4.2.3",
+                "strip-ansi": "^6.0.1"
             },
-            "funding": {
-                "url": "https://opencollective.com/turf"
+            "engines": {
+                "node": ">=8.0.0"
+            },
+            "peerDependencies": {
+                "webpack": "^4.0.0 || ^5.0.0"
             }
         },
-        "node_modules/@turf/square-grid": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/square-grid/-/square-grid-7.1.0.tgz",
-            "integrity": "sha512-JyhsALULVRlkh8htdTi9aXaXFSUv6wRNbeFbqyGJKKlA5eF+AYmyWdI/BlFGQN27xtbtMPeAuLmj+8jaB2omGw==",
-            "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/rectangle-grid": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
-            },
-            "funding": {
-                "url": "https://opencollective.com/turf"
+        "node_modules/@soda/get-current-script": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@soda/get-current-script/-/get-current-script-1.0.2.tgz",
+            "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w=="
+        },
+        "node_modules/@trysound/sax": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+            "engines": {
+                "node": ">=10.13.0"
             }
         },
-        "node_modules/@turf/standard-deviational-ellipse": {
+        "node_modules/@turf/area": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/standard-deviational-ellipse/-/standard-deviational-ellipse-7.1.0.tgz",
-            "integrity": "sha512-JqvQFH/witHh+3XgPC1Qk4+3G8w8WQta2NTJjnGinOgFulH+7RD4DcxCT+XXtCHoeq8IvL9VPJRX3ciaW5nSCg==",
+            "resolved": "https://registry.npmjs.org/@turf/area/-/area-7.1.0.tgz",
+            "integrity": "sha512-w91FEe02/mQfMPRX2pXua48scFuKJ2dSVMF2XmJ6+BJfFiCPxp95I3+Org8+ZsYv93CDNKbf0oLNEPnuQdgs2g==",
             "dependencies": {
-                "@turf/center-mean": "^7.1.0",
-                "@turf/ellipse": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
                 "@turf/meta": "^7.1.0",
-                "@turf/points-within-polygon": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
                 "tslib": "^2.6.2"
             },
@@ -2218,13 +549,11 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/tag": {
+        "node_modules/@turf/bbox": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/tag/-/tag-7.1.0.tgz",
-            "integrity": "sha512-cD8TC++DnNmdI1B/apTf3nj2zRNY6SoLRliB8K76OB+70Kev8tOf4ZVgAqOd0u+Hpdg/T6l7dO7fyJ6UouE7jA==",
+            "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-7.1.0.tgz",
+            "integrity": "sha512-PdWPz9tW86PD78vSZj2fiRaB8JhUHy6piSa/QXb83lucxPK+HTAdzlDQMTKj5okRCU8Ox/25IR2ep9T8NdopRA==",
             "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/clone": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
                 "@turf/meta": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
@@ -2234,26 +563,31 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/tesselate": {
+        "node_modules/@turf/boolean-disjoint": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/tesselate/-/tesselate-7.1.0.tgz",
-            "integrity": "sha512-E/Z94Mx6kUjvQVbEcSuM9MbEo2dkOczRe4ZzjhFlLgJh1dCkfRgwYLH49mb2CcfG/me1arxoCgmtG+qgm7LrCg==",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-disjoint/-/boolean-disjoint-7.1.0.tgz",
+            "integrity": "sha512-JapOG03kOCoGeYMWgTQjEifhr1nUoK4Os2cX0iC5X9kvZF4qCHeruX8/rffBQDx7PDKQKusSTXq8B1ISFi0hOw==",
             "dependencies": {
+                "@turf/boolean-point-in-polygon": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
+                "@turf/line-intersect": "^7.1.0",
+                "@turf/meta": "^7.1.0",
+                "@turf/polygon-to-line": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
-                "earcut": "^2.2.4",
                 "tslib": "^2.6.2"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/tin": {
+        "node_modules/@turf/boolean-intersects": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/tin/-/tin-7.1.0.tgz",
-            "integrity": "sha512-h8Bdm0IYN6OpKHM8lBRWGxkJnZcxL0KYecf8U6pa6DCEYsEXuEExMTvYSD2OmqIsL5ml8P6RjwgyI+dZeE0O9A==",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-intersects/-/boolean-intersects-7.1.0.tgz",
+            "integrity": "sha512-gpksWbb0RT+Z3nfqRfoACY3KEFyv2BPaxJ3L76PH67DhHZviq3Nfg85KYbpuhS64FSm+9tXe4IaKn6EjbHo20g==",
             "dependencies": {
+                "@turf/boolean-disjoint": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
+                "@turf/meta": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
                 "tslib": "^2.6.2"
             },
@@ -2261,41 +595,28 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/transform-rotate": {
+        "node_modules/@turf/boolean-point-in-polygon": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/transform-rotate/-/transform-rotate-7.1.0.tgz",
-            "integrity": "sha512-Vp7VBZ6DqaPV8mkwSycksBFRLqSj3y16zg+uEPSCsXUjbFtw9DOLcyH2F5vMpnC2bOpS9NOB4hebhJRwBwAPWQ==",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.1.0.tgz",
+            "integrity": "sha512-mprVsyIQ+ijWTZwbnO4Jhxu94ZW2M2CheqLiRTsGJy0Ooay9v6Av5/Nl3/Gst7ZVXxPqMeMaFYkSzcTc87AKew==",
             "dependencies": {
-                "@turf/centroid": "^7.1.0",
-                "@turf/clone": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
                 "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/rhumb-bearing": "^7.1.0",
-                "@turf/rhumb-destination": "^7.1.0",
-                "@turf/rhumb-distance": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
+                "point-in-polygon-hao": "^1.1.0",
                 "tslib": "^2.6.2"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/transform-scale": {
+        "node_modules/@turf/boolean-point-on-line": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/transform-scale/-/transform-scale-7.1.0.tgz",
-            "integrity": "sha512-m5fLnh3JqrWSv0sAC8Aieet/fr5IZND8BFaE9LakMidtNaJqOIPOyVmUoklcrGn6eK6MX+66rRPn+5a1pahlLQ==",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-7.1.0.tgz",
+            "integrity": "sha512-Kd83EjeTyY4kVMAhcW3Lb8aChwh24BUIhmpE9Or8M+ETNsFGzn9M7qtIySJHLRzKAL3letvWSKXKQPuK1AhAzg==",
             "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/center": "^7.1.0",
-                "@turf/centroid": "^7.1.0",
-                "@turf/clone": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
                 "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/rhumb-bearing": "^7.1.0",
-                "@turf/rhumb-destination": "^7.1.0",
-                "@turf/rhumb-distance": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
                 "tslib": "^2.6.2"
             },
@@ -2303,16 +624,16 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/transform-translate": {
+        "node_modules/@turf/boolean-within": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/transform-translate/-/transform-translate-7.1.0.tgz",
-            "integrity": "sha512-XA6Oh7VqUDrieY9m9/OF4XpBTd8qlfVGi3ObywojCqtHaHKLK3aXwTBZ276i0QKmZqOQA+2jFa9NhgF/TgBDrw==",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-within/-/boolean-within-7.1.0.tgz",
+            "integrity": "sha512-pgXgKCzYHssADQ1nClB1Q9aWI/dE1elm2jy3B5X59XdoFXKrKDZA+gCHYOYgp2NGO/txzVfl3UKvnxIj54Fa4w==",
             "dependencies": {
-                "@turf/clone": "^7.1.0",
+                "@turf/bbox": "^7.1.0",
+                "@turf/boolean-point-in-polygon": "^7.1.0",
+                "@turf/boolean-point-on-line": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
                 "@turf/invariant": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/rhumb-destination": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
                 "tslib": "^2.6.2"
             },
@@ -2320,14 +641,11 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/triangle-grid": {
+        "node_modules/@turf/helpers": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/triangle-grid/-/triangle-grid-7.1.0.tgz",
-            "integrity": "sha512-hrPyRAuX5PKu7txmc/11VPKrlJDR+JGzd+eijupKTspNLR4n2sqZUx8UXqSxZ/1nq06ScTyjIfGQJVzlRS8BTg==",
+            "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+            "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
             "dependencies": {
-                "@turf/distance": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/intersect": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
                 "tslib": "^2.6.2"
             },
@@ -2335,137 +653,27 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/truncate": {
+        "node_modules/@turf/intersect": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/truncate/-/truncate-7.1.0.tgz",
-            "integrity": "sha512-rrF3AML9PGZw2i5wmt53ESI+Ln9cZyCXgJ7QrEvkT8NbE4OFgmw6p8/1xT8+VEWFSpD4gHz+hmM+5FaFxXvtNg==",
+            "resolved": "https://registry.npmjs.org/@turf/intersect/-/intersect-7.1.0.tgz",
+            "integrity": "sha512-T0VhI6yhptX9EoMsuuBETyqV+edyq31SUC8bfuM6kdJ5WwJ0EvUfQoC+3bhMtCOn60lHawrUuGBgW+vCO8KGMg==",
             "dependencies": {
                 "@turf/helpers": "^7.1.0",
                 "@turf/meta": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
+                "polygon-clipping": "^0.15.3",
                 "tslib": "^2.6.2"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/turf": {
+        "node_modules/@turf/invariant": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/turf/-/turf-7.1.0.tgz",
-            "integrity": "sha512-7NA6tAjbu9oIvIfpRO5AdPrZbFTlUFU02HVA7sLJM9jFeNIZovW09QuDo23uoS2z5l94SXV1GgKKxN5wo7prCw==",
+            "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
+            "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
             "dependencies": {
-                "@turf/along": "^7.1.0",
-                "@turf/angle": "^7.1.0",
-                "@turf/area": "^7.1.0",
-                "@turf/bbox": "^7.1.0",
-                "@turf/bbox-clip": "^7.1.0",
-                "@turf/bbox-polygon": "^7.1.0",
-                "@turf/bearing": "^7.1.0",
-                "@turf/bezier-spline": "^7.1.0",
-                "@turf/boolean-clockwise": "^7.1.0",
-                "@turf/boolean-concave": "^7.1.0",
-                "@turf/boolean-contains": "^7.1.0",
-                "@turf/boolean-crosses": "^7.1.0",
-                "@turf/boolean-disjoint": "^7.1.0",
-                "@turf/boolean-equal": "^7.1.0",
-                "@turf/boolean-intersects": "^7.1.0",
-                "@turf/boolean-overlap": "^7.1.0",
-                "@turf/boolean-parallel": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/boolean-point-on-line": "^7.1.0",
-                "@turf/boolean-touches": "^7.1.0",
-                "@turf/boolean-valid": "^7.1.0",
-                "@turf/boolean-within": "^7.1.0",
-                "@turf/buffer": "^7.1.0",
-                "@turf/center": "^7.1.0",
-                "@turf/center-mean": "^7.1.0",
-                "@turf/center-median": "^7.1.0",
-                "@turf/center-of-mass": "^7.1.0",
-                "@turf/centroid": "^7.1.0",
-                "@turf/circle": "^7.1.0",
-                "@turf/clean-coords": "^7.1.0",
-                "@turf/clone": "^7.1.0",
-                "@turf/clusters": "^7.1.0",
-                "@turf/clusters-dbscan": "^7.1.0",
-                "@turf/clusters-kmeans": "^7.1.0",
-                "@turf/collect": "^7.1.0",
-                "@turf/combine": "^7.1.0",
-                "@turf/concave": "^7.1.0",
-                "@turf/convex": "^7.1.0",
-                "@turf/destination": "^7.1.0",
-                "@turf/difference": "^7.1.0",
-                "@turf/dissolve": "^7.1.0",
-                "@turf/distance": "^7.1.0",
-                "@turf/distance-weight": "^7.1.0",
-                "@turf/ellipse": "^7.1.0",
-                "@turf/envelope": "^7.1.0",
-                "@turf/explode": "^7.1.0",
-                "@turf/flatten": "^7.1.0",
-                "@turf/flip": "^7.1.0",
-                "@turf/geojson-rbush": "^7.1.0",
-                "@turf/great-circle": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
-                "@turf/hex-grid": "^7.1.0",
-                "@turf/interpolate": "^7.1.0",
-                "@turf/intersect": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
-                "@turf/isobands": "^7.1.0",
-                "@turf/isolines": "^7.1.0",
-                "@turf/kinks": "^7.1.0",
-                "@turf/length": "^7.1.0",
-                "@turf/line-arc": "^7.1.0",
-                "@turf/line-chunk": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@turf/line-offset": "^7.1.0",
-                "@turf/line-overlap": "^7.1.0",
-                "@turf/line-segment": "^7.1.0",
-                "@turf/line-slice": "^7.1.0",
-                "@turf/line-slice-along": "^7.1.0",
-                "@turf/line-split": "^7.1.0",
-                "@turf/line-to-polygon": "^7.1.0",
-                "@turf/mask": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/midpoint": "^7.1.0",
-                "@turf/moran-index": "^7.1.0",
-                "@turf/nearest-neighbor-analysis": "^7.1.0",
-                "@turf/nearest-point": "^7.1.0",
-                "@turf/nearest-point-on-line": "^7.1.0",
-                "@turf/nearest-point-to-line": "^7.1.0",
-                "@turf/planepoint": "^7.1.0",
-                "@turf/point-grid": "^7.1.0",
-                "@turf/point-on-feature": "^7.1.0",
-                "@turf/point-to-line-distance": "^7.1.0",
-                "@turf/points-within-polygon": "^7.1.0",
-                "@turf/polygon-smooth": "^7.1.0",
-                "@turf/polygon-tangents": "^7.1.0",
-                "@turf/polygon-to-line": "^7.1.0",
-                "@turf/polygonize": "^7.1.0",
-                "@turf/projection": "^7.1.0",
-                "@turf/quadrat-analysis": "^7.1.0",
-                "@turf/random": "^7.1.0",
-                "@turf/rectangle-grid": "^7.1.0",
-                "@turf/rewind": "^7.1.0",
-                "@turf/rhumb-bearing": "^7.1.0",
-                "@turf/rhumb-destination": "^7.1.0",
-                "@turf/rhumb-distance": "^7.1.0",
-                "@turf/sample": "^7.1.0",
-                "@turf/sector": "^7.1.0",
-                "@turf/shortest-path": "^7.1.0",
-                "@turf/simplify": "^7.1.0",
-                "@turf/square": "^7.1.0",
-                "@turf/square-grid": "^7.1.0",
-                "@turf/standard-deviational-ellipse": "^7.1.0",
-                "@turf/tag": "^7.1.0",
-                "@turf/tesselate": "^7.1.0",
-                "@turf/tin": "^7.1.0",
-                "@turf/transform-rotate": "^7.1.0",
-                "@turf/transform-scale": "^7.1.0",
-                "@turf/transform-translate": "^7.1.0",
-                "@turf/triangle-grid": "^7.1.0",
-                "@turf/truncate": "^7.1.0",
-                "@turf/union": "^7.1.0",
-                "@turf/unkink-polygon": "^7.1.0",
-                "@turf/voronoi": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
                 "tslib": "^2.6.2"
             },
@@ -2473,49 +681,40 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/union": {
+        "node_modules/@turf/line-intersect": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/union/-/union-7.1.0.tgz",
-            "integrity": "sha512-7VI8jONdBg9qmbfNlLQycPr93l5aU9HGMgWI9M6pb4ERuU2+p8KgffCgs2NyMtP2HxPrKSybzj31g7bnbEKofQ==",
+            "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-7.1.0.tgz",
+            "integrity": "sha512-JI3dvOsAoCqd4vUJ134FIzgcC42QpC/tBs+b4OJoxWmwDek3REv4qGaZY6wCg9X4hFSlCKFcnhMIQQZ/n720Qg==",
             "dependencies": {
                 "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
                 "@types/geojson": "^7946.0.10",
-                "polygon-clipping": "^0.15.3",
+                "sweepline-intersections": "^1.5.0",
                 "tslib": "^2.6.2"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/unkink-polygon": {
+        "node_modules/@turf/meta": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/unkink-polygon/-/unkink-polygon-7.1.0.tgz",
-            "integrity": "sha512-pqkirni2aLpRA1ELFIuJz+mkjYyJQX8Ar6BflSu1b0ajY/CTrcDxbIv1x8UfvbybLzdJc4Gxzg5mo4cEtSwtaQ==",
+            "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.1.0.tgz",
+            "integrity": "sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==",
             "dependencies": {
-                "@turf/area": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@types/geojson": "^7946.0.10",
-                "rbush": "^3.0.1",
-                "tslib": "^2.6.2"
+                "@types/geojson": "^7946.0.10"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@turf/voronoi": {
+        "node_modules/@turf/polygon-to-line": {
             "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/voronoi/-/voronoi-7.1.0.tgz",
-            "integrity": "sha512-xUvzPDG6GaqEekgxd+pjeMKJXOYJ3eFIqUHbTe/ISKzzv3f2cFGiR2VH7ZGXri8d4ozzCQbUQ27ilHPPLf5+xw==",
+            "resolved": "https://registry.npmjs.org/@turf/polygon-to-line/-/polygon-to-line-7.1.0.tgz",
+            "integrity": "sha512-FBlfyBWNQZCTVGqlJH7LR2VXmvj8AydxrA8zegqek/5oPGtQDeUgIppKmvmuNClqbglhv59QtCUVaDK4bOuCTA==",
             "dependencies": {
-                "@turf/clone": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
                 "@turf/invariant": "^7.1.0",
-                "@types/d3-voronoi": "^1.1.12",
                 "@types/geojson": "^7946.0.10",
-                "d3-voronoi": "1.1.2",
                 "tslib": "^2.6.2"
             },
             "funding": {
@@ -2539,17 +738,6 @@
                 "@types/node": "*"
             }
         },
-        "node_modules/@types/cacheable-request": {
-            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
-            "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
-            "dependencies": {
-                "@types/http-cache-semantics": "*",
-                "@types/keyv": "^3.1.4",
-                "@types/node": "*",
-                "@types/responselike": "^1.0.0"
-            }
-        },
         "node_modules/@types/connect": {
             "version": "3.4.38",
             "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -2567,11 +755,6 @@
                 "@types/node": "*"
             }
         },
-        "node_modules/@types/d3-voronoi": {
-            "version": "1.1.12",
-            "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz",
-            "integrity": "sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw=="
-        },
         "node_modules/@types/eslint": {
             "version": "9.6.1",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -2638,11 +821,6 @@
             "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
             "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
         },
-        "node_modules/@types/http-cache-semantics": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
-            "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA=="
-        },
         "node_modules/@types/http-errors": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -2661,24 +839,11 @@
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
         },
-        "node_modules/@types/keyv": {
-            "version": "3.1.4",
-            "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
-            "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
-            "dependencies": {
-                "@types/node": "*"
-            }
-        },
         "node_modules/@types/mime": {
             "version": "1.3.5",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
             "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
         },
-        "node_modules/@types/minimatch": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
-            "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
-        },
         "node_modules/@types/minimist": {
             "version": "1.2.5",
             "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
@@ -2720,13 +885,10 @@
             "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
             "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
         },
-        "node_modules/@types/responselike": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
-            "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
-            "dependencies": {
-                "@types/node": "*"
-            }
+        "node_modules/@types/rbush": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
+            "integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ=="
         },
         "node_modules/@types/retry": {
             "version": "0.12.0",
@@ -2776,12 +938,6 @@
                 "@types/node": "*"
             }
         },
-        "node_modules/@ungap/structured-clone": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-            "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-            "dev": true
-        },
         "node_modules/@vue/cli-overlay": {
             "version": "5.0.8",
             "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-5.0.8.tgz",
@@ -2977,6 +1133,17 @@
                 "source-map-js": "^1.2.0"
             }
         },
+        "node_modules/@vue/compiler-core/node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/@vue/compiler-dom": {
             "version": "3.5.13",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
@@ -3064,11 +1231,71 @@
                 "url": "https://opencollective.com/postcss/"
             }
         },
+        "node_modules/@vue/component-compiler-utils/node_modules/prettier": {
+            "version": "2.8.8",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+            "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+            "optional": true,
+            "bin": {
+                "prettier": "bin-prettier.js"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
         "node_modules/@vue/component-compiler-utils/node_modules/yallist": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
             "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+        },
+        "node_modules/@vue/reactivity": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+            "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+            "dependencies": {
+                "@vue/shared": "3.5.13"
+            }
+        },
+        "node_modules/@vue/runtime-core": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+            "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+            "dependencies": {
+                "@vue/reactivity": "3.5.13",
+                "@vue/shared": "3.5.13"
+            }
+        },
+        "node_modules/@vue/runtime-dom": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+            "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+            "dependencies": {
+                "@vue/reactivity": "3.5.13",
+                "@vue/runtime-core": "3.5.13",
+                "@vue/shared": "3.5.13",
+                "csstype": "^3.1.3"
+            }
+        },
+        "node_modules/@vue/server-renderer": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+            "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+            "dependencies": {
+                "@vue/compiler-ssr": "3.5.13",
+                "@vue/shared": "3.5.13"
+            },
+            "peerDependencies": {
+                "vue": "3.5.13"
+            }
+        },
         "node_modules/@vue/shared": {
             "version": "3.5.13",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
@@ -3243,47 +1470,6 @@
                 "@xtuc/long": "4.2.2"
             }
         },
-        "node_modules/@webpack-cli/configtest": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
-            "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
-            "engines": {
-                "node": ">=14.15.0"
-            },
-            "peerDependencies": {
-                "webpack": "5.x.x",
-                "webpack-cli": "5.x.x"
-            }
-        },
-        "node_modules/@webpack-cli/info": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
-            "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
-            "engines": {
-                "node": ">=14.15.0"
-            },
-            "peerDependencies": {
-                "webpack": "5.x.x",
-                "webpack-cli": "5.x.x"
-            }
-        },
-        "node_modules/@webpack-cli/serve": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
-            "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
-            "engines": {
-                "node": ">=14.15.0"
-            },
-            "peerDependencies": {
-                "webpack": "5.x.x",
-                "webpack-cli": "5.x.x"
-            },
-            "peerDependenciesMeta": {
-                "webpack-dev-server": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/@xtuc/ieee754": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -3490,20 +1676,10 @@
             ]
         },
         "node_modules/argparse": {
-            "version": "1.0.10",
-            "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-            "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-            "dependencies": {
-                "sprintf-js": "~1.0.2"
-            }
-        },
-        "node_modules/array-differ": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-            "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-            "engines": {
-                "node": ">=8"
-            }
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+            "dev": true
         },
         "node_modules/array-flatten": {
             "version": "1.1.1",
@@ -3518,14 +1694,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/arrify": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-            "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/async": {
             "version": "2.6.4",
             "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
@@ -3578,11 +1746,6 @@
                 "postcss": "^8.1.0"
             }
         },
-        "node_modules/babel-helper-vue-jsx-merge-props": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-            "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
-        },
         "node_modules/babel-polyfill": {
             "version": "6.26.0",
             "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
@@ -3593,11 +1756,6 @@
                 "regenerator-runtime": "^0.10.5"
             }
         },
-        "node_modules/babel-polyfill/node_modules/regenerator-runtime": {
-            "version": "0.10.5",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-            "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
-        },
         "node_modules/babel-runtime": {
             "version": "6.26.0",
             "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -3666,31 +1824,8 @@
             "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
             "dependencies": {
                 "buffer": "^5.5.0",
-                "inherits": "^2.0.4",
-                "readable-stream": "^3.4.0"
-            }
-        },
-        "node_modules/bl/node_modules/buffer": {
-            "version": "5.7.1",
-            "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-            "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ],
-            "dependencies": {
-                "base64-js": "^1.3.1",
-                "ieee754": "^1.1.13"
+                "inherits": "^2.0.4",
+                "readable-stream": "^3.4.0"
             }
         },
         "node_modules/bl/node_modules/readable-stream": {
@@ -3780,11 +1915,12 @@
             }
         },
         "node_modules/brace-expansion": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
             "dependencies": {
-                "balanced-match": "^1.0.0"
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
             }
         },
         "node_modules/braces": {
@@ -3830,9 +1966,9 @@
             }
         },
         "node_modules/buffer": {
-            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-            "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+            "version": "5.7.1",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+            "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
             "funding": [
                 {
                     "type": "github",
@@ -3849,7 +1985,7 @@
             ],
             "dependencies": {
                 "base64-js": "^1.3.1",
-                "ieee754": "^1.2.1"
+                "ieee754": "^1.1.13"
             }
         },
         "node_modules/buffer-from": {
@@ -3857,6 +1993,11 @@
             "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
             "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
         },
+        "node_modules/but-unzip": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/but-unzip/-/but-unzip-0.1.4.tgz",
+            "integrity": "sha512-Q5/55MTk0PHjxtYyZBbhIVMJP0+FNc/AOKBrrnqaxnbJR4I7w+R4CMRNYMxUQrKmCLrih7D1p4/nwZHMn7IToA=="
+        },
         "node_modules/bytes": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -3865,45 +2006,6 @@
                 "node": ">= 0.8"
             }
         },
-        "node_modules/cacheable-lookup": {
-            "version": "5.0.4",
-            "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
-            "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
-            "engines": {
-                "node": ">=10.6.0"
-            }
-        },
-        "node_modules/cacheable-request": {
-            "version": "7.0.4",
-            "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
-            "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
-            "dependencies": {
-                "clone-response": "^1.0.2",
-                "get-stream": "^5.1.0",
-                "http-cache-semantics": "^4.0.0",
-                "keyv": "^4.0.0",
-                "lowercase-keys": "^2.0.0",
-                "normalize-url": "^6.0.1",
-                "responselike": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/cacheable-request/node_modules/get-stream": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-            "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-            "dependencies": {
-                "pump": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/call-bind": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -3922,14 +2024,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/callsite": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
-            "integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==",
-            "engines": {
-                "node": "*"
-            }
-        },
         "node_modules/callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3947,17 +2041,6 @@
                 "tslib": "^2.0.3"
             }
         },
-        "node_modules/camelcase": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-            "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/caniuse-api": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4162,17 +2245,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/clone-response": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
-            "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
-            "dependencies": {
-                "mimic-response": "^1.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4302,17 +2374,6 @@
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
         },
-        "node_modules/concaveman": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/concaveman/-/concaveman-1.2.1.tgz",
-            "integrity": "sha512-PwZYKaM/ckQSa8peP5JpVr7IMJ4Nn/MHIaWUjP4be+KoZ7Botgs8seAZGpmaOM+UZXawcdYRao/px9ycrCihHw==",
-            "dependencies": {
-                "point-in-polygon": "^1.1.0",
-                "rbush": "^3.0.1",
-                "robust-predicates": "^2.0.4",
-                "tinyqueue": "^2.0.3"
-            }
-        },
         "node_modules/connect-history-api-fallback": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
@@ -4739,76 +2800,58 @@
                 "node": ">=0.12"
             }
         },
-        "node_modules/d3-array": {
-            "version": "1.2.4",
-            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-            "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
-        },
-        "node_modules/d3-geo": {
-            "version": "1.7.1",
-            "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.7.1.tgz",
-            "integrity": "sha512-O4AempWAr+P5qbk2bC2FuN/sDW4z+dN2wDf9QV3bxQt4M5HfOEeXLgJ/UKQW0+o1Dj8BE+L5kiDbdWUMjsmQpw==",
-            "dependencies": {
-                "d3-array": "1"
-            }
-        },
-        "node_modules/d3-voronoi": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
-            "integrity": "sha512-RhGS1u2vavcO7ay7ZNAPo4xeDh/VYeGof3x5ZLJBQgYhLegxr3s5IykvWmJ94FTU6mcbtp4sloqZ54mP6R4Utw=="
-        },
         "node_modules/datatables.net": {
-            "version": "1.13.11",
-            "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.11.tgz",
-            "integrity": "sha512-AE6RkMXziRaqzPcu/pl3SJXeRa6fmXQG/fVjuRESujvkzqDCYEeKTTpPMuVJSGYJpPi32WGSphVNNY1G4nSN/g==",
+            "version": "2.1.8",
+            "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-2.1.8.tgz",
+            "integrity": "sha512-47ULt+U4bcjbuGTpTlT6SnCuSFVRBxxdWa6X3NfvTObBJ2BZU0o+JUIl05wQ6cABNIavjbAV51gpgvFsMHL9zA==",
             "dependencies": {
-                "jquery": "1.8 - 4"
+                "jquery": ">=1.7"
             }
         },
         "node_modules/datatables.net-bs5": {
-            "version": "1.13.11",
-            "resolved": "https://registry.npmjs.org/datatables.net-bs5/-/datatables.net-bs5-1.13.11.tgz",
-            "integrity": "sha512-NQO15TjXo4xvZ0jReC4Uf86ezbQzPQPdaN2YncrCPhzQ6fx+2WD7DUq4ur0HbAcYHo94/M+MtD5Ch29To7Rj3Q==",
+            "version": "2.1.8",
+            "resolved": "https://registry.npmjs.org/datatables.net-bs5/-/datatables.net-bs5-2.1.8.tgz",
+            "integrity": "sha512-YlGws8eI3iw/1AmKJH18+YMzm/UgGb6o9s14KAC24QT1/8anolm8GnVAgGcwUcvHm3hn1i8A5QXqgbqeMRINeg==",
             "dependencies": {
-                "datatables.net": "1.13.11",
-                "jquery": "1.8 - 4"
+                "datatables.net": "2.1.8",
+                "jquery": ">=1.7"
             }
         },
         "node_modules/datatables.net-buttons": {
-            "version": "2.4.3",
-            "resolved": "https://registry.npmjs.org/datatables.net-buttons/-/datatables.net-buttons-2.4.3.tgz",
-            "integrity": "sha512-xoHD6I2kxnU/CEp97Ar0lSnAL1siucQ/5Q/otGWWfWE2VN0o4n5C2h2Ot/ZCS8kxbEHBGd873Bc2xPdJH87yOw==",
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/datatables.net-buttons/-/datatables.net-buttons-3.2.0.tgz",
+            "integrity": "sha512-u51/KUvxMJz7ZsmhEUMU3nAh++wU0IYtU/U9TaH5rZR3zVHj+OBepApLIMz/uLjcXpNeIb7kjcKKNkVtxk9kbw==",
             "dependencies": {
-                "datatables.net": "^1.13.0",
+                "datatables.net": "^2",
                 "jquery": ">=1.7"
             }
         },
         "node_modules/datatables.net-buttons-bs5": {
-            "version": "2.4.3",
-            "resolved": "https://registry.npmjs.org/datatables.net-buttons-bs5/-/datatables.net-buttons-bs5-2.4.3.tgz",
-            "integrity": "sha512-osgIyqTTXRWOF+vh19GM0ixB4kqmtQTiYmcO3v2Ca+bwUpfasI+ylEyMrHqqiON77zA+FmPTuUVHUZTJIIJWUg==",
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/datatables.net-buttons-bs5/-/datatables.net-buttons-bs5-3.2.0.tgz",
+            "integrity": "sha512-cfzbTNg4hj+tbZ4rcowqP7cUb4IYOnE0PXY7iDuYZB3ZQLGQAsy4EczftR2JM3ywbgbcvFSZjlYg5z5rCuhmEg==",
             "dependencies": {
-                "datatables.net-bs5": "^1.13.0",
-                "datatables.net-buttons": "2.4.3",
+                "datatables.net-bs5": "^2",
+                "datatables.net-buttons": "3.2.0",
                 "jquery": ">=1.7"
             }
         },
         "node_modules/datatables.net-responsive": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/datatables.net-responsive/-/datatables.net-responsive-2.5.1.tgz",
-            "integrity": "sha512-hyJb2faIzEWUX5Yn4HOSq/6NNB9SXDVbI4OU9ny+XU/2ghZEz4676spOgzpDHTdWvCfM+t1mbUsT70fDiTTr9w==",
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/datatables.net-responsive/-/datatables.net-responsive-3.0.3.tgz",
+            "integrity": "sha512-/VU5U3P+l3GSdo92Mclt5YlrETNkfIZZU1MOk0aHNt0VqQOE0dORhx5Nwa8pYVsBuQBYzzyROZLru6UivEWv3Q==",
             "dependencies": {
-                "datatables.net": "^1.13.0",
+                "datatables.net": "^2",
                 "jquery": ">=1.7"
             }
         },
         "node_modules/datatables.net-responsive-bs5": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/datatables.net-responsive-bs5/-/datatables.net-responsive-bs5-2.5.1.tgz",
-            "integrity": "sha512-jNaIO67eM+TivHSm8mnMp2LrP/Fo+zMCoBUUj7oA8Xt49J/CMvdHCzh0szpLxj/++xmTZzCkuslyu6iM85VO8g==",
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/datatables.net-responsive-bs5/-/datatables.net-responsive-bs5-3.0.3.tgz",
+            "integrity": "sha512-5kc28ifPI/3X6jDPnEWf6sNgdNtXYHNv79BvhD341VPzL1R3WZv3afgfV05DqSUwsBkhXoRbnfqaQdY0lD6DOA==",
             "dependencies": {
-                "datatables.net-bs5": "^1.13.0",
-                "datatables.net-responsive": "2.5.1",
+                "datatables.net-bs5": "^2",
+                "datatables.net-responsive": "3.0.3",
                 "jquery": ">=1.7"
             }
         },
@@ -4833,31 +2876,6 @@
                 }
             }
         },
-        "node_modules/decompress-response": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-            "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-            "dependencies": {
-                "mimic-response": "^3.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/decompress-response/node_modules/mimic-response": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-            "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/deep-is": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4949,14 +2967,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/defer-to-connect": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
-            "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/define-data-property": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -4981,53 +2991,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/depcheck": {
-            "version": "1.4.7",
-            "resolved": "https://registry.npmjs.org/depcheck/-/depcheck-1.4.7.tgz",
-            "integrity": "sha512-1lklS/bV5chOxwNKA/2XUUk/hPORp8zihZsXflr8x0kLwmcZ9Y9BsS6Hs3ssvA+2wUVbG0U2Ciqvm1SokNjPkA==",
-            "dependencies": {
-                "@babel/parser": "^7.23.0",
-                "@babel/traverse": "^7.23.2",
-                "@vue/compiler-sfc": "^3.3.4",
-                "callsite": "^1.0.0",
-                "camelcase": "^6.3.0",
-                "cosmiconfig": "^7.1.0",
-                "debug": "^4.3.4",
-                "deps-regex": "^0.2.0",
-                "findup-sync": "^5.0.0",
-                "ignore": "^5.2.4",
-                "is-core-module": "^2.12.0",
-                "js-yaml": "^3.14.1",
-                "json5": "^2.2.3",
-                "lodash": "^4.17.21",
-                "minimatch": "^7.4.6",
-                "multimatch": "^5.0.0",
-                "please-upgrade-node": "^3.2.0",
-                "readdirp": "^3.6.0",
-                "require-package-name": "^2.0.1",
-                "resolve": "^1.22.3",
-                "resolve-from": "^5.0.0",
-                "semver": "^7.5.4",
-                "yargs": "^16.2.0"
-            },
-            "bin": {
-                "depcheck": "bin/depcheck.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/depcheck/node_modules/semver": {
-            "version": "7.6.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-            "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/depd": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5036,11 +2999,6 @@
                 "node": ">= 0.8"
             }
         },
-        "node_modules/deps-regex": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/deps-regex/-/deps-regex-0.2.0.tgz",
-            "integrity": "sha512-PwuBojGMQAYbWkMXOY9Pd/NWCDNHVH12pnS7WHqZkTSeMESe4hwnKKRp0yR87g37113x4JPbo/oIvXY+s/f56Q=="
-        },
         "node_modules/destroy": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -5050,14 +3008,6 @@
                 "npm": "1.2.8000 || >= 1.4.16"
             }
         },
-        "node_modules/detect-file": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
-            "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/detect-node": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -5085,18 +3035,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/doctrine": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-            "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-            "dev": true,
-            "dependencies": {
-                "esutils": "^2.0.2"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
         "node_modules/dom-converter": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -5118,14 +3056,6 @@
                 "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
             }
         },
-        "node_modules/dom-serializer/node_modules/entities": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-            "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-            "funding": {
-                "url": "https://github.com/fb55/entities?sponsor=1"
-            }
-        },
         "node_modules/domelementtype": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -5192,14 +3122,9 @@
             "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
         },
         "node_modules/earcut": {
-            "version": "2.2.4",
-            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
-            "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
-        },
-        "node_modules/easings-css": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/easings-css/-/easings-css-1.0.0.tgz",
-            "integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg=="
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz",
+            "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
         },
         "node_modules/easy-stack": {
             "version": "1.0.1",
@@ -5215,9 +3140,9 @@
             "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.68",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz",
-            "integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ=="
+            "version": "1.5.71",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
+            "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA=="
         },
         "node_modules/emoji-regex": {
             "version": "8.0.0",
@@ -5261,27 +3186,13 @@
             }
         },
         "node_modules/entities": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-            "engines": {
-                "node": ">=0.12"
-            },
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+            "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
             "funding": {
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
-        "node_modules/envinfo": {
-            "version": "7.14.0",
-            "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz",
-            "integrity": "sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==",
-            "bin": {
-                "envinfo": "dist/cli.js"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/error-ex": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -5384,65 +3295,68 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.57.1",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-            "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-            "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+            "version": "9.16.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.16.0.tgz",
+            "integrity": "sha512-whp8mSQI4C8VXd+fLgSM0lh3UlmcFtVwUQjyKCFfsp+2ItAIYhlq/hqGahGqHE6cv9unM41VlqKk2VtKYR2TaA==",
             "dev": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
-                "@eslint-community/regexpp": "^4.6.1",
-                "@eslint/eslintrc": "^2.1.4",
-                "@eslint/js": "8.57.1",
-                "@humanwhocodes/config-array": "^0.13.0",
+                "@eslint-community/regexpp": "^4.12.1",
+                "@eslint/config-array": "^0.19.0",
+                "@eslint/core": "^0.9.0",
+                "@eslint/eslintrc": "^3.2.0",
+                "@eslint/js": "9.16.0",
+                "@eslint/plugin-kit": "^0.2.3",
+                "@humanfs/node": "^0.16.6",
                 "@humanwhocodes/module-importer": "^1.0.1",
-                "@nodelib/fs.walk": "^1.2.8",
-                "@ungap/structured-clone": "^1.2.0",
+                "@humanwhocodes/retry": "^0.4.1",
+                "@types/estree": "^1.0.6",
+                "@types/json-schema": "^7.0.15",
                 "ajv": "^6.12.4",
                 "chalk": "^4.0.0",
-                "cross-spawn": "^7.0.2",
+                "cross-spawn": "^7.0.5",
                 "debug": "^4.3.2",
-                "doctrine": "^3.0.0",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^7.2.2",
-                "eslint-visitor-keys": "^3.4.3",
-                "espree": "^9.6.1",
-                "esquery": "^1.4.2",
+                "eslint-scope": "^8.2.0",
+                "eslint-visitor-keys": "^4.2.0",
+                "espree": "^10.3.0",
+                "esquery": "^1.5.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
-                "file-entry-cache": "^6.0.1",
+                "file-entry-cache": "^8.0.0",
                 "find-up": "^5.0.0",
                 "glob-parent": "^6.0.2",
-                "globals": "^13.19.0",
-                "graphemer": "^1.4.0",
                 "ignore": "^5.2.0",
                 "imurmurhash": "^0.1.4",
                 "is-glob": "^4.0.0",
-                "is-path-inside": "^3.0.3",
-                "js-yaml": "^4.1.0",
                 "json-stable-stringify-without-jsonify": "^1.0.1",
-                "levn": "^0.4.1",
                 "lodash.merge": "^4.6.2",
                 "minimatch": "^3.1.2",
                 "natural-compare": "^1.4.0",
-                "optionator": "^0.9.3",
-                "strip-ansi": "^6.0.1",
-                "text-table": "^0.2.0"
+                "optionator": "^0.9.3"
             },
             "bin": {
                 "eslint": "bin/eslint.js"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
-                "url": "https://opencollective.com/eslint"
+                "url": "https://eslint.org/donate"
+            },
+            "peerDependencies": {
+                "jiti": "*"
+            },
+            "peerDependenciesMeta": {
+                "jiti": {
+                    "optional": true
+                }
             }
         },
         "node_modules/eslint-config-prettier": {
-            "version": "8.10.0",
-            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
-            "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+            "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
             "dev": true,
             "bin": {
                 "eslint-config-prettier": "bin/cli.js"
@@ -5452,70 +3366,63 @@
             }
         },
         "node_modules/eslint-plugin-prettier": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
-            "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+            "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
             "dev": true,
             "dependencies": {
-                "prettier-linter-helpers": "^1.0.0"
+                "prettier-linter-helpers": "^1.0.0",
+                "synckit": "^0.9.1"
             },
             "engines": {
-                "node": ">=12.0.0"
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-plugin-prettier"
             },
             "peerDependencies": {
-                "eslint": ">=7.28.0",
-                "prettier": ">=2.0.0"
+                "@types/eslint": ">=8.0.0",
+                "eslint": ">=8.0.0",
+                "eslint-config-prettier": "*",
+                "prettier": ">=3.0.0"
             },
             "peerDependenciesMeta": {
+                "@types/eslint": {
+                    "optional": true
+                },
                 "eslint-config-prettier": {
                     "optional": true
                 }
             }
         },
         "node_modules/eslint-scope": {
-            "version": "7.2.2",
-            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-            "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
+            "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
             "dev": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/eslint-visitor-keys": {
-            "version": "3.4.3",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+            "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
             "dev": true,
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/eslint/node_modules/argparse": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true
-        },
-        "node_modules/eslint/node_modules/brace-expansion": {
-            "version": "1.1.11",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dev": true,
-            "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
-            }
-        },
         "node_modules/eslint/node_modules/chalk": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5532,57 +3439,6 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
-        "node_modules/eslint/node_modules/globals": {
-            "version": "13.24.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-            "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-            "dev": true,
-            "dependencies": {
-                "type-fest": "^0.20.2"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/eslint/node_modules/js-yaml": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-            "dev": true,
-            "dependencies": {
-                "argparse": "^2.0.1"
-            },
-            "bin": {
-                "js-yaml": "bin/js-yaml.js"
-            }
-        },
-        "node_modules/eslint/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dev": true,
-            "dependencies": {
-                "brace-expansion": "^1.1.7"
-            },
-            "engines": {
-                "node": "*"
-            }
-        },
-        "node_modules/eslint/node_modules/type-fest": {
-            "version": "0.20.2",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-            "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-            "dev": true,
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/esniff": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
@@ -5598,34 +3454,22 @@
             }
         },
         "node_modules/espree": {
-            "version": "9.6.1",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-            "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+            "version": "10.3.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+            "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
             "dev": true,
             "dependencies": {
-                "acorn": "^8.9.0",
+                "acorn": "^8.14.0",
                 "acorn-jsx": "^5.3.2",
-                "eslint-visitor-keys": "^3.4.1"
+                "eslint-visitor-keys": "^4.2.0"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/esprima": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-            "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-            "bin": {
-                "esparse": "bin/esparse.js",
-                "esvalidate": "bin/esvalidate.js"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/esquery": {
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -5787,21 +3631,10 @@
                 "which": "bin/which"
             }
         },
-        "node_modules/expand-tilde": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-            "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
-            "dependencies": {
-                "homedir-polyfill": "^1.0.1"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/express": {
-            "version": "4.21.1",
-            "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-            "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+            "version": "4.21.2",
+            "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+            "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
             "dependencies": {
                 "accepts": "~1.3.8",
                 "array-flatten": "1.1.1",
@@ -5822,7 +3655,7 @@
                 "methods": "~1.1.2",
                 "on-finished": "2.4.1",
                 "parseurl": "~1.3.3",
-                "path-to-regexp": "0.1.10",
+                "path-to-regexp": "0.1.12",
                 "proxy-addr": "~2.0.7",
                 "qs": "6.13.0",
                 "range-parser": "~1.2.1",
@@ -5837,6 +3670,10 @@
             },
             "engines": {
                 "node": ">= 0.10.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
             }
         },
         "node_modules/express/node_modules/debug": {
@@ -5930,15 +3767,7 @@
         "node_modules/fast-uri": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
-            "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw=="
-        },
-        "node_modules/fastest-levenshtein": {
-            "version": "1.0.16",
-            "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
-            "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
-            "engines": {
-                "node": ">= 4.9.1"
-            }
+            "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw=="
         },
         "node_modules/fastq": {
             "version": "1.17.1",
@@ -5979,15 +3808,15 @@
             }
         },
         "node_modules/file-entry-cache": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-            "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+            "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
             "dev": true,
             "dependencies": {
-                "flat-cache": "^3.0.4"
+                "flat-cache": "^4.0.0"
             },
             "engines": {
-                "node": "^10.12.0 || >=12.0.0"
+                "node": ">=16.0.0"
             }
         },
         "node_modules/fill-range": {
@@ -6047,20 +3876,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/findup-sync": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz",
-            "integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==",
-            "dependencies": {
-                "detect-file": "^1.0.0",
-                "is-glob": "^4.0.3",
-                "micromatch": "^4.0.4",
-                "resolve-dir": "^1.0.1"
-            },
-            "engines": {
-                "node": ">= 10.13.0"
-            }
-        },
         "node_modules/flat": {
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
@@ -6070,17 +3885,16 @@
             }
         },
         "node_modules/flat-cache": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-            "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+            "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
             "dev": true,
             "dependencies": {
                 "flatted": "^3.2.9",
-                "keyv": "^4.5.3",
-                "rimraf": "^3.0.2"
+                "keyv": "^4.5.4"
             },
             "engines": {
-                "node": "^10.12.0 || >=12.0.0"
+                "node": ">=16"
             }
         },
         "node_modules/flatted": {
@@ -6181,40 +3995,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/fuzzysearch": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
-            "integrity": "sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg=="
-        },
-        "node_modules/geojson-equality-ts": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/geojson-equality-ts/-/geojson-equality-ts-1.0.2.tgz",
-            "integrity": "sha512-h3Ryq+0mCSN/7yLs0eDgrZhvc9af23o/QuC4aTiuuzP/MRCtd6mf5rLsLRY44jX0RPUfM8c4GqERQmlUxPGPoQ==",
-            "dependencies": {
-                "@types/geojson": "^7946.0.14"
-            }
-        },
-        "node_modules/geojson-polygon-self-intersections": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/geojson-polygon-self-intersections/-/geojson-polygon-self-intersections-1.2.1.tgz",
-            "integrity": "sha512-/QM1b5u2d172qQVO//9CGRa49jEmclKEsYOQmWP9ooEjj63tBM51m2805xsbxkzlEELQ2REgTf700gUhhlegxA==",
-            "dependencies": {
-                "rbush": "^2.0.1"
-            }
-        },
-        "node_modules/geojson-polygon-self-intersections/node_modules/quickselect": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
-            "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
-        },
-        "node_modules/geojson-polygon-self-intersections/node_modules/rbush": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
-            "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
-            "dependencies": {
-                "quickselect": "^1.0.1"
-            }
-        },
         "node_modules/geotiff": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
@@ -6311,71 +4091,16 @@
             "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
             "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
         },
-        "node_modules/glob/node_modules/brace-expansion": {
-            "version": "1.1.11",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
-            }
-        },
-        "node_modules/glob/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dependencies": {
-                "brace-expansion": "^1.1.7"
-            },
-            "engines": {
-                "node": "*"
-            }
-        },
-        "node_modules/global-modules": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
-            "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
-            "dependencies": {
-                "global-prefix": "^1.0.1",
-                "is-windows": "^1.0.1",
-                "resolve-dir": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/global-prefix": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
-            "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
-            "dependencies": {
-                "expand-tilde": "^2.0.2",
-                "homedir-polyfill": "^1.0.1",
-                "ini": "^1.3.4",
-                "is-windows": "^1.0.1",
-                "which": "^1.2.14"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/global-prefix/node_modules/which": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-            "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-            "dependencies": {
-                "isexe": "^2.0.0"
-            },
-            "bin": {
-                "which": "bin/which"
-            }
-        },
         "node_modules/globals": {
-            "version": "11.12.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-            "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+            "version": "14.0.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+            "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+            "dev": true,
             "engines": {
-                "node": ">=4"
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/globby": {
@@ -6398,12 +4123,9 @@
             }
         },
         "node_modules/gopd": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.1.0.tgz",
-            "integrity": "sha512-FQoVQnqcdk4hVM4JN1eromaun4iuS34oStkdlLENLdpULsuQcTyXj8w7ayhuUfPwEYZ1ZOooOTT6fdA9Vmx/RA==",
-            "dependencies": {
-                "get-intrinsic": "^1.2.4"
-            },
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+            "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -6411,41 +4133,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/got": {
-            "version": "11.8.6",
-            "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
-            "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
-            "dependencies": {
-                "@sindresorhus/is": "^4.0.0",
-                "@szmarczak/http-timer": "^4.0.5",
-                "@types/cacheable-request": "^6.0.1",
-                "@types/responselike": "^1.0.0",
-                "cacheable-lookup": "^5.0.3",
-                "cacheable-request": "^7.0.2",
-                "decompress-response": "^6.0.0",
-                "http2-wrapper": "^1.0.0-beta.5.2",
-                "lowercase-keys": "^2.0.0",
-                "p-cancelable": "^2.0.0",
-                "responselike": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=10.19.0"
-            },
-            "funding": {
-                "url": "https://github.com/sindresorhus/got?sponsor=1"
-            }
-        },
         "node_modules/graceful-fs": {
             "version": "4.2.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
             "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
         },
-        "node_modules/graphemer": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-            "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-            "dev": true
-        },
         "node_modules/gzip-size": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -6541,17 +4233,6 @@
                 "node": "*"
             }
         },
-        "node_modules/homedir-polyfill": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
-            "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-            "dependencies": {
-                "parse-passwd": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/hosted-git-info": {
             "version": "2.8.9",
             "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -6657,19 +4338,6 @@
                 "entities": "^2.0.0"
             }
         },
-        "node_modules/htmlparser2/node_modules/entities": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-            "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-            "funding": {
-                "url": "https://github.com/fb55/entities?sponsor=1"
-            }
-        },
-        "node_modules/http-cache-semantics": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-            "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
-        },
         "node_modules/http-deceiver": {
             "version": "1.2.7",
             "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -6731,29 +4399,6 @@
                 }
             }
         },
-        "node_modules/http2-wrapper": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
-            "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
-            "dependencies": {
-                "quick-lru": "^5.1.1",
-                "resolve-alpn": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=10.19.0"
-            }
-        },
-        "node_modules/http2-wrapper/node_modules/quick-lru": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-            "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/human-signals": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -6831,32 +4476,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/import-fresh/node_modules/resolve-from": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/import-local": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
-            "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
-            "dependencies": {
-                "pkg-dir": "^4.2.0",
-                "resolve-cwd": "^3.0.0"
-            },
-            "bin": {
-                "import-local-fixture": "fixtures/cli.js"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/imurmurhash": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -6881,19 +4500,6 @@
             "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
-        "node_modules/ini": {
-            "version": "1.3.8",
-            "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-            "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
-        },
-        "node_modules/interpret": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
-            "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
-            "engines": {
-                "node": ">=10.13.0"
-            }
-        },
         "node_modules/ipaddr.js": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
@@ -6997,15 +4603,6 @@
                 "node": ">=0.12.0"
             }
         },
-        "node_modules/is-path-inside": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-            "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-            "dev": true,
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/is-plain-obj": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -7028,11 +4625,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/is-promise": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-            "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
-        },
         "node_modules/is-stream": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -7052,14 +4644,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/is-windows": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-            "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/is-wsl": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -7138,14 +4722,6 @@
             "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
             "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
         },
-        "node_modules/jquery-easing": {
-            "version": "0.0.1",
-            "resolved": "https://registry.npmjs.org/jquery-easing/-/jquery-easing-0.0.1.tgz",
-            "integrity": "sha512-ZDlfbZ5gZQWqXd52GO110wk3NIDmPFjN/5HLRRQ9KFfmipB/62kt8O3jT3Vafxeb13k01qg/BKBpdbvT0MoUKw==",
-            "dependencies": {
-                "jquery": "*"
-            }
-        },
         "node_modules/jquery-validation": {
             "version": "1.21.0",
             "resolved": "https://registry.npmjs.org/jquery-validation/-/jquery-validation-1.21.0.tgz",
@@ -7168,32 +4744,22 @@
             "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
         },
         "node_modules/js-yaml": {
-            "version": "3.14.1",
-            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-            "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+            "dev": true,
             "dependencies": {
-                "argparse": "^1.0.7",
-                "esprima": "^4.0.0"
+                "argparse": "^2.0.1"
             },
             "bin": {
                 "js-yaml": "bin/js-yaml.js"
             }
         },
-        "node_modules/jsesc": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
-            "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-            "bin": {
-                "jsesc": "bin/jsesc"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/json-buffer": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true
         },
         "node_modules/json-parse-better-errors": {
             "version": "1.0.2",
@@ -7217,14 +4783,14 @@
             "dev": true
         },
         "node_modules/json5": {
-            "version": "2.2.3",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+            "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+            "dependencies": {
+                "minimist": "^1.2.0"
+            },
             "bin": {
                 "json5": "lib/cli.js"
-            },
-            "engines": {
-                "node": ">=6"
             }
         },
         "node_modules/jsonfile": {
@@ -7238,14 +4804,6 @@
                 "graceful-fs": "^4.1.6"
             }
         },
-        "node_modules/jsts": {
-            "version": "2.7.1",
-            "resolved": "https://registry.npmjs.org/jsts/-/jsts-2.7.1.tgz",
-            "integrity": "sha512-x2wSZHEBK20CY+Wy+BPE7MrFQHW6sIsdaGUMEqmGAio+3gFzQaBYPwLRonUfQf9Ak8pBieqj9tUofX1+WtAEIg==",
-            "engines": {
-                "node": ">= 12"
-            }
-        },
         "node_modules/jszip": {
             "version": "3.10.1",
             "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -7261,6 +4819,7 @@
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
             "dependencies": {
                 "json-buffer": "3.0.1"
             }
@@ -7358,17 +4917,6 @@
                 "node": ">=4.0.0"
             }
         },
-        "node_modules/loader-utils/node_modules/json5": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-            "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-            "dependencies": {
-                "minimist": "^1.2.0"
-            },
-            "bin": {
-                "json5": "lib/cli.js"
-            }
-        },
         "node_modules/locate-path": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7564,14 +5112,6 @@
                 "tslib": "^2.0.3"
             }
         },
-        "node_modules/lowercase-keys": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-            "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/lru-cache": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -7588,16 +5128,6 @@
                 "@jridgewell/sourcemap-codec": "^1.5.0"
             }
         },
-        "node_modules/marchingsquares": {
-            "version": "1.3.3",
-            "resolved": "https://registry.npmjs.org/marchingsquares/-/marchingsquares-1.3.3.tgz",
-            "integrity": "sha512-gz6nNQoVK7Lkh2pZulrT4qd4347S/toG9RXH2pyzhLgkL5mLkBoqgv4EvAGXcV0ikDW72n/OQb3Xe8bGagQZCg=="
-        },
-        "node_modules/material-colors": {
-            "version": "1.2.6",
-            "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
-            "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
-        },
         "node_modules/mdn-data": {
             "version": "2.0.14",
             "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -7714,14 +5244,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/mimic-response": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-            "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/mini-css-extract-plugin": {
             "version": "2.9.2",
             "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz",
@@ -7796,17 +5318,14 @@
             "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
         },
         "node_modules/minimatch": {
-            "version": "7.4.6",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
-            "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dependencies": {
-                "brace-expansion": "^2.0.1"
+                "brace-expansion": "^1.1.7"
             },
             "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
+                "node": "*"
             }
         },
         "node_modules/minimist": {
@@ -7904,47 +5423,9 @@
             "dependencies": {
                 "dns-packet": "^5.2.2",
                 "thunky": "^1.0.2"
-            },
-            "bin": {
-                "multicast-dns": "cli.js"
-            }
-        },
-        "node_modules/multimatch": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
-            "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
-            "dependencies": {
-                "@types/minimatch": "^3.0.3",
-                "array-differ": "^3.0.0",
-                "array-union": "^2.1.0",
-                "arrify": "^2.0.1",
-                "minimatch": "^3.0.4"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/multimatch/node_modules/brace-expansion": {
-            "version": "1.1.11",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
-            }
-        },
-        "node_modules/multimatch/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dependencies": {
-                "brace-expansion": "^1.1.7"
-            },
-            "engines": {
-                "node": "*"
+            },
+            "bin": {
+                "multicast-dns": "cli.js"
             }
         },
         "node_modules/mz": {
@@ -8145,16 +5626,17 @@
             "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
         },
         "node_modules/ol": {
-            "version": "9.2.4",
-            "resolved": "https://registry.npmjs.org/ol/-/ol-9.2.4.tgz",
-            "integrity": "sha512-bsbu4ObaAlbELMIZWnYEvX4Z9jO+OyCBshtODhDKmqYTPEfnKOX3RieCr97tpJkqWTZvyV4tS9UQDvHoCdxS+A==",
+            "version": "10.3.1",
+            "resolved": "https://registry.npmjs.org/ol/-/ol-10.3.1.tgz",
+            "integrity": "sha512-D1nRQVLOBCRempVqBFV8pSI5H13BtnhuLDjGl+3NKdMOFyjx/UqRX/tcMspEw3LhFOSPWn1Ev+1KIRV8AlHM7A==",
             "dependencies": {
+                "@types/rbush": "4.0.0",
                 "color-rgba": "^3.0.0",
                 "color-space": "^2.0.1",
-                "earcut": "^2.2.3",
-                "geotiff": "^2.0.7",
-                "pbf": "3.2.1",
-                "rbush": "^3.0.1"
+                "earcut": "^3.0.0",
+                "geotiff": "^2.1.3",
+                "pbf": "4.0.1",
+                "rbush": "^4.0.0"
             },
             "funding": {
                 "type": "opencollective",
@@ -8288,14 +5770,6 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
-        "node_modules/p-cancelable": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
-            "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/p-finally": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -8401,14 +5875,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/parse-passwd": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-            "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/parse5": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -8428,13 +5894,9 @@
             "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
         },
         "node_modules/parsedbf": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/parsedbf/-/parsedbf-1.1.1.tgz",
-            "integrity": "sha512-jndFmhcrzSAGCMccM4za+3bIRxqV6L2doQjYN8Xgz0kZUpyBT5I8Gs6Y6hL5GcO2rih9OBkPcLlx2uBoLi8R8Q==",
-            "dependencies": {
-                "iconv-lite": "^0.4.15",
-                "text-encoding-polyfill": "^0.6.7"
-            }
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/parsedbf/-/parsedbf-2.0.0.tgz",
+            "integrity": "sha512-WNjKn/cwgGBkXqQLif+2VMEahcRHkBRU0/RfBWZ7Vj7snRNNW63yW1mVuuHRDyXTRxuGCzAHHBcr/Fn+U/bXjQ=="
         },
         "node_modules/parseurl": {
             "version": "1.3.3",
@@ -8483,9 +5945,9 @@
             "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
         },
         "node_modules/path-to-regexp": {
-            "version": "0.1.10",
-            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-            "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+            "version": "0.1.12",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+            "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
         },
         "node_modules/path-type": {
             "version": "4.0.0",
@@ -8496,11 +5958,10 @@
             }
         },
         "node_modules/pbf": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
-            "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+            "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
             "dependencies": {
-                "ieee754": "^1.1.12",
                 "resolve-protobuf-schema": "^2.1.0"
             },
             "bin": {
@@ -8523,78 +5984,6 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
-        "node_modules/pkg-dir": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-            "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-            "dependencies": {
-                "find-up": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/pkg-dir/node_modules/find-up": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-            "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-            "dependencies": {
-                "locate-path": "^5.0.0",
-                "path-exists": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/pkg-dir/node_modules/locate-path": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-            "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-            "dependencies": {
-                "p-locate": "^4.1.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/pkg-dir/node_modules/p-limit": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-            "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-            "dependencies": {
-                "p-try": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/pkg-dir/node_modules/p-locate": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-            "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-            "dependencies": {
-                "p-limit": "^2.2.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/please-upgrade-node": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
-            "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-            "dependencies": {
-                "semver-compare": "^1.0.0"
-            }
-        },
-        "node_modules/point-in-polygon": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
-            "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
-        },
         "node_modules/point-in-polygon-hao": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.3.tgz",
@@ -8603,11 +5992,6 @@
                 "robust-predicates": "^3.0.2"
             }
         },
-        "node_modules/point-in-polygon-hao/node_modules/robust-predicates": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
-            "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
-        },
         "node_modules/polygon-clipping": {
             "version": "0.15.7",
             "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz",
@@ -8617,11 +6001,6 @@
                 "splaytree": "^3.1.0"
             }
         },
-        "node_modules/polygon-clipping/node_modules/robust-predicates": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
-            "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
-        },
         "node_modules/portfinder": {
             "version": "1.0.32",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -9186,15 +6565,15 @@
             }
         },
         "node_modules/prettier": {
-            "version": "2.8.8",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-            "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-            "devOptional": true,
+            "version": "3.4.2",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+            "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+            "dev": true,
             "bin": {
-                "prettier": "bin-prettier.js"
+                "prettier": "bin/prettier.cjs"
             },
             "engines": {
-                "node": ">=10.13.0"
+                "node": ">=14"
             },
             "funding": {
                 "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -9407,9 +6786,9 @@
             }
         },
         "node_modules/quickselect": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-            "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+            "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
         },
         "node_modules/randombytes": {
             "version": "2.1.0",
@@ -9442,11 +6821,11 @@
             }
         },
         "node_modules/rbush": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
-            "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz",
+            "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
             "dependencies": {
-                "quickselect": "^2.0.0"
+                "quickselect": "^3.0.0"
             }
         },
         "node_modules/read-pkg": {
@@ -9560,21 +6939,10 @@
                 "node": ">=8.10.0"
             }
         },
-        "node_modules/rechoir": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
-            "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
-            "dependencies": {
-                "resolve": "^1.20.0"
-            },
-            "engines": {
-                "node": ">= 10.13.0"
-            }
-        },
         "node_modules/regenerator-runtime": {
-            "version": "0.14.1",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+            "version": "0.10.5",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+            "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
         },
         "node_modules/relateurl": {
             "version": "0.2.7",
@@ -9612,11 +6980,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/require-package-name": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
-            "integrity": "sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q=="
-        },
         "node_modules/requires-port": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -9638,40 +7001,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/resolve-alpn": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
-            "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
-        },
-        "node_modules/resolve-cwd": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-            "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-            "dependencies": {
-                "resolve-from": "^5.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/resolve-dir": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
-            "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
-            "dependencies": {
-                "expand-tilde": "^2.0.0",
-                "global-modules": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/resolve-from": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-            "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
             "engines": {
-                "node": ">=8"
+                "node": ">=4"
             }
         },
         "node_modules/resolve-protobuf-schema": {
@@ -9682,17 +7017,6 @@
                 "protocol-buffers-schema": "^3.3.1"
             }
         },
-        "node_modules/responselike": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
-            "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
-            "dependencies": {
-                "lowercase-keys": "^2.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/restore-cursor": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -9738,9 +7062,9 @@
             }
         },
         "node_modules/robust-predicates": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
-            "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg=="
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+            "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
         },
         "node_modules/run-parallel": {
             "version": "1.2.0",
@@ -9829,11 +7153,6 @@
                 "semver": "bin/semver.js"
             }
         },
-        "node_modules/semver-compare": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-            "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
-        },
         "node_modules/send": {
             "version": "0.19.0",
             "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
@@ -10038,12 +7357,12 @@
             }
         },
         "node_modules/shpjs": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/shpjs/-/shpjs-5.0.2.tgz",
-            "integrity": "sha512-vop/HhKgU3R7jY9hg6XP/TJaZLvg3Z/ZTt55LI/B2q931Rc7cNaRfmLjQwaGiJ+QOv9rsKrnecuAbaSdtbaFwQ==",
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/shpjs/-/shpjs-6.1.0.tgz",
+            "integrity": "sha512-uaUpod7uIWetJK80yiiedZ3x4z9ZAPgDVT89N27+8F97Z8ZOqmu88P96I6CBC8N+YyERqdneZNT/wNFUEnzNpw==",
             "dependencies": {
-                "jszip": "^3.10.1",
-                "parsedbf": "^1.1.0",
+                "but-unzip": "^0.1.4",
+                "parsedbf": "^2.0.0",
                 "proj4": "^2.1.4"
             }
         },
@@ -10082,11 +7401,6 @@
                 "node": ">= 10"
             }
         },
-        "node_modules/skmeans": {
-            "version": "0.9.7",
-            "resolved": "https://registry.npmjs.org/skmeans/-/skmeans-0.9.7.tgz",
-            "integrity": "sha512-hNj1/oZ7ygsfmPZ7ZfN5MUBRoGg1gtpnImuJBgLO0ljQ67DtJuiQaiYdS4lUA6s0KCwnPhGivtC/WRwIZLkHyg=="
-        },
         "node_modules/slash": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -10105,6 +7419,14 @@
                 "websocket-driver": "^0.7.4"
             }
         },
+        "node_modules/sockjs/node_modules/uuid": {
+            "version": "8.3.2",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+            "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+            "bin": {
+                "uuid": "dist/bin/uuid"
+            }
+        },
         "node_modules/sortablejs": {
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
@@ -10209,11 +7531,6 @@
             "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
             "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A=="
         },
-        "node_modules/sprintf-js": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-            "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
-        },
         "node_modules/ssri": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -10386,6 +7703,22 @@
                 "url": "https://github.com/sponsors/limonte"
             }
         },
+        "node_modules/synckit": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
+            "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
+            "dev": true,
+            "dependencies": {
+                "@pkgr/core": "^0.1.0",
+                "tslib": "^2.6.2"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/unts"
+            }
+        },
         "node_modules/tapable": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -10395,9 +7728,9 @@
             }
         },
         "node_modules/terser": {
-            "version": "5.36.0",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz",
-            "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==",
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
+            "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.3",
                 "acorn": "^8.8.2",
@@ -10449,17 +7782,6 @@
             "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
             "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
         },
-        "node_modules/text-encoding-polyfill": {
-            "version": "0.6.7",
-            "resolved": "https://registry.npmjs.org/text-encoding-polyfill/-/text-encoding-polyfill-0.6.7.tgz",
-            "integrity": "sha512-/DZ1XJqhbqRkCop6s9ZFu8JrFRwmVuHg4quIRm+ziFkR3N3ec6ck6yBvJ1GYeEQZhLVwRW0rZE+C3SSJpy0RTg=="
-        },
-        "node_modules/text-table": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-            "dev": true
-        },
         "node_modules/thenify": {
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -10501,6 +7823,17 @@
                 "webpack": "^4.27.0 || ^5.0.0"
             }
         },
+        "node_modules/thread-loader/node_modules/json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "bin": {
+                "json5": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/thread-loader/node_modules/loader-utils": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
@@ -10543,40 +7876,6 @@
                 "node": ">=0.6"
             }
         },
-        "node_modules/topojson-client": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
-            "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
-            "dependencies": {
-                "commander": "2"
-            },
-            "bin": {
-                "topo2geo": "bin/topo2geo",
-                "topomerge": "bin/topomerge",
-                "topoquantize": "bin/topoquantize"
-            }
-        },
-        "node_modules/topojson-client/node_modules/commander": {
-            "version": "2.20.3",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
-        "node_modules/topojson-server": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/topojson-server/-/topojson-server-3.0.1.tgz",
-            "integrity": "sha512-/VS9j/ffKr2XAOjlZ9CgyyeLmgJ9dMwq6Y0YEON8O7p/tGGk+dCWnrE03zEdu7i4L7YsFZLEPZPzCvcB7lEEXw==",
-            "dependencies": {
-                "commander": "2"
-            },
-            "bin": {
-                "geo2topo": "bin/geo2topo"
-            }
-        },
-        "node_modules/topojson-server/node_modules/commander": {
-            "version": "2.20.3",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
         "node_modules/totalist": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -10709,11 +8008,15 @@
             }
         },
         "node_modules/uuid": {
-            "version": "8.3.2",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-            "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+            "version": "11.0.3",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz",
+            "integrity": "sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==",
+            "funding": [
+                "https://github.com/sponsors/broofa",
+                "https://github.com/sponsors/ctavan"
+            ],
             "bin": {
-                "uuid": "dist/bin/uuid"
+                "uuid": "dist/esm/bin/uuid"
             }
         },
         "node_modules/validate-npm-package-license": {
@@ -10734,13 +8037,23 @@
             }
         },
         "node_modules/vue": {
-            "version": "2.7.16",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
-            "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
-            "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+            "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
             "dependencies": {
-                "@vue/compiler-sfc": "2.7.16",
-                "csstype": "^3.1.0"
+                "@vue/compiler-dom": "3.5.13",
+                "@vue/compiler-sfc": "3.5.13",
+                "@vue/runtime-dom": "3.5.13",
+                "@vue/server-renderer": "3.5.13",
+                "@vue/shared": "3.5.13"
+            },
+            "peerDependencies": {
+                "typescript": "*"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
             }
         },
         "node_modules/vue-hot-reload-api": {
@@ -10784,25 +8097,18 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
-        "node_modules/vue-resource": {
-            "version": "1.5.3",
-            "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.3.tgz",
-            "integrity": "sha512-REhTuEuYSpwmEH/VN4fgDQVC/VXxDK/xsguuiDPnINxOwy1s0CSu//p++osTUkiAXi6d/vptwBpb0AcBIDsXzw==",
-            "dependencies": {
-                "got": ">=8.0 <12.0"
-            }
-        },
         "node_modules/vue-router": {
-            "version": "2.8.1",
-            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-2.8.1.tgz",
-            "integrity": "sha512-MC4jacHBhTPKtmcfzvaj2N7g6jgJ/Z/eIjZdt+yUaUOM1iKC0OUIlO/xCtz6OZFFTNUJs/1YNro2GN/lE+nOXA=="
-        },
-        "node_modules/vue-select": {
-            "version": "3.20.3",
-            "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.20.3.tgz",
-            "integrity": "sha512-aDaq4rPBrDavh7NDLgAP8e0G8UNElh6vO3itGWjhf1y9KaGRWtFw21cUkSRHGgj0V5FlCG4EaRb1xdE/C9J+eg==",
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+            "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+            "dependencies": {
+                "@vue/devtools-api": "^6.6.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
             "peerDependencies": {
-                "vue": "2.x"
+                "vue": "^3.2.0"
             }
         },
         "node_modules/vue-style-loader": {
@@ -10824,24 +8130,6 @@
             "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
         },
-        "node_modules/vue/node_modules/@vue/compiler-sfc": {
-            "version": "2.7.16",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
-            "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
-            "dependencies": {
-                "@babel/parser": "^7.23.5",
-                "postcss": "^8.4.14",
-                "source-map": "^0.6.1"
-            },
-            "optionalDependencies": {
-                "prettier": "^1.18.2 || ^2.0.0"
-            }
-        },
-        "node_modules/watch-size": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/watch-size/-/watch-size-2.0.0.tgz",
-            "integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ=="
-        },
         "node_modules/watchpack": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
@@ -10881,15 +8169,15 @@
             "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
         },
         "node_modules/webpack": {
-            "version": "5.96.1",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.96.1.tgz",
-            "integrity": "sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==",
+            "version": "5.97.1",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.1.tgz",
+            "integrity": "sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==",
             "dependencies": {
                 "@types/eslint-scope": "^3.7.7",
                 "@types/estree": "^1.0.6",
-                "@webassemblyjs/ast": "^1.12.1",
-                "@webassemblyjs/wasm-edit": "^1.12.1",
-                "@webassemblyjs/wasm-parser": "^1.12.1",
+                "@webassemblyjs/ast": "^1.14.1",
+                "@webassemblyjs/wasm-edit": "^1.14.1",
+                "@webassemblyjs/wasm-parser": "^1.14.1",
                 "acorn": "^8.14.0",
                 "browserslist": "^4.24.0",
                 "chrome-trace-event": "^1.0.2",
@@ -10971,58 +8259,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/webpack-cli": {
-            "version": "5.1.4",
-            "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
-            "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
-            "dependencies": {
-                "@discoveryjs/json-ext": "^0.5.0",
-                "@webpack-cli/configtest": "^2.1.1",
-                "@webpack-cli/info": "^2.0.2",
-                "@webpack-cli/serve": "^2.0.5",
-                "colorette": "^2.0.14",
-                "commander": "^10.0.1",
-                "cross-spawn": "^7.0.3",
-                "envinfo": "^7.7.3",
-                "fastest-levenshtein": "^1.0.12",
-                "import-local": "^3.0.2",
-                "interpret": "^3.1.1",
-                "rechoir": "^0.8.0",
-                "webpack-merge": "^5.7.3"
-            },
-            "bin": {
-                "webpack-cli": "bin/cli.js"
-            },
-            "engines": {
-                "node": ">=14.15.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "5.x.x"
-            },
-            "peerDependenciesMeta": {
-                "@webpack-cli/generators": {
-                    "optional": true
-                },
-                "webpack-bundle-analyzer": {
-                    "optional": true
-                },
-                "webpack-dev-server": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/webpack-cli/node_modules/commander": {
-            "version": "10.0.1",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-            "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-            "engines": {
-                "node": ">=14"
-            }
-        },
         "node_modules/webpack-dev-middleware": {
             "version": "5.3.4",
             "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index 1c5df338..dda223b7 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -2,63 +2,55 @@
     "name": "boranga",
     "version": "1.0.0",
     "description": "The boranga web application (DBCA)",
-    "main": "index.js",
+    "author": "ASI <asi@dbca.wa.gov.au>",
+    "private": true,
     "scripts": {
         "build": "vue-cli-service build",
-        "test": "test",
         "serve": "vue-cli-service serve"
     },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dbca-wa/boranga.git"
-    },
-    "author": "DBCA",
-    "license": "BSD-3-Clause",
-    "bugs": {
-        "url": "https://github.com/dbca-wa/boranga/issues"
-    },
-    "homepage": "https://github.com/dbca-wa/boranga#readme",
     "dependencies": {
-        "@babel/runtime": "^7.22.10",
-        "@fortawesome/fontawesome-free": "^6.4.2",
-        "@riophae/vue-treeselect": "^0.4.0",
-        "@turf/turf": "^7.0.0",
-        "@vue/cli-service": "^5.0.8",
+        "@fortawesome/fontawesome-free": "^6.0",
+        "@turf/area": "^7.1.0",
+        "@turf/boolean-intersects": "^7.1.0",
+        "@turf/boolean-within": "^7.1.0",
+        "@turf/helpers": "^7.1.0",
+        "@turf/intersect": "^7.1.0",
+        "@vue/cli-service": "^5.0.4",
         "babel-polyfill": "^6.26.0",
-        "buffer": "^6.0.3",
-        "datatables.net-bs5": "^1.13.6",
-        "datatables.net-buttons": "^2.4.1",
-        "datatables.net-buttons-bs5": "^2.4.1",
-        "datatables.net-responsive-bs5": "^2.5.0",
-        "depcheck": "^1.4.7",
-        "jquery": "^3.7.0",
-        "jquery-easing": "^0.0.1",
-        "jquery-validation": "^1.19.5",
-        "jszip": "^3.10.1",
+        "datatables.net-bs5": "^2.0.0",
+        "datatables.net-buttons": "^3.0.0",
+        "datatables.net-buttons-bs5": "^3.0.0",
+        "datatables.net-responsive-bs5": "^3.0.2",
+        "jquery": "^3.6",
+        "jquery-validation": "^1.21.0",
+        "jszip": "^3.9",
+        "lodash": "^4.17",
         "moment-locales-webpack-plugin": "^1.2.0",
         "moment-range": "^4.0.2",
-        "ol": "^9.2",
-        "ol-ext": "^4.0.18",
-        "postcss-loader": "^6.2.1",
-        "select2": "*",
+        "ol": "^10.1",
+        "ol-ext": "^4.0.24",
+        "select2": "^4.1.0-rc.0",
         "select2-bootstrap-5-theme": "^1.3.0",
-        "shpjs": "^5.0.0",
-        "sortablejs": "^1.15.3",
-        "sweetalert2": "^11.7.27",
-        "vue": "^2.7.16",
-        "vue-resource": "^1.5.3",
-        "vue-router": "^2.8.1",
-        "vue-select": "^3.20.2",
-        "webpack": "^5.88.2",
-        "webpack-cli": "^5.1.4"
+        "shpjs": "^6.1.0",
+        "sortablejs": "^1.15.6",
+        "sweetalert2": "^11.4",
+        "uuid": "^11.0",
+        "vue": "^3.4",
+        "vue-router": "^4.0"
     },
     "engines": {
-        "node": ">= 20.11.1"
+        "node": ">= 20.0.0",
+        "npm": ">= 10.0.0"
     },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 8"
+    ],
     "devDependencies": {
-        "eslint": "^8.15.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-plugin-prettier": "^4.2.1",
-        "prettier": "^2.8.4"
+        "eslint": "^9.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "prettier": "^3.3"
     }
 }

From 674148a83b93aaa319e754a553cc68b25657d148 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:09:47 +0800
Subject: [PATCH 020/138] Minor fixes to vue config.

---
 boranga/frontend/boranga/vue.config.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/vue.config.js b/boranga/frontend/boranga/vue.config.js
index 27d1823f..620af746 100644
--- a/boranga/frontend/boranga/vue.config.js
+++ b/boranga/frontend/boranga/vue.config.js
@@ -21,7 +21,7 @@ module.exports = defineConfig({
         );
         config.resolve.alias.set(
             '@static-root',
-            path.resolve(__dirname, '../../../staticfiles_ll/')
+            path.resolve(__dirname, '../../../staticfiles/')
         );
     },
     configureWebpack: {
@@ -32,6 +32,11 @@ module.exports = defineConfig({
             },
         },
         plugins: [
+            new webpack.DefinePlugin({
+                // Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
+                // https://github.com/vuejs/vue-cli/pull/7443
+                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+            }),
             new webpack.ProvidePlugin({
                 $: 'jquery',
                 moment: 'moment',

From 2601e931968c41574b8c7437c60972e975614bdf Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:10:01 +0800
Subject: [PATCH 021/138] Rework main.js for Vue 3.

---
 boranga/frontend/boranga/src/main.js | 60 ++++++++++++++--------------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/boranga/frontend/boranga/src/main.js b/boranga/frontend/boranga/src/main.js
index b0a6ed16..3cfb0586 100755
--- a/boranga/frontend/boranga/src/main.js
+++ b/boranga/frontend/boranga/src/main.js
@@ -1,6 +1,4 @@
-import Vue from 'vue'
-import resource from 'vue-resource'
-import jszip from 'jszip';
+import { createApp } from 'vue';
 import App from './App'
 import router from './router'
 import helpers from '@/utils/helpers'
@@ -10,7 +8,7 @@ import 'datatables.net-bs5';
 import 'datatables.net-buttons-bs5';
 import 'datatables.net-responsive-bs5';
 import 'datatables.net-buttons/js/dataTables.buttons.js';
-import jsZip from 'jszip';
+const jsZip = require('jszip');
 window.JSZip = jsZip;
 import 'datatables.net-buttons/js/buttons.html5.js';
 import 'select2';
@@ -23,36 +21,36 @@ import 'select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css';
 import '@/../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css';
 import '@/../node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css';
 
-import api_endpoints from './api'
-
 require('@/../node_modules/@fortawesome/fontawesome-free/css/all.min.css')
 require('@/../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css')
 
 extendMoment(moment);
 
-
-Vue.config.devtools = true;
-Vue.config.productionTip = false
-Vue.use( resource );
-
 // Add CSRF Token to every request
-Vue.http.interceptors.push( function ( request, next ) {
-  // modify headers
-  if ( request.url != api_endpoints.countries ) {
-    request.headers.set( 'X-CSRFToken', helpers.getCookie( 'csrftoken' ) );
-  }
-
-  // continue to next interceptor
-  next();
-} );
-
-
-/* eslint-disable no-new */
-new Vue( {
-  el: '#app',
-  router,
-  template: '<App/>',
-  components: {
-    App
-  }
-} )
+const customHeaders = new Headers({
+    'X-CSRFToken': helpers.getCookie('csrftoken'),
+});
+const customHeadersJSON = new Headers({
+    'X-CSRFToken': helpers.getCookie('csrftoken'),
+    'Content-Type': 'application/json',
+});
+
+const app = createApp(App);
+
+const fetch = window.fetch;
+window.fetch = ((originalFetch) => {
+    return (...args) => {
+        if (args.length > 1) {
+            if (typeof args[1].body === 'string') {
+                args[1].headers = customHeadersJSON;
+            } else {
+                args[1].headers = customHeaders;
+            }
+        }
+        const result = originalFetch.apply(this, args);
+        return result;
+    };
+})(fetch);
+
+app.use(router);
+router.isReady().then(() => app.mount('#app'));

From 684a8a969fa7de7e0d89fa86810b8ed1413715a8 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:10:18 +0800
Subject: [PATCH 022/138] Remove unused file.

---
 .../boranga/src/utils/cache_helper.js         | 142 ------------------
 1 file changed, 142 deletions(-)
 delete mode 100644 boranga/frontend/boranga/src/utils/cache_helper.js

diff --git a/boranga/frontend/boranga/src/utils/cache_helper.js b/boranga/frontend/boranga/src/utils/cache_helper.js
deleted file mode 100644
index 9e59851e..00000000
--- a/boranga/frontend/boranga/src/utils/cache_helper.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import localforage from "localforage";
-import Vue from 'vue';
-
-/*
- * localforage prefers IndexedDB storage, consisting of key/value pairs (npm install --save localforage)
- * localforage api ref: https://localforage.github.io/localForage/
- * Each store should be nested within a system-level db (dbName)
- * Cache expiry measured in milliseconds
- * key is based on a Django model "id" column, and must be passed to this method as a string
- * url retrieval logic targeted to Django REST Framework detail_route and list_route methods
- * all records are stored in an array [<timestamp>, <value>]
- * stores should be set either as a list (getSetCacheList) or as individual records (getSetCache)
- */
-let dbName = 'WildlifeCompliance';
-const timeNow = Date.now();
-let expiryDiff = 86400000;  // 1 day = 86400000 milliseconds;
-
-
-module.exports = {
-    getSetCache: async (store_name, key, url, expiry) => {
-        
-        let storeInstance = localforage.createInstance({
-            name: dbName,
-            storeName: store_name,
-          });
-        if (expiry) {
-            expiryDiff = expiry;
-        }
-        await storeInstance.ready();
-
-        try {
-            let retrieved_val = await storeInstance.getItem(
-              key);
-            if (retrieved_val) {
-            
-                let timeDiff = timeNow - retrieved_val[0];
-                // ensure cached value is not stale
-                if (timeDiff < expiryDiff) {
-                    return retrieved_val[1];
-                }
-            }
-            else {
-                const returnedFromUrl = await Vue.http.get(url);
-                // url returns individual record (eg. @detail_route)
-                if (returnedFromUrl.body.id) {
-                    // assumes that every record has an id element
-                    let valToStore = [timeNow, returnedFromUrl.body];
-                    let retrieved_val = await storeInstance.setItem(
-                        returnedFromUrl.body.id.toString(),
-                        valToStore
-                    );
-                    if (retrieved_val) {
-                        return retrieved_val[1];
-                    }
-                } 
-            }
-            // ensure cached value is not stale (1 week based on default expiry date)
-            let store_keys = await storeInstance.keys();
-            if (store_keys.length > 0) {
-                for (let store_key of store_keys) {
-                    let this_entry = await storeInstance.getItem(store_key);
-                    let timeDiff = timeNow - this_entry[0];
-                    if (timeDiff > expiryDiff * 7) {
-                        await storeInstance.removeItem(store_key);
-                    }
-                }
-            }
-        } catch(err) {
-            // on cache failure, request data from backend directly
-            const returnedFromUrl = await Vue.http.get(url);
-            return returnedFromUrl.body;
-        }
-    },
-    getSetCacheList: async (store_name, url, expiry) => {
-        try {
-            let returned_list = [];  
-            if (expiry) {
-                expiryDiff = expiry;
-            }
-            let storeInstance = localforage.createInstance({
-                name: dbName,
-                storeName: store_name,
-            });
-
-            let store_keys = await storeInstance.keys();
-            // existing store
-            if (store_keys.length > 0) {
-                // Clear store if stale
-                // We only need to check the first entry, since all store values are written at the same time
-                let firstEntry = await storeInstance.getItem(store_keys[0]);
-                let timeDiff = timeNow - firstEntry[0];
-                // ensure cached value is not stale
-                if (timeDiff > expiryDiff) {
-                    storeInstance.clear();
-                } else {
-                    for (let store_key of store_keys) {
-                        let this_val = await storeInstance.getItem(store_key);
-                        if (this_val) {
-                            returned_list.push(this_val[1]);
-                        }
-                    }
-                }
-            } 
-            let fresh_keys = await storeInstance.keys();
-            if (fresh_keys.length === 0) {
-            // else {    
-            // empty store - get data from url
-                const returnedFromUrl = await Vue.http.get(url);
-                // ensure store is empty
-                await storeInstance.clear();
-                // populate store - switch accounts for DRF method using @renderer_classes((JSONRenderer,))
-                if (returnedFromUrl.body.results) {
-                for (let record of returnedFromUrl.body.results) {
-                    let new_val = await storeInstance.setItem(
-                        record.id.toString(), 
-                        [timeNow, record]
-                        );
-                    returned_list.push(new_val[1]);
-                }
-                } else {
-                    for (let record of returnedFromUrl.body) {
-                    let new_val = await storeInstance.setItem(
-                        record.id.toString(), 
-                        [timeNow, record]
-                        );
-                    returned_list.push(new_val[1]);
-                }
-                }
-            }
-            return returned_list;
-
-        } catch(err) {
-            // on cache failure, request data from backend directly
-            const returnedFromDb = await Vue.http.get(url);
-            if (returnedFromDb.body.results) {
-                return returnedFromDb.body.results;
-            } else {
-                return returnedFromDb.body;
-            }
-        }
-    }
-};

From 57b9932324c8475d76325dd63173335021cc6feb Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:11:13 +0800
Subject: [PATCH 023/138] Adjust routes to work with vue 3.

---
 .../src/components/external/routes/index.js   | 41 +++-------------
 .../src/components/internal/routes/index.js   | 49 +++++--------------
 boranga/frontend/boranga/src/router/index.js  | 11 +++--
 3 files changed, 25 insertions(+), 76 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/external/routes/index.js b/boranga/frontend/boranga/src/components/external/routes/index.js
index b322f039..d00793a7 100755
--- a/boranga/frontend/boranga/src/components/external/routes/index.js
+++ b/boranga/frontend/boranga/src/components/external/routes/index.js
@@ -1,3 +1,5 @@
+import { RouterView } from 'vue-router';
+
 import SpeciesCommunitiesDash from '../species_communities/dashboard.vue'
 import ExternalConservationStatusDash from '../conservation_status/dashboard.vue'
 
@@ -16,12 +18,7 @@ import OCRProposalSubmit from '../occurrence/ocr_proposal_submit.vue'
 export default
     {
         path: '/external',
-        component:
-        {
-            render(c) {
-                return c('router-view')
-            }
-        },
+        component: RouterView,
         children: [
             {
                 path: 'species-communities',
@@ -30,26 +27,12 @@ export default
             },
             {
                 path: 'species-communities',
-                component: {
-                    render(c) {
-                        return c('router-view')
-                    },
-                },
+                component: RouterView,
                 children: [
                     {
                         path: ':species_community_id',
-                        component: {
-                            render(c) {
-                                return c('router-view')
-                            },
-                        },
-                        children: [
-                            {
-                                path: '/',
-                                component: ExternalSpeciesCommunity,
-                                name: "external-species-communities"
-                            },
-                        ]
+                        name: "external-species-communities",
+                        component: ExternalSpeciesCommunity,
                     },
                 ]
             },
@@ -60,11 +43,7 @@ export default
             },
             {
                 path: 'occurrence-report',
-                component: {
-                    render(c) {
-                        return c('router-view')
-                    },
-                },
+                component: RouterView,
                 children: [
                     {
                         path: ':occurrence_report_id',
@@ -90,11 +69,7 @@ export default
             },
             {
                 path: 'conservation-status',
-                component: {
-                    render(c) {
-                        return c('router-view')
-                    },
-                },
+                component: RouterView,
                 children: [
                     {
                         path: ':conservation_status_id',
diff --git a/boranga/frontend/boranga/src/components/internal/routes/index.js b/boranga/frontend/boranga/src/components/internal/routes/index.js
index d0388997..7b556c9f 100755
--- a/boranga/frontend/boranga/src/components/internal/routes/index.js
+++ b/boranga/frontend/boranga/src/components/internal/routes/index.js
@@ -1,3 +1,5 @@
+import { RouterView } from 'vue-router';
+
 import User from '../users/manage.vue'
 import SpeciesCommunitiesDash from '../species_communities/dashboard.vue'
 import SpeciesCommunities from '../species_communities/species_communities.vue'
@@ -17,12 +19,7 @@ import BulkImportSchema from '../occurrence/bulk_import_schema.vue'
 export default
     {
         path: '/internal',
-        component:
-        {
-            render(c) {
-                return c('router-view')
-            }
-        },
+        component: RouterView,
         children: [
             {
                 path: '/',
@@ -60,11 +57,7 @@ export default
             },
             {
                 path: 'occurrence-report',
-                component: {
-                    render(c) {
-                        return c('router-view')
-                    },
-                },
+                component: RouterView,
                 children: [
                     {
                         path: 'bulk_import_schema/:bulk_import_schema_id',
@@ -83,14 +76,10 @@ export default
                     },
                     {
                         path: ':occurrence_report_id',
-                        component: {
-                            render(c) {
-                                return c('router-view')
-                            },
-                        },
+                        component: RouterView,
                         children: [
                             {
-                                path: '/',
+                                path: '',
                                 component: OccurrenceReport,
                                 name: "internal-occurrence-report-detail",
                             },
@@ -105,11 +94,7 @@ export default
             },
             {
                 path: 'users',
-                component: {
-                    render(c) {
-                        return c('router-view')
-                    }
-                },
+                component: RouterView,
                 children: [
                     {
                         path: ':user_id',
@@ -120,11 +105,7 @@ export default
             },
             {
                 path: 'species-communities',
-                component: {
-                    render(c) {
-                        return c('router-view')
-                    },
-                },
+                component: RouterView,
                 children: [
                     {
                         path: ':species_community_id',
@@ -135,22 +116,14 @@ export default
             },
             {
                 path: 'conservation-status',
-                component: {
-                    render(c) {
-                        return c('router-view')
-                    },
-                },
+                component: RouterView,
                 children: [
                     {
                         path: ':conservation_status_id',
-                        component: {
-                            render(c) {
-                                return c('router-view')
-                            },
-                        },
+                        component: RouterView,
                         children: [
                             {
-                                path: '/',
+                                path: '',
                                 component: ConservationStatus,
                                 name: "internal-conservation-status"
                             },
diff --git a/boranga/frontend/boranga/src/router/index.js b/boranga/frontend/boranga/src/router/index.js
index 09350491..0885209a 100755
--- a/boranga/frontend/boranga/src/router/index.js
+++ b/boranga/frontend/boranga/src/router/index.js
@@ -1,12 +1,11 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
 import Home from '@/components/internal/Home'
 import external_routes from '@/components/external/routes'
 import internal_routes from '@/components/internal/routes'
-Vue.use(Router)
 
-export default new Router({
-    mode: 'history',
+const router = createRouter({
+    history: createWebHistory(),
+    strict: false,
     routes: [
         {
             path: '/',
@@ -16,3 +15,5 @@ export default new Router({
         internal_routes
     ]
 })
+
+export default router;

From 7bcf2a511969be711b055cee18f4b6fb0093afb5 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:12:32 +0800
Subject: [PATCH 024/138] Changes to vue component files to support vue 3.

---
 .../src/components/common/SelectFilter.vue    |   9 +-
 .../src/components/common/add_comm_log.vue    |  12 +-
 .../src/components/common/add_contact.vue     |  37 +-
 .../src/components/common/add_document.vue    |  22 +-
 .../common/communities_dashboard.vue          |  29 +-
 .../conservation_status/community_status.vue  |  58 +-
 .../conservation_status/cs_documents.vue      |  21 +-
 .../conservation_status/cs_more_referrals.vue |  18 +-
 .../conservation_status/species_status.vue    |  64 +-
 ...onservation_status_community_dashboard.vue |  33 +-
 .../conservation_status_fauna_dashboard.vue   |  33 +-
 .../conservation_status_flora_dashboard.vue   |  33 +-
 .../src/components/common/display_history.vue |  29 +-
 .../src/components/common/help_text.vue       |  13 +-
 .../common/invite_external_referee.vue        |  12 +-
 .../components/common/meeting_side_panel.vue  |  23 +-
 .../common/occurrence/add_contact_detail.vue  |  20 +-
 .../common/occurrence/add_observer_detail.vue |  16 +-
 .../common/occurrence/animal_observation.vue  |  13 +-
 .../occurrence/community_occurrence.vue       |  12 +-
 .../common/occurrence/contact_datatable.vue   |  18 +-
 .../common/occurrence/observer_datatable.vue  |  18 +-
 .../common/occurrence/occ_documents.vue       |  21 +-
 .../common/occurrence/occ_habitat.vue         |  66 +-
 .../common/occurrence/occ_locations.vue       |  11 +-
 .../common/occurrence/occ_observation.vue     |  43 +-
 .../occurrence/occ_ocr_existing_threats.vue   | 212 +++--
 .../occurrence/occ_related_ocr_table.vue      | 131 ++--
 .../occurrence/occ_related_species_table.vue  |   4 +-
 .../common/occurrence/occ_section_modal.vue   |  12 +-
 .../common/occurrence/occ_threats.vue         |  37 +-
 .../occurrence/occurrence_report_profile.vue  |  23 +-
 .../common/occurrence/ocr_documents.vue       |  21 +-
 .../common/occurrence/ocr_habitat.vue         |  64 +-
 .../common/occurrence/ocr_location.vue        |  15 +-
 .../common/occurrence/ocr_more_referrals.vue  |  15 +-
 .../common/occurrence/ocr_observation.vue     |  28 +-
 .../occurrence/ocr_related_species_table.vue  |   4 +-
 .../common/occurrence/ocr_section_modal.vue   |  12 +-
 .../common/occurrence/ocr_threats.vue         |  33 +-
 .../common/occurrence/plant_count.vue         |  13 +-
 .../common/occurrence/species_occurrence.vue  |  16 +-
 .../common/occurrence_community_dashboard.vue |  27 +-
 .../common/occurrence_fauna_dashboard.vue     |  27 +-
 .../common/occurrence_flora_dashboard.vue     |  27 +-
 .../occurrence_report_community_dashboard.vue |  27 +-
 .../occurrence_report_fauna_dashboard.vue     |  27 +-
 .../occurrence_report_flora_dashboard.vue     |  27 +-
 .../common/species_communities/add_threat.vue |  43 +-
 .../community_documents.vue                   |  21 +-
 .../community_occ_threats.vue                 | 736 +++++++++---------
 .../species_communities/community_profile.vue |  85 +-
 .../species_communities/community_threats.vue |  33 +-
 .../species_combine/add_combine_species.vue   |   7 +-
 .../species_combine_profile.vue               |  18 +-
 .../species_communities/species_documents.vue |  21 +-
 .../species_occ_threats.vue                   | 736 +++++++++---------
 .../species_communities/species_profile.vue   |  29 +-
 .../species_split/species_split_profile.vue   |  18 +-
 .../species_communities/species_threats.vue   |  33 +-
 .../common/species_fauna_dashboard.vue        |  31 +-
 .../common/species_flora_dashboard.vue        |  31 +-
 .../src/components/common/submission.vue      |  16 +-
 .../common/submitter_information.vue          |  25 +-
 .../components/common/table_related_items.vue |   4 +-
 .../conservation_status_proposal.vue          |  50 +-
 .../conservation_status_proposal_submit.vue   |  20 +-
 .../conservation_status_proposal_table.vue    |  27 +-
 .../conservation_status/dashboard.vue         |   6 +-
 .../external/occurrence/dashboard.vue         |   6 +-
 .../occurrence/occurrence_report_proposal.vue |  70 +-
 .../occurrence/occurrence_report_table.vue    |  34 +-
 .../occurrence/ocr_proposal_submit.vue        | 123 +--
 .../species_communities/dashboard.vue         |   4 +-
 .../species_communities.vue                   |  99 ++-
 .../boranga/src/components/external/utils.js  |  12 +-
 .../src/components/forms/filefield.vue        |  15 +-
 .../components/forms/filefield_immediate.vue  |  22 +-
 .../boranga/src/components/internal/Home.vue  |  39 +-
 .../conservation_status/amendment_request.vue |  17 +-
 .../conservation_status/back_to_assessor.vue  |   8 +-
 .../conservation_status.vue                   | 361 +++++----
 .../conservation_status/dashboard.vue         |   8 +-
 .../internal/conservation_status/defer.vue    |  10 +-
 .../proposal_propose_delist.vue               |   8 +-
 .../proposal_proposed_decline.vue             |  10 +-
 .../propose_for_agenda.vue                    |   8 +-
 .../conservation_status/proposed_issuance.vue |  18 +-
 .../conservation_status/ready_for_agenda.vue  |  10 +-
 .../internal/conservation_status/referral.vue |  92 ++-
 .../internal/meetings/agenda_datatable.vue    |   6 +-
 .../components/internal/meetings/cs_queue.vue |  16 +-
 .../components/internal/meetings/meeting.vue  | 211 +++--
 .../internal/meetings/meeting_section.vue     |   8 +-
 .../internal/meetings/meetings_datatable.vue  |  29 +-
 .../components/internal/meetings/minutes.vue  |  25 +-
 .../internal/occurrence/add_site.vue          |  43 +-
 .../internal/occurrence/amendment_request.vue |  16 +-
 .../internal/occurrence/back_to_assessor.vue  |  10 +-
 .../internal/occurrence/bulk_import.vue       |  69 +-
 .../occurrence/bulk_import_schema.vue         |  98 ++-
 .../occurrence/bulk_import_schema_list.vue    |  54 +-
 .../internal/occurrence/dashboard.vue         |   8 +-
 .../internal/occurrence/occurrence.vue        | 143 ++--
 .../occurrence/occurrence_combine.vue         | 106 ++-
 .../occurrence_combine_selection.vue          |   4 +-
 .../internal/occurrence/occurrence_report.vue | 306 +++++---
 .../occurrence/occurrence_site_datatable.vue  | 101 ++-
 .../occurrence/occurrence_tenure_modal.vue    |   2 +-
 .../internal/occurrence/ocr_approve.vue       |   8 +-
 .../internal/occurrence/ocr_decline.vue       |   8 +-
 .../occurrence/ocr_propose_approve.vue        |   8 +-
 .../occurrence/ocr_propose_decline.vue        |   8 +-
 .../internal/occurrence/referral.vue          |  93 ++-
 .../species_communities/amendment_request.vue | 212 ++---
 .../species_communities/community_rename.vue  |  16 +-
 .../species_communities/dashboard.vue         |   9 +-
 .../species_communities/make_public.vue       |  14 +-
 .../proposal_proposed_decline.vue             |  18 +-
 .../species_communities/species_combine.vue   |  34 +-
 .../species_communities.vue                   | 429 +++++-----
 .../species_communities/species_rename.vue    |  34 +-
 .../species_communities/species_split.vue     |  57 +-
 .../src/components/internal/users/manage.vue  |  64 +-
 .../boranga/src/components/internal/utils.js  |  16 +-
 .../boranga/src/utils/vue/bootstrap-modal.vue |   2 +-
 126 files changed, 3917 insertions(+), 2818 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/SelectFilter.vue b/boranga/frontend/boranga/src/components/common/SelectFilter.vue
index dc27bbcc..08b14ebe 100644
--- a/boranga/frontend/boranga/src/components/common/SelectFilter.vue
+++ b/boranga/frontend/boranga/src/components/common/SelectFilter.vue
@@ -7,7 +7,7 @@
             class="text-secondary mb-1"
             >{{ title }}</label
         >
-        <VueSelect
+        <!-- <VueSelect
             :id="`select-filter-${id}`"
             ref="vueSelectFilter"
             v-model="selectedFilterItem"
@@ -42,14 +42,15 @@
             "
         >
         </VueSelect>
+        -->
     </div>
 </template>
 
 <script>
-import { VueSelect } from 'vue-select';
+// import { VueSelect } from 'vue-select';
 export default {
     name: 'SelectFilter',
-    components: { VueSelect },
+    // components: { VueSelect },
     props: {
         id: {
             type: String,
@@ -232,7 +233,7 @@ export default {
 </script>
 
 <style scoped>
-@import 'vue-select/dist/vue-select.css';
+/* @import 'vue-select/dist/vue-select.css'; */
 
 * {
     --vs-dropdown-z-index: 9001 !important;
diff --git a/boranga/frontend/boranga/src/components/common/add_comm_log.vue b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
index 8eda1236..6374ce76 100755
--- a/boranga/frontend/boranga/src/components/common/add_comm_log.vue
+++ b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="commsForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
@@ -225,8 +225,13 @@ export default {
             vm.errors = false;
             let comms = new FormData(vm.form);
             vm.addingComms = true;
-            vm.$http.post(vm.url, comms, {
-            }).then((response) => {
+            fetch(vm.url,
+                {
+                    method: 'POST',
+                    body: comms,
+                    'Content-Type': 'application/json',
+                }
+            ).then((response) => {
                 vm.addingComms = false;
                 vm.close();
             }, (error) => {
@@ -234,7 +239,6 @@ export default {
                 vm.addingComms = false;
                 vm.errorString = helpers.apiVueResourceError(error);
             });
-
         },
         addFormValidations: function () {
             let vm = this;
diff --git a/boranga/frontend/boranga/src/components/common/add_contact.vue b/boranga/frontend/boranga/src/components/common/add_contact.vue
index 602067cc..1e35062c 100755
--- a/boranga/frontend/boranga/src/components/common/add_contact.vue
+++ b/boranga/frontend/boranga/src/components/common/add_contact.vue
@@ -3,7 +3,7 @@
         <modal @ok="ok()" @cancel="cancel()" :title="title()" large>
             <form class="form-horizontal" name="addContactForm">
                 <div class="row">
-                    <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                    <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                     <div class="col-lg-12">
                         <div class="row">
                             <div class="form-group">
@@ -119,8 +119,9 @@ export default {
         },
         fetchContact: function (id) {
             let vm = this;
-            vm.$http.get(api_endpoints.contact(id)).then((response) => {
-                vm.contact = response.body; vm.isModalOpen = true;
+            fetch(api_endpoints.contact(id)).then(async (response) => {
+                vm.contact = await response.json();
+                vm.isModalOpen = true;
             }, (error) => {
                 console.log(error);
             });
@@ -130,8 +131,12 @@ export default {
             vm.errors = false;
             if (vm.contact.id) {
                 let contact = vm.contact;
-                vm.$http.put(helpers.add_endpoint_json(api_endpoints.organisation_contacts, contact.id), JSON.stringify(contact), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.organisation_contacts, contact.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(contact)
                 }).then((response) => {
                     vm.$parent.refreshDatatable();
                     vm.close();
@@ -144,16 +149,20 @@ export default {
                 let contact = JSON.parse(JSON.stringify(vm.contact));
                 contact.organisation = vm.org_id;
                 contact.user_status = 'contact_form';
-                vm.$http.post(api_endpoints.organisation_contacts, JSON.stringify(contact), {
-                    emulateJSON: true,
+                fetch(api_endpoints.organisation_contacts, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        body: JSON.stringify(contact)
+                    },
                 }).then((response) => {
-                    vm.close();
-                    vm.$parent.addedContact();
-                }, (error) => {
-                    console.log(error);
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                        vm.close();
+                        vm.$parent.addedContact();
+                    }, (error) => {
+                        console.log(error);
+                        vm.errors = true;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    });
 
             }
         },
diff --git a/boranga/frontend/boranga/src/components/common/add_document.vue b/boranga/frontend/boranga/src/components/common/add_document.vue
index edff4ee8..3611b7f9 100644
--- a/boranga/frontend/boranga/src/components/common/add_document.vue
+++ b/boranga/frontend/boranga/src/components/common/add_document.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="documentForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
@@ -274,8 +274,12 @@ export default {
             if (vm.documentObj.id) {
                 vm.updatingDocument = true;
                 formData.append('data', JSON.stringify(documentObj));
-                vm.$http.put(helpers.add_endpoint_json(vm.url, documentObj.id), formData, {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(vm.url, documentObj.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.updatingDocument = false;
                     vm.$parent.updatedDocuments();
@@ -288,8 +292,12 @@ export default {
             } else {
                 vm.addingDocument = true;
                 formData.append('data', JSON.stringify(documentObj));
-                vm.$http.post(vm.url, formData, {
-                    emulateJSON: true,
+                fetch(vm.url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        body: JSON.stringify(formData)
+                    },
                 }).then((response) => {
                     vm.addingDocument = false;
                     vm.close();
@@ -306,8 +314,8 @@ export default {
         }
     },
     created: async function () {
-        this.$http.get(api_endpoints.document_categories_dict).then(response => {
-            let document_dict = response.body;
+        fetch(api_endpoints.document_categories_dict).then(async (response) => {
+            let document_dict = await response.json();
             this.documentCategories = document_dict.document_category_list;
             // blank entry allows user to clear selection
             this.documentCategories.splice(0, 0,
diff --git a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
index 1695c802..c0298c8e 100644
--- a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
@@ -784,8 +784,8 @@ export default {
         },
         fetchFilterLists: function () {
             let vm = this;
-            vm.$http.get(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsCommunities = response.body;
+            fetch(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsCommunities = await response.json();
                 vm.filterDistrict();
                 vm.community_status = vm.internal_status.slice().sort((a, b) => {
                     return a.name.trim().localeCompare(b.name.trim());
@@ -796,8 +796,8 @@ export default {
             }, (error) => {
                 console.log(error);
             })
-            vm.$http.get(api_endpoints.region_district_filter_dict).then((response) => {
-                vm.filterRegionDistrict = response.body;
+            fetch(api_endpoints.region_district_filter_dict).then(async (response) => {
+                vm.filterRegionDistrict = await response.json();
                 vm.region_list = vm.filterRegionDistrict.region_list;
                 vm.district_list = vm.filterRegionDistrict.district_list;
             }, (error) => {
@@ -839,9 +839,14 @@ export default {
                         const createUrl = api_endpoints.community + "/";
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
-                        let savedCommunity = await Vue.http.post(createUrl, payload);
-                        if (savedCommunity) {
-                            newCommunityId = savedCommunity.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json', },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newCommunityId = data.id;
                         }
                     }
                     catch (err) {
@@ -873,7 +878,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_community_proposal(species_id))
+                    fetch(api_endpoints.discard_community_proposal(species_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -907,7 +915,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_community_proposal(species_id))
+                    fetch(api_endpoints.reinstate_community_proposal(species_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
index 62b5a107..f4296dc7 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
@@ -234,8 +234,7 @@
                                     v-if="iucn_versions && iucn_versions.length > 0 && conservation_status_obj.iucn_version_id && !iucn_versions.map((d) => d.id).includes(conservation_status_obj.iucn_version_id)">
                                     <input type="text" v-if="conservation_status_obj.iucn_version"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.iucn_version + ' (Now Archived)'"
-                                        disabled />
+                                        :value="conservation_status_obj.iucn_version + ' (Now Archived)'" disabled />
                                     <div class="mb-3 text-muted">
                                         Change iucn version to:
                                     </div>
@@ -243,8 +242,7 @@
                                 <select :disabled="isReadOnly" class="form-select"
                                     v-model="conservation_status_obj.iucn_version_id" id="proposed_iucnversion">
                                     <option :value="null" disabled>Select the appropriate IUCN Version</option>
-                                    <option v-for="option in iucn_versions" :value="option.id"
-                                        v-bind:key="option.id">
+                                    <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
@@ -337,7 +335,8 @@
                                 <select :disabled="isReadOnly" class="form-select"
                                     v-model="conservation_status_obj.commonwealth_conservation_category_id"
                                     id="proposed_commonwealth_conservation_category">
-                                    <option :value="null" disabled>Select the appropriate Commonwealth Conservation Category
+                                    <option :value="null" disabled>Select the appropriate Commonwealth Conservation
+                                        Category
                                     </option>
                                     <option v-for="option in commonwealth_conservation_categories" :value="option.id"
                                         v-bind:key="option.id">
@@ -452,15 +451,13 @@
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.iucn_version_id"
-                        class="row mb-3">
+                    <div v-if="conservation_status_obj.current_conservation_status.iucn_version_id" class="row mb-3">
                         <label for="current_iucn_version" class="col-sm-5 col-form-label">IUCN Version:</label>
                         <div class="col-sm-7">
                             <select :disabled="true" class="form-select"
                                 v-model="conservation_status_obj.current_conservation_status.iucn_version_id"
                                 id="current_iucn_version">
-                                <option v-for="option in iucn_versions" :value="option.id"
-                                    v-bind:key="option.id">
+                                <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
                                     {{ option.code }}
                                 </option>
                             </select>
@@ -496,7 +493,8 @@
                     </div>
                     <div v-if="conservation_status_obj.current_conservation_status.commonwealth_conservation_category_id"
                         class="row mb-3">
-                        <label for="current_commonwealth_conservation_category" class="col-sm-5 col-form-label">Commonwealth
+                        <label for="current_commonwealth_conservation_category"
+                            class="col-sm-5 col-form-label">Commonwealth
                             Conservation Category:</label>
                         <div class="col-sm-7">
                             <select :disabled="true" class="form-select"
@@ -587,21 +585,23 @@
                                                 <h6 class="text-muted">Referral Comments</h6>
                                             </div>
                                         </div>
-                                        <div v-for="ref in referral_comments_boxes" class="row mb-3"
-                                            v-if="ref.box_view">
-                                            <div class="col">
-                                                <div class="form-floating m-3 mt-1">
-                                                    <textarea v-if='!ref.readonly' :disabled="true" :id="ref.name"
-                                                        :name="ref.name" class="form-control" :placeholder="ref.label"
-                                                        v-model="referral.referral_comment" />
-                                                    <textarea v-else :disabled="true" :name="ref.name"
-                                                        :value="ref.value || ''" class="form-control"
-                                                        :placeholder="ref.label" />
-                                                    <label :for="ref.name" class="form-label">{{ ref.label
-                                                        }}</label>
+                                        <template v-if="ref.box_view">
+                                            <div v-for="ref in referral_comments_boxes" class="row mb-3">
+                                                <div class="col">
+                                                    <div class="form-floating m-3 mt-1">
+                                                        <textarea v-if='!ref.readonly' :disabled="true" :id="ref.name"
+                                                            :name="ref.name" class="form-control"
+                                                            :placeholder="ref.label"
+                                                            v-model="referral.referral_comment" />
+                                                        <textarea v-else :disabled="true" :name="ref.name"
+                                                            :value="ref.value || ''" class="form-control"
+                                                            :placeholder="ref.label" />
+                                                        <label :for="ref.name" class="form-label">{{ ref.label
+                                                            }}</label>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
+                                        </template>
                                     </div>
                                 </div>
                             </div>
@@ -830,11 +830,11 @@ export default {
             if (vm.conservation_status_obj?.community_id) {
                 let community_display_url = api_endpoints.community_display +
                     '?community_id=' + vm.conservation_status_obj.community_id
-                vm.$http.get(community_display_url).then(
-                    (response) => {
-                        var newOption = new Option(response.body.name, response.body.id, false, true);
+                fetch(community_display_url).then(async (response) => {
+                        const data = await response.json();
+                        var newOption = new Option(data.name, data.id, false, true);
                         $('#' + vm.community_name_lookup).append(newOption);
-                        vm.community_display = response.body.name
+                        vm.community_display = data.name
                     })
             }
         },
@@ -901,8 +901,8 @@ export default {
         let action = this.$route.query.action;
         let dict_url = action == 'view' ? api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type + '&action=' + action :
             api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type
-        vm.$http.get(dict_url).then((response) => {
-            vm.cs_profile_dict = response.body;
+        fetch(dict_url).then(async (response) => {
+            vm.cs_profile_dict = await response.json();
             vm.wa_legislative_lists = vm.cs_profile_dict.wa_legislative_lists;
             vm.wa_legislative_categories = vm.cs_profile_dict.wa_legislative_categories;
             vm.iucn_versions = vm.cs_profile_dict.iucn_versions;
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
index 0968664e..0f64f307 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
@@ -271,13 +271,14 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id)).then((response) => {
-                this.$refs.document_detail.documentObj = response.body;
-                this.$refs.document_detail.documentObj.uploaded_date = response.body.uploaded_date != null && response.body.uploaded_date != undefined ? moment(response.body.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [response.body];
+            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.document_detail.documentObj = data;
+                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
+                this.$refs.document_detail.uploaded_document = [data];
 
                 //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(response.body.document_category);
+                this.$refs.document_detail.fetchSubCategory(data.document_category);
             },
                 err => {
                     console.log(err);
@@ -306,7 +307,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -340,7 +344,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
index dba8b209..2612dbf3 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
@@ -119,8 +119,9 @@ export default {
         remindReferral: function (_id, user) {
             let vm = this;
 
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/remind')).then(response => {
-                vm.$emit('refreshFromResponse', response);
+            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/remind')).then(async (response) => {
+                const data = await response.json();
+                vm.$emit('refreshFromResponse', data);
                 vm.table.ajax.reload();
                 swal.fire({
                     title: 'Referral Reminder',
@@ -144,8 +145,9 @@ export default {
         },
         resendReferral: function (_id, user) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/resend')).then(response => {
-                vm.$emit('refreshFromResponse', response);
+            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/resend')).then(async (response) => {
+                const data = await response.json();
+                vm.$emit('refreshFromResponse', data);
                 vm.table.ajax.reload();
                 swal.fire({
                     title: 'Referral Resent',
@@ -177,10 +179,14 @@ export default {
                     swal.showLoading()
                 }
             })
-            vm.$http.patch(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/recall')).then(response => {
+            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/recall'), {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json', }
+            }).then(async (response) => {
+                const data = await response.json();
                 swal.hideLoading();
                 swal.close();
-                vm.$emit('refreshFromResponse', response);
+                vm.$emit('refreshFromResponse', data);
                 vm.table.ajax.reload();
                 swal.fire({
                     title: 'Referral Recall',
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
index 47326657..7396b6c4 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
@@ -240,8 +240,7 @@
                                     v-if="iucn_versions && iucn_versions.length > 0 && conservation_status_obj.iucn_version_id && !iucn_versions.map((d) => d.id).includes(conservation_status_obj.iucn_version_id)">
                                     <input type="text" v-if="conservation_status_obj.iucn_version"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.iucn_version + ' (Now Archived)'"
-                                        disabled />
+                                        :value="conservation_status_obj.iucn_version + ' (Now Archived)'" disabled />
                                     <div class="mb-3 text-muted">
                                         Change iucn version to:
                                     </div>
@@ -249,8 +248,7 @@
                                 <select :disabled="isReadOnly" class="form-select"
                                     v-model="conservation_status_obj.iucn_version_id" id="proposed_iucnversion">
                                     <option :value="null" disabled>Select the appropriate IUCN Version</option>
-                                    <option v-for="option in iucn_versions" :value="option.id"
-                                        v-bind:key="option.id">
+                                    <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
@@ -343,7 +341,8 @@
                                 <select :disabled="isReadOnly" class="form-select"
                                     v-model="conservation_status_obj.commonwealth_conservation_category_id"
                                     id="proposed_commonwealth_conservation_category">
-                                    <option :value="null" disabled>Select the appropriate Commonwealth Conservation Category
+                                    <option :value="null" disabled>Select the appropriate Commonwealth Conservation
+                                        Category
                                     </option>
                                     <option v-for="option in commonwealth_conservation_categories" :value="option.id"
                                         v-bind:key="option.id">
@@ -457,15 +456,13 @@
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.iucn_version_id"
-                        class="row mb-3">
+                    <div v-if="conservation_status_obj.current_conservation_status.iucn_version_id" class="row mb-3">
                         <label for="current_iucn_version" class="col-sm-5 col-form-label">IUCN Version:</label>
                         <div class="col-sm-7">
                             <select :disabled="true" class="form-select"
                                 v-model="conservation_status_obj.current_conservation_status.iucn_version_id"
                                 id="current_iucn_version">
-                                <option v-for="option in iucn_versions" :value="option.id"
-                                    v-bind:key="option.id">
+                                <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
                                     {{ option.code }}
                                 </option>
                             </select>
@@ -501,7 +498,8 @@
                     </div>
                     <div v-if="conservation_status_obj.current_conservation_status.commonwealth_conservation_category_id"
                         class="row mb-3">
-                        <label for="current_commonwealth_conservation_category" class="col-sm-5 col-form-label">Commonwealth
+                        <label for="current_commonwealth_conservation_category"
+                            class="col-sm-5 col-form-label">Commonwealth
                             Conservation List:</label>
                         <div class="col-sm-7">
                             <select :disabled="true" class="form-select"
@@ -592,23 +590,25 @@
                                                     <h6 class="text-muted">Referral Comments</h6>
                                                 </div>
                                             </div>
-                                            <div v-for="ref in referral_comments_boxes" class="row mb-3"
-                                                v-if="ref.box_view">
-                                                <div class="col">
-                                                    <div class="form-floating m-3 mt-1">
-                                                        <textarea v-if='!ref.readonly' :disabled="true" :id="ref.name"
-                                                            :name="ref.name" class="form-control referral-comment-box"
-                                                            :placeholder="ref.label"
-                                                            v-model="referral.referral_comment" />
-                                                        <textarea v-else :disabled="ref.readonly" :name="ref.name"
-                                                            :value="ref.value || ''"
-                                                            class="form-control referral-comment-box"
-                                                            :placeholder="ref.label" />
-                                                        <label :for="ref.name" class="form-label">{{ ref.label
-                                                            }}</label>
+                                            <template v-if="ref.box_view">
+                                                <div v-for="ref in referral_comments_boxes" class="row mb-3">
+                                                    <div class="col">
+                                                        <div class="form-floating m-3 mt-1">
+                                                            <textarea v-if='!ref.readonly' :disabled="true"
+                                                                :id="ref.name" :name="ref.name"
+                                                                class="form-control referral-comment-box"
+                                                                :placeholder="ref.label"
+                                                                v-model="referral.referral_comment" />
+                                                            <textarea v-else :disabled="ref.readonly" :name="ref.name"
+                                                                :value="ref.value || ''"
+                                                                class="form-control referral-comment-box"
+                                                                :placeholder="ref.label" />
+                                                            <label :for="ref.name" class="form-label">{{ ref.label
+                                                                }}</label>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                            </div>
+                                            </template>
                                         </div>
                                     </div>
                                 </div>
@@ -826,12 +826,12 @@ export default {
             let vm = this;
             if (vm.conservation_status_obj.species_taxonomy_id != null) {
                 let species_display_url = api_endpoints.species_display + '?taxon_id=' + vm.conservation_status_obj.species_taxonomy_id
-                vm.$http.get(species_display_url).then(
-                    (response) => {
-                        var newOption = new Option(response.body.name, response.body.id, false, true);
+                fetch(species_display_url).then(async (response) => {
+                        const data = await response.json();
+                        var newOption = new Option(data.name, data.id, false, true);
                         $('#' + vm.scientific_name_lookup).append(newOption);
-                        vm.species_display = response.body.name
-                        vm.taxon_previous_name = response.body.taxon_previous_name
+                        vm.species_display = data.name
+                        vm.taxon_previous_name = data.taxon_previous_name
                     })
             }
         },
@@ -900,8 +900,8 @@ export default {
         let action = this.$route.query.action;
         let dict_url = action == 'view' ? api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type + '&action=' + action :
             api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type
-        vm.$http.get(dict_url).then((response) => {
-            vm.cs_profile_dict = response.body;
+        fetch(dict_url).then(async (response) => {
+            vm.cs_profile_dict = await response.json();
             vm.wa_legislative_lists = vm.cs_profile_dict.wa_legislative_lists;
             vm.wa_legislative_categories = vm.cs_profile_dict.wa_legislative_categories;
             vm.iucn_versions = vm.cs_profile_dict.iucn_versions;
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
index 2952e5f2..394df6e3 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
@@ -1124,8 +1124,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
 
-            vm.$http.get(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsCommunities = response.body;
+            fetch(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsCommunities = await response.json();
                 vm.communities_data_list = vm.filterListsCommunities.community_data_list;
                 vm.wa_legislative_lists = vm.filterListsCommunities.wa_legislative_lists;
                 vm.wa_legislative_categories = vm.filterListsCommunities.wa_legislative_categories;
@@ -1157,9 +1157,14 @@ export default {
                         let payload = new Object();
                         payload.application_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedCommunityCS = await Vue.http.post(createUrl, payload);
-                        if (savedCommunityCS) {
-                            newCommunityCSId = savedCommunityCS.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json', },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newCommunityCSId = data.id;
                         }
                     }
                     catch (err) {
@@ -1187,7 +1192,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -1221,7 +1229,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
@@ -1244,8 +1255,12 @@ export default {
             let vm = this;
             let payload = new Object();
             payload.conservation_status_id = conservation_status_id;
-            Vue.http.post(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, payload).then(res => {
-                vm.meeting_obj.agenda_items_arr = res.body;
+            fetch(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
+                vm.meeting_obj.agenda_items_arr = await response.json();
                 vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
                 this.$emit('updateAgendaItems');
             },
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
index 36ec1269..6076c8bd 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
@@ -1324,8 +1324,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.common_name_list = vm.filterListsSpecies.common_name_list;
                 vm.family_list = vm.filterListsSpecies.family_list;
@@ -1361,9 +1361,14 @@ export default {
                         let payload = new Object();
                         payload.application_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedFaunaCS = await Vue.http.post(createUrl, payload);
-                        if (savedFaunaCS) {
-                            newFaunaCSId = savedFaunaCS.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json', },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFaunaCSId = data.id;
                         }
                     }
                     catch (err) {
@@ -1391,7 +1396,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -1425,7 +1433,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
@@ -1448,8 +1459,12 @@ export default {
             let vm = this;
             let payload = new Object();
             payload.conservation_status_id = conservation_status_id;
-            Vue.http.post(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, payload).then(res => {
-                vm.meeting_obj.agenda_items_arr = res.body;
+            fetch(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
+                vm.meeting_obj.agenda_items_arr = await response.json();
                 vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
                 this.$emit('updateAgendaItems');
             },
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
index 792216c0..4f4d7f94 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
@@ -1315,8 +1315,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.common_name_list = vm.filterListsSpecies.common_name_list;
                 vm.family_list = vm.filterListsSpecies.family_list;
@@ -1350,9 +1350,14 @@ export default {
                         let payload = new Object();
                         payload.application_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedFloraCS = await Vue.http.post(createUrl, payload);
-                        if (savedFloraCS) {
-                            newFloraCSId = savedFloraCS.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json', },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFloraCSId = data.id;
                         }
                     }
                     catch (err) {
@@ -1380,7 +1385,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -1414,7 +1422,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
@@ -1437,8 +1448,12 @@ export default {
             let vm = this;
             let payload = new Object();
             payload.conservation_status_id = conservation_status_id;
-            Vue.http.post(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, payload).then(res => {
-                vm.meeting_obj.agenda_items_arr = res.body;
+            fetch(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
+                vm.meeting_obj.agenda_items_arr = await response.json();
                 vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
                 this.$emit('updateAgendaItems');
             },
diff --git a/boranga/frontend/boranga/src/components/common/display_history.vue b/boranga/frontend/boranga/src/components/common/display_history.vue
index e76cf8b6..4a36ce97 100755
--- a/boranga/frontend/boranga/src/components/common/display_history.vue
+++ b/boranga/frontend/boranga/src/components/common/display_history.vue
@@ -30,7 +30,7 @@
                 <input type="checkbox" class="form-check-input" id="checkbox" v-model="showNullFields" v-on:change="formatHistoryData()"/>
             </div>
             <div>
-            <strong>Data:</strong> 
+            <strong>Data:</strong>
             </div>
             <textarea disabled class="form-control" rows="25">{{ JSON.stringify(version_data_formatted, null, '\t') }}</textarea>
             </div>
@@ -40,7 +40,7 @@
                 <FormSection :formCollapse="false" :label="data.model_display_name+' - '+data.pk" :Index="itemObjKey+data.pk">
                     <div class="card-body card-collapse">
                         <div v-for="(value,index) in data.fields">
-                            <div v-if="value" class="row-sm-12">  
+                            <div v-if="value" class="row-sm-12">
                                 <div v-if="typeof value == 'object'" class="col-sm-12">
                                     <div v-for="(o_value,o_index) in value">
                                         <label class="col-sm-6 control-label"><strong>{{index}}.{{o_index}}:</strong></label>
@@ -52,8 +52,8 @@
                                     <input :disabled="true" type="text" class="form-control col-sm-6" :value=value>
                                 </div>
                             </div>
-                        </div>  
-                    </div>            
+                        </div>
+                    </div>
                 </FormSection>
                 </div>
                 <div v-else>
@@ -61,7 +61,7 @@
                     <FormSection :formCollapse="false" :label="sub_data.model_display_name+' - '+sub_data.pk" :Index="itemObjKey+sub_data.pk">
                         <div class="card-body card-collapse">
                             <div v-for="(value,index) in sub_data.fields">
-                                <div v-if="value" class="row-sm-12">  
+                                <div v-if="value" class="row-sm-12">
                                     <div v-if="typeof value == 'object'" class="col-sm-12">
                                         <div v-for="(o_value,o_index) in value">
                                             <label class="col-sm-6 control-label"><strong>{{index}}.{{o_index}}:</strong></label>
@@ -73,8 +73,8 @@
                                         <input :disabled="true" type="text" class="form-control col-sm-6" :value=value>
                                     </div>
                                 </div>
-                            </div>  
-                        </div>            
+                            </div>
+                        </div>
                     </FormSection>
                     </div>
                 </div>
@@ -165,12 +165,13 @@ export default {
         },
         fetchHistoryData: function(){
             let vm = this;
-            vm.$http.get(api_endpoints.lookup_revision_versions(vm.primary_model,vm.revision_id))
-            .then((response) => {
-                vm.revision_date = response.body['date_created'];
-                vm.revision_user = response.body['revision_user'];
-                vm.version_data = response.body['version_data'];
-                vm.formatHistoryData();                
+            fetch(api_endpoints.lookup_revision_versions(vm.primary_model,vm.revision_id))
+            .then(async (response) => {
+                const data = await response.json();
+                vm.revision_date = data['date_created'];
+                vm.revision_user = data['revision_user'];
+                vm.version_data = data['version_data'];
+                vm.formatHistoryData();
             },(error) => {
                 console.log(error);
             })
@@ -219,4 +220,4 @@ export default {
     .interval-range-true-choice{
         width: 20%;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/boranga/frontend/boranga/src/components/common/help_text.vue b/boranga/frontend/boranga/src/components/common/help_text.vue
index 556d192c..2e56b821 100644
--- a/boranga/frontend/boranga/src/components/common/help_text.vue
+++ b/boranga/frontend/boranga/src/components/common/help_text.vue
@@ -51,9 +51,9 @@ export default {
         fetchHelpText: function () {
             let vm = this;
             if (!vm.helpTextEntry) {
-                vm.$http.get(`${api_endpoints.help_text_entries}/${vm.section_id}/`)
-                    .then(response => {
-                        vm.helpTextEntry = response.data;
+                fetch(`${api_endpoints.help_text_entries}/${vm.section_id}/`)
+                    .then(async (response) => {
+                        vm.helpTextEntry = await response.json();
                         this.$nextTick(() => {
                             this.$nextTick(() => {
                                 if (vm.helpTextEntry.icon_with_popover) {
@@ -63,9 +63,10 @@ export default {
                             });
                         });
                     })
-                    .catch(response => {
-                        console.log(response.body.detail);
-                        this.errorText = response.body.detail;
+                    .catch(async (response) => {
+                        const data = await response.json();
+                        console.log(data.detail);
+                        this.errorText = data.detail;
                     });
             }
         }
diff --git a/boranga/frontend/boranga/src/components/common/invite_external_referee.vue b/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
index 86e8f46a..052f007e 100644
--- a/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
+++ b/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
@@ -157,7 +157,13 @@ export default {
             let vm = this;
             vm.errors = false;
             const url = `/api/${vm.model}/${vm.pk}/external_referee_invite/`;
-            vm.$http.post(url, JSON.stringify(vm.external_referee_invite))
+            fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(vm.external_referee_invite),
+            })
                 .then((response) => {
                     swal.fire({
                         title: 'Success',
@@ -172,8 +178,8 @@ export default {
                         vm.close();
                     });
                 })
-                .catch((response) => {
-                    vm.errors = response.body;
+                .catch(async (response) => {
+                    vm.errors = await response.json();
                 });
         },
     },
diff --git a/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue b/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue
index 96cb29a0..c0d3d64a 100644
--- a/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue
+++ b/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue
@@ -12,23 +12,28 @@
         </div>
         <div v-if="datetime_created" class="card-body border-top py-2">
             <strong>Created on</strong><br />
-            {{ datetime_created | formatDateDay }} <span class="fw-light">at</span> {{ datetime_created | formatDateTime }}
+            {{ formatDateDay(datetime_created) }} <span class="fw-light">at</span> {{ formatDateTime(datetime_created)
+            }}
         </div>
         <div v-if="datetime_scheduled" class="card-body border-top py-2">
             <strong>Scheduled on</strong><br />
-            {{ datetime_scheduled | formatDateDay }} <span class="fw-light">at</span> {{ datetime_scheduled | formatDateTime }}
+            {{ formatDateDay(datetime_scheduled) }} <span class="fw-light">at</span> {{
+                formatDateTime(datetime_scheduled) }}
         </div>
         <div v-if="datetime_completed" class="card-body border-top py-2">
             <strong>Marked as Completed on</strong><br />
-            {{ datetime_completed | formatDateDay }} <span class="fw-light">at</span> {{ datetime_completed | formatDateTime }}
+            {{ formatDateDay(datetime_completed) }} <span class="fw-light">at</span> {{
+                formatDateTime(datetime_completed) }}
         </div>
         <div v-if="enableHistory" class="card-body border-top py-2">
             <table class="table small-table">
-                <tr>
-                    <th>Lodgement</th>
-                    <th>Date</th>
-                    <th>Action</th>
-                </tr>
+                <tbody>
+                    <tr>
+                        <th>Lodgement</th>
+                        <th>Date</th>
+                        <th>Action</th>
+                    </tr>
+                </tbody>
             </table>
         </div>
     </div>
@@ -67,7 +72,7 @@ export default {
             default: false,
         },
     },
-    filters: {
+    methods: {
         formatDateDay: function (data) {
             return data ? moment(data).format('DD/MM/YYYY') : '';
         },
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
index 794d1613..43914447 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal needs-validation" name="contactDetailForm" novalidate>
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row modal-input-row mb-3">
@@ -182,9 +182,13 @@ export default {
             if (vm.contactObj.id) {
                 vm.updatingContact = true;
                 formData.append('data', JSON.stringify(contactObj));
-                vm.$http.put(helpers.add_endpoint_json(vm.url, contactObj.id), formData, {
-                    emulateJSON: true,
-                }).then((response) => {
+                fetch(helpers.add_endpoint_json(vm.url, contactObj.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
+            }).then((response) => {
                     vm.updatingContact = false;
                     vm.$parent.updatedContactDetails();
                     vm.close();
@@ -196,8 +200,12 @@ export default {
             } else {
                 vm.addingContact = true;
                 formData.append('data', JSON.stringify(contactObj));
-                vm.$http.post(vm.url, formData, {
-                    emulateJSON: true,
+                fetch(vm.url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.addingContact = false;
                     vm.$parent.updatedContactDetails();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
index c4e2292e..958d87e3 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
@@ -193,8 +193,12 @@ export default {
             if (vm.observerObj.id) {
                 vm.updatingObserver = true;
                 formData.append('data', JSON.stringify(observerObj));
-                vm.$http.put(helpers.add_endpoint_json(vm.url, observerObj.id), formData, {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(vm.url, observerObj.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.updatingObserver = false;
                     vm.$parent.updatedObserverDetails();
@@ -206,8 +210,12 @@ export default {
             } else {
                 vm.addingObserver = true;
                 formData.append('data', JSON.stringify(observerObj));
-                vm.$http.post(vm.url, formData, {
-                    emulateJSON: true,
+                fetch(vm.url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.addingObserver = false;
                     vm.$parent.updatedObserverDetails();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
index f1029c2e..08b9bdc8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
@@ -477,11 +477,14 @@ export default {
             if (vm.is_report) {
                 endpoint = api_endpoints.occurrence_report;
             }
-            vm.$http.post(helpers.add_endpoint_json(endpoint, (vm.occurrence_id + '/update_animal_observation_details')), JSON.stringify(vm.animal_observation), {
-                emulateJSON: true
+            fetch(helpers.add_endpoint_json(endpoint, (vm.occurrence_id + '/update_animal_observation_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.animal_observation),
             }).then((response) => {
                 vm.updatingAnimalOnservationDetails = false;
-                //vm.animal_observation = response.body;
                 swal.fire({
                     title: 'Saved',
                     text: 'Animal Observation details have been saved',
@@ -510,8 +513,8 @@ export default {
     },
     created: async function () {
         let vm = this;
-        const res = await Vue.http.get(`/api/occurrence/animal_observation_list_of_values.json`);
-        vm.listOfAnimalValuesDict = res.body;
+        const response = await fetch(`/api/occurrence/animal_observation_list_of_values.json`);
+        vm.listOfAnimalValuesDict = await response.json();
         vm.primary_detection_method_list = vm.listOfAnimalValuesDict.primary_detection_method_list;
         vm.primary_detection_method_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
index a86cdced..569c3dc4 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
@@ -141,11 +141,11 @@ export default {
             if (vm.occurrence_obj?.community_id) {
                 let community_display_url = api_endpoints.community_display +
                     "?community_id=" + vm.occurrence_obj.community_id
-                vm.$http.get(community_display_url).then(
-                    (response) => {
-                        var newOption = new Option(response.body.name, response.body.id, false, true);
+                fetch(community_display_url).then(async (response) => {
+                        const data = await response.json();
+                        var newOption = new Option(data.name, data.id, false, true);
                         $('#' + vm.community_name_lookup).append(newOption);
-                        vm.community_display = response.body.name
+                        vm.community_display = data.name
                     })
             }
         },
@@ -159,8 +159,8 @@ export default {
         let action = this.$route.query.action;
         let dict_url = action == "view" ? api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type_id + '&action=' + action :
             api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type_id
-        vm.$http.get(dict_url).then((response) => {
-            vm.occ_profile_dict = response.body;
+        fetch(dict_url).then(async (response) => {
+            vm.occ_profile_dict = await response.json();
             vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
             vm.occurrence_source_list = vm.occ_profile_dict.occurrence_source_list;
             this.getCommunityDisplay();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
index 5b91d507..08764878 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
@@ -270,8 +270,8 @@ export default {
             let vm = this;
             this.$refs.contact_detail.contact_detail_id = id;
             this.$refs.contact_detail.contact_detail_action = 'edit';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.contact_detail, id)).then((response) => {
-                this.$refs.contact_detail.contactObj = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id)).then(async (response) => {
+                this.$refs.contact_detail.contactObj = await response.json();
             },
                 err => {
                     console.log(err);
@@ -282,8 +282,8 @@ export default {
             let vm = this;
             this.$refs.contact_detail.contact_detail_id = id;
             this.$refs.contact_detail.contact_detail_action = 'view';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.contact_detail, id)).then((response) => {
-                this.$refs.contact_detail.contactObj = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id)).then(async (response) => {
+                this.$refs.contact_detail.contactObj = await response.json();
             },
                 err => {
                     console.log(err);
@@ -305,7 +305,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.contact_detail, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -331,7 +334,10 @@ export default {
         },
         reinstateContactDetail: function (id) {
             let vm = this;
-            vm.$http.patch(helpers.add_endpoint_json(api_endpoints.contact_detail, id + '/reinstate'))
+            fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                 .then((response) => {
                     swal.fire({
                         title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
index 8f53d479..e6572985 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
@@ -249,8 +249,8 @@ export default {
         },
         editObserverDetail: async function (id) {
             this.$refs.observer_detail.observer_detail_action = 'edit';
-            await Vue.http.get(helpers.add_endpoint_json(api_endpoints.observer_detail, id)).then((response) => {
-                this.$refs.observer_detail.observerObj = response.body;
+            await fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id)).then(async (response) => {
+                this.$refs.observer_detail.observerObj = await response.json();
                 this.$refs.observer_detail.observerObj.id = id;
             },
                 err => {
@@ -261,8 +261,8 @@ export default {
         viewObserverDetail: async function (id) {
             this.$refs.observer_detail.observer_detail_id = id;
             this.$refs.observer_detail.observer_detail_action = 'view';
-            await Vue.http.get(helpers.add_endpoint_json(api_endpoints.observer_detail, id)).then((response) => {
-                this.$refs.observer_detail.observerObj = response.body;
+            await fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id)).then(async (response) => {
+                this.$refs.observer_detail.observerObj = await response.json();
                 this.$refs.observer_detail.observerObj.id = id;
             },
                 err => {
@@ -285,7 +285,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.observer_detail, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -311,7 +314,10 @@ export default {
         },
         reinstateObserverDetail: function (id) {
             let vm = this;
-            vm.$http.patch(helpers.add_endpoint_json(api_endpoints.observer_detail, id + '/reinstate'))
+            fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                 .then((response) => {
                     swal.fire({
                         title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
index 5febe997..0ee79ff7 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
@@ -259,12 +259,13 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id)).then((response) => {
-                this.$refs.document_detail.documentObj = response.body;
-                this.$refs.document_detail.documentObj.uploaded_date = response.body.uploaded_date != null && response.body.uploaded_date != undefined ? moment(response.body.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [response.body];
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.document_detail.documentObj = data;
+                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
+                this.$refs.document_detail.uploaded_document = [data];
                 //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(response.body.document_category);
+                this.$refs.document_detail.fetchSubCategory(data.document_category);
 
             },
                 err => {
@@ -295,7 +296,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -329,7 +333,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
index 53bcbcc9..a50f7c60 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
@@ -239,7 +239,7 @@
                         v-model="habitat_cond_sum" />
                 </div>
             </div>
-            <div v-if="occurrence_obj.group_type=='community'"  class="row mb-3">
+            <div v-if="occurrence_obj.group_type == 'community'" class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Count Date: </label>
                 <div class="col-sm-9">
                     <input v-model="occurrence_obj.habitat_condition.count_date
@@ -549,11 +549,15 @@ export default {
         updateHabitatCompositionDetails: function () {
             let vm = this;
             vm.updatingHabitatCompositionDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_habitat_composition_details')), JSON.stringify(vm.occurrence_obj.habitat_composition), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_habitat_composition_details')), {
+                method: 'POST',
+                body: JSON.stringify(vm.occurrence_obj.habitat_composition),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
                 vm.updatingHabitatCompositionDetails = false;
-                vm.occurrence_obj.habitat_composition = response.body;
+                vm.occurrence_obj.habitat_composition = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Habitat Composition details have been saved',
@@ -580,11 +584,15 @@ export default {
             var valKeigheryTotal = vm.calcKeigheryTotal();
             if (valKeigheryTotal) {
                 vm.updatingHabitatConditionDetails = true;
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_habitat_condition_details')), JSON.stringify(vm.occurrence_obj.habitat_condition), {
-                    emulateJSON: true
-                }).then((response) => {
+                fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_habitat_condition_details')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(vm.occurrence_obj.habitat_condition),
+                }).then(async (response) => {
                     vm.updatingHabitatConditionDetails = false;
-                    vm.occurrence_obj.habitat_condition = response.body;
+                    vm.occurrence_obj.habitat_condition = await response.json();
                     swal.fire({
                         title: 'Saved',
                         text: 'Habitat Condition details have been saved',
@@ -610,11 +618,15 @@ export default {
         updateVegetationStructure: function () {
             let vm = this;
             vm.updatingVegetationStructure = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_vegetation_structure')), JSON.stringify(vm.occurrence_obj.vegetation_structure), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_vegetation_structure')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_obj.vegetation_structure),
+            }).then(async (response) => {
                 vm.updatingVegetationStructure = false;
-                vm.occurrence_obj.vegetation_structure = response.body;
+                vm.occurrence_obj.vegetation_structure = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Vegetation Structure details have been saved',
@@ -644,11 +656,15 @@ export default {
         updateFireHistoryDetails: function () {
             let vm = this;
             vm.updatingFireHistoryDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_fire_history_details')), JSON.stringify(vm.occurrence_obj.fire_history), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_fire_history_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_obj.fire_history),
+            }).then(async (response) => {
                 vm.updatingFireHistoryDetails = false;
-                vm.occurrence_obj.fire_history = response.body;
+                vm.occurrence_obj.fire_history = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Fire History details have been saved',
@@ -674,11 +690,15 @@ export default {
         updateAssociatedSpeciesDetails: function () {
             let vm = this;
             vm.updatingAssociatedSpeciesDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_associated_species_details')), JSON.stringify(vm.occurrence_obj.associated_species), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_associated_species_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_obj.associated_species),
+            }).then(async (response) => {
                 vm.updatingAssociatedSpeciesDetails = false;
-                vm.occurrence_obj.associated_species = response.body;
+                vm.occurrence_obj.associated_species = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Associated Species details have been saved',
@@ -732,8 +752,8 @@ export default {
     created: async function () {
         let vm = this;
         //------fetch list of values
-        const res = await Vue.http.get('/api/occurrence/list_of_values.json');
-        vm.listOfValuesDict = res.body;
+        const response = await fetch('/api/occurrence/list_of_values.json');
+        vm.listOfValuesDict = await response.json();
         vm.land_form_list = vm.listOfValuesDict.land_form_list;
         vm.land_form_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
index afbba120..6cb1be72 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -279,7 +279,6 @@ import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { api_endpoints, helpers } from '@/utils/hooks';
 import MapComponent from '../component_map.vue';
-import { VueSelect } from 'vue-select';
 import OccurrenceSiteDatatable from '@/components/internal/occurrence/occurrence_site_datatable.vue';
 import OccurrenceTenureDatatable from '@/components/internal/occurrence/occurrence_tenure_datatable.vue';
 import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue'
@@ -293,7 +292,6 @@ export default {
     components: {
         MapComponent,
         FormSection,
-        VueSelect,
         OccurrenceSiteDatatable,
         OccurrenceTenureDatatable,
         RelatedReports,
@@ -492,8 +490,8 @@ export default {
                 console.error('Error fetching location values list:', error);
             });
 
-        const response = await Vue.http.get('/api/region_district_filter_dict/');
-        vm.filterRegionDistrict = response.body;
+        const response = await fetch('/api/region_district_filter_dict/');
+        vm.filterRegionDistrict = await response.json();
         vm.region_list = vm.filterRegionDistrict.region_list;
         vm.district_list = vm.filterRegionDistrict.district_list;
         vm.region_list.splice(0, 0,
@@ -619,10 +617,9 @@ export default {
                         emulateJSON: true,
                     }
                 )
-                .then(
-                    (response) => {
+                .then(async (response) => {
                         vm.updatingLocationDetails = false;
-                        vm.occurrence_obj.location = response.body;
+                        vm.occurrence_obj.location = await response.json();
                         swal.fire({
                             title: 'Saved',
                             text: 'Location details have been saved',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
index e8a6897a..04352ff9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
@@ -7,14 +7,17 @@
                     <template v-if="!isReadOnly">
                         <template
                             v-if="observation_method_list && observation_method_list.length > 0 && occurrence_obj.observation_detail.observation_method_id && !observation_method_list.map((d) => d.id).includes(occurrence_obj.observation_detail.observation_method_id)">
-                            <input type="text" v-if="occurrence_obj.observation_detail.observation_method" class="form-control mb-3"
-                                :value="occurrence_obj.observation_detail.observation_method + ' (Now Archived)'" disabled />
+                            <input type="text" v-if="occurrence_obj.observation_detail.observation_method"
+                                class="form-control mb-3"
+                                :value="occurrence_obj.observation_detail.observation_method + ' (Now Archived)'"
+                                disabled />
                             <div class="mb-3 text-muted">
                                 Change observation method to:
                             </div>
                         </template>
                         <select class="form-select" v-model="occurrence_obj.observation_detail.observation_method_id">
-                            <option v-for="observation_method in observation_method_list" :value="observation_method.id" v-bind:key="observation_method.id">
+                            <option v-for="observation_method in observation_method_list" :value="observation_method.id"
+                                v-bind:key="observation_method.id">
                                 {{ observation_method.name }}
                             </option>
                         </select>
@@ -95,13 +98,15 @@
                             v-if="identification_certainty_list && identification_certainty_list.length > 0 && occurrence_obj.identification.identification_certainty_id && !identification_certainty_list.map((d) => d.id).includes(occurrence_obj.identification.identification_certainty_id)">
                             <input type="text" v-if="occurrence_obj.identification.identification_certainty"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.identification.identification_certainty + ' (Now Archived)'" disabled />
+                                :value="occurrence_obj.identification.identification_certainty + ' (Now Archived)'"
+                                disabled />
                             <div class="mb-3 text-muted">
                                 Change identification certainty to:
                             </div>
                         </template>
                         <select class="form-select" v-model="occurrence_obj.identification.identification_certainty_id">
-                            <option v-for="option in identification_certainty_list" :value="option.id" v-bind:key="option.id">
+                            <option v-for="option in identification_certainty_list" :value="option.id"
+                                v-bind:key="option.id">
                                 {{ option.name }}
                             </option>
                         </select>
@@ -309,11 +314,15 @@ export default {
         updateObservationDetails: function () {
             let vm = this;
             vm.updatingObservationDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_observation_details')), JSON.stringify(vm.occurrence_obj.observation_detail), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_observation_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_obj.observation_detail)
+            }).then(async (response) => {
                 vm.updatingObservationDetails = false;
-                vm.occurrence_obj.observation_detail = response.body;
+                vm.occurrence_obj.observation_detail = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Observation details have been saved',
@@ -342,11 +351,15 @@ export default {
         updateIdentificationDetails: function () {
             let vm = this;
             vm.updatingIdentificationDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_identification_details')), JSON.stringify(vm.occurrence_obj.identification), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_identification_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_obj.identification)
+            }).then(async (response) => {
                 vm.updatingIdentificationDetails = false;
-                vm.occurrence_obj.identification = response.body;
+                vm.occurrence_obj.identification = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Identification details have been saved',
@@ -433,8 +446,8 @@ export default {
     created: async function () {
         let vm = this;
         //------fetch list of values
-        const res = await Vue.http.get(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_obj.group_type}`);
-        vm.listOfValuesDict = res.body;
+        const repsonse = await fetch(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_obj.group_type}`);
+        vm.listOfValuesDict = await repsonse.json();
         vm.observation_method_list = vm.listOfValuesDict.observation_method_list;
         vm.observation_method_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
index 6c111c6a..a3820137 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
@@ -1,30 +1,19 @@
 <template lang="html">
     <div id="existingThreats">
-        <modal
-            transition="modal fade"
-            :title="'Add Existing Threat'"
-            :large="true"
-            :full="true"
-            :showOK="false"
-            cancel-text="Close"
-            @cancel="close()"
-        >
+        <modal transition="modal fade" :title="'Add Existing Threat'" :large="true" :full="true" :showOK="false"
+            cancel-text="Close" @cancel="close()">
             <div class="container-fluid">
                 <div class="row">
-                    <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                    <alert v-if="errorString" type="danger"><strong>{{ errorString }}</strong></alert>
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
                                 <div v-if="occurrenceId" class="col-lg-12">
-                                    <datatable
-                                        :id="datatable_id"
-                                        ref="threat_datatable"
-                                        :dt-options="datatable_options"
-                                        :dt-headers="datatable_headers"
-                                    />
+                                    <datatable :id="datatable_id" ref="threat_datatable" :dt-options="datatable_options"
+                                        :dt-headers="datatable_headers" />
                                 </div>
-                                <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url"></ThreatDetail>
+                                <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse"
+                                    :url="occ_threat_url"></ThreatDetail>
                             </div>
                         </div>
                     </div>
@@ -76,13 +65,13 @@ export default {
             return [
                 'Number',
                 'Occurrence Report',
-                'Category',                 
-                'Date Observed', 
+                'Category',
+                'Date Observed',
                 'Action',
                 'Threat Agent',
-                'Threat Source', 
+                'Threat Source',
                 'Comments',
-                'Current Impact', 
+                'Current Impact',
                 'Potential Impact'
             ];
         },
@@ -91,12 +80,12 @@ export default {
                 data: "threat_number",
                 orderable: true,
                 searchable: true,
-                mRender: function(data,type,full){
-                    if(full.visible){
+                mRender: function (data, type, full) {
+                    if (full.visible) {
                         return full.threat_number;
                     }
-                    else{
-                        return '<s>'+ full.threat_number + '</s>'
+                    else {
+                        return '<s>' + full.threat_number + '</s>'
                     }
                 },
             };
@@ -106,11 +95,11 @@ export default {
                 data: "occurrence_report",
                 orderable: true,
                 searchable: true,
-                mRender: function(data,type,full){
-                    if(full.visible){
+                mRender: function (data, type, full) {
+                    if (full.visible) {
                         return "OCR" + full.occurrence_report;
                     }
-                    else{
+                    else {
                         return '<s>OCR' + full.occurrence_report + '</s>'
                     }
                 },
@@ -121,12 +110,12 @@ export default {
                 data: "threat_category",
                 orderable: true,
                 searchable: true,
-                mRender: function(data,type,full){
-                    if(full.visible){
+                mRender: function (data, type, full) {
+                    if (full.visible) {
                         return full.threat_category;
                     }
-                    else{
-                        return '<s>'+ full.threat_category + '</s>'
+                    else {
+                        return '<s>' + full.threat_category + '</s>'
                     }
                 },
             };
@@ -136,12 +125,12 @@ export default {
                 data: "source",
                 orderable: true,
                 searchable: true,
-                mRender: function(data,type,full){
-                    if(full.visible){
+                mRender: function (data, type, full) {
+                    if (full.visible) {
                         return full.source;
                     }
-                    else{
-                        return '<s>'+ full.source + '</s>'
+                    else {
+                        return '<s>' + full.source + '</s>'
                     }
                 },
             };
@@ -149,12 +138,12 @@ export default {
         column_observed: function () {
             return {
                 data: "date_observed",
-                mRender:function (data,type,full){
-                    if(full.visible){
-                        return data != '' && data != null ? moment(data).format('DD/MM/YYYY'):'';
+                mRender: function (data, type, full) {
+                    if (full.visible) {
+                        return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
                     }
-                    else{
-                        return data != '' && data != null ? '<s>'+ moment(data).format('DD/MM/YYYY'):'' + '</s>'
+                    else {
+                        return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
                     }
                 }
             };
@@ -164,12 +153,12 @@ export default {
                 data: "threat_agent",
                 orderable: true,
                 searchable: true,
-                mRender: function(data,type,full){
-                    if(full.visible){
+                mRender: function (data, type, full) {
+                    if (full.visible) {
                         return full.threat_agent;
                     }
-                    else{
-                        return '<s>'+ full.threat_agent + '</s>'
+                    else {
+                        return '<s>' + full.threat_agent + '</s>'
                     }
                 },
             };
@@ -179,13 +168,13 @@ export default {
                 data: "comment",
                 orderable: true,
                 searchable: true,
-                'render': function(value, type, full){
+                'render': function (value, type, full) {
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    if(full.visible){
-                        return type=='export' ? value : result;
+                    if (full.visible) {
+                        return type == 'export' ? value : result;
                     }
-                    else{
-                        return type=='export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                    else {
+                        return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
                     }
                 },
             };
@@ -195,12 +184,12 @@ export default {
                 data: "current_impact_name",
                 orderable: true,
                 searchable: true,
-                mRender: function(data,type,full){
-                    if(full.visible){
+                mRender: function (data, type, full) {
+                    if (full.visible) {
                         return full.current_impact_name;
                     }
-                    else{
-                        return '<s>'+ full.current_impact_name + '</s>'
+                    else {
+                        return '<s>' + full.current_impact_name + '</s>'
                     }
                 },
             };
@@ -210,12 +199,12 @@ export default {
                 data: "potential_impact_name",
                 orderable: true,
                 searchable: true,
-                mRender: function(data,type,full){
-                    if(full.visible){
+                mRender: function (data, type, full) {
+                    if (full.visible) {
                         return full.potential_impact_name;
                     }
-                    else{
-                        return '<s>'+ full.potential_impact_name + '</s>'
+                    else {
+                        return '<s>' + full.potential_impact_name + '</s>'
                     }
                 },
             };
@@ -226,7 +215,7 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
+                mRender: function (data, type, full) {
                     let links = "";
                     links += `<a href='#' data-view-threat='${full.id}'>View</a><br>`;
                     links += `<a href='#' data-add-threat='${full.id}'>Add</a><br>`;
@@ -239,14 +228,14 @@ export default {
             let columns = [
                 vm.column_number,
                 vm.column_ocr,
-                vm.column_category,           
+                vm.column_category,
                 vm.column_observed,
                 vm.column_action,
                 vm.column_threat_agent,
                 vm.column_source,
                 vm.column_comment,
                 vm.column_current_impact,
-                vm.column_potential_impact,                
+                vm.column_potential_impact,
             ];
             return {
                 autoWidth: false,
@@ -282,7 +271,7 @@ export default {
         sendData: function () {
             let vm = this;
             vm.errors = false;
-            
+
             let newThreatObj = new Object();
             newThreatObj.occurrence_report_threat_id = vm.threatObj.id;
             newThreatObj.date_observed = vm.threatObj.date_observed;
@@ -293,14 +282,18 @@ export default {
             newThreatObj.threat_agent_id = vm.threatObj.threat_agent_id;
             newThreatObj.threat_category_id = vm.threatObj.threat_category_id;
             newThreatObj.occurrence = vm.occurrenceId;
-            
+
             let threatObj = JSON.parse(JSON.stringify(newThreatObj));
             let formData = new FormData()
 
             vm.addingThreat = true;
             formData.append('data', JSON.stringify(threatObj));
-            vm.$http.post(vm.occ_threat_url, formData, {
-                emulateJSON: true,
+            fetch(vm.occ_threat_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: formData,
             }).then((response) => {
                 vm.addingThreat = false;
                 vm.refreshFromResponse();
@@ -310,73 +303,78 @@ export default {
                 vm.addingThreat = false;
                 vm.errorString = helpers.apiVueResourceError(error);
             });
-            
+
         },
-        viewThreat: function(id){
-            let vm=this;
+        viewThreat: function (id) {
+            let vm = this;
             this.$refs.threat_detail.threat_id = id;
-            this.$refs.threat_detail.threat_action='view';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.ocr_threat,id)).then((response) => {
-                    this.$refs.threat_detail.threatObj=response.body;
-                    this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD'): '';
-                },
+            this.$refs.threat_detail.threat_action = 'view';
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
+            },
                 err => {
-                        console.log(err);
-                    });
+                    console.log(err);
+                });
             this.$refs.threat_detail.isModalOpen = true;
         },
-        addThreat: function(id){
-            let vm=this;
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.ocr_threat,id)).then((response) => {
-                    this.threatObj=response.body;
-                    console.log(this.threatObj);
-                    vm.sendData()
-                },
+        addThreat: function (id) {
+            let vm = this;
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.threatObj = data;
+                console.log(this.threatObj);
+                vm.sendData()
+            },
                 err => {
-                        console.log(err);
-                    });            
+                    console.log(err);
+                });
         },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.threat_datatable.vmDataTable.on('click', 'a[data-view-threat]', function(e) {
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.threat_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
                 e.preventDefault();
                 var id = $(this).attr('data-view-threat');
                 vm.viewThreat(id);
             });
-            vm.$refs.threat_datatable.vmDataTable.on('click', 'a[data-add-threat]', function(e) {
+            vm.$refs.threat_datatable.vmDataTable.on('click', 'a[data-add-threat]', function (e) {
                 e.preventDefault();
                 var id = $(this).attr('data-add-threat');
                 vm.addThreat(id);
             });
         },
-        refreshFromResponse: function(){
+        refreshFromResponse: function () {
             this.$refs.threat_datatable.vmDataTable.ajax.reload();
         },
     },
-    mounted: function(){
-            let vm = this;
-            this.$nextTick(() => {
-                vm.addEventListeners();
-            });
-        },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
-</style>
\ No newline at end of file
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+
+legend.scheduler-border {
+    width: inherit;
+    /* Or auto */
+    padding: 0 10px;
+    /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
+</style>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
index fc06e83f..c84ea10a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
@@ -1,25 +1,16 @@
 <template lang="html">
-    <div :id="'related_ocr'+section_type">
-        <FormSection :formCollapse="false" label="Related Occurrence Reports" :Index="'related_ocr'+section_type" @toggle-collapse="toggleCollapse">
+    <div :id="'related_ocr' + section_type">
+        <FormSection :formCollapse="false" label="Related Occurrence Reports" :Index="'related_ocr' + section_type"
+            @toggle-collapse="toggleCollapse">
             <div>
-                <datatable
-                    ref="related_ocr_datatable"
-                    :id="datatable_id"
-                    :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers"
-                />
+                <datatable ref="related_ocr_datatable" :id="datatable_id" :dtOptions="datatable_options"
+                    :dtHeaders="datatable_headers" />
             </div>
         </FormSection>
 
         <div v-if="sectionOCRId">
-            <SectionModal
-                ref="section_modal"
-                :key="sectionOCRId"
-                :sectionTypeDisplay="sectionTypeFormatted"
-                :sectionType="section_type"
-                :ocrNumber="sectionOCRId"
-                :sectionObj="sectionObj"
-            />
+            <SectionModal ref="section_modal" :key="sectionOCRId" :sectionTypeDisplay="sectionTypeFormatted"
+                :sectionType="section_type" :ocrNumber="sectionOCRId" :sectionObj="sectionObj" />
         </div>
     </div>
 </template>
@@ -35,7 +26,7 @@ import {
     api_endpoints,
     helpers,
 }
-from '@/utils/hooks'
+    from '@/utils/hooks'
 
 export default {
     name: 'TableRelatedItems',
@@ -45,16 +36,16 @@ export default {
         SectionModal,
     },
     props: {
-        occurrence_obj:{
+        occurrence_obj: {
             type: Object,
-            required:true
+            required: true
         },
         section_type: {
             type: String,
             required: false,
             default: "",
         },
-        isReadOnly:{
+        isReadOnly: {
             type: Boolean,
             default: false
         },
@@ -91,7 +82,7 @@ export default {
         }
     },
     computed: {
-        column_number: function(){
+        column_number: function () {
             return {
                 data: 'occurrence_report_number',
                 orderable: true,
@@ -99,7 +90,7 @@ export default {
                 visible: true,
             }
         },
-        column_status: function(){
+        column_status: function () {
             return {
                 data: 'processing_status_display',
                 orderable: true,
@@ -107,7 +98,7 @@ export default {
                 visible: true,
             }
         },
-        column_observation_date: function(){
+        column_observation_date: function () {
             return {
                 data: 'observation_date',
                 orderable: true,
@@ -115,7 +106,7 @@ export default {
                 visible: true,
             }
         },
-        column_location_accuracy: function(){
+        column_location_accuracy: function () {
             return {
                 data: 'location_accuracy',
                 orderable: true,
@@ -123,7 +114,7 @@ export default {
                 visible: true,
             }
         },
-        column_identification_certainty: function(){
+        column_identification_certainty: function () {
             return {
                 data: 'identification_certainty',
                 orderable: true,
@@ -131,7 +122,7 @@ export default {
                 visible: true,
             }
         },
-        column_site: function(){
+        column_site: function () {
             return {
                 data: 'site',
                 orderable: true,
@@ -139,7 +130,7 @@ export default {
                 visible: true,
             }
         },
-        column_submitter: function(){
+        column_submitter: function () {
             return {
                 data: 'submitter',
                 orderable: false,
@@ -147,14 +138,14 @@ export default {
                 visible: true,
             }
         },
-        column_action: function(){
+        column_action: function () {
             return {
                 //name: 'action',
                 data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function(row, type, full){
+                'render': function (row, type, full) {
                     let links = '';
                     links += `<a href='/internal/occurrence-report/${full.id}' target="_blank">View</a><br>`;
                     return links;
@@ -172,7 +163,7 @@ export default {
                 },
             };
         },
-        column_copy_action: function(){
+        column_copy_action: function () {
             const vm = this;
             return {
                 //name: 'action',
@@ -180,7 +171,7 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function(row, type, full){
+                'render': function (row, type, full) {
                     let links = '';
                     if (vm.section_type == 'location') {
                         if (full.geometry_show_on_map === false) {
@@ -199,12 +190,11 @@ export default {
                 }
             }
         },
-        datatable_options: function(){
+        datatable_options: function () {
             let vm = this
 
             let action = vm.column_action
-            if (vm.section_type !== "" && !vm.isReadOnly)
-            {
+            if (vm.section_type !== "" && !vm.isReadOnly) {
                 action = vm.column_copy_action
             }
 
@@ -230,22 +220,22 @@ export default {
                 ordering: true,
                 order: [[0, 'desc']],
                 columnDefs: [
-                        { responsivePriority: 1, targets: 0 },
-                        { responsivePriority: 2, targets: -1 },
-                    ],
+                    { responsivePriority: 1, targets: 0 },
+                    { responsivePriority: 2, targets: -1 },
+                ],
                 ajax: {
                     //"url": '/api/proposal/' + vm.proposal.id + '/get_related_items/',
                     "url": "/api/occurrence/" + this.occurrence_obj.id + "/get_related_occurrence_reports/",
                     "dataSrc": "",
                     // adding extra GET params for Custom filtering
-                    "data": function ( d ) {
+                    "data": function (d) {
                         d.related_filter_type = vm.filterRelatedType
                     }
                 },
                 dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
-                buttons:[ ],
+                buttons: [],
                 columns: columns,
                 processing: true,
                 drawCallback: function () {
@@ -253,14 +243,14 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-                initComplete: function(settings, json) {
+                initComplete: function (settings, json) {
                     setTimeout(function () {
                         vm.adjust_table_width();
                     }, 100);
                 },
             }
         },
-        datatable_headers: function(){
+        datatable_headers: function () {
             return [
                 //'id',
                 'Number',
@@ -275,46 +265,51 @@ export default {
             ]
         },
     },
-    methods:{
+    methods: {
         toggleCollapse: function () {
             //console.log("toggle");
             this.adjust_table_width();
         },
-        viewSection:function (id) {
-            let vm=this;
+        viewSection: function (id) {
+            let vm = this;
             //get ocr object with id
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occurrence_report,id)).then((response) => {
-                let ocrObj=response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, id)).then(async (response) => {
+                let ocrObj = await response.json();
 
                 vm.sectionObj = ocrObj[vm.section_type];
                 vm.sectionOCRId = id;
                 vm.sectionTypeFormatted = vm.section_type.split('_')
-                .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
-                .join(' ');
+                    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+                    .join(' ');
 
                 this.$nextTick(() => {
-                this.$refs.section_modal.isModalOpen = true;
+                    this.$refs.section_modal.isModalOpen = true;
                 });
             },
-            err => {
-                console.log(err);
-            });
+                err => {
+                    console.log(err);
+                });
         },
-        copySection:function (id,merge) {
+        copySection: function (id, merge) {
             let vm = this;
             vm.errors = false;
 
             let formData = new FormData()
 
-            let data = {'occurrence_report_id': id,'section': vm.section_type, 'merge': merge};
+            let data = { 'occurrence_report_id': id, 'section': vm.section_type, 'merge': merge };
             formData.append('data', JSON.stringify(data));
 
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence,vm.occurrence_obj.id+"/copy_ocr_section"), formData, {
-                    emulateJSON: true,
-                }).then((response) => {
-                    vm.$refs.related_ocr_datatable.vmDataTable.ajax.reload();
-                    vm.$emit('copyUpdate', response.body, vm.section_type);
-                },
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + "/copy_ocr_section"), {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then(async (response) => {
+                const data = await response.json();
+                vm.$refs.related_ocr_datatable.vmDataTable.ajax.reload();
+                vm.$emit('copyUpdate', data, vm.section_type);
+            },
                 (error) => {
                     vm.errors = true;
                     vm.errorString = helpers.apiVueResourceError(error);
@@ -323,22 +318,22 @@ export default {
         adjust_table_width: function () {
             if (this.$refs.related_ocr_datatable !== undefined) { this.$refs.related_ocr_datatable.vmDataTable.columns.adjust().responsive.recalc() };
         },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-view-section]', function(e) {
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-view-section]', function (e) {
                 e.preventDefault();
                 var id = $(this).attr('data-view-section');
                 vm.viewSection(id);
             });
-            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-merge-section]', function(e) {
+            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-merge-section]', function (e) {
                 e.preventDefault();
                 var id = $(this).attr('data-merge-section');
-                vm.copySection(id,true);
+                vm.copySection(id, true);
             });
-            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-replace-section]', function(e) {
+            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-replace-section]', function (e) {
                 e.preventDefault();
                 var id = $(this).attr('data-replace-section');
-                vm.copySection(id,false);
+                vm.copySection(id, false);
             });
             vm.$refs.related_ocr_datatable.vmDataTable.on(
                 'click',
@@ -391,7 +386,7 @@ export default {
             );
         },
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
index 08d233ee..17f24f1d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
@@ -163,7 +163,7 @@ export default {
             let vm = this;
             if (vm.selected_scientific_name && !vm.adding_species) {
                 vm.adding_species = true
-                vm.$http.get("/api/occurrence/" + this.occurrence_obj.id + '/add_related_species?species=' + vm.selected_scientific_name)
+                fetch("/api/occurrence/" + this.occurrence_obj.id + '/add_related_species?species=' + vm.selected_scientific_name)
                     .then((response) => {
                         swal.fire({
                             title: 'Added',
@@ -197,7 +197,7 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.get("/api/occurrence/" + this.occurrence_obj.id + '/remove_related_species?species=' + id)
+                    fetch("/api/occurrence/" + this.occurrence_obj.id + '/remove_related_species?species=' + id)
                         .then((response) => {
                             swal.fire({
                                 title: 'Removed',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
index f6ecfafe..0cd67a54 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
@@ -6,7 +6,7 @@
                     <FormSection :formCollapse="false" :label="sectionTypeDisplay">
                         <div class="card-body card-collapse">
                             <div v-for="(value,index) in sectionObjExpanded">
-                                <div v-if="value && index != 'id' ">  
+                                <div v-if="value && index != 'id' ">
                                     <div v-if="typeof value == 'object'" >
                                         <div v-for="(o_value,o_index) in value" class="row mb-3">
                                             <label class="col-sm-6 control-label">{{index}}.{{o_index}}:</label>
@@ -24,8 +24,8 @@
                                         </div>
                                     </div>
                                 </div>
-                            </div>  
-                        </div>            
+                            </div>
+                        </div>
                     </FormSection>
                 </div>
             </div>
@@ -87,9 +87,9 @@ export default {
         fetchSectionData: function(){
             let vm = this;
             if (vm.sectionObj.occurrence_id !== undefined) {
-                vm.$http.get(api_endpoints.lookup_occ_section_values(vm.sectionType,vm.sectionObj.occurrence_id))
-                .then((response) => {
-                    vm.sectionObjExpanded = response.body;         
+                fetch(api_endpoints.lookup_occ_section_values(vm.sectionType,vm.sectionObj.occurrence_id))
+                .then(async (response) => {
+                    vm.sectionObjExpanded = await response.json();
                 },(error) => {
                     console.log(error);
                 })
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
index 45eda37e..e67811d0 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
@@ -451,17 +451,18 @@ export default {
             let vm = this;
 
             //Threat Source filter list (specific to instance)
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + '/threat_source_list')).then((response) => {
-                vm.threat_source_filter_list = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + '/threat_source_list')).then(async (response) => {
+                vm.threat_source_filter_list = await response.json();
             }, (error) => {
                 console.log(error);
             })
 
             //Category, Current Impact, Potential Impact (generic to all threats)
-            vm.$http.get('/api/threat/threat_list_of_values/').then((response) => {
-                vm.threat_category_filter_list = response.body["threat_category_lists"];
-                vm.threat_current_impact_filter_list = response.body["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = response.body["potential_impact_lists"];
+            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
+                const data = await response.json();
+                vm.threat_category_filter_list = data["threat_category_lists"];
+                vm.threat_current_impact_filter_list = data["current_impact_lists"];
+                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
             }, (error) => {
                 console.log(error);
             })
@@ -497,9 +498,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -510,9 +512,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -541,7 +544,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occ_threat, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -573,7 +579,10 @@ export default {
                 },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occ_threat, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
index 343cbd6a..0f076c08 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
@@ -297,12 +297,12 @@ export default {
             let vm = this;
             if (vm.occurrence_report_obj.species_taxonomy_id != null) {
                 let species_display_url = api_endpoints.species_display + "?taxon_id=" + vm.occurrence_report_obj.species_taxonomy_id
-                vm.$http.get(species_display_url).then(
-                    (response) => {
-                        var newOption = new Option(response.body.name, response.body.id, false, true);
+                fetch(species_display_url).then(async (response) => {
+                        const data = await response.json();
+                        var newOption = new Option(data.name, data.id, false, true);
                         $('#' + vm.scientific_name_lookup).append(newOption);
-                        vm.species_display = response.body.name
-                        vm.taxon_previous_name = response.body.taxon_previous_name
+                        vm.species_display = data.name
+                        vm.taxon_previous_name = data.taxon_previous_name
                     })
             }
         },
@@ -359,11 +359,11 @@ export default {
             if (vm.occurrence_report_obj?.community_id) {
                 let community_display_url = api_endpoints.community_display +
                     "?community_id=" + vm.occurrence_report_obj.community_id
-                vm.$http.get(community_display_url).then(
-                    (response) => {
-                        var newOption = new Option(response.body.name, response.body.id, false, true);
+                fetch(community_display_url).then(async (response) => {
+                        const data = await response.json();
+                        var newOption = new Option(data.name, data.id, false, true);
                         $('#' + vm.community_name_lookup).append(newOption);
-                        vm.community_display = response.body.name
+                        vm.community_display = data.name
                     })
             }
         },
@@ -445,9 +445,8 @@ export default {
                 : api_endpoints.cs_profile_dict +
                 '?group_type=' +
                 vm.occurrence_report_obj.group_type;
-        vm.$http.get(dict_url).then(
-            (response) => {
-                vm.cs_profile_dict = response.body;
+        fetch(dict_url).then(async (response) => {
+                vm.cs_profile_dict = await response.json();
                 if (!vm.isCommunity) {
                     this.getSpeciesDisplay();
                 }
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
index e8821aca..9ee4317e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
@@ -276,12 +276,13 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id)).then((response) => {
-                this.$refs.document_detail.documentObj = response.body;
-                this.$refs.document_detail.documentObj.uploaded_date = response.body.uploaded_date != null && response.body.uploaded_date != undefined ? moment(response.body.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [response.body];
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.document_detail.documentObj = data;
+                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
+                this.$refs.document_detail.uploaded_document = [data];
                 //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(response.body.document_category);
+                this.$refs.document_detail.fetchSubCategory(data.document_category);
 
             },
                 err => {
@@ -311,7 +312,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -346,7 +350,10 @@ export default {
                 },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
index 64871abe..6c4502db 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
@@ -492,11 +492,15 @@ export default {
         updateHabitatCompositionDetails: function () {
             let vm = this;
             vm.updatingHabitatCompositionDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_habitat_composition_details')), JSON.stringify(vm.occurrence_report_obj.habitat_composition), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_habitat_composition_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_report_obj.habitat_composition)
+            }).then(async (response) => {
                 vm.updatingHabitatCompositionDetails = false;
-                vm.occurrence_report_obj.habitat_composition = response.body;
+                vm.occurrence_report_obj.habitat_composition = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Habitat Composition details have been saved',
@@ -527,11 +531,15 @@ export default {
             var valKeigheryTotal = vm.calcKeigheryTotal();
             if (valKeigheryTotal) {
                 vm.updatingHabitatConditionDetails = true;
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_habitat_condition_details')), JSON.stringify(vm.occurrence_report_obj.habitat_condition), {
-                    emulateJSON: true
-                }).then((response) => {
+                fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_habitat_condition_details')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(vm.occurrence_report_obj.habitat_condition)
+                }).then(async (response) => {
                     vm.updatingHabitatConditionDetails = false;
-                    vm.occurrence_report_obj.habitat_condition = response.body;
+                    vm.occurrence_report_obj.habitat_condition = await response.json();
                     swal.fire({
                         title: 'Saved',
                         text: 'Habitat Condition details have been saved',
@@ -565,11 +573,15 @@ export default {
         updateVegetationStructure: function () {
             let vm = this;
             vm.updatingVegetationStructure = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_vegetation_structure')), JSON.stringify(vm.occurrence_report_obj.vegetation_structure), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_vegetation_structure')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_report_obj.vegetation_structure)
+            }).then(async (response) => {
                 vm.updatingVegetationStructure = false;
-                vm.occurrence_report_obj.vegetation_structure = response.body;
+                vm.occurrence_report_obj.vegetation_structure = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Vegetation Structure details have been saved',
@@ -598,11 +610,15 @@ export default {
         updateFireHistoryDetails: function () {
             let vm = this;
             vm.updatingFireHistoryDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_fire_history_details')), JSON.stringify(vm.occurrence_report_obj.fire_history), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_fire_history_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_report_obj.fire_history)
+            }).then(async (response) => {
                 vm.updatingFireHistoryDetails = false;
-                vm.occurrence_report_obj.fire_history = response.body;
+                vm.occurrence_report_obj.fire_history = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Fire History details have been saved',
@@ -631,11 +647,15 @@ export default {
         updateAssociatedSpeciesDetails: function () {
             let vm = this;
             vm.updatingAssociatedSpeciesDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_associated_species_details')), JSON.stringify(vm.occurrence_report_obj.associated_species), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_associated_species_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.occurrence_report_obj.associated_species)
+            }).then(async (response) => {
                 vm.updatingAssociatedSpeciesDetails = false;
-                vm.occurrence_report_obj.associated_species = response.body;
+                vm.occurrence_report_obj.associated_species = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Associated Species details have been saved',
@@ -692,8 +712,8 @@ export default {
     created: async function () {
         let vm = this;
         //------fetch list of values
-        const res = await Vue.http.get('/api/occurrence_report/list_of_values.json');
-        vm.listOfValuesDict = res.body;
+        const response = await fetch('/api/occurrence_report/list_of_values.json');
+        vm.listOfValuesDict = response.json();
         vm.land_form_list = vm.listOfValuesDict.land_form_list;
         vm.land_form_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
index 2929a973..9eba3f1a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
@@ -247,14 +247,14 @@ import MapComponent from '../component_map.vue';
 import { api_endpoints, helpers } from '@/utils/hooks';
 // require("select2/dist/css/select2.min.css");
 // require("select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css")
-import { VueSelect } from 'vue-select';
+// import { VueSelect } from 'vue-select';
 
 export default {
     name: 'OCRLocation',
     components: {
         FormSection,
         MapComponent,
-        VueSelect,
+        // VueSelect,
     },
     props: {
         occurrence_report_obj: {
@@ -465,8 +465,8 @@ export default {
                 console.error('Error fetching location values list:', error);
             });
 
-        const response = await Vue.http.get('/api/region_district_filter_dict/');
-        vm.filterRegionDistrict = response.body;
+        const response = await fetch('/api/region_district_filter_dict/');
+        vm.filterRegionDistrict = await response.json();
         vm.region_list = vm.filterRegionDistrict.region_list;
         vm.district_list = vm.filterRegionDistrict.district_list;
         vm.region_list.splice(0, 0,
@@ -543,10 +543,9 @@ export default {
                         emulateJSON: true,
                     }
                 )
-                .then(
-                    (response) => {
+                .then(async (response) => {
                         vm.updatingLocationDetails = false;
-                        vm.occurrence_report_obj.location = response.body;
+                        vm.occurrence_report_obj.location = await response.json();
                         swal.fire({
                             title: 'Saved',
                             text: 'Location details have been saved',
@@ -634,7 +633,7 @@ export default {
 </script>
 
 <style lang="css" scoped>
-@import 'vue-select/dist/vue-select.css';
+/* @import 'vue-select/dist/vue-select.css'; */
 
 /*ul, li {
         zoom:1;
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
index 59902e2c..c7ba84d9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
@@ -120,8 +120,9 @@ export default {
         remindReferral: function (_id, user) {
             let vm = this;
 
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/remind')).then(response => {
-                vm.$emit('refreshFromResponse', response);
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/remind')).then(async (response) => {
+                const data = await response.json();
+                vm.$emit('refreshFromResponse', data);
                 vm.table.ajax.reload();
                 swal.fire({
                     title: 'Referral Reminder',
@@ -145,8 +146,9 @@ export default {
         },
         resendReferral: function (_id, user) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/resend')).then(response => {
-                vm.$emit('refreshFromResponse', response);
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/resend')).then(async (response) => {
+                const data = await response.json();
+                vm.$emit('refreshFromResponse', data);
                 vm.table.ajax.reload();
                 swal.fire({
                     title: 'Referral Resent',
@@ -170,8 +172,9 @@ export default {
         },
         recallReferral: function (_id, user) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/recall')).then(response => {
-                vm.$emit('refreshFromResponse', response);
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/recall')).then(async (response) => {
+                const data = await response.json();
+                vm.$emit('refreshFromResponse', data);
                 vm.table.ajax.reload();
                 swal.fire({
                     title: 'Referral Recall',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
index 119344e6..7e246a7e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
@@ -290,11 +290,15 @@ export default {
         updateObservationDetails: function () {
             let vm = this;
             vm.updatingObservationDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_observation_details')), JSON.stringify(vm.occurrence_report_obj.observation_detail), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_observation_details')), {
+                method: 'POST',
+                body: JSON.stringify(vm.occurrence_report_obj.observation_detail),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
                 vm.updatingObservationDetails = false;
-                vm.occurrence_report_obj.observation_detail = response.body;
+                vm.occurrence_report_obj.observation_detail = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Observation details have been saved',
@@ -323,11 +327,15 @@ export default {
         updateIdentificationDetails: function () {
             let vm = this;
             vm.updatingIdentificationDetails = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_identification_details')), JSON.stringify(vm.occurrence_report_obj.identification), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_identification_details')), {
+                method: 'POST',
+                body: JSON.stringify(vm.occurrence_report_obj.identification),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
                 vm.updatingIdentificationDetails = false;
-                vm.occurrence_report_obj.identification = response.body;
+                vm.occurrence_report_obj.identification = await response.json();
                 swal.fire({
                     title: 'Saved',
                     text: 'Identification details have been saved',
@@ -357,8 +365,8 @@ export default {
     created: async function () {
         let vm = this;
         //------fetch list of values
-        const res = await Vue.http.get(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_report_obj.group_type}`);
-        vm.listOfValuesDict = res.body;
+        const response = await fetch(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_report_obj.group_type}`);
+        vm.listOfValuesDict = await response.json();
         vm.observation_method_list = vm.listOfValuesDict.observation_method_list;
         vm.observation_method_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
index eb2769c4..c33d68a4 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
@@ -163,7 +163,7 @@ export default {
             let vm = this;
             if (vm.selected_scientific_name && !vm.adding_species) {
                 vm.adding_species = true
-                vm.$http.get("/api/occurrence_report/" + this.occurrence_report_obj.id + '/add_related_species?species=' + vm.selected_scientific_name)
+                fetch("/api/occurrence_report/" + this.occurrence_report_obj.id + '/add_related_species?species=' + vm.selected_scientific_name)
                     .then((response) => {
                         swal.fire({
                             title: 'Added',
@@ -200,7 +200,7 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.get("/api/occurrence_report/" + this.occurrence_report_obj.id + '/remove_related_species?species=' + id)
+                    fetch("/api/occurrence_report/" + this.occurrence_report_obj.id + '/remove_related_species?species=' + id)
                         .then((response) => {
                             swal.fire({
                                 title: 'Removed',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
index 609f608b..4a7b4542 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
@@ -6,7 +6,7 @@
                     <FormSection :formCollapse="false" :label="sectionTypeDisplay">
                         <div class="card-body card-collapse">
                             <div v-for="(value,index) in sectionObjExpanded">
-                                <div v-if="value && index != 'id' ">  
+                                <div v-if="value && index != 'id' ">
                                     <div v-if="typeof value == 'object'" >
                                         <div v-for="(o_value,o_index) in value" class="row mb-3">
                                             <label class="col-sm-6 control-label">{{index}}.{{o_index}}:</label>
@@ -24,8 +24,8 @@
                                         </div>
                                     </div>
                                 </div>
-                            </div>  
-                        </div>            
+                            </div>
+                        </div>
                     </FormSection>
                 </div>
             </div>
@@ -87,9 +87,9 @@ export default {
         fetchSectionData: function(){
             let vm = this;
             if (vm.sectionObj.occurrence_report_id !== undefined) {
-                vm.$http.get(api_endpoints.lookup_ocr_section_values(vm.sectionType,vm.sectionObj.occurrence_report_id))
-                .then((response) => {
-                    vm.sectionObjExpanded = response.body;         
+                fetch(api_endpoints.lookup_ocr_section_values(vm.sectionType,vm.sectionObj.occurrence_report_id))
+                .then(async (response) => {
+                    vm.sectionObjExpanded = await response.json();
                 },(error) => {
                     console.log(error);
                 })
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
index 74ec47f8..bd3c6369 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
@@ -409,10 +409,11 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //Category, Current Impact, Potential Impact (generic to all threats)
-            vm.$http.get('/api/threat/threat_list_of_values/').then((response) => {
-                vm.threat_category_filter_list = response.body["threat_category_lists"];
-                vm.threat_current_impact_filter_list = response.body["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = response.body["potential_impact_lists"];
+            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
+                const data = await response.json();
+                vm.threat_category_filter_list = data["threat_category_lists"];
+                vm.threat_current_impact_filter_list = data["current_impact_lists"];
+                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
             }, (error) => {
                 console.log(error);
             })
@@ -440,9 +441,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -453,9 +455,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -484,7 +487,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -520,7 +526,10 @@ export default {
                 },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
index 6d4b17e6..ec8a1c2a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
@@ -469,11 +469,14 @@ export default {
             if (vm.is_report) {
                 endpoint = api_endpoints.occurrence_report;
             }
-            vm.$http.post(helpers.add_endpoint_json(endpoint, (vm.occurrence_id + '/update_plant_count_details')), JSON.stringify(vm.plant_count), {
-                emulateJSON: true
+            fetch(helpers.add_endpoint_json(endpoint, (vm.occurrence_id + '/update_plant_count_details')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.plant_count),
             }).then((response) => {
                 vm.updatingPlantCountDetails = false;
-                //vm.plant_count = response.body;
                 swal.fire({
                     title: 'Saved',
                     text: 'Plant Count details have been saved',
@@ -502,8 +505,8 @@ export default {
     },
     created: async function () {
         let vm = this;
-        const res = await Vue.http.get(`/api/occurrence/plant_count_list_of_values.json`);
-        vm.listOfPlantValuesDict = res.body;
+        const response = await fetch(`/api/occurrence/plant_count_list_of_values.json`);
+        vm.listOfPlantValuesDict = await response.json();
         vm.plant_count_method_list = vm.listOfPlantValuesDict.plant_count_method_list;
         vm.plant_count_method_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
index 11d03835..c630174d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
@@ -173,13 +173,13 @@ export default {
             let vm = this;
             if (vm.occurrence_obj.species_taxonomy_id != null) {
                 let species_display_url = api_endpoints.species_display + "?taxon_id=" + vm.occurrence_obj.species_taxonomy_id
-                vm.$http.get(species_display_url).then(
-                    (response) => {
-                        var newOption = new Option(response.body.name, response.body.id, false, true);
+                fetch(species_display_url).then(async (response) => {
+                        const data = await response.json();
+                        var newOption = new Option(data.name, data.id, false, true);
                         $('#' + vm.scientific_name_lookup).append(newOption);
-                        vm.species_display = response.body.name
-                        vm.taxon_previous_name = response.body.taxon_previous_name
-                        vm.common_name = response.body.common_name
+                        vm.species_display = data.name
+                        vm.taxon_previous_name = data.taxon_previous_name
+                        vm.common_name = data.common_name
                     })
             }
         },
@@ -194,8 +194,8 @@ export default {
         let action = this.$route.query.action;
         let dict_url = action == "view" ? api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type + '&action=' + action :
             api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type
-        vm.$http.get(dict_url).then((response) => {
-            vm.occ_profile_dict = response.body;
+        fetch(dict_url).then(async (response) => {
+            vm.occ_profile_dict = await response.json();
             vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
             vm.occurrence_source_list = vm.occ_profile_dict.occurrence_source_list;
             this.getSpeciesDisplay();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
index 00df2caf..ed564bc3 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
@@ -539,8 +539,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Community Values object
-            vm.$http.get(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsCommunity = response.body;
+            fetch(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsCommunity = await response.json();
                 vm.occurrence_list = vm.filterListsCommunity.occurrence_list;
                 vm.community_name_list = vm.filterListsCommunity.community_name_list;
                 vm.status_list = vm.filterListsCommunity.status_list;
@@ -573,9 +573,16 @@ export default {
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedCommunityOCC = await Vue.http.post(createUrl, payload);
-                        if (savedCommunityOCC) {
-                            newCommunityOCCId = savedCommunityOCC.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newCommunityOCCId = data.id;
                         }
                     }
                     catch (err) {
@@ -606,7 +613,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_occ_proposal(occurrence_id))
+                    fetch(api_endpoints.discard_occ_proposal(occurrence_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -640,7 +650,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_occ_proposal(occurrence_id))
+                    fetch(api_endpoints.reinstate_occ_proposal(occurrence_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
index cfdd09b6..83b64740 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
@@ -533,8 +533,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.status_list = vm.filterListsSpecies.status_list;
@@ -567,9 +567,16 @@ export default {
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedFaunaOCR = await Vue.http.post(createUrl, payload);
-                        if (savedFaunaOCR) {
-                            newFaunaOCRId = savedFaunaOCR.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFaunaOCRId = data.id;
                         }
                     }
                     catch (err) {
@@ -600,7 +607,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_occ_proposal(occurrence_id))
+                    fetch(api_endpoints.discard_occ_proposal(occurrence_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -634,7 +644,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_occ_proposal(occurrence_id))
+                    fetch(api_endpoints.reinstate_occ_proposal(occurrence_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
index 12b383e5..ee6d6cc7 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
@@ -534,8 +534,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.status_list = vm.filterListsSpecies.status_list;
@@ -570,9 +570,16 @@ export default {
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedFloraOCR = await Vue.http.post(createUrl, payload);
-                        if (savedFloraOCR) {
-                            newFloraOCRId = savedFloraOCR.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFloraOCRId = data.id;
                         }
                     }
                     catch (err) {
@@ -603,7 +610,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_occ_proposal(occurrence_id))
+                    fetch(api_endpoints.discard_occ_proposal(occurrence_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -637,7 +647,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_occ_proposal(occurrence_id))
+                    fetch(api_endpoints.reinstate_occ_proposal(occurrence_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
index 68838e35..79dc1022 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
@@ -618,8 +618,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Community Values object
-            vm.$http.get(api_endpoints.community_filter_dict).then((response) => {
-                vm.filterListsCommunity = response.body;
+            fetch(api_endpoints.community_filter_dict).then(async (response) => {
+                vm.filterListsCommunity = await response.json();
                 vm.occurrence_list = vm.filterListsCommunity.occurrence_list;
                 vm.community_name_list = vm.filterListsCommunity.community_name_list;
                 vm.status_list = vm.filterListsCommunity.status_list;
@@ -649,9 +649,16 @@ export default {
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedCommunityOCR = await Vue.http.post(createUrl, payload);
-                        if (savedCommunityOCR) {
-                            newCommunityOCRId = savedCommunityOCR.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newCommunityOCRId = data.id;
                         }
                     }
                     catch (err) {
@@ -679,7 +686,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -713,7 +723,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
index 27be143e..d94de8de 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
@@ -622,8 +622,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.status_list = vm.filterListsSpecies.status_list;
@@ -653,9 +653,16 @@ export default {
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedFaunaOCR = await Vue.http.post(createUrl, payload);
-                        if (savedFaunaOCR) {
-                            newFaunaOCRId = savedFaunaOCR.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFaunaOCRId = data.id;
                         }
                     }
                     catch (err) {
@@ -683,7 +690,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -717,7 +727,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
index 54d49a6d..c002f7cd 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
@@ -623,8 +623,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.status_list = vm.filterListsSpecies.status_list;
@@ -654,9 +654,16 @@ export default {
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
                         payload.internal_application = true
-                        let savedFloraOCR = await Vue.http.post(createUrl, payload);
-                        if (savedFloraOCR) {
-                            newFloraOCRId = savedFloraOCR.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFloraOCRId = data.id;
                         }
                     }
                     catch (err) {
@@ -684,7 +691,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -718,7 +728,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
index 3c19beca..266ebf8b 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="threatForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <alert v-if="change_warning && !isReadOnly" type="warning"><strong>{{ change_warning }}</strong>
                         </alert>
                         <div class="col-sm-12">
@@ -90,8 +90,7 @@
                                                     Change current impact to:
                                                 </div>
                                             </template>
-                                            <template
-                                                v-if="current_impact_list && current_impact_list.length > 0">
+                                            <template v-if="current_impact_list && current_impact_list.length > 0">
                                                 <div v-for="current_impact in current_impact_list"
                                                     class="form-check form-check-inline ">
                                                     <input :disabled="isReadOnly" type="radio" class="form-check-input"
@@ -99,10 +98,9 @@
                                                         :id="'current_impact_' + current_impact.id"
                                                         v-bind:key="current_impact.id"
                                                         v-model="threatObj.current_impact" />
-                                                    <label
-                                                        :for="'current_impact_' + current_impact.id">{{
-                                                            current_impact.name
-                                                        }}</label>
+                                                    <label :for="'current_impact_' + current_impact.id">{{
+                                                        current_impact.name
+                                                    }}</label>
                                                 </div>
                                             </template>
                                             <template v-else>
@@ -131,8 +129,7 @@
                                                     Change potential impact to:
                                                 </div>
                                             </template>
-                                            <template
-                                                v-if="potential_impact_list && potential_impact_list.length > 0">
+                                            <template v-if="potential_impact_list && potential_impact_list.length > 0">
                                                 <div v-for="potential_impact in potential_impact_list"
                                                     class="form-check form-check-inline ">
                                                     <input :disabled="isReadOnly" type="radio" class="form-check-input"
@@ -140,10 +137,9 @@
                                                         :id="'potential_impact_' + potential_impact.id"
                                                         v-bind:key="potential_impact.id"
                                                         v-model="threatObj.potential_impact" />
-                                                    <label
-                                                        :for="'potential_impact_' + potential_impact.id">{{
-                                                            potential_impact.name
-                                                        }}</label>
+                                                    <label :for="'potential_impact_' + potential_impact.id">{{
+                                                        potential_impact.name
+                                                    }}</label>
                                                 </div>
                                             </template>
                                             <template v-else>
@@ -330,8 +326,12 @@ export default {
             if (vm.threatObj.id) {
                 vm.updatingThreat = true;
                 formData.append('data', JSON.stringify(threatObj));
-                vm.$http.put(helpers.add_endpoint_json(vm.url, threatObj.id), formData, {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(vm.url, threatObj.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.updatingThreat = false;
                     vm.$parent.updatedThreats();
@@ -344,8 +344,12 @@ export default {
             } else {
                 vm.addingThreat = true;
                 formData.append('data', JSON.stringify(threatObj));
-                vm.$http.post(vm.url, formData, {
-                    emulateJSON: true,
+                fetch(vm.url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.addingThreat = false;
                     vm.close();
@@ -362,9 +366,10 @@ export default {
         }
     },
     created: async function () {
-        let res = await this.$http.get('/api/threat/threat_list_of_values/');
+        let response = await fetch('/api/threat/threat_list_of_values/');
         let threat_list_of_values_res = {};
-        Object.assign(threat_list_of_values_res, res.body);
+        const data = await response.json();
+        Object.assign(threat_list_of_values_res, data);
         this.threat_category_list = threat_list_of_values_res.active_threat_category_lists;
         this.threat_category_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
index 021592b3..5d40dd52 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
@@ -260,12 +260,13 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.community_documents, id)).then((response) => {
-                this.$refs.document_detail.documentObj = response.body;
-                this.$refs.document_detail.documentObj.uploaded_date = response.body.uploaded_date != null && response.body.uploaded_date != undefined ? moment(response.body.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [response.body];
+            fetch(helpers.add_endpoint_json(api_endpoints.community_documents, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.document_detail.documentObj = data;
+                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
+                this.$refs.document_detail.uploaded_document = [data];
                 //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(response.body.document_category);
+                this.$refs.document_detail.fetchSubCategory(data.document_category);
             },
                 err => {
                     console.log(err);
@@ -295,7 +296,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.community_documents, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.community_documents, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -329,7 +333,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.community_documents, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.community_documents, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
index 4adc3e73..959a9d9b 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
@@ -1,13 +1,14 @@
 <template lang="html">
     <div id="community_occ_threats">
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted" class="mb-2">
+        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
+            class="mb-2">
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Threat Source:</label>
                         <select class="form-select" v-model="filterThreatSource">
                             <option value="all">All</option>
-                            <option v-for="option in threat_source_filter_list" :value="option">{{option}}
+                            <option v-for="option in threat_source_filter_list" :value="option">{{ option }}
                             </option>
                         </select>
                     </div>
@@ -17,7 +18,7 @@
                         <label for="">Category:</label>
                         <select class="form-select" v-model="filterThreatCategory">
                             <option value="all">All</option>
-                            <option v-for="option in threat_category_filter_list" :value="option.id">{{option.name}}
+                            <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -27,7 +28,8 @@
                         <label for="">Current Impact:</label>
                         <select class="form-select" v-model="filterThreatCurrentImpact">
                             <option value="all">All</option>
-                            <option v-for="option in threat_current_impact_filter_list" :value="option.id">{{option.name}}
+                            <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -37,47 +39,48 @@
                         <label for="">Potential Impact:</label>
                         <select class="form-select" v-model="filterThreatPotentialImpact">
                             <option value="all">All</option>
-                            <option v-for="option in threat_potential_impact_filter_list" :value="option.id">{{option.name}}
+                            <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
-                        <div class="form-group">
-                            <label for="">Status:</label>
-                            <select class="form-select" v-model="filterThreatStatus">
-                                <option value="all">All</option>
-                                <option v-for="option in threat_status_filter_list" :value="option.id">{{option.name}}
-                                </option>
-                            </select>
-                        </div>
+                    <div class="form-group">
+                        <label for="">Status:</label>
+                        <select class="form-select" v-model="filterThreatStatus">
+                            <option value="all">All</option>
+                            <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                            </option>
+                        </select>
                     </div>
+                </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed From:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date" v-model="filterObservedFromDate">
+                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
+                            v-model="filterObservedFromDate">
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed To:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date" v-model="filterObservedToDate">
+                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
+                            v-model="filterObservedToDate">
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
         <div>
             <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-            :dtHeaders="threats_headers"/>
+                :dtHeaders="threats_headers" />
         </div>
 
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url"></ThreatDetail>
+        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url">
+        </ThreatDetail>
         <div v-if="occConservationThreatHistoryId">
-            <ConservationThreatHistory
-                ref="occ_conservation_threat_history"
-                :key="occConservationThreatHistoryId"
-                :threat-id="occConservationThreatHistoryId"
-            />
+            <ConservationThreatHistory ref="occ_conservation_threat_history" :key="occConservationThreatHistoryId"
+                :threat-id="occConservationThreatHistoryId" />
         </div>
     </div>
 </template>
@@ -92,404 +95,409 @@ import {
     api_endpoints,
     helpers,
 }
-from '@/utils/hooks'
+    from '@/utils/hooks'
 
 
 export default {
-        name: 'OCCThreats',
-        props:{
-            community_obj:{
-                type: Object,
-                required:true
-            },
+    name: 'OCCThreats',
+    props: {
+        community_obj: {
+            type: Object,
+            required: true
         },
-        data:function () {
-            let vm = this;
-            return{
-                uuid:0,
-                occConservationThreatHistoryId: null,
-                showExisting: false,
-                threatBody: "threatBody"+ vm._uid,
-                panelBody: "community-threats-"+ vm._uid,
-                values:null,
-                occ_threat_url: api_endpoints.occ_threat,
+    },
+    data: function () {
+        let vm = this;
+        return {
+            uuid: 0,
+            occConservationThreatHistoryId: null,
+            showExisting: false,
+            threatBody: "threatBody" + vm._uid,
+            panelBody: "community-threats-" + vm._uid,
+            values: null,
+            occ_threat_url: api_endpoints.occ_threat,
 
-                filterThreatSource: 'all',
-                filterThreatCategory: 'all',
-                filterThreatCurrentImpact: 'all',
-                filterThreatPotentialImpact: 'all',
-                filterThreatStatus: 'all',
-                filterObservedFromDate: '',
-                filterObservedToDate: '',
+            filterThreatSource: 'all',
+            filterThreatCategory: 'all',
+            filterThreatCurrentImpact: 'all',
+            filterThreatPotentialImpact: 'all',
+            filterThreatStatus: 'all',
+            filterObservedFromDate: '',
+            filterObservedToDate: '',
 
-                threat_source_filter_list: [],
-                threat_category_filter_list: [],
-                threat_current_impact_filter_list: [],
-                threat_potential_impact_filter_list: [],
+            threat_source_filter_list: [],
+            threat_category_filter_list: [],
+            threat_current_impact_filter_list: [],
+            threat_potential_impact_filter_list: [],
 
-                threat_status_filter_list: [
-                    {id:"active",name:"Active"},
-                    {id:"removed",name:"Removed"},
-                ],
+            threat_status_filter_list: [
+                { id: "active", name: "Active" },
+                { id: "removed", name: "Removed" },
+            ],
 
-                threats_headers:['Number', 'Original Report','Category', 'Date Observed', 'Threat Agent', 'Comments',
-                                'Current Impact', 'Potential Impact', 'Threat Source','Action'],
-                threats_options:{
-                    autowidth: false,
-                    language:{
-                        processing: constants.DATATABLE_PROCESSING_HTML
+            threats_headers: ['Number', 'Original Report', 'Category', 'Date Observed', 'Threat Agent', 'Comments',
+                'Current Impact', 'Potential Impact', 'Threat Source', 'Action'],
+            threats_options: {
+                autowidth: false,
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML
+                },
+                responsive: true,
+                searching: true,
+                //  to show the "workflow Status","Action" columns always in the last position
+                columnDefs: [
+                    { responsivePriority: 1, targets: 0 },
+                    { responsivePriority: 2, targets: -1 },
+                ],
+                ajax: {
+                    "url": helpers.add_endpoint_json(api_endpoints.community, vm.community_obj.id + '/occurrence_threats'),
+                    "dataSrc": '',
+                    "data": function (d) {
+                        d.filter_threat_source = vm.filterThreatSource
+                        d.filter_threat_category = vm.filterThreatCategory
+                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
+                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
+                        d.filter_threat_status = vm.filterThreatStatus
+                        d.filter_observed_from_date = vm.filterObservedFromDate
+                        d.filter_observed_to_date = vm.filterObservedToDate
                     },
-                    responsive: true,
-                    searching: true,
-                    //  to show the "workflow Status","Action" columns always in the last position
-                    columnDefs: [
-                        { responsivePriority: 1, targets: 0 },
-                        { responsivePriority: 2, targets: -1 },
-                    ],
-                    ajax:{
-                        "url": helpers.add_endpoint_json(api_endpoints.community,vm.community_obj.id+'/occurrence_threats'),
-                        "dataSrc": '',
-                        "data": function ( d ) {
-                            d.filter_threat_source = vm.filterThreatSource
-                            d.filter_threat_category = vm.filterThreatCategory
-                            d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                            d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                            d.filter_threat_status = vm.filterThreatStatus
-                            d.filter_observed_from_date = vm.filterObservedFromDate
-                            d.filter_observed_to_date = vm.filterObservedToDate
-                        },
+                },
+                oorder: [[0, 'desc']],
+                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
+                buttons: [
+                    {
+                        extend: 'excel',
+                        title: 'Boranga Community Occurrence Threats Excel Export',
+                        text: '<i class="fa-solid fa-download"></i> Excel',
+                        className: 'btn btn-primary me-2 rounded',
+                        exportOptions: {
+                            orthogonal: 'export'
+                        }
+                    },
+                    {
+                        extend: 'csv',
+                        title: 'Boranga Community Occurrence Threats CSV Export',
+                        text: '<i class="fa-solid fa-download"></i> CSV',
+                        className: 'btn btn-primary rounded',
+                        exportOptions: {
+                            orthogonal: 'export'
+                        }
                     },
-                    oorder: [[0, 'desc']],
-                    dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                     "<'row'<'col-sm-12'tr>>" +
-                     "<'d-flex align-items-center'<'me-auto'i>p>",
-                    buttons:[
-                        {
-                            extend: 'excel',
-                            title: 'Boranga Community Occurrence Threats Excel Export',
-                            text: '<i class="fa-solid fa-download"></i> Excel',
-                            className: 'btn btn-primary me-2 rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                ],
+                columns: [
+                    {
+                        data: "threat_number",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return "OCC" + full.occurrence + " - " + full.threat_number;
                             }
-                        },
-                        {
-                            extend: 'csv',
-                            title: 'Boranga Community Occurrence Threats CSV Export',
-                            text: '<i class="fa-solid fa-download"></i> CSV',
-                            className: 'btn btn-primary rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                            else {
+                                return '<s>' + "OCC" + full.occurrence + " - " + full.threat_number + '</s>'
                             }
                         },
-                    ],
-                    columns: [
-                        {
-                            data: "threat_number",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return "OCC" + full.occurrence + " - " + full.threat_number;
-                                }
-                                else{
-                                    return '<s>'+ "OCC" + full.occurrence + " - " + full.threat_number + '</s>'
-                                }
-                            },
 
+                    },
+                    {
+                        data: "original_report",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible && full.original_report != null) {
+                                return full.original_report + " - " + full.original_threat;
+                            }
+                            else {
+                                return ""
+                            }
                         },
-                        {
-                            data: "original_report",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible && full.original_report != null){
-                                    return full.original_report + " - " + full.original_threat;
-                                }
-                                else{
-                                    return ""
-                                }
-                            },
 
+                    },
+                    {
+                        data: "threat_category",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_category;
+                            }
+                            else {
+                                return '<s>' + full.threat_category + '</s>'
+                            }
                         },
-                        {
-                            data: "threat_category",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_category;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_category + '</s>'
-                                }
-                            },
 
-                        },
-                        {
-                            data: "date_observed",
-                            mRender:function (data,type,full){
-                                if(full.visible){
-                                    return data != '' && data != null ? moment(data).format('DD/MM/YYYY'):'';
-                                }
-                                else{
-                                    return data != '' && data != null ? '<s>'+ moment(data).format('DD/MM/YYYY'):'' + '</s>'
-                                }
+                    },
+                    {
+                        data: "date_observed",
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
+                            }
+                            else {
+                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
+                            }
+                        }
+                    },
+                    {
+                        data: "threat_agent",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_agent;
+                            }
+                            else {
+                                return '<s>' + full.threat_agent + '</s>'
                             }
                         },
-                        {
-                            data: "threat_agent",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_agent;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_agent + '</s>'
-                                }
-                            },
 
+                    },
+                    {
+                        data: "comment",
+                        orderable: true,
+                        searchable: true,
+                        'render': function (value, type, full) {
+                            let result = helpers.dtPopover(value, 30, 'hover');
+                            if (full.visible) {
+                                return type == 'export' ? value : result;
+                            }
+                            else {
+                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            }
                         },
-                        {
-                            data: "comment",
-                            orderable: true,
-                            searchable: true,
-                            'render': function(value, type, full){
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                if(full.visible){
-                                    return type=='export' ? value : result;
-                                }
-                                else{
-                                    return type=='export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
-                                }
-                            },
+                    },
+                    {
+                        data: "current_impact_name",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.current_impact_name;
+                            }
+                            else {
+                                return '<s>' + full.current_impact_name + '</s>'
+                            }
                         },
-                        {
-                            data: "current_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.current_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.current_impact_name + '</s>'
-                                }
-                            },
 
+                    },
+                    {
+                        data: "potential_impact_name",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.potential_impact_name;
+                            }
+                            else {
+                                return '<s>' + full.potential_impact_name + '</s>'
+                            }
                         },
-                        {
-                            data: "potential_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.potential_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.potential_impact_name + '</s>'
-                                }
-                            },
+                    },
+                    {
+                        data: "source",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.source;
+                            }
+                            else {
+                                return '<s>' + full.source + '</s>'
+                            }
                         },
-                        {
-                            data: "source",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.source;
-                                }
-                                else{
-                                    return '<s>'+ full.source + '</s>'
-                                }
-                            },
 
-                        },
-                        {
-                            data: "id",
-                            mRender:function (data,type,full){
-                                let links = '';
-                                if(full.visible){
-                                    links +=  `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
-                                    links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
-                                }
-                                else{
-                                    links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
-                                }
-                                return links;
+                    },
+                    {
+                        data: "id",
+                        mRender: function (data, type, full) {
+                            let links = '';
+                            if (full.visible) {
+                                links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
+                                links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
                             }
-                        },
-                    ],
-                    processing:true,
-                    drawCallback: function() {
+                            else {
+                                links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
+                            }
+                            return links;
+                        }
+                    },
+                ],
+                processing: true,
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
-                        helpers.enablePopovers();
-                        // another option to fix the responsive table overflow css on tab switch
-                        // vm.$refs.threats_datatable.vmDataTable.draw('page');
-                        setTimeout(function (){
-                            vm.adjust_table_width();
-                        },100);
-                    },
-                }
+                initComplete: function () {
+                    helpers.enablePopovers();
+                    // another option to fix the responsive table overflow css on tab switch
+                    // vm.$refs.threats_datatable.vmDataTable.draw('page');
+                    setTimeout(function () {
+                        vm.adjust_table_width();
+                    }, 100);
+                },
             }
-        },
-        components: {
-            datatable,
-            ThreatDetail,
-            ConservationThreatHistory,
-            CollapsibleFilters,
-        },
-        computed: {
-            filterApplied: function(){
-                if(this.filterThreatSource === 'all' &&
+        }
+    },
+    components: {
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        CollapsibleFilters,
+    },
+    computed: {
+        filterApplied: function () {
+            if (this.filterThreatSource === 'all' &&
                 this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
                 this.filterThreatStatus === 'all' &&
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
-                ){
-                    return false
-                } else {
-                    return true
-                }
-            },
-        },
-        watch:{
-            filterApplied: function(){
-                if (this.$refs.collapsible_filters){
-                    // Collapsible component exists
-                    this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-                }
-            },
-            filterThreatSource: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatCategory: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatCurrentImpact: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatPotentialImpact: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatStatus: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterObservedFromDate: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterObservedToDate: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
+            ) {
+                return false
+            } else {
+                return true
+            }
         },
-        methods:{
-            collapsible_component_mounted: function(){
+    },
+    watch: {
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
                 this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            },
+            }
+        },
+        filterThreatSource: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatCategory: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatCurrentImpact: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatPotentialImpact: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatStatus: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterObservedFromDate: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterObservedToDate: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+    },
+    methods: {
+        collapsible_component_mounted: function () {
+            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+        },
 
-            fetchFilterLists: function(){
-                let vm = this;
+        fetchFilterLists: function () {
+            let vm = this;
 
-                //Threat Source filter list (specific to instance)
-                vm.$http.get(helpers.add_endpoint_json(api_endpoints.community,vm.community_obj.id+'/occurrence_threat_source_list')).then((response) => {
-                    vm.threat_source_filter_list = response.body;
-                },(error) => {
-                    console.log(error);
-                })
+            //Threat Source filter list (specific to instance)
+            fetch(helpers.add_endpoint_json(api_endpoints.community, vm.community_obj.id + '/occurrence_threat_source_list')).then(async (response) => {
+                vm.threat_source_filter_list = await response.json();
+            }, (error) => {
+                console.log(error);
+            })
 
-                //Category, Current Impact, Potential Impact (generic to all threats)
-                vm.$http.get('/api/threat/threat_list_of_values/').then((response) => {
-                    vm.threat_category_filter_list= response.body["threat_category_lists"];
-                    vm.threat_current_impact_filter_list = response.body["current_impact_lists"];
-                    vm.threat_potential_impact_filter_list = response.body["potential_impact_lists"];
-                },(error) => {
-                    console.log(error);
-                })
+            //Category, Current Impact, Potential Impact (generic to all threats)
+            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
+                const data = await response.json();
+                vm.threat_category_filter_list = data["threat_category_lists"];
+                vm.threat_current_impact_filter_list = data["current_impact_lists"];
+                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
+            }, (error) => {
+                console.log(error);
+            })
 
+        },
+        viewThreat: function (id) {
+            let vm = this;
+            this.$refs.threat_detail.threat_id = id;
+            this.$refs.threat_detail.threat_action = 'view';
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
-            viewThreat: function(id){
-                let vm=this;
-                this.$refs.threat_detail.threat_id = id;
-                this.$refs.threat_detail.threat_action='view';
-                Vue.http.get(helpers.add_endpoint_json(api_endpoints.occ_threat,id)).then((response) => {
-                      this.$refs.threat_detail.threatObj=response.body;
-                      this.$refs.threat_detail.threatObj.date_observed =  response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD'): '';
-                    },
-                  err => {
-                            console.log(err);
-                      });
-                this.$refs.threat_detail.isModalOpen = true;
-            },
-            historyThreat: function(id){
-                this.occConservationThreatHistoryId = parseInt(id);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.occ_conservation_threat_history.isModalOpen = true;
-                });
-            },
-            updatedThreats(){
-                this.$refs.threats_datatable.vmDataTable.ajax.reload();
-            },
-            addEventListeners:function (){
-                let vm=this;
-                vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function(e) {
-                    e.preventDefault();
-                    var id = $(this).attr('data-view-threat');
-                    vm.viewThreat(id);
+                err => {
+                    console.log(err);
                 });
-                vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function(e) {
-                    e.preventDefault();
-                    var id = $(this).attr('data-history-threat');
-                    vm.historyThreat(id);
-                });
-                vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                    helpers.enablePopovers();
-                });
-            },
-            refreshFromResponse: function(){
-                this.$refs.threats_datatable.vmDataTable.ajax.reload();
-            },
-            adjust_table_width: function(){
-                if (this.$refs.threats_datatable !== undefined) {this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc();}
-            },
+            this.$refs.threat_detail.isModalOpen = true;
         },
-        mounted: function(){
-            this.fetchFilterLists();
-            let vm = this;
+        historyThreat: function (id) {
+            this.occConservationThreatHistoryId = parseInt(id);
+            this.uuid++;
             this.$nextTick(() => {
-                vm.addEventListeners();
+                this.$refs.occ_conservation_threat_history.isModalOpen = true;
+            });
+        },
+        updatedThreats() {
+            this.$refs.threats_datatable.vmDataTable.ajax.reload();
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
+                e.preventDefault();
+                var id = $(this).attr('data-view-threat');
+                vm.viewThreat(id);
+            });
+            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
+                e.preventDefault();
+                var id = $(this).attr('data-history-threat');
+                vm.historyThreat(id);
+            });
+            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+                helpers.enablePopovers();
+            });
+        },
+        refreshFromResponse: function () {
+            this.$refs.threats_datatable.vmDataTable.ajax.reload();
+        },
+        adjust_table_width: function () {
+            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
         });
-        }
     }
+}
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+
+legend.scheduler-border {
+    width: inherit;
+    /* Or auto */
+    padding: 0 10px;
+    /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
index 6cb9a201..a2603508 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
@@ -125,32 +125,33 @@
                 <div class="row mb-3">
                     <label for="" class="col-sm-5 col-form-label">Extent of Occurrences:
                         <HelpText v-if="species_community.distribution.eoo_auto"
-                            section_id="communities_extent_of_occurrences" /></label>
-                        <div class="col-sm-4">
-                            <div class="input-group">
-                                <input v-if="species_community.distribution.eoo_auto" :disabled="isEOOReadOnly"
-                                    type="number" class="form-control" id="extent_of_occurrence" placeholder=""
-                                    v-model="species_community.area_occurrence_convex_hull_km2" />
-                                <input v-else :disabled="isEOOReadOnly" type="number" class="form-control"
-                                    id="extent_of_occurrence" ref="extent_of_occurrence" placeholder=""
-                                    v-model="species_community.distribution.extent_of_occurrences" />
-                                <span class="input-group-text" id="area_of_occupancy_km2-addon">km&#xb2;</span>
-                            </div>
+                            section_id="communities_extent_of_occurrences" />
+                    </label>
+                    <div class="col-sm-4">
+                        <div class="input-group">
+                            <input v-if="species_community.distribution.eoo_auto" :disabled="isEOOReadOnly"
+                                type="number" class="form-control" id="extent_of_occurrence" placeholder=""
+                                v-model="species_community.area_occurrence_convex_hull_km2" />
+                            <input v-else :disabled="isEOOReadOnly" type="number" class="form-control"
+                                id="extent_of_occurrence" ref="extent_of_occurrence" placeholder=""
+                                v-model="species_community.distribution.extent_of_occurrences" />
+                            <span class="input-group-text" id="area_of_occupancy_km2-addon">km&#xb2;</span>
                         </div>
-                        <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
-                            <div class="form-check form-check-inline">
-                                <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                                    id="eoo_auto" @click="switchEOO('true')"
-                                    v-model="species_community.distribution.eoo_auto">
-                                <label class="form-check-label">auto</label>
-                            </div>
-                            <div class="form-check form-check-inline">
-                                <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input"
-                                    id="eoo_manual" @click="switchEOO('false')"
-                                    v-model="species_community.distribution.eoo_auto">
-                                <label class="form-check-label">manual</label>
-                            </div>
+                    </div>
+                    <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
+                        <div class="form-check form-check-inline">
+                            <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
+                                id="eoo_auto" @click="switchEOO('true')"
+                                v-model="species_community.distribution.eoo_auto">
+                            <label class="form-check-label">auto</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                            <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input"
+                                id="eoo_manual" @click="switchEOO('false')"
+                                v-model="species_community.distribution.eoo_auto">
+                            <label class="form-check-label">manual</label>
                         </div>
+                    </div>
                 </div>
                 <div class="row mb-3">
                     <label for="" class="col-sm-5 col-form-label">Area of Occupancy:</label>
@@ -163,8 +164,10 @@
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-5 col-form-label">Actual Area of Occupancy: <HelpText v-if="species_community.distribution.aoo_actual_auto"
-                        section_id="communities_actual_area_of_occupancy" /></label>
+                    <label for="" class="col-sm-5 col-form-label">Actual Area of Occupancy:
+                        <HelpText v-if="species_community.distribution.aoo_actual_auto"
+                            section_id="communities_actual_area_of_occupancy" />
+                    </label>
                     <div class="col-sm-4">
                         <div class="input-group">
                             <input v-if="species_community.distribution.aoo_actual_auto" :disabled="isAOOActualReadOnly"
@@ -622,11 +625,15 @@ export default {
         },
         updatePublishing(data) {
             let vm = this;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.community, (vm.species_community.id + '/update_publishing_status')), data, {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.community, (vm.species_community.id + '/update_publishing_status')), {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: data
+            }).then(async (response) => {
                 vm.updatingPublishing = false;
-                vm.species_community.publishing_status = response.body;
+                vm.species_community.publishing_status = await response.json();
                 vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
                 swal.fire({
                     title: 'Saved',
@@ -703,8 +710,8 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            vm.$http.get(api_endpoints.regions).then((response) => {
-                vm.api_regions = response.body;
+            fetch(api_endpoints.regions).then(async (response) => {
+                vm.api_regions = await response.json();
                 for (var i = 0; i < vm.api_regions.length; i++) {
                     this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
                 }
@@ -970,24 +977,14 @@ export default {
             }
         }
         //------fetch list of values
-        const res_obj = await Vue.http.get('/api/community_profile_dict/');
-        vm.community_profile_dict = res_obj.body;
+        const response = await fetch('/api/community_profile_dict/');
+        vm.community_profile_dict = await response.json();
         vm.post_fire_habitatat_interactions_list = vm.community_profile_dict.post_fire_habitatat_interactions_list;
         vm.post_fire_habitatat_interactions_list.splice(0, 0,
             {
                 id: null,
                 name: null,
             });
-        //const response = await Vue.http.get('/api/region_district_filter_dict/');
-        //vm.filterRegionDistrict= response.body;
-        //vm.region_list = vm.filterRegionDistrict.region_list;
-        //vm.district_list= vm.filterRegionDistrict.district_list;
-        //vm.region_list.splice(0,0,
-        //{
-        //    id: null,
-        //    name: null,
-        //});
-        //this.filterDistrict();
         vm.fetchRegions();
     },
     mounted: function () {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
index c6f806e4..717f04b1 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
@@ -430,10 +430,11 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //Category, Current Impact, Potential Impact (generic to all threats)
-            vm.$http.get('/api/threat/threat_list_of_values/').then((response) => {
-                vm.threat_category_filter_list = response.body["threat_category_lists"];
-                vm.threat_current_impact_filter_list = response.body["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = response.body["potential_impact_lists"];
+            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
+                const data = await response.json();
+                vm.threat_category_filter_list = data["threat_category_lists"];
+                vm.threat_current_impact_filter_list = data["current_impact_lists"];
+                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
             }, (error) => {
                 console.log(error);
             })
@@ -461,9 +462,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -474,9 +476,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -515,7 +518,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.threat, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -556,7 +562,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.threat, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
index 5e61b847..26854981 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
@@ -5,7 +5,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="addSpeciesToCombine">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div>
                             <div class="row mb-3">
                                 <label for="" class="col-sm-3 control-label">Species:</label>
@@ -80,8 +80,9 @@ export default {
         addSpeciesToCombineList: function () {
             let vm = this;
             try {
-                Vue.http.get(`/api/species/${vm.combineSpeciesId}/internal_species.json`).then(res => {
-                    let species_obj = res.body.species_obj;
+                fetch(`/api/species/${vm.combineSpeciesId}/internal_species.json`).then(async (response) => {
+                    const data = await response.json();
+                    let species_obj = data.species_obj;
                     // user should not able select the same ID if already exists in the array to combine
                     let hasSpecies = false;
                     for (const species of vm.$parent.original_species_combine_list) {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
index 1760adcd..a94da69e 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
@@ -1799,8 +1799,8 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            vm.$http.get(api_endpoints.regions).then((response) => {
-                vm.api_regions = response.body;
+            fetch(api_endpoints.regions).then(async (response) => {
+                vm.api_regions = await response.json();
                 for (var i = 0; i < vm.api_regions.length; i++) {
                     this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
                 }
@@ -1910,8 +1910,8 @@ export default {
             vm.time_to_maturity_range_new = true;
         }
         //------fetch list of values
-        const res = await Vue.http.get('/api/species_profile_dict/');
-        vm.species_profile_dict = res.body;
+        const response = await fetch('/api/species_profile_dict/');
+        vm.species_profile_dict = await response.json();
         vm.flora_recruitment_type_list = vm.species_profile_dict.flora_recruitment_type_list;
         vm.flora_recruitment_type_list.splice(0, 0,
             {
@@ -1930,16 +1930,6 @@ export default {
                 id: null,
                 name: null,
             });
-        // const response = await Vue.http.get('/api/region_district_filter_dict/');
-        // vm.filterRegionDistrict= response.body;
-        // vm.region_list= vm.filterRegionDistrict.region_list;
-        // vm.district_list= vm.filterRegionDistrict.district_list;
-        // vm.region_list.splice(0,0,
-        // {
-        //     id: null,
-        //     name: null,
-        // });
-        // this.filterDistrict();
         vm.fetchRegions();
     },
     mounted: function () {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
index bf6d6a6a..7e3c9cb3 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
@@ -257,12 +257,13 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.species_documents, id)).then((response) => {
-                this.$refs.document_detail.documentObj = response.body;
-                this.$refs.document_detail.documentObj.uploaded_date = response.body.uploaded_date != null && response.body.uploaded_date != undefined ? moment(response.body.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [response.body];
+            fetch(helpers.add_endpoint_json(api_endpoints.species_documents, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.document_detail.documentObj = data;
+                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
+                this.$refs.document_detail.uploaded_document = [data];
                 //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(response.body.document_category);
+                this.$refs.document_detail.fetchSubCategory(data.document_category);
 
             },
                 err => {
@@ -293,7 +294,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.species_documents, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.species_documents, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -327,7 +331,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.species_documents, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.species_documents, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
index d72fdcd1..2adf1bac 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
@@ -1,14 +1,15 @@
 <template lang="html">
     <div id="species_occ_threats">
 
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted" class="mb-2">
+        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
+            class="mb-2">
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Threat Source:</label>
                         <select class="form-select" v-model="filterThreatSource">
                             <option value="all">All</option>
-                            <option v-for="option in threat_source_filter_list" :value="option">{{option}}
+                            <option v-for="option in threat_source_filter_list" :value="option">{{ option }}
                             </option>
                         </select>
                     </div>
@@ -18,7 +19,7 @@
                         <label for="">Category:</label>
                         <select class="form-select" v-model="filterThreatCategory">
                             <option value="all">All</option>
-                            <option v-for="option in threat_category_filter_list" :value="option.id">{{option.name}}
+                            <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -28,7 +29,8 @@
                         <label for="">Current Impact:</label>
                         <select class="form-select" v-model="filterThreatCurrentImpact">
                             <option value="all">All</option>
-                            <option v-for="option in threat_current_impact_filter_list" :value="option.id">{{option.name}}
+                            <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -38,47 +40,48 @@
                         <label for="">Potential Impact:</label>
                         <select class="form-select" v-model="filterThreatPotentialImpact">
                             <option value="all">All</option>
-                            <option v-for="option in threat_potential_impact_filter_list" :value="option.id">{{option.name}}
+                            <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
-                        <div class="form-group">
-                            <label for="">Status:</label>
-                            <select class="form-select" v-model="filterThreatStatus">
-                                <option value="all">All</option>
-                                <option v-for="option in threat_status_filter_list" :value="option.id">{{option.name}}
-                                </option>
-                            </select>
-                        </div>
+                    <div class="form-group">
+                        <label for="">Status:</label>
+                        <select class="form-select" v-model="filterThreatStatus">
+                            <option value="all">All</option>
+                            <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                            </option>
+                        </select>
                     </div>
+                </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed From:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date" v-model="filterObservedFromDate">
+                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
+                            v-model="filterObservedFromDate">
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed To:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date" v-model="filterObservedToDate">
+                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
+                            v-model="filterObservedToDate">
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
         <div>
             <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-            :dtHeaders="threats_headers"/>
+                :dtHeaders="threats_headers" />
         </div>
 
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url"></ThreatDetail>
+        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url">
+        </ThreatDetail>
         <div v-if="occConservationThreatHistoryId">
-            <ConservationThreatHistory
-                ref="occ_conservation_threat_history"
-                :key="occConservationThreatHistoryId"
-                :threat-id="occConservationThreatHistoryId"
-            />
+            <ConservationThreatHistory ref="occ_conservation_threat_history" :key="occConservationThreatHistoryId"
+                :threat-id="occConservationThreatHistoryId" />
         </div>
     </div>
 </template>
@@ -93,404 +96,409 @@ import {
     api_endpoints,
     helpers,
 }
-from '@/utils/hooks'
+    from '@/utils/hooks'
 
 
 export default {
-        name: 'OCCThreats',
-        props:{
-            species_obj:{
-                type: Object,
-                required:true
-            },
+    name: 'OCCThreats',
+    props: {
+        species_obj: {
+            type: Object,
+            required: true
         },
-        data:function () {
-            let vm = this;
-            return{
-                uuid:0,
-                occConservationThreatHistoryId: null,
-                showExisting: false,
-                threatBody: "threatBody"+ vm._uid,
-                panelBody: "species-threats-"+ vm._uid,
-                values:null,
-                occ_threat_url: api_endpoints.occ_threat,
+    },
+    data: function () {
+        let vm = this;
+        return {
+            uuid: 0,
+            occConservationThreatHistoryId: null,
+            showExisting: false,
+            threatBody: "threatBody" + vm._uid,
+            panelBody: "species-threats-" + vm._uid,
+            values: null,
+            occ_threat_url: api_endpoints.occ_threat,
 
-                filterThreatSource: 'all',
-                filterThreatCategory: 'all',
-                filterThreatCurrentImpact: 'all',
-                filterThreatPotentialImpact: 'all',
-                filterThreatStatus: 'all',
-                filterObservedFromDate: '',
-                filterObservedToDate: '',
+            filterThreatSource: 'all',
+            filterThreatCategory: 'all',
+            filterThreatCurrentImpact: 'all',
+            filterThreatPotentialImpact: 'all',
+            filterThreatStatus: 'all',
+            filterObservedFromDate: '',
+            filterObservedToDate: '',
 
-                threat_source_filter_list: [],
-                threat_category_filter_list: [],
-                threat_current_impact_filter_list: [],
-                threat_potential_impact_filter_list: [],
+            threat_source_filter_list: [],
+            threat_category_filter_list: [],
+            threat_current_impact_filter_list: [],
+            threat_potential_impact_filter_list: [],
 
-                threat_status_filter_list: [
-                    {id:"active",name:"Active"},
-                    {id:"removed",name:"Removed"},
-                ],
+            threat_status_filter_list: [
+                { id: "active", name: "Active" },
+                { id: "removed", name: "Removed" },
+            ],
 
-                threats_headers:['Number', 'Original Report','Category', 'Date Observed', 'Threat Agent', 'Comments',
-                                'Current Impact', 'Potential Impact', 'Threat Source','Action'],
-                threats_options:{
-                    autowidth: false,
-                    language:{
-                        processing: constants.DATATABLE_PROCESSING_HTML
+            threats_headers: ['Number', 'Original Report', 'Category', 'Date Observed', 'Threat Agent', 'Comments',
+                'Current Impact', 'Potential Impact', 'Threat Source', 'Action'],
+            threats_options: {
+                autowidth: false,
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML
+                },
+                responsive: true,
+                searching: true,
+                //  to show the "workflow Status","Action" columns always in the last position
+                columnDefs: [
+                    { responsivePriority: 1, targets: 0 },
+                    { responsivePriority: 2, targets: -1 },
+                ],
+                ajax: {
+                    "url": helpers.add_endpoint_json(api_endpoints.species, vm.species_obj.id + '/occurrence_threats'),
+                    "dataSrc": '',
+                    "data": function (d) {
+                        d.filter_threat_source = vm.filterThreatSource
+                        d.filter_threat_category = vm.filterThreatCategory
+                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
+                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
+                        d.filter_threat_status = vm.filterThreatStatus
+                        d.filter_observed_from_date = vm.filterObservedFromDate
+                        d.filter_observed_to_date = vm.filterObservedToDate
                     },
-                    responsive: true,
-                    searching: true,
-                    //  to show the "workflow Status","Action" columns always in the last position
-                    columnDefs: [
-                        { responsivePriority: 1, targets: 0 },
-                        { responsivePriority: 2, targets: -1 },
-                    ],
-                    ajax:{
-                        "url": helpers.add_endpoint_json(api_endpoints.species,vm.species_obj.id+'/occurrence_threats'),
-                        "dataSrc": '',
-                        "data": function ( d ) {
-                            d.filter_threat_source = vm.filterThreatSource
-                            d.filter_threat_category = vm.filterThreatCategory
-                            d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                            d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                            d.filter_threat_status = vm.filterThreatStatus
-                            d.filter_observed_from_date = vm.filterObservedFromDate
-                            d.filter_observed_to_date = vm.filterObservedToDate
-                        },
+                },
+                order: [[0, 'desc']],
+                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
+                buttons: [
+                    {
+                        extend: 'excel',
+                        title: 'Boranga Species Occurrence Threats Excel Export',
+                        text: '<i class="fa-solid fa-download"></i> Excel',
+                        className: 'btn btn-primary me-2 rounded',
+                        exportOptions: {
+                            orthogonal: 'export'
+                        }
+                    },
+                    {
+                        extend: 'csv',
+                        title: 'Boranga Species Occurrence Threats CSV Export',
+                        text: '<i class="fa-solid fa-download"></i> CSV',
+                        className: 'btn btn-primary rounded',
+                        exportOptions: {
+                            orthogonal: 'export'
+                        }
                     },
-                    order: [[0, 'desc']],
-                    dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                     "<'row'<'col-sm-12'tr>>" +
-                     "<'d-flex align-items-center'<'me-auto'i>p>",
-                    buttons:[
-                        {
-                            extend: 'excel',
-                            title: 'Boranga Species Occurrence Threats Excel Export',
-                            text: '<i class="fa-solid fa-download"></i> Excel',
-                            className: 'btn btn-primary me-2 rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                ],
+                columns: [
+                    {
+                        data: "threat_number",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return "OCC" + full.occurrence + " - " + full.threat_number;
                             }
-                        },
-                        {
-                            extend: 'csv',
-                            title: 'Boranga Species Occurrence Threats CSV Export',
-                            text: '<i class="fa-solid fa-download"></i> CSV',
-                            className: 'btn btn-primary rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                            else {
+                                return '<s>' + "OCC" + full.occurrence + " - " + full.threat_number + '</s>'
                             }
                         },
-                    ],
-                    columns: [
-                        {
-                            data: "threat_number",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return "OCC" + full.occurrence + " - " + full.threat_number;
-                                }
-                                else{
-                                    return '<s>'+ "OCC" + full.occurrence + " - " + full.threat_number + '</s>'
-                                }
-                            },
 
+                    },
+                    {
+                        data: "original_report",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible && full.original_report != null) {
+                                return full.original_report + " - " + full.original_threat;
+                            }
+                            else {
+                                return ""
+                            }
                         },
-                        {
-                            data: "original_report",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible && full.original_report != null){
-                                    return full.original_report + " - " + full.original_threat;
-                                }
-                                else{
-                                    return ""
-                                }
-                            },
 
+                    },
+                    {
+                        data: "threat_category",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_category;
+                            }
+                            else {
+                                return '<s>' + full.threat_category + '</s>'
+                            }
                         },
-                        {
-                            data: "threat_category",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_category;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_category + '</s>'
-                                }
-                            },
 
-                        },
-                        {
-                            data: "date_observed",
-                            mRender:function (data,type,full){
-                                if(full.visible){
-                                    return data != '' && data != null ? moment(data).format('DD/MM/YYYY'):'';
-                                }
-                                else{
-                                    return data != '' && data != null ? '<s>'+ moment(data).format('DD/MM/YYYY'):'' + '</s>'
-                                }
+                    },
+                    {
+                        data: "date_observed",
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
+                            }
+                            else {
+                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
+                            }
+                        }
+                    },
+                    {
+                        data: "threat_agent",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_agent;
+                            }
+                            else {
+                                return '<s>' + full.threat_agent + '</s>'
                             }
                         },
-                        {
-                            data: "threat_agent",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_agent;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_agent + '</s>'
-                                }
-                            },
 
+                    },
+                    {
+                        data: "comment",
+                        orderable: true,
+                        searchable: true,
+                        'render': function (value, type, full) {
+                            let result = helpers.dtPopover(value, 30, 'hover');
+                            if (full.visible) {
+                                return type == 'export' ? value : result;
+                            }
+                            else {
+                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            }
                         },
-                        {
-                            data: "comment",
-                            orderable: true,
-                            searchable: true,
-                            'render': function(value, type, full){
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                if(full.visible){
-                                    return type=='export' ? value : result;
-                                }
-                                else{
-                                    return type=='export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
-                                }
-                            },
+                    },
+                    {
+                        data: "current_impact_name",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.current_impact_name;
+                            }
+                            else {
+                                return '<s>' + full.current_impact_name + '</s>'
+                            }
                         },
-                        {
-                            data: "current_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.current_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.current_impact_name + '</s>'
-                                }
-                            },
 
+                    },
+                    {
+                        data: "potential_impact_name",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.potential_impact_name;
+                            }
+                            else {
+                                return '<s>' + full.potential_impact_name + '</s>'
+                            }
                         },
-                        {
-                            data: "potential_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.potential_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.potential_impact_name + '</s>'
-                                }
-                            },
+                    },
+                    {
+                        data: "source",
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.source;
+                            }
+                            else {
+                                return '<s>' + full.source + '</s>'
+                            }
                         },
-                        {
-                            data: "source",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.source;
-                                }
-                                else{
-                                    return '<s>'+ full.source + '</s>'
-                                }
-                            },
 
-                        },
-                        {
-                            data: "id",
-                            mRender:function (data,type,full){
-                                let links = '';
-                                if(full.visible){
-                                    links +=  `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
-                                    links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
-                                }
-                                else{
-                                    links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
-                                }
-                                return links;
+                    },
+                    {
+                        data: "id",
+                        mRender: function (data, type, full) {
+                            let links = '';
+                            if (full.visible) {
+                                links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
+                                links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
                             }
-                        },
-                    ],
-                    processing:true,
-                    drawCallback: function() {
+                            else {
+                                links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
+                            }
+                            return links;
+                        }
+                    },
+                ],
+                processing: true,
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
-                        helpers.enablePopovers();
-                        // another option to fix the responsive table overflow css on tab switch
-                        // vm.$refs.threats_datatable.vmDataTable.draw('page');
-                        setTimeout(function (){
-                            vm.adjust_table_width();
-                        },100);
-                    },
-                }
+                initComplete: function () {
+                    helpers.enablePopovers();
+                    // another option to fix the responsive table overflow css on tab switch
+                    // vm.$refs.threats_datatable.vmDataTable.draw('page');
+                    setTimeout(function () {
+                        vm.adjust_table_width();
+                    }, 100);
+                },
             }
-        },
-        components: {
-            datatable,
-            ThreatDetail,
-            ConservationThreatHistory,
-            CollapsibleFilters,
-        },
-        computed: {
-            filterApplied: function(){
-                if(this.filterThreatSource === 'all' &&
+        }
+    },
+    components: {
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        CollapsibleFilters,
+    },
+    computed: {
+        filterApplied: function () {
+            if (this.filterThreatSource === 'all' &&
                 this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
                 this.filterThreatStatus === 'all' &&
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
-                ){
-                    return false
-                } else {
-                    return true
-                }
-            },
-        },
-        watch:{
-            filterApplied: function(){
-                if (this.$refs.collapsible_filters){
-                    // Collapsible component exists
-                    this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-                }
-            },
-            filterThreatSource: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatCategory: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatCurrentImpact: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatPotentialImpact: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterThreatStatus: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterObservedFromDate: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
-            filterObservedToDate: function(){
-                let vm = this;
-                vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            },
+            ) {
+                return false
+            } else {
+                return true
+            }
         },
-        methods:{
-            collapsible_component_mounted: function(){
+    },
+    watch: {
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
                 this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            },
+            }
+        },
+        filterThreatSource: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatCategory: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatCurrentImpact: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatPotentialImpact: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterThreatStatus: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterObservedFromDate: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+        filterObservedToDate: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+        },
+    },
+    methods: {
+        collapsible_component_mounted: function () {
+            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+        },
 
-            fetchFilterLists: function(){
-                let vm = this;
+        fetchFilterLists: function () {
+            let vm = this;
 
-                //Threat Source filter list (specific to instance)
-                vm.$http.get(helpers.add_endpoint_json(api_endpoints.species,vm.species_obj.id+'/occurrence_threat_source_list')).then((response) => {
-                    vm.threat_source_filter_list = response.body;
-                },(error) => {
-                    console.log(error);
-                })
+            //Threat Source filter list (specific to instance)
+            fetch(helpers.add_endpoint_json(api_endpoints.species, vm.species_obj.id + '/occurrence_threat_source_list')).then(async (response) => {
+                vm.threat_source_filter_list = await response.json();
+            }, (error) => {
+                console.log(error);
+            })
 
-                //Category, Current Impact, Potential Impact (generic to all threats)
-                vm.$http.get('/api/threat/threat_list_of_values/').then((response) => {
-                    vm.threat_category_filter_list= response.body["threat_category_lists"];
-                    vm.threat_current_impact_filter_list = response.body["current_impact_lists"];
-                    vm.threat_potential_impact_filter_list = response.body["potential_impact_lists"];
-                },(error) => {
-                    console.log(error);
-                })
+            //Category, Current Impact, Potential Impact (generic to all threats)
+            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
+                const data = await response.json();
+                vm.threat_category_filter_list = data["threat_category_lists"];
+                vm.threat_current_impact_filter_list = data["current_impact_lists"];
+                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
+            }, (error) => {
+                console.log(error);
+            })
 
+        },
+        viewThreat: function (id) {
+            let vm = this;
+            this.$refs.threat_detail.threat_id = id;
+            this.$refs.threat_detail.threat_action = 'view';
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
-            viewThreat: function(id){
-                let vm=this;
-                this.$refs.threat_detail.threat_id = id;
-                this.$refs.threat_detail.threat_action='view';
-                Vue.http.get(helpers.add_endpoint_json(api_endpoints.occ_threat,id)).then((response) => {
-                      this.$refs.threat_detail.threatObj=response.body;
-                      this.$refs.threat_detail.threatObj.date_observed =  response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD'): '';
-                    },
-                  err => {
-                            console.log(err);
-                      });
-                this.$refs.threat_detail.isModalOpen = true;
-            },
-            historyThreat: function(id){
-                this.occConservationThreatHistoryId = parseInt(id);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.occ_conservation_threat_history.isModalOpen = true;
-                });
-            },
-            updatedThreats(){
-                this.$refs.threats_datatable.vmDataTable.ajax.reload();
-            },
-            addEventListeners:function (){
-                let vm=this;
-                vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function(e) {
-                    e.preventDefault();
-                    var id = $(this).attr('data-view-threat');
-                    vm.viewThreat(id);
+                err => {
+                    console.log(err);
                 });
-                vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function(e) {
-                    e.preventDefault();
-                    var id = $(this).attr('data-history-threat');
-                    vm.historyThreat(id);
-                });
-                vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                    helpers.enablePopovers();
-                });
-            },
-            refreshFromResponse: function(){
-                this.$refs.threats_datatable.vmDataTable.ajax.reload();
-            },
-            adjust_table_width: function(){
-                if (this.$refs.threats_datatable !== undefined) {this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc();}
-            },
+            this.$refs.threat_detail.isModalOpen = true;
         },
-        mounted: function(){
-            this.fetchFilterLists();
-            let vm = this;
+        historyThreat: function (id) {
+            this.occConservationThreatHistoryId = parseInt(id);
+            this.uuid++;
             this.$nextTick(() => {
-                vm.addEventListeners();
+                this.$refs.occ_conservation_threat_history.isModalOpen = true;
+            });
+        },
+        updatedThreats() {
+            this.$refs.threats_datatable.vmDataTable.ajax.reload();
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
+                e.preventDefault();
+                var id = $(this).attr('data-view-threat');
+                vm.viewThreat(id);
+            });
+            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
+                e.preventDefault();
+                var id = $(this).attr('data-history-threat');
+                vm.historyThreat(id);
+            });
+            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+                helpers.enablePopovers();
+            });
+        },
+        refreshFromResponse: function () {
+            this.$refs.threats_datatable.vmDataTable.ajax.reload();
+        },
+        adjust_table_width: function () {
+            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
         });
-        }
     }
+}
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+
+legend.scheduler-border {
+    width: inherit;
+    /* Or auto */
+    padding: 0 10px;
+    /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
index 7955c8a1..09d88dbf 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
@@ -978,11 +978,14 @@ export default {
         },
         updatePublishing(data) {
             let vm = this;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.species, (vm.species_community.id + '/update_publishing_status')), data, {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.species, (vm.species_community.id + '/update_publishing_status')), {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                }, body: data
+            }).then(async (response) => {
                 vm.updatingPublishing = false;
-                vm.species_community.publishing_status = response.body;
+                vm.species_community.publishing_status = await response.json();
                 vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
                 swal.fire({
                     title: 'Saved',
@@ -1394,8 +1397,8 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            vm.$http.get(api_endpoints.regions).then((response) => {
-                vm.api_regions = response.body;
+            fetch(api_endpoints.regions).then(async (response) => {
+                vm.api_regions = await response.json();
                 for (var i = 0; i < vm.api_regions.length; i++) {
                     this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
                 }
@@ -1501,8 +1504,8 @@ export default {
             }
         }
         //------fetch list of values
-        const res = await Vue.http.get('/api/species_profile_dict/');
-        vm.species_profile_dict = res.body;
+        const response = await fetch('/api/species_profile_dict/');
+        vm.species_profile_dict = await response.json();
         vm.flora_recruitment_type_list = vm.species_profile_dict.flora_recruitment_type_list;
         vm.flora_recruitment_type_list.splice(0, 0,
             {
@@ -1521,16 +1524,6 @@ export default {
                 id: null,
                 name: null,
             });
-        // const response = await Vue.http.get('/api/region_district_filter_dict/');
-        // vm.filterRegionDistrict = response.body;
-        // vm.region_list = vm.filterRegionDistrict.region_list;
-        // vm.district_list = vm.filterRegionDistrict.district_list;
-        // vm.region_list.splice(0, 0,
-        //     {
-        //         id: null,
-        //         name: null,
-        //     });
-        // this.filterDistrict();
         vm.fetchRegions();
     },
     mounted: function () {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
index 0cd0142e..59a665c4 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
@@ -1754,8 +1754,8 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            vm.$http.get(api_endpoints.regions).then((response) => {
-                vm.api_regions = response.body;
+            fetch(api_endpoints.regions).then(async (response) => {
+                vm.api_regions = await response.json();
                 for (var i = 0; i < vm.api_regions.length; i++) {
                     this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
                 }
@@ -1919,8 +1919,8 @@ export default {
             vm.time_to_maturity_range_new = true;
         }
         //------fetch list of values
-        const res = await Vue.http.get('/api/species_profile_dict/');
-        vm.species_profile_dict = res.body;
+        const response = await fetch('/api/species_profile_dict/');
+        vm.species_profile_dict = await response.json();
         vm.flora_recruitment_type_list = vm.species_profile_dict.flora_recruitment_type_list;
         vm.flora_recruitment_type_list.splice(0, 0,
             {
@@ -1939,16 +1939,6 @@ export default {
                 id: null,
                 name: null,
             });
-        //const response = await Vue.http.get('/api/region_district_filter_dict/');
-        //vm.filterRegionDistrict= response.body;
-        //vm.region_list= vm.filterRegionDistrict.region_list;
-        //vm.district_list= vm.filterRegionDistrict.district_list;
-        //vm.region_list.splice(0,0,
-        //{
-        //    id: null,
-        //    name: null,
-        //});
-        //this.filterDistrict();
         vm.fetchRegions();
     },
     mounted: function () {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
index 09912607..3bac5fdf 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
@@ -434,10 +434,11 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //Category, Current Impact, Potential Impact (generic to all threats)
-            vm.$http.get('/api/threat/threat_list_of_values/').then((response) => {
-                vm.threat_category_filter_list = response.body["threat_category_lists"];
-                vm.threat_current_impact_filter_list = response.body["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = response.body["potential_impact_lists"];
+            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
+                const data = await response.json();
+                vm.threat_category_filter_list = data["threat_category_lists"];
+                vm.threat_current_impact_filter_list = data["current_impact_lists"];
+                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
             }, (error) => {
                 console.log(error);
             })
@@ -465,9 +466,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -478,9 +480,10 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.threat, id)).then((response) => {
-                this.$refs.threat_detail.threatObj = response.body;
-                this.$refs.threat_detail.threatObj.date_observed = response.body.date_observed != null && response.body.date_observed != undefined ? moment(response.body.date_observed).format('yyyy-MM-DD') : '';
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.threat_detail.threatObj = data;
+                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
             },
                 err => {
                     console.log(err);
@@ -520,7 +523,10 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.threat, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -560,7 +566,10 @@ export default {
                 },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.threat, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/reinstate'), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
index 2802dbc8..8001a8eb 100644
--- a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
@@ -1029,8 +1029,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
 
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.common_name_list = vm.filterListsSpecies.common_name_list;
                 vm.family_list = vm.filterListsSpecies.family_list;
@@ -1045,8 +1045,8 @@ export default {
             }, (error) => {
                 console.log(error);
             })
-            vm.$http.get(api_endpoints.region_district_filter_dict).then((response) => {
-                vm.filterRegionDistrict = response.body;
+            fetch(api_endpoints.region_district_filter_dict).then(async (response) => {
+                vm.filterRegionDistrict = await response.json();
                 vm.region_list = vm.filterRegionDistrict.region_list;
                 vm.district_list = vm.filterRegionDistrict.district_list;
             }, (error) => {
@@ -1088,9 +1088,16 @@ export default {
                         const createUrl = api_endpoints.species + "/";
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
-                        let savedFauna = await Vue.http.post(createUrl, payload);
-                        if (savedFauna) {
-                            newFaunaId = savedFauna.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFaunaId = data.id;
                         }
                     }
                     catch (err) {
@@ -1122,7 +1129,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_species_proposal(species_id))
+                    fetch(api_endpoints.discard_species_proposal(species_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -1156,7 +1166,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_species_proposal(species_id))
+                    fetch(api_endpoints.reinstate_species_proposal(species_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
index 96ab54ea..9c5ef592 100755
--- a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
@@ -1033,8 +1033,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then((response) => {
-                vm.filterListsSpecies = response.body;
+            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
+                vm.filterListsSpecies = await response.json();
                 vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
                 vm.common_name_list = vm.filterListsSpecies.common_name_list;
                 vm.family_list = vm.filterListsSpecies.family_list;
@@ -1049,8 +1049,8 @@ export default {
             }, (error) => {
                 console.log(error);
             })
-            vm.$http.get(api_endpoints.region_district_filter_dict).then((response) => {
-                vm.filterRegionDistrict = response.body;
+            fetch(api_endpoints.region_district_filter_dict).then(async (response) => {
+                vm.filterRegionDistrict = await response.json();
                 vm.region_list = vm.filterRegionDistrict.region_list;
                 vm.district_list = vm.filterRegionDistrict.district_list;
             }, (error) => {
@@ -1092,9 +1092,16 @@ export default {
                         const createUrl = api_endpoints.species + "/";
                         let payload = new Object();
                         payload.group_type_id = this.group_type_id
-                        let savedFlora = await Vue.http.post(createUrl, payload);
-                        if (savedFlora) {
-                            newFloraId = savedFlora.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newFloraId = data.id;
                         }
                     }
                     catch (err) {
@@ -1126,7 +1133,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_species_proposal(species_id))
+                    fetch(api_endpoints.discard_species_proposal(species_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -1160,7 +1170,10 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_species_proposal(species_id))
+                    fetch(api_endpoints.reinstate_species_proposal(species_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/common/submission.vue b/boranga/frontend/boranga/src/components/common/submission.vue
index 9d491615..409291dd 100644
--- a/boranga/frontend/boranga/src/components/common/submission.vue
+++ b/boranga/frontend/boranga/src/components/common/submission.vue
@@ -12,15 +12,17 @@
         </div>
         <div v-if="lodgement_date" class="card-body border-top py-2">
             <strong>Submitted on</strong><br />
-            {{ lodgement_date | formatDateDay }} <span class="fw-light">at</span> {{ lodgement_date | formatDateTime }}
+            {{ formatDateDay(lodgement_date) }} <span class="fw-light">at</span> {{ formatDateDay(lodgement_date) }}
         </div>
         <div v-if="enableHistory" class="card-body border-top py-2">
             <table class="table small-table">
-                <tr>
-                    <th>Lodgement</th>
-                    <th>Date</th>
-                    <th>Action</th>
-                </tr>
+                <tbody>
+                    <tr>
+                        <th>Lodgement</th>
+                        <th>Date</th>
+                        <th>Action</th>
+                    </tr>
+                </tbody>
             </table>
         </div>
     </div>
@@ -51,7 +53,7 @@ export default {
             default: false,
         },
     },
-    filters: {
+    methods: {
         formatDateDay: function (data) {
             return data ? moment(data).format('DD/MM/YYYY') : '';
         },
diff --git a/boranga/frontend/boranga/src/components/common/submitter_information.vue b/boranga/frontend/boranga/src/components/common/submitter_information.vue
index 0bd1b9df..6fa85168 100644
--- a/boranga/frontend/boranga/src/components/common/submitter_information.vue
+++ b/boranga/frontend/boranga/src/components/common/submitter_information.vue
@@ -10,15 +10,19 @@
                             <template v-if="!disabled">
                                 <template
                                     v-if="submitter_categories && submitter_categories.length > 0 && submitter_information.submitter_category && !submitter_categories.map((d) => d.id).includes(submitter_information.submitter_category)">
-                                    <input type="text" v-if="submitter_information.submitter_category_name" class="form-control mb-3"
-                                        :value="submitter_information.submitter_category_name + ' (Now Archived)'" disabled />
+                                    <input type="text" v-if="submitter_information.submitter_category_name"
+                                        class="form-control mb-3"
+                                        :value="submitter_information.submitter_category_name + ' (Now Archived)'"
+                                        disabled />
                                     <div class="mb-3 text-muted">
                                         Change submitter category to:
                                     </div>
                                 </template>
-                                <select class="form-select" id="submitter_category" ref="submitter_category" v-model="submitter_information.submitter_category">
+                                <select class="form-select" id="submitter_category" ref="submitter_category"
+                                    v-model="submitter_information.submitter_category">
                                     <option :value="null" disabled>Please select a submitter category</option>
-                                    <option v-for="submitter_category in submitter_categories" :value="submitter_category.id" v-bind:key="submitter_category.id">
+                                    <option v-for="submitter_category in submitter_categories"
+                                        :value="submitter_category.id" v-bind:key="submitter_category.id">
                                         {{ submitter_category.name }}
                                     </option>
                                 </select>
@@ -36,7 +40,8 @@
                                 v-model="submitter_information.name">
                         </div>
                     </div>
-                    <div v-if="show_submitter_contact_details && Object.hasOwn(submitter_information, 'contact_details')" class="row mb-3 pb-3 border-bottom">
+                    <div v-if="show_submitter_contact_details && Object.hasOwn(submitter_information, 'contact_details')"
+                        class="row mb-3 pb-3 border-bottom">
                         <label for="contact_details" class="col-sm-2 col-form-label">Contact Details</label>
                         <div class="col-sm-6">
                             <textarea class="form-control" id="contact_details"
@@ -129,7 +134,7 @@ export default {
         },
         fetchSubmitterCategories: function () {
             fetch(api_endpoints.submitter_categories)
-                .then(async response => {
+                .then(async (response) => {
                     this.submitter_categories = await response.json();
                 })
                 .catch(error => {
@@ -137,7 +142,13 @@ export default {
                 });
         },
         saveSubmitterInformation: function () {
-            this.$http.put(api_endpoints.save_submitter_information, this.submitter_information)
+            fetch(api_endpoints.save_submitter_information, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(this.submitter_information)
+            })
                 .then(response => response.json())
                 .then(data => {
                     console.log(data);
diff --git a/boranga/frontend/boranga/src/components/common/table_related_items.vue b/boranga/frontend/boranga/src/components/common/table_related_items.vue
index 2de6cc6d..84723ea2 100644
--- a/boranga/frontend/boranga/src/components/common/table_related_items.vue
+++ b/boranga/frontend/boranga/src/components/common/table_related_items.vue
@@ -172,8 +172,8 @@ export default {
         fetchFilterList: function () {
             let vm = this;
             //large FilterList of Species Values object
-            vm.$http.get(vm.filter_list_url).then((response) => {
-                vm.related_type_filter_list = response.body;
+            fetch(vm.filter_list_url).then(async (response) => {
+                vm.related_type_filter_list = await response.json();
             }, (error) => {
                 console.log(error);
             })
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
index ebcdb741..2cbe3c51 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
@@ -177,7 +177,13 @@ export default {
             vm.isSaved = false;
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
-            await vm.$http.post(vm.cs_proposal_form_url, payload).then(res => {
+            await fetch(vm.cs_proposal_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 let swalHtml = '<p>Your conservation status proposal has been saved as a draft.</p>';
                 if (vm.saveExitCSProposal) {
                     swalHtml += '<p>It has <span class="fw-bold">NOT</span> been submitted.</p>';
@@ -235,7 +241,13 @@ export default {
             });
         },
         save_wo_confirm: function () {
-            this.$http.post(this.cs_proposal_form_url, this.conservation_status_obj).then(res => {
+            fetch(this.cs_proposal_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(this.conservation_status_obj),
+            }).then(async (response) => {
 
             }, err => {
                 console.log(err);
@@ -247,7 +259,7 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
-            const result = await vm.$http.post(vm.cs_proposal_form_url, payload).then(res => {
+            const result = await fetch(vm.cs_proposal_form_url, payload).then(async (response) => {
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
                 swal.fire({
@@ -383,8 +395,8 @@ export default {
                     if (!vm.saveError) {
                         let payload = new Object();
                         Object.assign(payload, vm.conservation_status_obj);
-                        vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/submit'), payload).then(res => {
-                            vm.conservation_status_obj = res.body;
+                        fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/submit'), payload).then(async (response) => {
+                            vm.conservation_status_obj = await response.json();
                             vm.$router.push({
                                 name: 'submit_cs_proposal',
                                 params: { conservation_status_obj: vm.conservation_status_obj }
@@ -412,8 +424,8 @@ export default {
     },
     created: function () {
         if (!this.conservation_status_obj) {
-            Vue.http.get(`/api/conservation_status/${this.$route.params.conservation_status_id}.json`).then(res => {
-                this.conservation_status_obj = res.body;
+            fetch(`/api/conservation_status/${this.$route.params.conservation_status_id}.json`).then(async (response) => {
+                this.conservation_status_obj = await response.json();
             },
                 err => {
                     console.log(err);
@@ -428,12 +440,13 @@ export default {
     beforeRouteEnter: function (to, from, next) {
         if (to.params.conservation_status_id) {
             let vm = this;
-            Vue.http.get(`/api/conservation_status/${to.params.conservation_status_id}.json`).then(res => {
-                next(vm => {
-                    vm.conservation_status_obj = res.body;
+            fetch(`/api/conservation_status/${to.params.conservation_status_id}.json`).then(async (response) => {
+                next(async vm => {
+                    const data = await response.json();
+                    vm.conservation_status_obj = data;
                     vm.setdata(vm.conservation_status_obj.readonly);
-                    Vue.http.get(helpers.add_endpoint_json(api_endpoints.conservation_status, to.params.conservation_status_id + '/amendment_request')).then((res) => {
-                        vm.setAmendmentData(res.body);
+                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, to.params.conservation_status_id + '/amendment_request')).then((res) => {
+                        vm.setAmendmentData(data);
                     },
                         err => {
                             console.log(err);
@@ -445,9 +458,14 @@ export default {
                 });
         }
         else {
-            Vue.http.post('/api/conservation_status.json').then(res => {
-                next(vm => {
-                    vm.conservation_status_obj = res.body;
+            fetch('/api/conservation_status.json', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
+                next(async vm => {
+                    vm.conservation_status_obj = await response.json();
                 });
             },
                 err => {
@@ -455,7 +473,7 @@ export default {
                 });
         }
     },
-    beforeDestroy: function () {
+    beforeUnmount: function () {
         window.removeEventListener('beforeunload', this.leaving);
     }
 }
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
index bfbb7d51..b23ef35e 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
@@ -18,14 +18,16 @@
                             <br />
                         </div>
                         <table>
-                            <tr>
-                                <td><strong>Proposal Number:</strong></td>
-                                <td><strong>{{ conservation_status_obj.conservation_status_number }}</strong></td>
-                            </tr>
-                            <tr>
-                                <td><strong>Date/Time:</strong></td>
-                                <td><strong> {{ conservation_status_obj.lodgement_date | formatDate }}</strong></td>
-                            </tr>
+                            <tbody>
+                                <tr>
+                                    <td><strong>Proposal Number:</strong></td>
+                                    <td><strong>{{ conservation_status_obj.conservation_status_number }}</strong></td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Date/Time:</strong></td>
+                                    <td><strong> {{ formatDate(conservation_status_obj.lodgement_date) }}</strong></td>
+                                </tr>
+                            </tbody>
                         </table>
                         <br />
                         <label>You will receive a notification email if there is any incomplete information or documents
@@ -69,7 +71,7 @@ export default {
             return api_endpoints.group_type_community;
         }
     },
-    filters: {
+    methods: {
         formatDate: function (data) {
             return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
         }
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
index e76d0779..d22e9ab6 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
@@ -493,8 +493,8 @@ export default {
         },
         fetchFilterLists: function () {
             let vm = this;
-            vm.$http.get(api_endpoints.group_types_dict).then((response) => {
-                vm.group_types = response.body;
+            fetch(api_endpoints.group_types_dict).then(async (response) => {
+                vm.group_types = await response.json();
             }, (error) => {
                 console.log(error);
             });
@@ -517,9 +517,16 @@ export default {
                         const createUrl = api_endpoints.conservation_status + "/";
                         let payload = new Object();
                         payload.application_type_id = group_type
-                        let savedCS = await Vue.http.post(createUrl, payload);
-                        if (savedCS) {
-                            newCSId = savedCS.body.id;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newCSId = data.id;
                         }
                     }
                     catch (err) {
@@ -548,7 +555,10 @@ export default {
                 }
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -582,7 +592,10 @@ export default {
 
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_cs_proposal(conservation_status_id))
+                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue b/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue
index cca1e089..7b3c6dbf 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue
@@ -53,9 +53,9 @@ export default {
     },
     methods: {
         fetchProfile() {
-            this.$http.get(api_endpoints.profile)
-                .then(response => {
-                    this.profile = response.data
+            fetch(api_endpoints.profile)
+                .then(async (response) => {
+                    this.profile = await response.json()
                 })
                 .catch(error => {
                     console.log(error)
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue b/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue
index 63f8fbfe..ecbaa685 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue
@@ -53,9 +53,9 @@ export default {
     },
     methods: {
         fetchProfile() {
-            this.$http.get(api_endpoints.profile)
-                .then(response => {
-                    this.profile = response.data
+            fetch(api_endpoints.profile)
+                .then(async (response) => {
+                    this.profile = await response.json()
                 })
                 .catch(error => {
                     console.log(error)
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
index a73d1232..1af25364 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
@@ -218,7 +218,15 @@ export default {
                 // Provide an action to have the backend lock the geometry
                 payload.action = 'submit';
             }
-            const res = await vm.$http.post(vm.ocr_proposal_form_url, payload).then(res => {
+            const res = await fetch(vm.ocr_proposal_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
+                const data = await response.json();
+
                 let swalHtml = '<p>Your occurrence report has been saved as a draft.</p>';
                 if (vm.saveExitOCRProposal) {
                     swalHtml += '<p>It has <span class="fw-bold">NOT</span> been submitted.</p><p>You can find the draft on the occurrence report dashboard to continue working on the report later.</p>'
@@ -234,13 +242,12 @@ export default {
                     },
                 });
                 vm.savingOCRProposal = false;
-                const resData = res.data;
-                this.occurrence_report_obj = Object.assign({}, resData);
+                this.occurrence_report_obj = Object.assign({}, data);
                 this.$nextTick(async () => {
                     this.$refs.occurrence_report.$refs.ocr_location.incrementComponentMapKey();
                 });
                 vm.isSaved = true;
-                return resData;
+                return data;
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
                 swal.fire({
@@ -285,8 +292,12 @@ export default {
         save_wo_confirm: function (e) {
             let vm = this;
             let formData = vm.set_formData()
-
-            vm.$http.post(vm.ocr_proposal_form_url, formData);
+            fetch(vm.ocr_proposal_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
         },
         save_before_submit: async function (e) {
             console.log('save before submit');
@@ -330,7 +341,13 @@ export default {
                 // Provide an action to have the backend lock the geometry
                 payload.action = 'submit';
             }
-            const result = await vm.$http.post(vm.ocr_proposal_form_url, payload).then(res => {
+            const result = await fetch(vm.ocr_proposal_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 console.log('saved before submit');
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
@@ -544,8 +561,14 @@ export default {
                     if (!vm.saveError) {
                         let payload = new Object();
                         Object.assign(payload, vm.occurrence_report_obj);
-                        vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report_obj.id + '/submit'), payload).then(res => {
-                            vm.occurrence_report_obj = res.body;
+                        fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report_obj.id + '/submit'), {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        }).then(async (response) => {
+                            vm.occurrence_report_obj = await response.json();
                             vm.$router.push({
                                 name: 'submit_ocr_proposal',
                                 params: { occurrence_report_obj: vm.occurrence_report_obj }
@@ -573,8 +596,9 @@ export default {
         },
         fetchOccurrenceReport: function (id) {
             let vm = this;
-            Vue.http.get(`/api/occurrence_report/${id}/`).then(res => {
-                vm.occurrence_report_obj = Object.assign({}, res.body);
+            fetch(`/api/occurrence_report/${id}/`).then(async (response) => {
+                const data = await response.json();
+                vm.occurrence_report_obj = Object.assign({}, data);
             },
                 err => {
                     console.log(err);
@@ -597,16 +621,17 @@ export default {
     beforeRouteEnter: function (to, from, next) {
         if (to.params.occurrence_report_id) {
             let vm = this;
-            Vue.http.get(`/api/occurrence_report/${to.params.occurrence_report_id}.json`).then(res => {
-                next(vm => {
+            fetch(`/api/occurrence_report/${to.params.occurrence_report_id}.json`).then(async (response) => {
+                next(async vm => {
+                    const data = await response.json();
                     vm.loading.push('occurrence report proposal')
-                    vm.occurrence_report_obj = res.body;
+                    vm.occurrence_report_obj = data;
                     vm.loading.splice('fetching occurrence report proposal', 1);
                     vm.setdata(vm.occurrence_report_obj.readonly);
 
-                    Vue.http.get(helpers.add_endpoint_json(api_endpoints.occurrence_report, to.params.occurrence_report_id + '/amendment_request')).then((res) => {
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, to.params.occurrence_report_id + '/amendment_request')).then((res) => {
 
-                        vm.setAmendmentData(res.body);
+                        vm.setAmendmentData(data);
 
                     },
                         err => {
@@ -619,10 +644,15 @@ export default {
                 });
         }
         else {
-            Vue.http.post('/api/occurrence_report.json').then(res => {
-                next(vm => {
+            fetch('/api/occurrence_report.json', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
+                next(async vm => {
                     vm.loading.push('fetching occurrence report proposal')
-                    vm.occurrence_report_obj = res.body;
+                    vm.occurrence_report_obj = await response.json();
                     vm.loading.splice('fetching occurrence report proposal', 1);
                 });
             },
@@ -631,7 +661,7 @@ export default {
                 });
         }
     },
-    beforeDestroy: function () {
+    beforeUnmount: function () {
         window.removeEventListener('beforeunload', this.leaving);
     }
 }
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
index a3b4d408..7c507d9b 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
@@ -447,8 +447,8 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             vm.proposal_status = vm.external_status;
-            vm.$http.get(api_endpoints.group_types_dict).then((response) => {
-                vm.group_types = response.body;
+            fetch(api_endpoints.group_types_dict).then(async (response) => {
+                vm.group_types = await response.json();
             }, (error) => {
                 console.log(error);
             });
@@ -471,9 +471,16 @@ export default {
                         const createUrl = api_endpoints.occurrence_report + "/";
                         let payload = new Object();
                         payload.group_type_id = group_type
-                        let savedOCR = await Vue.http.post(createUrl, payload);
-                        if (savedOCR) {
-                            newOCRId = savedOCR.body;
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        const data = await response.json();
+                        if (data) {
+                            newOCRId = data;
                         }
                     }
                     catch (err) {
@@ -501,7 +508,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Occurrence Report Discarded',
@@ -533,7 +543,10 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id))
+                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json', }
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
@@ -567,8 +580,11 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    this.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, occurrence_report_id + '/copy')).then(res => {
-                        const ocr_copy = res.body;
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, occurrence_report_id + '/copy'), {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json', }
+                    }).then(async (response) => {
+                        const ocr_copy = await response.json();
                         swal.fire({
                             title: 'Copied',
                             text: `The occurrence report has been copied to ${ocr_copy.occurrence_report_number}. When you click OK, the new occurrence report will open in a new window.`,
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
index 84c809e6..a6f2b793 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
@@ -1,38 +1,43 @@
 <template lang="html">
-    <div class="container" >
+    <div class="container">
         <div class="row">
             <div class="col-sm-12">
                 <div class="row">
                     <div v-if="isOCRProposal" class="col-sm-offset-3 col-sm-6 borderDecoration">
-                      <div v-if="occurrence_report_obj.group_type==application_type_flora">
-                        <strong>Your flora occurrence report has been successfully submitted.</strong>
-                        <br/>
-                      </div>
-                      <div v-else-if="occurrence_report_obj.group_type==application_type_fauna">
-                        <strong>Your fauna occurrence report has been successfully submitted.</strong>
-                        <br/>
-                      </div>
-                      <div v-else-if="occurrence_report_obj.group_type==application_type_community">
-                        <strong>Your community occurrence report has been successfully submitted.</strong>
-                        <br/>
-                      </div>
+                        <div v-if="occurrence_report_obj.group_type == application_type_flora">
+                            <strong>Your flora occurrence report has been successfully submitted.</strong>
+                            <br />
+                        </div>
+                        <div v-else-if="occurrence_report_obj.group_type == application_type_fauna">
+                            <strong>Your fauna occurrence report has been successfully submitted.</strong>
+                            <br />
+                        </div>
+                        <div v-else-if="occurrence_report_obj.group_type == application_type_community">
+                            <strong>Your community occurrence report has been successfully submitted.</strong>
+                            <br />
+                        </div>
                         <table>
-                            <tr>
-                                <td><strong>Application:</strong></td>
-                                <td><strong>{{occurrence_report_obj.occurrence_report_number}}</strong></td>
-                            </tr>
-                            <tr>
-                                <td><strong>Date/Time:</strong></td>
-                                <td><strong> {{occurrence_report_obj.lodgement_date|formatDate}}</strong></td>
-                            </tr>
+                            <tbody>
+                                <tr>
+                                    <td><strong>Application:</strong></td>
+                                    <td><strong>{{ occurrence_report_obj.occurrence_report_number }}</strong></td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Date/Time:</strong></td>
+                                    <td><strong> {{ formatDate(occurrence_report_obj.lodgement_date) }}</strong></td>
+                                </tr>
+                            </tbody>
                         </table>
-                        <br/>
-                        <label>You will receive a notification email if there is any incomplete information or documents missing from the proposal.</label>
-                        <router-link :to="{name:'external-occurrence-report-dash'}" style="margin-top:15px;" class="btn btn-primary">Back to home</router-link>
+                        <br />
+                        <label>You will receive a notification email if there is any incomplete information or documents
+                            missing from the proposal.</label>
+                        <router-link :to="{ name: 'external-occurrence-report-dash' }" style="margin-top:15px;"
+                            class="btn btn-primary">Back to home</router-link>
                     </div>
                     <div v-else class="col-sm-offset-3 col-sm-6 borderDecoration">
                         <strong>Sorry it looks like there isn't any application currently in your session.</strong>
-                        <br /><router-link :to="{name:'external-occurrence-report-dash'}" style="margin-top:15px;" class="btn btn-primary">Back to home</router-link>
+                        <br /><router-link :to="{ name: 'external-occurrence-report-dash' }" style="margin-top:15px;"
+                            class="btn btn-primary">Back to home</router-link>
                     </div>
                 </div>
             </div>
@@ -42,47 +47,47 @@
 <script>
 
 import {
-  api_endpoints,
-  helpers,
+    api_endpoints,
+    helpers,
 }
-from '@/utils/hooks'
+    from '@/utils/hooks'
 
 export default {
-  data: function() {
-    let vm = this;
-    return {
-        "occurrence_report_obj": {},
-    }
-  },
-  computed: {
-    isOCRProposal: function(){
-      return this.occurrence_report_obj && this.occurrence_report_obj.id ? true : false;
+    data: function () {
+        let vm = this;
+        return {
+            "occurrence_report_obj": {},
+        }
+    },
+    computed: {
+        isOCRProposal: function () {
+            return this.occurrence_report_obj && this.occurrence_report_obj.id ? true : false;
+        },
+        application_type_flora: function () {
+            return api_endpoints.group_type_flora;
+        },
+        application_type_fauna: function () {
+            return api_endpoints.group_type_fauna;
+        },
+        application_type_community: function () {
+            return api_endpoints.group_type_community;
+        }
     },
-    application_type_flora: function(){
-      return api_endpoints.group_type_flora;
+    methods: {
+        formatDate: function (data) {
+            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        }
     },
-    application_type_fauna: function(){
-      return api_endpoints.group_type_fauna;
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.new_ocr_proposal;
     },
-    application_type_community: function(){
-      return api_endpoints.group_type_community;
+    beforeRouteEnter: function (to, from, next) {
+        next(vm => {
+            vm.occurrence_report_obj = to.params.occurrence_report_obj;
+            console.log(vm.occurrence_report_obj)
+        })
     }
-  },
-  filters:{
-        formatDate: function(data){
-            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss'): '';
-        }
-  },
-  mounted: function() {
-    let vm = this;
-    vm.form = document.forms.new_ocr_proposal;
-  },
-  beforeRouteEnter: function(to, from, next) {
-    next(vm => {
-        vm.occurrence_report_obj = to.params.occurrence_report_obj;
-        console.log(vm.occurrence_report_obj)
-    })
-  }
 }
 </script>
 
diff --git a/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue b/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
index 9d79e0e2..03c1fe0b 100644
--- a/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
@@ -159,8 +159,8 @@ export default {
         },
     },
     created: function () {
-        this.$http.get(api_endpoints.group_types_dict).then((response) => {
-                this.group_types= response.body;
+        fetch(api_endpoints.group_types_dict).then(async (response) => {
+                this.group_types= await response.json();
                 },(error) => {
                 console.log(error);
             });
diff --git a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
index fd2dd199..32abc890 100755
--- a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
@@ -5,62 +5,58 @@
             <h4 v-if="species_community.conservation_status">{{
                 species_community.conservation_status.conservation_category }}</h4>
             <div class="col-md-3">
-                <template>
-                    <div class="">
-                        <div class="card card-default mb-3">
-                            <div class="card-header">
-                                Image
-                            </div>
-                            <div class="card-body card-collapse">
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <template v-if="uploadedID">
-                                            <div class="rounded" :class="downloadingImage ? 'animated-background bg-secondary' : ''"
-                                                style="width:258px;" :style="downloadingImage ? 'height:258px;' : ''">
-                                                <img v-show="!downloadingImage" @load="onImageLoad" width="258"
-                                                    :src="image_url"
-                                                    class="img-thumbnail img-fluid" :alt="display_name" />
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <div class="d-flex bg-light bg-gradient justify-content-center align-content-middle"
-                                                style="height:258px;">
-                                                <div class="align-self-center text-muted">No Image Available</div>
-                                            </div>
-                                        </template>
-                                    </div>
+                <div class="">
+                    <div class="card card-default mb-3">
+                        <div class="card-header">
+                            Image
+                        </div>
+                        <div class="card-body card-collapse">
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <template v-if="uploadedID">
+                                        <div class="rounded"
+                                            :class="downloadingImage ? 'animated-background bg-secondary' : ''"
+                                            style="width:258px;" :style="downloadingImage ? 'height:258px;' : ''">
+                                            <img v-show="!downloadingImage" @load="onImageLoad" width="258"
+                                                :src="image_url" class="img-thumbnail img-fluid" :alt="display_name" />
+                                        </div>
+                                    </template>
+                                    <template v-else>
+                                        <div class="d-flex bg-light bg-gradient justify-content-center align-content-middle"
+                                            style="height:258px;">
+                                            <div class="align-self-center text-muted">No Image Available</div>
+                                        </div>
+                                    </template>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </template>
+                </div>
             </div>
             <div class="col-md-9">
                 <div class="row">
-                    <template>
-                        <div class="">
-                            <div class="row">
-                                <form>
-                                    <ProposalSpeciesCommunities ref="species_communities"
-                                        :species_community="species_community"
-                                        :species_community_original="species_community" id="speciesCommunityStart"
-                                        :is_internal="false" :is_readonly="true">
-                                    </ProposalSpeciesCommunities>
-                                    <div class="row" style="margin-bottom: 50px">
-                                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
-                                            <div class="container">
-                                                <div class="col-md-6">
-                                                    <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
+                    <div class="">
+                        <div class="row">
+                            <form>
+                                <ProposalSpeciesCommunities ref="species_communities"
+                                    :species_community="species_community"
+                                    :species_community_original="species_community" id="speciesCommunityStart"
+                                    :is_internal="false" :is_readonly="true">
+                                </ProposalSpeciesCommunities>
+                                <div class="row" style="margin-bottom: 50px">
+                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                        <div class="container">
+                                            <div class="col-md-6">
+                                                <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
                                                     @click.prevent="returnToDashboard">
-                                                        Return to Dashboard</button>
-                                                </div>
+                                                    Return to Dashboard</button>
                                             </div>
                                         </div>
                                     </div>
-                                </form>
-                            </div>
+                                </div>
+                            </form>
                         </div>
-                    </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -100,7 +96,7 @@ export default {
         },
         display_name: function () {
             return (this.species_community.group_type === "community") ?
-                (this.species_community.taxonomy_details != null) ? this.species_community.taxonomy_details.community_migrated_id: '' :
+                (this.species_community.taxonomy_details != null) ? this.species_community.taxonomy_details.community_migrated_id : '' :
                 (this.species_community.taxonomy_details != null) ? this.species_community.taxonomy_details.scientific_name + " (" + this.species_community.taxonomy_details.taxon_name_id + ")" : '';
         },
         image_url: function () {
@@ -126,9 +122,9 @@ export default {
     beforeRouteEnter: function (to, from, next) {
         //-------------get species object if received species id
         if (to.query.group_type_name === 'flora' || to.query.group_type_name === "fauna") {
-            Vue.http.get(`/api/external_species/${to.params.species_community_id}/`).then(res => {
-                next(vm => {
-                    vm.species_community = res.body; //--temp species_obj
+            fetch(`/api/external_species/${to.params.species_community_id}/`).then(async (response) => {
+                next(async vm => {
+                    vm.species_community = await response.json(); //--temp species_obj
                     vm.uploadedID = vm.species_community.image_doc;
                 });
             },
@@ -138,9 +134,9 @@ export default {
         }
         //------get community object if received community id
         else {
-            Vue.http.get(`/api/external_community/${to.params.species_community_id}/`).then(res => {
-                next(vm => {
-                    vm.species_community = res.body; //--temp community_obj
+            fetch(`/api/external_community/${to.params.species_community_id}/`).then(async (response) => {
+                next(async vm => {
+                    vm.species_community = await response.json(); //--temp community_obj
                     vm.uploadedID = vm.species_community.image_doc;
                 });
             },
@@ -152,7 +148,6 @@ export default {
 }
 </script>
 <style scoped>
-
 @keyframes placeHolderShimmer {
     0% {
         background-position: -468px 0
diff --git a/boranga/frontend/boranga/src/components/external/utils.js b/boranga/frontend/boranga/src/components/external/utils.js
index 070670aa..a404caf4 100755
--- a/boranga/frontend/boranga/src/components/external/utils.js
+++ b/boranga/frontend/boranga/src/components/external/utils.js
@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import api from './api'
-import {helpers} from '@/utils/hooks' 
+import {helpers} from '@/utils/hooks'
 
 export default {
     fetchProfile: function (){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(api.profile).then((response) => {
+            fetch(api.profile).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -16,7 +16,7 @@ export default {
     },
     fetchProposal: function(id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(helpers.add_endpoint_json(api.proposals,id)).then((response) => {
+            fetch(helpers.add_endpoint_json(api.proposals,id)).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -26,7 +26,7 @@ export default {
     },
     fetchCountries: function (){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(api.countries).then((response) => {
+            fetch(api.countries).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -37,7 +37,7 @@ export default {
     },
     fetchOrganisationPermissions: function(id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(helpers.add_endpoint_json(api.my_organisations,id)).then((response) => {
+            fetch(helpers.add_endpoint_json(api.my_organisations,id)).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -47,7 +47,7 @@ export default {
     },
     fetchOrganisation: function(id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(helpers.add_endpoint_json(api.organisations,id)).then((response) => {
+            fetch(helpers.add_endpoint_json(api.organisations,id)).then((response) => {
                 resolve(response.body);
             },
             (error) => {
diff --git a/boranga/frontend/boranga/src/components/forms/filefield.vue b/boranga/frontend/boranga/src/components/forms/filefield.vue
index 1a6c8c8b..dcfb1377 100755
--- a/boranga/frontend/boranga/src/components/forms/filefield.vue
+++ b/boranga/frontend/boranga/src/components/forms/filefield.vue
@@ -239,11 +239,16 @@ export default {
                 },
                 reverseButtons: true,
             }).then(() => {
-                vm.$http.post(vm.delete_url, data, {
-                    emulateJSON: true,
-                }).then((response) => {
-                    vm.uploaded_documents = response.body;
-                    vm.$emit('refreshFromResponse', response.body);
+                fetch(vm.delete_url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data)
+                }).then(async (response) => {
+                    const data = await response.json();
+                    vm.uploaded_documents = data;
+                    vm.$emit('refreshFromResponse', data);
                     vm.show_spinner = false;
                 }, err => {
                     console.log(err);
diff --git a/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue b/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue
index ed788c4b..7d7e6ebc 100644
--- a/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue
+++ b/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue
@@ -222,12 +222,12 @@ export default {
                     method: 'POST',
                 })
                     .then(async (response) => {
-                        const resData = await response.json();
+                        const data = await response.json();
                         if (!response.ok) {
-                            throw new Error(resData);
+                            throw new Error(data);
                         }
-                        this.documents = resData.filedata;
-                        this.commsLogId = resData.comms_instance_id;
+                        this.documents = data.filedata;
+                        this.commsLogId = data.comms_instance_id;
                     })
                     .catch((error) => {
                         swal.fire({
@@ -259,13 +259,13 @@ export default {
             formData.append('document_id', file.id);
             formData.append('csrfmiddlewaretoken', this.csrf_token);
             if (this.document_action_url) {
-                const res = await fetch(this.document_action_url, {
+                const response = await fetch(this.document_action_url, {
                     body: formData,
                     method: 'POST',
                 });
-                const resData = await res.json();
-                this.documents = resData.filedata;
-                this.commsLogId = resData.comms_instance_id;
+                const data = await response.json();
+                this.documents = data.filedata;
+                this.commsLogId = data.comms_instance_id;
             }
             this.show_spinner = false;
         },
@@ -308,11 +308,11 @@ export default {
                 !this.temporary_document_collection_id
             ) {
                 // If temporary_document, create TemporaryDocumentCollection object and allow document_action_url to update
-                const res = await fetch(this.document_action_url, {
+                const response = await fetch(this.document_action_url, {
                     method: 'POST',
                 });
-                const resData = await res.json();
-                this.temporary_document_collection_id = resData.id;
+                const data = await response.json();
+                this.temporary_document_collection_id = data.id;
                 await this.handleChange(e);
                 await this.$emit(
                     'update-temp-doc-coll-id',
diff --git a/boranga/frontend/boranga/src/components/internal/Home.vue b/boranga/frontend/boranga/src/components/internal/Home.vue
index 64fbf16b..b53298cb 100644
--- a/boranga/frontend/boranga/src/components/internal/Home.vue
+++ b/boranga/frontend/boranga/src/components/internal/Home.vue
@@ -8,13 +8,10 @@
                 <div class="col-4">
                     <div class="card">
                         <div class="card-body">
-                            <h4 class="card-title mb-3">My Profile<i class="bi bi-person-fill ps-2 text-primary"></i></h4>
-                            <div
-                                class="table-responsive"
-                            >
-                                <table
-                                    class="table table-sm "
-                                >
+                            <h4 class="card-title mb-3">My Profile<i class="bi bi-person-fill ps-2 text-primary"></i>
+                            </h4>
+                            <div class="table-responsive">
+                                <table class="table table-sm ">
                                     <tbody>
                                         <tr>
                                             <td scope="row" class="fw-bold">Name</td>
@@ -47,8 +44,8 @@
                             <h4 class="card-title mb-3">My Area of Interest<i
                                     class="bi bi-search-heart ps-2 text-primary"></i></h4>
                             <div class="mb-4">
-                                <select type="text" class="form-select text-muted" name="area-of-interest"
-                                    id="area-of-interest" placeholder="Name" v-model="profile.area_of_interest"
+                                <select class="form-select text-muted" name="area-of-interest" id="area-of-interest"
+                                    placeholder="Name" v-model="profile.area_of_interest"
                                     @change="updateAreaOfInterest">
                                     <option :value="null">No Specific Area</option>
                                     <option value="flora">Flora</option>
@@ -97,7 +94,7 @@ import { api_endpoints } from '@/utils/hooks'
 
 export default {
     name: 'Home',
-    data() {
+    data: function() {
         return {
             profile: null,
         }
@@ -114,8 +111,15 @@ export default {
     methods: {
         updateAreaOfInterest: function () {
             let vm = this;
-            vm.$http.patch(api_endpoints.save_area_of_interest, { area_of_interest: vm.profile.area_of_interest }).then(async (response) => {
-                vm.profile.area_of_interest = await response.body.area_of_interest;
+            fetch(api_endpoints.save_area_of_interest, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ area_of_interest: vm.profile.area_of_interest })
+            }).then(async (response) => {
+                const json = await response.json();
+                vm.profile.area_of_interest = json.area_of_interest;
             }, (error) => {
                 console.log(error);
             });
@@ -126,8 +130,13 @@ export default {
         },
         fetchProfile: function () {
             let vm = this;
-            vm.$http.get(api_endpoints.profile).then(async (response) => {
-                vm.profile = await response.body;
+            fetch(api_endpoints.profile, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then(async (response) => {
+                vm.profile = await response.json();
             }, (error) => {
 
             });
@@ -136,7 +145,7 @@ export default {
     created: function () {
         // env variable is set in base.html template from django
         var user_is_authenticated = `${env['user_is_authenticated']}`
-        if(user_is_authenticated.toString() === 'true') {
+        if (user_is_authenticated.toString() === 'true') {
             this.fetchProfile();
         }
     }
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
index 1ba524ce..ca84b534 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col-sm-offset-2 col-sm-8">
@@ -122,8 +122,8 @@ export default {
         },
         fetchAmendmentChoices: function () {
             let vm = this;
-            vm.$http.get('/api/proposal_amendment_request_reason_choices.json').then((response) => {
-                vm.reason_choices = response.body;
+            fetch('/api/proposal_amendment_request_reason_choices.json').then(async (response) => {
+                vm.reason_choices = await response.json();
             }, (error) => {
                 console.log(error);
             });
@@ -147,9 +147,12 @@ export default {
 
             formData.append('data', JSON.stringify(amendment));
 
-            // vm.$http.post('/api/amendment_request.json',JSON.stringify(amendment),{
-            vm.$http.post('/api/cs_amendment_request.json', formData, {
-                emulateJSON: true,
+            fetch('/api/cs_amendment_request.json', {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
             }).then((response) => {
                 swal.fire({
                     title: 'Sent',
@@ -162,7 +165,7 @@ export default {
                 vm.amendingProposal = true;
                 vm.close();
                 //vm.$emit('refreshFromResponse',response);
-                Vue.http.get(`/api/conservation_status/${vm.conservation_status_id}/internal_conservation_status.json`).then((response) => {
+                fetch(`/api/conservation_status/${vm.conservation_status_id}/internal_conservation_status.json`).then((response) => {
                     vm.$emit('refreshFromResponse', response);
 
                 }, (error) => {
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue
index 420206a1..d1dc79f9 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue
@@ -81,8 +81,12 @@ export default {
             let vm = this;
             vm.errors = null;
             let data = { 'status': 'with_assessor', 'approver_comment': vm.approver_comment }
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_id + '/switch_status')), JSON.stringify(data), {
-                emulateJSON: true,
+            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_id + '/switch_status')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
             })
                 .then((response) => {
                     vm.$emit('refreshFromResponse', response);
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index ae0283ee..25c6ba70 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -27,13 +27,14 @@
                                 <strong>
                                     <template v-if="conservation_status_obj.most_recent_meeting_completed">Meeting
                                         Completed<i class="bi bi-check-circle-fill ms-2 text-success"></i></template>
-                                    <template v-else>Awaiting Meeting<i class="bi bi-hourglass-split ms-2 text-secondary"></i></template>
+                                    <template v-else>Awaiting Meeting<i
+                                            class="bi bi-hourglass-split ms-2 text-secondary"></i></template>
                                 </strong><br />
                                 <a :href="`/internal/meetings/${conservation_status_obj.most_recent_meeting.id}?action=edit`"
                                     target="_blank">{{
                                         conservation_status_obj.most_recent_meeting.title ?
-                                            conservation_status_obj.most_recent_meeting.title : 'Meeting
-                                    Draft' }}<i class="bi bi-box-arrow-up-right ms-2"></i></a>
+                                            conservation_status_obj.most_recent_meeting.title : 'Meeting Draft' }}<i
+                                        class="bi bi-box-arrow-up-right ms-2"></i></a>
                             </p>
                         </template>
                     </div>
@@ -359,78 +360,75 @@
             </div>
             <div class="col-md-9">
                 <div class="row">
-                    <template>
-                        <div class="">
-                            <div class="row">
-                                <form :action="species_community_cs_form_url" method="post"
-                                    name="new_conservation_status" enctype="multipart/form-data">
-                                    <ProposalConservationStatus ref="conservation_status"
-                                        :conservation_status_obj="conservation_status_obj"
-                                        :canEditStatus="canEditStatus" id="ConservationStatusStart" :is_internal="true"
-                                        @saveConservationStatus="save_wo()">
-                                    </ProposalConservationStatus>
-                                    <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                    <input type='hidden' name="conservation_status_id" :value="1" />
-                                    <div class="row" style="margin-bottom: 50px">
-                                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
-                                            <!--the below as internal proposal submission ELSE just saving proposal changes -->
-                                            <div class="container">
-                                                <div class="col-md-6">
-                                                    <p class="pull-right" style="margin-top:5px;">
-                                                        <router-link class="btn btn-primary"
-                                                            :to="{ name: 'internal-conservation-status-dash' }">Back to
-                                                            Dashboard</router-link>
-                                                    </p>
-                                                </div>
-                                                <div v-if="conservation_status_obj.internal_user_edit"
-                                                    class="col-md-6 text-end">
-                                                    <button v-if="savingConservationStatus" class="btn btn-primary me-2"
-                                                        style="margin-top:5px;" disabled>Save and Continue <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                                        @click.prevent="save()"
-                                                        :disabled="saveExitConservationStatus || submitConservationStatus">Save
-                                                        and Continue</button>
+                    <div class="">
+                        <div class="row">
+                            <form :action="species_community_cs_form_url" method="post" name="new_conservation_status"
+                                enctype="multipart/form-data">
+                                <ProposalConservationStatus ref="conservation_status"
+                                    :conservation_status_obj="conservation_status_obj" :canEditStatus="canEditStatus"
+                                    id="ConservationStatusStart" :is_internal="true"
+                                    @saveConservationStatus="save_wo()">
+                                </ProposalConservationStatus>
+                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
+                                <input type='hidden' name="conservation_status_id" :value="1" />
+                                <div class="row" style="margin-bottom: 50px">
+                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                        <!--the below as internal proposal submission ELSE just saving proposal changes -->
+                                        <div class="container">
+                                            <div class="col-md-6">
+                                                <p class="pull-right" style="margin-top:5px;">
+                                                    <router-link class="btn btn-primary"
+                                                        :to="{ name: 'internal-conservation-status-dash' }">Back to
+                                                        Dashboard</router-link>
+                                                </p>
+                                            </div>
+                                            <div v-if="conservation_status_obj.internal_user_edit"
+                                                class="col-md-6 text-end">
+                                                <button v-if="savingConservationStatus" class="btn btn-primary me-2"
+                                                    style="margin-top:5px;" disabled>Save and Continue <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                                    @click.prevent="save()"
+                                                    :disabled="saveExitConservationStatus || submitConservationStatus">Save
+                                                    and Continue</button>
 
-                                                    <button v-if="saveExitConservationStatus"
-                                                        class="btn btn-primary me-2" style="margin-top:5px;"
-                                                        disabled>Save and Exit <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                                        @click.prevent="save_exit()"
-                                                        :disabled="savingConservationStatus || submitConservationStatus">Save
-                                                        and Exit</button>
+                                                <button v-if="saveExitConservationStatus" class="btn btn-primary me-2"
+                                                    style="margin-top:5px;" disabled>Save and Exit <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                                    @click.prevent="save_exit()"
+                                                    :disabled="savingConservationStatus || submitConservationStatus">Save
+                                                    and Exit</button>
 
-                                                    <button v-if="submitConservationStatus" class="btn btn-primary"
-                                                        style="margin-top:5px;" disabled>Submit <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary" style="margin-top:5px;"
-                                                        @click.prevent="submit()"
-                                                        :disbaled="saveExitConservationStatus || savingConservationStatus">Submit</button>
-                                                </div>
-                                                <div v-else-if="hasAssessorMode" class="col-md-6 text-end">
-                                                    <button v-if="savingConservationStatus" class="btn btn-primary"
-                                                        style="margin-top:5px;" disabled>Save Changes <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary" style="margin-top:5px;"
-                                                        @click.prevent="save()">Save
-                                                        Changes</button>
-                                                </div>
+                                                <button v-if="submitConservationStatus" class="btn btn-primary"
+                                                    style="margin-top:5px;" disabled>Submit <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary" style="margin-top:5px;"
+                                                    @click.prevent="submit()"
+                                                    :disbaled="saveExitConservationStatus || savingConservationStatus">Submit</button>
+                                            </div>
+                                            <div v-else-if="hasAssessorMode" class="col-md-6 text-end">
+                                                <button v-if="savingConservationStatus" class="btn btn-primary"
+                                                    style="margin-top:5px;" disabled>Save Changes <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary" style="margin-top:5px;"
+                                                    @click.prevent="save()">Save
+                                                    Changes</button>
                                             </div>
                                         </div>
                                     </div>
-                                </form>
-                            </div>
+                                </div>
+                            </form>
                         </div>
-                    </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -726,8 +724,14 @@ export default {
         },
         unlockConservationStatus: async function () {
             let vm = this;
-            await vm.$http.patch(`/api/conservation_status/${vm.conservation_status_obj.id}/unlock_conservation_status.json`).then(response => {
-                vm.conservation_status_obj = Object.assign({}, response.body);
+            await fetch(`/api/conservation_status/${vm.conservation_status_obj.id}/unlock_conservation_status.json`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
+                const data = await response.json();
+                vm.conservation_status_obj = Object.assign({}, data);
                 swal.fire({
                     title: 'Conservation Status Unlocked',
                     icon: 'success',
@@ -762,9 +766,15 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(`/api/conservation_status/${vm.conservation_status_obj.id}/lock_conservation_status.json`)
-                        .then((response) => {
-                            vm.conservation_status_obj = Object.assign({}, response.body);
+                    fetch(`/api/conservation_status/${vm.conservation_status_obj.id}/lock_conservation_status.json`, {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
+                        .then(async (response) => {
+                            const data = await response.json();
+                            vm.conservation_status_obj = Object.assign({}, data);
                             swal.fire({
                                 title: 'Conservation Status Locked',
                                 icon: 'success',
@@ -794,7 +804,12 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_cs_proposal(vm.conservation_status_obj.id))
+                    fetch(api_endpoints.discard_cs_proposal(vm.conservation_status_obj.id), {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -846,7 +861,12 @@ export default {
                 }
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.delist_cs_proposal(vm.conservation_status_obj.id))
+                    fetch(api_endpoints.delist_cs_proposal(vm.conservation_status_obj.id), {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Delisted',
@@ -938,7 +958,13 @@ export default {
             vm.savingConservationStatus = true;
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
-            await vm.$http.post(vm.species_community_cs_form_url, payload).then(res => {
+            await fetch(vm.species_community_cs_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 swal.fire({
                     title: 'Saved',
                     text: 'Your changes have been saved',
@@ -994,8 +1020,14 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
-            const result = await vm.$http.post(vm.species_community_cs_form_url, payload).then(res => {
-                //return true;
+            const result = await fetch(vm.species_community_cs_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
+
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
                 swal.fire({
@@ -1090,8 +1122,14 @@ export default {
                     if (!vm.saveError) {
                         let payload = new Object();
                         Object.assign(payload, vm.conservation_status_obj);
-                        vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/submit'), payload).then(res => {
-                            vm.conservation_status_obj = res.body;
+                        fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/submit'), {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        }).then(async (response) => {
+                            vm.conservation_status_obj = await response.json();
                             vm.$router.push({
                                 name: 'internal-conservation-status-dash'
                             });
@@ -1117,14 +1155,21 @@ export default {
             let vm = this;
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
-            vm.$http.post(vm.species_community_cs_form_url, payload).then(res => {
+            fetch(vm.species_community_cs_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
             }, err => {
             });
         },
-        refreshFromResponse: function (response) {
+        refreshFromResponse: async function (response) {
+            const data = await response.json();
             let vm = this;
-            vm.original_conservation_status_obj = helpers.copyObject(response.body);
-            vm.conservation_status_obj = helpers.copyObject(response.body);
+            vm.original_conservation_status_obj = helpers.copyObject(data);
+            vm.conservation_status_obj = helpers.copyObject(data);
             vm.$nextTick(() => {
                 vm.initialisedSelects = false;
                 vm.initialiseSelects();
@@ -1143,11 +1188,16 @@ export default {
                 data = { 'assessor_id': vm.conservation_status_obj.assigned_officer };
             }
             if (!unassign) {
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assign_to')), JSON.stringify(data), {
-                    emulateJSON: true
-                }).then((response) => {
-                    vm.conservation_status_obj = response.body;
-                    vm.original_conservation_status_obj = helpers.copyObject(response.body);
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assign_to')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data),
+                }).then(async (response) => {
+                    const data = await response.json();
+                    vm.conservation_status_obj = data;
+                    vm.original_conservation_status_obj = helpers.copyObject(data);
                     vm.updateAssignedOfficerSelect();
                 }, (error) => {
                     vm.conservation_status_obj = helpers.copyObject(vm.original_conservation_status_obj)
@@ -1163,10 +1213,11 @@ export default {
                 });
             }
             else {
-                vm.$http.get(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/unassign')))
-                    .then((response) => {
-                        vm.conservation_status_obj = response.body;
-                        vm.original_conservation_status_obj = helpers.copyObject(response.body);
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/unassign')))
+                    .then(async (response) => {
+                        const data = await response.json();
+                        vm.conservation_status_obj = data;
+                        vm.original_conservation_status_obj = helpers.copyObject(data);
                         vm.updateAssignedOfficerSelect();
                     }, (error) => {
                         vm.conservation_status_obj = helpers.copyObject(vm.original_conservation_status_obj)
@@ -1196,10 +1247,11 @@ export default {
         },
         assignRequestUser: function () {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assign_request_user')))
-                .then((response) => {
-                    vm.conservation_status_obj = response.body;
-                    vm.original_conservation_status_obj = helpers.copyObject(response.body);
+            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assign_request_user')))
+                .then(async (response) => {
+                    const data = await response.json();
+                    vm.conservation_status_obj = data;
+                    vm.original_conservation_status_obj = helpers.copyObject(data);
                     vm.updateAssignedOfficerSelect();
                     vm.$nextTick(() => {
                         vm.initialisedSelects = false;
@@ -1257,8 +1309,8 @@ export default {
         fetchDeparmentUsers: function () {
             let vm = this;
             vm.loading.push('Loading Department Users');
-            vm.$http.get(api_endpoints.department_users).then((response) => {
-                vm.department_users = response.body
+            fetch(api_endpoints.department_users).then(async (response) => {
+                vm.department_users = await response.json();
                 vm.loading.splice('Loading Department Users', 1);
             }, (error) => {
                 console.log(error);
@@ -1338,11 +1390,17 @@ export default {
         },
         remindExternalReferee: function (external_referee_invite) {
             let vm = this;
-            vm.$http.post(
+            fetch(
                 helpers.add_endpoint_join(
                     api_endpoints.cs_external_referee_invites,
                     `/${external_referee_invite.id}/remind/`
                 ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
             )
                 .then((response) => {
                     swal.fire({
@@ -1371,12 +1429,16 @@ export default {
             }).then((result) => {
                 if (result.isConfirmed) {
                     let vm = this;
-                    vm.$http.patch(
+                    fetch(
                         helpers.add_endpoint_join(
                             api_endpoints.cs_external_referee_invites,
                             `/${external_referee_invite.id}/retract/`
-                        ),
-                    )
+                        ), {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
                         .then((response) => {
                             this.fetchConservationStatus();
                             swal.fire({
@@ -1403,14 +1465,25 @@ export default {
             vm.sendingReferral = true;
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
-            vm.$http.post(vm.species_community_cs_form_url, payload).then(res => {
+            fetch(vm.species_community_cs_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 let data = { 'email': vm.selected_referral, 'text': vm.referral_text };
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assesor_send_referral')), JSON.stringify(data), {
-                    emulateJSON: true
-                }).then((response) => {
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assesor_send_referral')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data),
+                }).then(async (response) => {
+                    const data = await response.json();
                     vm.sendingReferral = false;
-                    vm.original_conservation_status_obj = helpers.copyObject(response.body);
-                    vm.conservation_status_obj = response.body;
+                    vm.original_conservation_status_obj = helpers.copyObject(data);
+                    vm.conservation_status_obj = data;
                     swal.fire({
                         title: 'Referral Sent',
                         text: `The referral has been sent to ${vm.selected_referral}`,
@@ -1439,9 +1512,10 @@ export default {
         },
         remindReferral: function (r) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/remind')).then(response => {
-                vm.original_conservation_status_obj = helpers.copyObject(response.body);
-                vm.conservation_status_obj = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/remind')).then(async (response) => {
+                const data = await response.json();
+                vm.original_conservation_status_obj = helpers.copyObject(data);
+                vm.conservation_status_obj = data;
                 swal.fire({
                     title: 'Referral Reminder',
                     text: `A reminder has been sent to ${r.referral.fullname}`,
@@ -1464,9 +1538,15 @@ export default {
         },
         recallReferral: function (r) {
             let vm = this;
-            vm.$http.patch(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/recall')).then(response => {
-                vm.original_conservation_status_obj = helpers.copyObject(response.body);
-                vm.conservation_status_obj = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/recall'), {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
+                const data = await response.json();
+                vm.original_conservation_status_obj = helpers.copyObject(data);
+                vm.conservation_status_obj = data;
                 $(".popover").hide()
                 vm.enablePopovers();
                 swal.fire({
@@ -1491,9 +1571,10 @@ export default {
         },
         resendReferral: function (r) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/resend')).then(response => {
-                vm.original_conservation_status_obj = helpers.copyObject(response.body);
-                vm.conservation_status_obj = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/resend')).then(async (response) => {
+                const data = await response.json();
+                vm.original_conservation_status_obj = helpers.copyObject(data);
+                vm.conservation_status_obj = data;
                 $(".popover").hide()
                 vm.enablePopovers();
                 swal.fire({
@@ -1526,12 +1607,17 @@ export default {
             let vm = this;
             if (vm.conservation_status_obj.processing_status == 'Proposed DeListed' && status == 'with_assessor') {
                 let data = { 'status': status, 'approver_comment': vm.approver_comment }
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/switch_status')), JSON.stringify(data), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/switch_status')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data),
                 })
-                    .then((response) => {
-                        vm.conservation_status_obj = response.body;
-                        vm.original_conservation_status_obj = helpers.copyObject(response.body);
+                    .then(async (response) => {
+                        const data = await response.json();
+                        vm.conservation_status_obj = data;
+                        vm.original_conservation_status_obj = helpers.copyObject(data);
                         vm.approver_comment = '';
                         vm.$nextTick(() => {
                             vm.initialiseAssignedOfficerSelect(true);
@@ -1553,12 +1639,17 @@ export default {
             else {
                 let data = { 'status': status, 'approver_comment': vm.approver_comment }
                 vm.changingStatus = true;
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/switch_status')), JSON.stringify(data), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/switch_status')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data),
                 })
-                    .then((response) => {
-                        vm.conservation_status_obj = response.body;
-                        vm.original_conservation_status_obj = helpers.copyObject(response.body);
+                    .then(async (response) => {
+                        const data = await response.json();
+                        vm.conservation_status_obj = data;
+                        vm.original_conservation_status_obj = helpers.copyObject(data);
                         vm.approver_comment = '';
                         vm.$nextTick(() => {
                             vm.initialiseAssignedOfficerSelect(true);
@@ -1590,8 +1681,9 @@ export default {
         },
         fetchConservationStatus: function () {
             let vm = this;
-            vm.$http.get('/api/conservation_status/' + vm.$route.params.conservation_status_id + '/internal_conservation_status.json').then(res => {
-                vm.conservation_status_obj = res.body.conservation_status_obj;
+            fetch('/api/conservation_status/' + vm.$route.params.conservation_status_id + '/internal_conservation_status.json').then(async (response) => {
+                const data = await response.json();
+                vm.conservation_status_obj = data.conservation_status_obj;
             },
                 err => {
                     console.log(err);
@@ -1615,9 +1707,10 @@ export default {
         });
     },
     beforeRouteEnter: function (to, from, next) {
-        Vue.http.get(`/api/conservation_status/${to.params.conservation_status_id}/internal_conservation_status.json`).then(res => {
-            next(vm => {
-                vm.conservation_status_obj = res.body.conservation_status_obj;
+        fetch(`/api/conservation_status/${to.params.conservation_status_id}/internal_conservation_status.json`).then(async (response) => {
+            next(async vm => {
+                const data = await response.json();
+                vm.conservation_status_obj = data.conservation_status_obj;
             });
         },
             err => {
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
index 7135c449..42f70d79 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
@@ -137,8 +137,8 @@ export default {
         },
         fetchProfile: function () {
             let vm = this;
-            vm.$http.get(api_endpoints.profile).then(async (response) => {
-                vm.profile = await response.body;
+            fetch(api_endpoints.profile).then(async (response) => {
+                vm.profile = await response.json();
                 vm.$nextTick(() => {
                     if (vm.profile && vm.profile.area_of_interest) {
                         vm.set_active_tab(vm.profile.area_of_interest);
@@ -157,8 +157,8 @@ export default {
         }
     },
     created: function () {
-        this.$http.get(api_endpoints.group_types_dict).then((response) => {
-            this.group_types = response.body;
+        fetch(api_endpoints.group_types_dict).then(async (response) => {
+            this.group_types = await response.json();
         }, (error) => {
             console.log(error);
         });
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue
index 63ee675c..8e9b5fc0 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue
@@ -32,8 +32,8 @@
                                 <div class="col">
                                     <div class="form-group">
                                         <label class="control-label mb-3" for="review-due-date">Review Due Date</label>
-                                        <input type="date" class="form-control" id="review-due-date" name="review-due-date"
-                                            ref="review-due-date" v-model="reviewDueDate" />
+                                        <input type="date" class="form-control" id="review-due-date"
+                                            name="review-due-date" ref="review-due-date" v-model="reviewDueDate" />
                                     </div>
                                 </div>
                             </div>
@@ -101,8 +101,10 @@ export default {
             let vm = this;
             vm.errors = null;
             let data = { 'review_due_date': vm.reviewDueDate, 'reason': vm.reason }
-            vm.$http.patch(api_endpoints.defer_cs_proposal(vm.conservation_status.id), JSON.stringify(data), {
-                emulateJSON: true,
+            fetch(api_endpoints.defer_cs_proposal(vm.conservation_status.id), {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json', },
+                body: JSON.stringify(data),
             })
                 .then((response) => {
                     vm.$emit('refreshFromResponse', response);
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
index 5a7f8d61..bc18e387 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal needs-validation" id="delistForm" name="delistForm" novalidate>
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
@@ -135,8 +135,10 @@ export default {
             let delist = JSON.parse(JSON.stringify(vm.delist));
             vm.delistingProposal = true;
             if (vm.processing_status == 'Approved') {
-                vm.$http.patch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/propose_delist'), JSON.stringify(delist), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/propose_delist'), {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json', },
+                    body: JSON.stringify(delist),
                 }).then((response) => {
                     vm.delistingProposal = false;
                     vm.close();
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
index 2013d417..bad19415 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="declineForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
@@ -112,8 +112,12 @@ export default {
             let decline = JSON.parse(JSON.stringify(vm.decline));
             vm.decliningProposal = true;
             if (vm.processing_status == 'With Assessor' || vm.processing_status == 'On Agenda') {
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/final_decline'), JSON.stringify(decline), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/final_decline'), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(decline)
                 }).then((response) => {
                     vm.decliningProposal = false;
                     vm.close();
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
index 9429a70f..26271d93 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
@@ -81,7 +81,13 @@ export default {
         },
         proposeForAgenda: function () {
             let vm = this;
-            vm.$http.patch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/proposed_for_agenda'), { 'assessor_comment': vm.assessor_comment }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/proposed_for_agenda'), {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ 'assessor_comment': vm.assessor_comment }),
+            }).then((response) => {
                 vm.$router.push({ path: '/internal/conservation-status/' });
             }, (error) => {
                 vm.errors = true;
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
index 96c4168e..06523ceb 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="approvalForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <alert type="danger" v-if="!isEffectiveDateValid"><strong>Please select Effective To Date that
                                 is after Effective From Date</strong></alert>
                         <div class="col-sm-12">
@@ -191,8 +191,12 @@ export default {
             let approval = JSON.parse(JSON.stringify(vm.approval));
             vm.issuingApproval = true;
             if (vm.state == 'proposed_approval') {
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/proposed_approval'), JSON.stringify(approval), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/proposed_approval'), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(approval)
                 }).then((response) => {
                     vm.issuingApproval = false;
                     vm.close();
@@ -211,8 +215,12 @@ export default {
                 formData.append('proposal_approval_document', vm.uploadedFile)
                 formData.append('data', JSON.stringify(approval));
 
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/final_approval'), formData, {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/final_approval'), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: formData
                 }).then((response) => {
                     vm.issuingApproval = false;
                     vm.close();
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
index 69138c7c..a8ea9b45 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
@@ -80,7 +80,15 @@ export default {
         },
         readyForAgenda: function () {
             let vm = this;
-            vm.$http.patch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/ready_for_agenda'), { 'assessor_comment': vm.assessor_comment }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/ready_for_agenda'), {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    'assessor_comment': vm.assessor_comment
+                })
+            }).then((response) => {
                 vm.$router.push({ path: '/internal/conservation-status/' });
             }, (error) => {
                 vm.errors = true;
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
index 554fa337..bf154824 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
@@ -59,33 +59,31 @@
             </div>
             <div class="col-md-9">
                 <div class="row">
-                    <template>
-                        <div class="">
-                            <div class="row">
-                                <form :action="species_community_cs_form_url" method="post"
-                                    name="new_conservation_status" enctype="multipart/form-data">
-                                    <ProposalConservationStatus v-if="conservation_status_obj && profile"
-                                        ref="conservation_status" :conservation_status_obj="conservation_status_obj"
-                                        :referral="referral" :is_internal="profile.is_internal">
-                                    </ProposalConservationStatus>
-                                    <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                    <input type='hidden' name="conservation_status_id" :value="1" />
-                                    <div class="row" style="margin-bottom: 50px">
-                                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;"
-                                            v-if="!conservation_status_obj.can_user_edit && !isFinalised">
-                                            <div v-if="!isFinalised" class="container">
-                                                <div class="col-md-12 text-end">
-                                                    <button class="btn btn-primary pull-right" style="margin-top:5px;"
-                                                        @click.prevent="save()">Save
-                                                        Changes</button>
-                                                </div>
+                    <div class="">
+                        <div class="row">
+                            <form :action="species_community_cs_form_url" method="post" name="new_conservation_status"
+                                enctype="multipart/form-data">
+                                <ProposalConservationStatus v-if="conservation_status_obj && profile"
+                                    ref="conservation_status" :conservation_status_obj="conservation_status_obj"
+                                    :referral="referral" :is_internal="profile.is_internal">
+                                </ProposalConservationStatus>
+                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
+                                <input type='hidden' name="conservation_status_id" :value="1" />
+                                <div class="row" style="margin-bottom: 50px">
+                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;"
+                                        v-if="!conservation_status_obj.can_user_edit && !isFinalised">
+                                        <div v-if="!isFinalised" class="container">
+                                            <div class="col-md-12 text-end">
+                                                <button class="btn btn-primary pull-right" style="margin-top:5px;"
+                                                    @click.prevent="save()">Save
+                                                    Changes</button>
                                             </div>
                                         </div>
                                     </div>
-                                </form>
-                            </div>
+                                </div>
+                            </form>
                         </div>
-                    </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -152,7 +150,13 @@ export default {
             vm.savingConservationStatus = true;
             let payload = new Object();
             Object.assign(payload, vm.referral);
-            vm.$http.post(vm.species_community_cs_referral_form_url, payload).then(res => {
+            fetch(vm.species_community_cs_referral_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 swal.fire({
                     title: 'Saved',
                     text: 'Your changes have been saved',
@@ -166,9 +170,10 @@ export default {
                 vm.savingConservationStatus = false;
             });
         },
-        refreshFromResponse: function (response) {
+        refreshFromResponse: async function (response) {
             let vm = this;
-            vm.conservation_status_obj = helpers.copyObject(response.body);
+            const data = await response.json();
+            vm.conservation_status_obj = helpers.copyObject(data);
         },
         completeReferral: function () {
             let vm = this;
@@ -201,9 +206,21 @@ export default {
                 if (result.isConfirmed) {
                     let payload = new Object();
                     Object.assign(payload, vm.referral);
-                    vm.$http.post(vm.species_community_cs_referral_form_url, payload).then(res => {
-                        vm.$http.patch(helpers.add_endpoint_json(api_endpoints.cs_referrals, vm.$route.params.referral_id + '/complete')).then(res => {
-                            vm.referral = Object.assign({}, res.body);
+                    fetch(vm.species_community_cs_referral_form_url, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(payload),
+                    }).then(async (response) => {
+                        fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, vm.$route.params.referral_id + '/complete'), {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        }).then(async (response) => {
+                            const data = await response.json();
+                            vm.referral = Object.assign({}, data);
                         },
                             error => {
                                 swal.fire({
@@ -226,17 +243,18 @@ export default {
         },
         fetchReferral: function () {
             let vm = this;
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.cs_referrals, vm.$route.params.referral_id)).then(res => {
-                vm.referral = Object.assign({}, res.body);
+            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, vm.$route.params.referral_id)).then(async (response) => {
+                const data = await response.json();
+                vm.referral = Object.assign({}, data);
             },
                 err => {
                     console.log(err);
                 });
         },
         fetchProfile() {
-            this.$http.get(api_endpoints.profile)
-                .then(response => {
-                    this.profile = response.data
+            fetch(api_endpoints.profile)
+                .then(async (response) => {
+                    this.profile = await response.json();
                 })
                 .catch(error => {
                     console.log(error)
@@ -250,9 +268,9 @@ export default {
         }
     },
     beforeRouteEnter: function (to, from, next) {
-        Vue.http.get(helpers.add_endpoint_json(api_endpoints.cs_referrals, to.params.referral_id)).then(res => {
-            next(vm => {
-                vm.referral = res.body;
+        fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, to.params.referral_id)).then(async (response) => {
+            next(async vm => {
+                vm.referral = await response.json();
             });
         },
             err => {
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
index 5b2a9f21..1779dbc5 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="agendaForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div>
                             <div class="col-md-12">
                                 <ul class="nav nav-pills" id="pills-tab" role="tablist">
@@ -236,8 +236,8 @@ export default {
         })
     },
     created: function () {
-        this.$http.get(api_endpoints.group_types_dict).then((response) => {
-            this.group_types = response.body;
+        fetch(api_endpoints.group_types_dict).then(async (response) => {
+            this.group_types = await response.json();
         }, (error) => {
             console.log(error);
         });
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index d902db09..96503446 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -201,8 +201,8 @@ export default {
         // This function was used to call api and then add row to datatable manually on ANY ACTION
         constructCSQueueTable: function () {
             let vm = this;
-            Vue.http.get(`/api/meeting/${vm.meeting_obj.id}/fetch_agenda_items.json`).then(res => {
-                vm.agenda_items = res.body;
+            fetch(`/api/meeting/${vm.meeting_obj.id}/fetch_agenda_items.json`).then(async (response) => {
+                vm.agenda_items = await response.json();
                 vm.$refs.cs_queue_datatable.vmDataTable.clear()
                 vm.$refs.cs_queue_datatable.vmDataTable.rows.add(vm.agenda_items);
                 vm.$refs.cs_queue_datatable.vmDataTable.draw();
@@ -267,8 +267,14 @@ export default {
                 if (result.isConfirmed) {
                     let payload = new Object();
                     payload.conservation_status_id = conservation_status_id;
-                    Vue.http.post(`/api/meeting/${vm.meeting_obj.id}/remove_agenda_item.json`, payload)
-                        .then((res) => {
+                    fetch(`/api/meeting/${vm.meeting_obj.id}/remove_agenda_item.json`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(payload),
+                    })
+                        .then(async (response) => {
                             swal.fire({
                                 title: 'Removed',
                                 text: 'Your agenda item is removed',
@@ -277,7 +283,7 @@ export default {
                                     confirmButton: 'btn btn-primary',
                                 },
                             });
-                            vm.meeting_obj.agenda_items_arr = res.body;
+                            vm.meeting_obj.agenda_items_arr = await response.json();
                             vm.$refs.cs_queue_datatable.vmDataTable.ajax.reload(vm.addTableListeners, false);
                             // Open the CS details page in a new tab
                             var new_window = window.open(`/internal/conservation-status/${conservation_status_id}?action=view`, '_blank');
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
index 1d854631..14d66593 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
@@ -11,8 +11,7 @@
                 <MeetingSidePanel v-if="canSeeSidePanel" :submitter_first_name="submitter_first_name"
                     :submitter_last_name="submitter_last_name" :datetime_created="meeting_obj.datetime_created"
                     :datetime_scheduled="meeting_obj.datetime_scheduled"
-                    :datetime_completed="meeting_obj.datetime_completed"
-                    class="mt-3" />
+                    :datetime_completed="meeting_obj.datetime_completed" class="mt-3" />
 
                 <div class="mt-3">
                     <div class="card card-default">
@@ -27,7 +26,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div  v-if="showActions" class="card-body border-top">
+                        <div v-if="showActions" class="card-body border-top">
                             <div class="row">
                                 <div class="col-sm-12">
                                     <div class="col-sm-12">
@@ -69,70 +68,67 @@
             </div>
             <div class="col-md-9">
                 <div class="row">
-                    <template>
-                        <div class="">
-                            <div class="row">
-                                <form :action="meeting_form_url" method="post" name="new_meeting"
-                                    enctype="multipart/form-data">
-                                    <MeetingSection ref="meeting" :meeting_obj="meeting_obj" :userCanEdit="userCanEdit"
-                                        id="MeetingStart" :is_internal="true">
-                                    </MeetingSection>
-                                    <CSQueue ref="cs_queue" :meeting_obj="meeting_obj" id="CSQueue" :is_internal="true">
-                                    </CSQueue>
-                                    <Minutes ref="minutes" :meeting_obj="meeting_obj" id="Minutes" :is_internal="true">
-                                    </Minutes>
-                                    <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                    <input type='hidden' name="meeting_id" :value="1" />
-                                    <div class="row" style="margin-bottom: 50px">
-                                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
-                                            <!--the below as internal proposal submission ELSE just saving proposal changes -->
-                                            <div class="container">
-                                                <div class="col-md-6" style="margin-top:5px">
-                                                    <div class="col-md-6">
-                                                        <button class="btn btn-primary me-2 pull-left"
-                                                            style="margin-top:5px;" @click.prevent="returnToDashboard">
-                                                            Return to Dashboard</button>
-                                                    </div>
+                    <div class="">
+                        <div class="row">
+                            <form :action="meeting_form_url" method="post" name="new_meeting"
+                                enctype="multipart/form-data">
+                                <MeetingSection ref="meeting" :meeting_obj="meeting_obj" :userCanEdit="userCanEdit"
+                                    id="MeetingStart" :is_internal="true">
+                                </MeetingSection>
+                                <CSQueue ref="cs_queue" :meeting_obj="meeting_obj" id="CSQueue" :is_internal="true">
+                                </CSQueue>
+                                <Minutes ref="minutes" :meeting_obj="meeting_obj" id="Minutes" :is_internal="true">
+                                </Minutes>
+                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
+                                <input type='hidden' name="meeting_id" :value="1" />
+                                <div class="row" style="margin-bottom: 50px">
+                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                        <!--the below as internal proposal submission ELSE just saving proposal changes -->
+                                        <div class="container">
+                                            <div class="col-md-6" style="margin-top:5px">
+                                                <div class="col-md-6">
+                                                    <button class="btn btn-primary me-2 pull-left"
+                                                        style="margin-top:5px;" @click.prevent="returnToDashboard">
+                                                        Return to Dashboard</button>
                                                 </div>
-                                                <div v-if="meeting_obj.can_user_edit" class="col-md-6 text-end">
-                                                    <button v-if="savingMeeting" class="btn btn-primary me-2 pull-right"
-                                                        style="margin-top:5px;" disabled>Save and Continue <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary me-2 pull-right"
-                                                        style="margin-top:5px;" @click.prevent="save()"
-                                                        :disabled="saveExitMeeting || submitMeeting">Save and
-                                                        Continue</button>
+                                            </div>
+                                            <div v-if="meeting_obj.can_user_edit" class="col-md-6 text-end">
+                                                <button v-if="savingMeeting" class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top:5px;" disabled>Save and Continue <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top:5px;" @click.prevent="save()"
+                                                    :disabled="saveExitMeeting || submitMeeting">Save and
+                                                    Continue</button>
 
-                                                    <button v-if="saveExitMeeting"
-                                                        class="btn btn-primary me-2 pull-right" style="margin-top:5px;"
-                                                        disabled>Save and Exit <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary me-2 pull-right"
-                                                        style="margin-top:5px;" @click.prevent="save_exit()"
-                                                        :disabled="savingMeeting || submitMeeting">Save and
-                                                        Exit</button>
-                                                </div>
-                                                <div v-else-if="userCanEdit" class="col-md-6 text-end">
-                                                    <button v-if="savingMeeting" class="btn btn-primary pull-right"
-                                                        style="margin-top:5px;" disabled>Save Changes <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary pull-right"
-                                                        style="margin-top:5px;" @click.prevent="save_exit()">Save
-                                                        Changes</button>
-                                                </div>
+                                                <button v-if="saveExitMeeting" class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top:5px;" disabled>Save and Exit <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top:5px;" @click.prevent="save_exit()"
+                                                    :disabled="savingMeeting || submitMeeting">Save and
+                                                    Exit</button>
+                                            </div>
+                                            <div v-else-if="userCanEdit" class="col-md-6 text-end">
+                                                <button v-if="savingMeeting" class="btn btn-primary pull-right"
+                                                    style="margin-top:5px;" disabled>Save Changes <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary pull-right"
+                                                    style="margin-top:5px;" @click.prevent="save_exit()">Save
+                                                    Changes</button>
                                             </div>
                                         </div>
                                     </div>
-                                </form>
-                            </div>
+                                </div>
+                            </form>
                         </div>
-                    </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -274,7 +270,13 @@ export default {
             vm.savingMeeting = true;
             let payload = new Object();
             Object.assign(payload, vm.meeting_obj);
-            await vm.$http.put(vm.meeting_form_url, payload).then(res => {
+            await fetch(vm.meeting_form_url, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            }).then(async (response) => {
                 swal.fire({
                     title: 'Saved',
                     text: 'Your changes have been saved',
@@ -333,8 +335,15 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, vm.meeting_obj);
-            const result = await vm.$http.put(vm.meeting_form_url, payload).then(res => {
-                //return true;
+            let result = null;
+            await fetch(vm.meeting_form_url, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            }).then(async (response) => {
+                result = await response.json();
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
                 swal.fire({
@@ -371,8 +380,8 @@ export default {
                 //  to also check the start and end date of meeting validation befor saving
                 blank_fields.push('Please select End Date that is later than Start Date');
             }
-            if (vm.$refs.meeting.isCommitteeMeeting){
-                if(vm.meeting_obj.selected_committee_members  == null || vm.meeting_obj.selected_committee_members  == '' || vm.meeting_obj.selected_committee_members.length<2  ) {
+            if (vm.$refs.meeting.isCommitteeMeeting) {
+                if (vm.meeting_obj.selected_committee_members == null || vm.meeting_obj.selected_committee_members == '' || vm.meeting_obj.selected_committee_members.length < 2) {
                     //  to also check the start and end date of meeting validation befor saving
                     blank_fields.push('Please select at least two committee members who will be attending');
                 }
@@ -483,8 +492,14 @@ export default {
                     if (!vm.saveError) {
                         let payload = new Object();
                         Object.assign(payload, vm.meeting_obj);
-                        vm.$http.put(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/schedule_meeting'), payload).then(res => {
-                            vm.meeting_obj = res.body;
+                        fetch(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/schedule_meeting'), {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload)
+                        }).then(async (response) => {
+                            vm.meeting_obj = await response.json();
                         }, err => {
                             swal.fire({
                                 title: 'Schedule Error',
@@ -534,8 +549,14 @@ export default {
                     if (!vm.saveError) {
                         let payload = new Object();
                         Object.assign(payload, vm.meeting_obj);
-                        vm.$http.put(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/complete_meeting'), payload).then(res => {
-                            vm.meeting_obj = res.body;
+                        fetch(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/complete_meeting'), {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload)
+                        }).then(async (response) => {
+                            vm.meeting_obj = await response.json();
                             vm.completingMeeting = false;
                         }, err => {
                             swal.fire({
@@ -569,8 +590,13 @@ export default {
                     reverseButtons: true
                 }).then((result) => {
                     if (result.isConfirmed) {
-                        vm.$http.patch(api_endpoints.discard_meeting(vm.meeting_obj.id))
-                            .then((response) => {
+                        fetch(api_endpoints.discard_meeting(vm.meeting_obj.id), {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        })
+                            .then(async (response) => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your meeting has been discarded',
@@ -579,7 +605,7 @@ export default {
                                         confirmButton: 'btn btn-primary',
                                     },
                                 });
-                                vm.meeting_obj = response.body;
+                                vm.meeting_obj = await response.json();
                             }, (error) => {
                                 console.log(error);
                             });
@@ -614,8 +640,13 @@ export default {
                     reverseButtons: true
                 }).then((result) => {
                     if (result.isConfirmed) {
-                        vm.$http.patch(api_endpoints.reinstate_meeting(vm.meeting_obj.id))
-                            .then((response) => {
+                        fetch(api_endpoints.reinstate_meeting(vm.meeting_obj.id), {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        })
+                            .then(async (response) => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your meeting has been reinstated',
@@ -624,7 +655,7 @@ export default {
                                         confirmButton: 'btn btn-primary',
                                     },
                                 });
-                                vm.meeting_obj = response.body;
+                                vm.meeting_obj = await response.json();
                             }, (error) => {
                                 console.log(error);
                             });
@@ -676,8 +707,14 @@ export default {
                     if (!vm.saveError) {
                         let payload = new Object();
                         Object.assign(payload, vm.meeting_obj);
-                        vm.$http.put(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/submit'), payload).then(res => {
-                            vm.meeting_obj = res.body;
+                        fetch(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/submit'), {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload)
+                        }).then(async (response) => {
+                            vm.meeting_obj = await response.json();
                             vm.$router.push({
                                 name: 'internal-meetings-dash'
                             });
@@ -701,7 +738,13 @@ export default {
             let vm = this;
             let payload = new Object();
             Object.assign(payload, vm.meeting_obj);
-            vm.$http.put(vm.meeting_form_url, payload).then(res => {
+            fetch(vm.meeting_form_url, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            }).then(async (response) => {
             }, err => {
             });
         },
@@ -709,8 +752,8 @@ export default {
     created: function () {
         let vm = this;
         if (!this.meeting_obj) {
-            Vue.http.get(`/api/meeting/${vm.$route.params.meeting_id}/internal_meeting.json`).then(res => {
-                vm.meeting_obj = res.body;
+            fetch(`/api/meeting/${vm.$route.params.meeting_id}/internal_meeting.json`).then(async (response) => {
+                vm.meeting_obj = await response.json();
                 if (vm.meeting_obj.start_date == null) {
                     vm.meeting_obj.start_date = vm.$refs.meeting.start_date;
                 }
@@ -730,9 +773,9 @@ export default {
         });
     },
     beforeRouteEnter: function (to, from, next) {
-        Vue.http.get(`/api/meeting/${to.params.meeting_id}/internal_meeting.json`).then(res => {
-            next(vm => {
-                vm.meeting_obj = res.body;
+        fetch(`/api/meeting/${to.params.meeting_id}/internal_meeting.json`).then(async (response) => {
+            next(async (vm) => {
+                vm.meeting_obj = await response.json();
                 vm.meeting_obj.selected_committee_members = [];
             });
         },
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
index 0a0e3372..4b5886c7 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
@@ -286,8 +286,8 @@ export default {
         fetchCommitteeMembers: function () {
             let vm = this;
             if (vm.meeting_obj.committee_id) {
-                vm.$http.get(api_endpoints.committee_members(vm.meeting_obj.committee_id)).then((response) => {
-                    vm.committee_members = response.body;
+                fetch(api_endpoints.committee_members(vm.meeting_obj.committee_id)).then(async (response) => {
+                    vm.committee_members = await response.json();
                     if (vm.meeting_obj.selected_committee_members.length === vm.activeMembers.length) {
                         vm.all_members_attending = true;
                     }
@@ -328,8 +328,8 @@ export default {
     created: async function () {
         let vm = this;
         //------fetch list of values
-        vm.$http.get(api_endpoints.meeting_dict).then((response) => {
-            vm.meeting_dict = response.body;
+        fetch(api_endpoints.meeting_dict).then(async (response) => {
+            vm.meeting_dict = await response.json();
             if (vm.meeting_obj.processing_status == 'completed') {
                 vm.meetingStatusEditable = false;
             }
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
index e9b8a7de..92fb407e 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
@@ -370,9 +370,16 @@ export default {
                 const createUrl = api_endpoints.meeting + "/";
                 let payload = new Object();
                 payload.meeting_type = 'meeting';
-                let savedMeeting = await Vue.http.post(createUrl, payload);
+                let response = await fetch(createUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload),
+                });
+                let savedMeeting = await response.json();
                 if (savedMeeting) {
-                    newMeetingId = savedMeeting.body.id;
+                    newMeetingId = savedMeeting.id;
                 }
                 this.$router.push({
                     name: 'internal-meetings',
@@ -402,7 +409,12 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_meeting(meeting_id))
+                    fetch(api_endpoints.discard_meeting(meeting_id), {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -434,7 +446,12 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(api_endpoints.reinstate_meeting(meeting_id))
+                    fetch(api_endpoints.reinstate_meeting(meeting_id), {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
@@ -470,8 +487,8 @@ export default {
         },
         fetchProfile: function () {
             let vm = this;
-            Vue.http.get(api_endpoints.profile).then((response) => {
-                vm.profile = response.body;
+            fetch(api_endpoints.profile).then(async (response) => {
+                vm.profile = await response.json();
             })
         },
     },
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
index f8368572..f832b255 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
@@ -221,12 +221,13 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Minute';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.minutes, id)).then((response) => {
-                this.$refs.document_detail.documentObj = response.body;
-                this.$refs.document_detail.documentObj.uploaded_date = response.body.uploaded_date != null && response.body.uploaded_date != undefined ? moment(response.body.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [response.body];
+            fetch(helpers.add_endpoint_json(api_endpoints.minutes, id)).then(async (response) => {
+                const data = await response.json();
+                this.$refs.document_detail.documentObj = data;
+                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
+                this.$refs.document_detail.uploaded_document = [data];
                 //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(response.body.document_category);
+                this.$refs.document_detail.fetchSubCategory(data.document_category);
 
             },
                 err => {
@@ -256,7 +257,12 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.minutes, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.minutes, id + '/discard'), {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -290,7 +296,12 @@ export default {
                 reverseButtons: true
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.minutes, id + '/reinstate'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.minutes, id + '/reinstate'), {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        })
                         .then((response) => {
                             swal.fire({
                                 title: 'Reinstated',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
index e97bc3e1..e50ed53f 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="siteForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <alert v-if="change_warning && !isReadOnly" type="warning"><strong>{{ change_warning }}</strong>
                         </alert>
                         <div class="col-sm-12">
@@ -40,16 +40,15 @@
                                     <template v-if="!isReadOnly">
                                         <template
                                             v-if="datum_list && datum_list.length > 0 && siteObj.datum && !datum_list.map((d) => d.srid).includes(siteObj.datum)">
-                                            <input type="text" v-if="siteObj.datum_name"
-                                                class="form-control mb-3"
-                                                :value="siteObj.datum_name + ' (Now Archived)'"
-                                                disabled />
+                                            <input type="text" v-if="siteObj.datum_name" class="form-control mb-3"
+                                                :value="siteObj.datum_name + ' (Now Archived)'" disabled />
                                             <div class="mb-3 text-muted">
                                                 Change datum to:
                                             </div>
                                         </template>
                                         <select class="form-select" v-model="siteObj.datum">
-                                            <option v-for="datum in datum_list" :value="datum.srid" v-bind:key="datum.srid">
+                                            <option v-for="datum in datum_list" :value="datum.srid"
+                                                v-bind:key="datum.srid">
                                                 {{ datum.name }}
                                             </option>
                                         </select>
@@ -68,16 +67,15 @@
                                     <template v-if="!isReadOnly">
                                         <template
                                             v-if="site_type_list && site_type_list.length > 0 && siteObj.site_type && !site_type_list.map((d) => d.id).includes(siteObj.site_type)">
-                                            <input type="text" v-if="siteObj.site_type_name"
-                                                class="form-control mb-3"
-                                                :value="siteObj.site_type_name + ' (Now Archived)'"
-                                                disabled />
+                                            <input type="text" v-if="siteObj.site_type_name" class="form-control mb-3"
+                                                :value="siteObj.site_type_name + ' (Now Archived)'" disabled />
                                             <div class="mb-3 text-muted">
                                                 Change site type to:
                                             </div>
                                         </template>
                                         <select class="form-select" v-model="siteObj.site_type">
-                                            <option v-for="site_type in site_type_list" :value="site_type.id" v-bind:key="site_type.id">
+                                            <option v-for="site_type in site_type_list" :value="site_type.id"
+                                                v-bind:key="site_type.id">
                                                 {{ site_type.name }}
                                             </option>
                                         </select>
@@ -115,7 +113,7 @@
                                     <div class="col-sm-9">
                                         <textarea :disabled="isReadOnly" rows=2 class="form-control"
                                             v-model="siteObj.comments">
-                                        </textarea>
+            </textarea>
                                     </div>
                                 </div>
                             </div>
@@ -262,8 +260,12 @@ export default {
             if (vm.siteObj.id) {
                 vm.updatingSite = true;
                 formData.append('data', JSON.stringify(siteObj));
-                vm.$http.put(helpers.add_endpoint_json(vm.url, siteObj.id), formData, {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(vm.url, siteObj.id), {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.updatingSite = false;
                     vm.$parent.updatedSites();
@@ -276,8 +278,12 @@ export default {
             } else {
                 vm.addingSite = true;
                 formData.append('data', JSON.stringify(siteObj));
-                vm.$http.post(vm.url, formData, {
-                    emulateJSON: true,
+                fetch(vm.url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(formData)
                 }).then((response) => {
                     vm.addingSite = false;
                     vm.close();
@@ -294,9 +300,10 @@ export default {
         }
     },
     created: async function () {
-        let res = await this.$http.get('/api/occurrence_sites/site_list_of_values/');
+        let response = await fetch('/api/occurrence_sites/site_list_of_values/');
+        const data = await response.json();
         let site_list_of_values_res = {};
-        Object.assign(site_list_of_values_res, res.body);
+        Object.assign(site_list_of_values_res, data);
         this.site_type_list = site_list_of_values_res.site_type_list;
         this.site_type_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
index 7451eb00..d7fcea44 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col-sm-6">
@@ -127,8 +127,8 @@ export default {
         },
         fetchAmendmentChoices: function () {
             let vm = this;
-            vm.$http.get('/api/proposal_amendment_request_reason_choices.json').then((response) => {
-                vm.reason_choices = response.body;
+            fetch('/api/proposal_amendment_request_reason_choices.json').then(async (response) => {
+                vm.reason_choices = await response.json();
             }, (error) => {
                 console.log(error);
             });
@@ -151,8 +151,12 @@ export default {
             amendment.update = true;
             formData.append('data', JSON.stringify(amendment));
 
-            vm.$http.post('/api/ocr_amendment_request.json', formData, {
-                emulateJSON: true,
+            fetch('/api/ocr_amendment_request.json', {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
             }).then((response) => {
                 swal.fire({
                     title: 'Sent',
@@ -165,7 +169,7 @@ export default {
                 vm.amendingProposal = true;
                 vm.close();
 
-                Vue.http.get(`/api/occurrence_report/${vm.occurrence_report_id}`).then((response) => {
+                fetch(`/api/occurrence_report/${vm.occurrence_report_id}`).then((response) => {
                     vm.$emit('refreshFromResponse', response);
 
                 }, (error) => {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
index e356abc2..92357e0a 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
@@ -87,8 +87,12 @@ export default {
         backToAssessor: function () {
             let vm = this;
             vm.errorString = '';
-            vm.$http.post(api_endpoints.occurrence_report + `/${vm.occurrence_report_id}/back_to_assessor/`, JSON.stringify(vm.back_to_assessor), {
-                emulateJSON: true,
+            fetch(api_endpoints.occurrence_report + `/${vm.occurrence_report_id}/back_to_assessor/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.back_to_assessor),
             }).then((response) => {
                 swal.fire({
                     title: 'Sent Back',
@@ -102,7 +106,7 @@ export default {
                 });
                 /*vm.close();
 
-                Vue.http.get(`/api/occurrence_report/${vm.occurrence_report_id}/internal_occurrence_report.json`).then((response) => {
+                fetch(`/api/occurrence_report/${vm.occurrence_report_id}/internal_occurrence_report.json`).then((response) => {
                     vm.$emit('refreshFromResponse', response);
 
                 }, (error) => {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue
index 6e836439..161dd497 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue
@@ -63,11 +63,11 @@
                                 </div>
                                 <div v-if="selected_schema_version" class="border-top w-75 mb-3 pt-2">
                                     <label for="bulk-import-file" class="form-label"><span class="fw-bold">Step 3:
-                                        </span> Select the .zip file containing any associated documents (Optional)</label>
+                                        </span> Select the .zip file containing any associated documents
+                                        (Optional)</label>
                                     <div class="input-group">
                                         <input type="file" class="form-control text-secondary"
-                                            id="bulk-import-associated-files-zip"
-                                            ref="bulk-import-associated-files-zip"
+                                            id="bulk-import-associated-files-zip" ref="bulk-import-associated-files-zip"
                                             accept=".zip">
                                     </div>
                                 </div>
@@ -77,8 +77,7 @@
                                     <div class="input-group">
                                         <input type="file" class="form-control text-secondary"
                                             :class="importFileErrors ? 'is-invalid' : ''" id="bulk-import-file"
-                                            ref="bulk-import-file"
-                                            @change="bulkImportFileSelected"
+                                            ref="bulk-import-file" @change="bulkImportFileSelected"
                                             accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                         <div v-if="importFileErrors" class="invalid-feedback mt-3">
                                             <ul>
@@ -116,8 +115,7 @@
                                                 :title="queuedImport.file_name">{{
                                                     queuedImport.file_name }}</td>
                                             <td>{{ queuedImport.file_size_megabytes }} MB</td>
-                                            <td class="text-end pe-3">{{ queuedImport.rows ? queuedImport.rows : 'Not
-                                                Counted' }}</td>
+                                            <td class="text-end pe-3">{{ queuedImport.rows ? queuedImport.rows : 'Not Counted' }}</td>
                                             <td>{{ queuedImport.estimated_processing_time_human_readable }}</td>
                                         </tr>
                                     </tbody>
@@ -327,8 +325,8 @@ export default {
             return `Version: ${schema_version.version} - ${schema_version.name ? schema_version.name : 'No Name'}`;
         },
         resetFileField() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.selected_schema.id}/`).then((response) => {
-                this.selected_schema_version = response.body;
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.selected_schema.id}/`).then(async (response) => {
+                this.selected_schema_version = await response.json();
                 this.$nextTick(() => {
                     this.importFileErrors = null;
                     this.form.classList.remove('was-validated');
@@ -358,14 +356,21 @@ export default {
             const formData = new FormData();
             formData.append('_file', file);
             const associated_files = this.$refs['bulk-import-associated-files-zip'].files;
-            if(associated_files.length > 0) {
+            if (associated_files.length > 0) {
                 formData.append('_associated_files_zip', associated_files[0]);
             }
             formData.append('schema_id', this.selected_schema_version.id);
 
-            this.$http.post(api_endpoints.occurrence_report_bulk_imports, formData).then((response) => {
+            fetch(api_endpoints.occurrence_report_bulk_imports, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            }).then(async (response) => {
+                const data = await response.json();
                 if (response.status >= 200 && response.status < 300) {
-                    console.log(response.body);
+                    console.log(data);
                     this.importFileErrors = null;
                     this.form.classList.remove('was-validated');
                     this.$refs['bulk-import-file'].value = '';
@@ -381,7 +386,7 @@ export default {
                         },
                     });
                 } else {
-                    this.importFileErrors = response.body;
+                    this.importFileErrors = data;
                     event.target.value = '';
                     this.$refs['bulk-import-associated-files-zip'].value = '';
                     this.$refs['bulk-import-file'].setCustomValidity('Invalid field');
@@ -416,8 +421,8 @@ export default {
             });
         },
         fetchSchemas() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_import_schemas_by_group_type}?group_type=${this.$route.query.group_type}`).then((response) => {
-                this.schema_versions = response.body;
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas_by_group_type}?group_type=${this.$route.query.group_type}`).then(async (response) => {
+                this.schema_versions = await response.json();
             }, (error) => {
                 console.log(error);
             });
@@ -426,22 +431,24 @@ export default {
 
         },
         fetchQueuedImports() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=queued&schema__group_type__name=${this.$route.query.group_type}`).then((response) => {
-                this.queuedImports = response.body.results;
+            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=queued&schema__group_type__name=${this.$route.query.group_type}`).then(async (response) => {
+                const data = await response.json();
+                this.queuedImports = data.results;
             }, (error) => {
                 console.log(error);
             });
         },
         fetchCurrentlyRunningImports() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=started&schema__group_type__name=${this.$route.query.group_type}`).then((response) => {
-                this.currentlyRunningImports = response.body.results;
+            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=started&schema__group_type__name=${this.$route.query.group_type}`).then(async (response) => {
+                const data = await response.json();
+                this.currentlyRunningImports = data.results;
             }, (error) => {
                 console.log(error);
             });
         },
         fetchFailedImports() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=failed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.failedImportsLimit}&ordering=-datetime_started`).then((response) => {
-                this.failedImports = response.body;
+            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=failed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.failedImportsLimit}&ordering=-datetime_started`).then(async (response) => {
+                this.failedImports = await response.json();
             }, (error) => {
                 console.log(error);
             });
@@ -451,8 +458,8 @@ export default {
             this.fetchFailedImports();
         },
         fetchCompletedImports() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=completed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.completedImportsLimit}&ordering=-datetime_completed`).then((response) => {
-                this.completedImports = response.body;
+            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=completed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.completedImportsLimit}&ordering=-datetime_completed`).then(async (response) => {
+                this.completedImports = await response.json();
             }, (error) => {
                 console.log(error);
             });
@@ -463,7 +470,12 @@ export default {
         },
         retryBulkImportTask(bulkImportTaskId) {
             // Call the api to retry the bulk import task
-            this.$http.patch(`${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/retry/`).then((response) => {
+            fetch(`${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/retry/`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then((response) => {
                 console.log(response);
                 // Remove the failed import from the failed imports list
                 this.failedImports = this.failedImports.filter((failedImport) => {
@@ -490,7 +502,12 @@ export default {
             }).then((result) => {
                 if (result.isConfirmed) {
                     // Call the api to revert the bulk import task
-                    this.$http.patch(`${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/revert/`).then((response) => {
+                    fetch(`${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/revert/`, {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        }
+                    }).then((response) => {
                         console.log(response);
                         // Remove the completed import from the completed imports list
                         this.completedImports = this.completedImports.results.filter((completedImport) => {
@@ -561,7 +578,7 @@ export default {
             this.fetchCurrentlyRunningImports()
         }, 1000)
     },
-    beforeDestroy() {
+    beforeUnmount() {
         clearInterval(this.timer)
         clearInterval(this.currentlyRunningTimer)
     }
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index 2bc4550b..c3ef4ebc 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -65,20 +65,17 @@
                                 </div>
                                 <div class="pb-0 mb-0">
                                     <div class="row align-items-center">
-                                        <template>
-                                            <label for="schema-name" class="col-sm-2 col-form-label">Master Schema<i
-                                                    class="bi bi-lock-fill text-warning ms-2"
-                                                    title="This is a Master Schema. When copied by an Occurrence Approver, any columns from the master will be locked."
-                                                    v-if="schema.is_master"></i></label>
-                                            <div v-if="schema.can_user_toggle_master" class="col-sm-1">
-                                                <div class="form-check form-switch form-switch-lg"
-                                                    style="transform: scale(1.3);">
-                                                    <input class="form-check-input" type="checkbox"
-                                                        id="is-master-schema" v-model="schema.is_master"
-                                                        @change="save()">
-                                                </div>
+                                        <label for="schema-name" class="col-sm-2 col-form-label">Master Schema<i
+                                                class="bi bi-lock-fill text-warning ms-2"
+                                                title="This is a Master Schema. When copied by an Occurrence Approver, any columns from the master will be locked."
+                                                v-if="schema.is_master"></i></label>
+                                        <div v-if="schema.can_user_toggle_master" class="col-sm-1">
+                                            <div class="form-check form-switch form-switch-lg"
+                                                style="transform: scale(1.3);">
+                                                <input class="form-check-input" type="checkbox" id="is-master-schema"
+                                                    v-model="schema.is_master" @change="save()">
                                             </div>
-                                        </template>
+                                        </div>
                                         <label for="schema-tags" class="col-sm-1 col-form-label">Tags</label>
                                         <div class="col-sm-6">
                                             <template v-if="schema.tags && schema.tags.length > 0">
@@ -128,14 +125,17 @@
                                         <td class="ps-3 fw-bold" style="font-size:0.9em; width:40%"
                                             :class="selectedColumn == column ? 'py-1' : ''">
                                             <span class="text-truncate pe-1"
-                                                :class="selectedColumn == column ? 'text-light' : ''" :title="column.xlsx_column_header_name">{{
-                                                    column.xlsx_column_header_name.length < 34 ? column.xlsx_column_header_name : column.xlsx_column_header_name.substr(0, 31) + '...' }}</span>
-                                            <span class="text-danger" title="Mandatory Column"
-                                                v-if="column.xlsx_data_validation_allow_blank == false">*</span>
-                                            <small class="d-block text-capitalize mb-0"
-                                                :class="selectedColumn == column ? 'text-light' : 'text-muted'">
-                                                {{ column.model_name }}
-                                            </small>
+                                                :class="selectedColumn == column ? 'text-light' : ''"
+                                                :title="column.xlsx_column_header_name">{{
+                                                    column.xlsx_column_header_name.length < 34 ?
+                                                        column.xlsx_column_header_name :
+                                                        column.xlsx_column_header_name.substr(0, 31) + '...' }}</span>
+                                                    <span class="text-danger" title="Mandatory Column"
+                                                        v-if="column.xlsx_data_validation_allow_blank == false">*</span>
+                                                    <small class="d-block text-capitalize mb-0"
+                                                        :class="selectedColumn == column ? 'text-light' : 'text-muted'">
+                                                        {{ column.model_name }}
+                                                    </small>
                                         </td>
                                         <td class="text-center"
                                             :class="selectedColumn == column ? 'text-light' : 'text-muted'"
@@ -611,18 +611,18 @@ export default {
     },
     methods: {
         fetchLookupSchematypes() {
-            this.$http.get(api_endpoints.lookup_schema_types)
-                .then(response => {
-                    this.lookupSchematypes = response.data
+            fetch(api_endpoints.lookup_schema_types)
+                .then(async (response) => {
+                    this.lookupSchematypes = await response.json();
                 })
                 .catch(error => {
                     console.error(error)
                 })
         },
         fetchBulkImportSchema() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.$route.params.bulk_import_schema_id}/`)
-                .then(response => {
-                    this.schema = response.data
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.$route.params.bulk_import_schema_id}/`)
+                .then(async (response) => {
+                    this.schema = await response.json();
                     this.fetchContentTypes()
                     this.$nextTick(() => {
                         if (!this.schema.can_user_edit) {
@@ -652,9 +652,9 @@ export default {
                 })
         },
         fetchContentTypes() {
-            this.$http.get(`${api_endpoints.content_types}ocr_bulk_import_content_types/`)
-                .then(response => {
-                    this.djangoContentTypes = response.data
+            fetch(`${api_endpoints.content_types}ocr_bulk_import_content_types/`)
+                .then(async (response) => {
+                    this.djangoContentTypes = await response.json();
                     // Filter out content types that have no fields
                     this.djangoContentTypesFiltered = this.djangoContentTypes.filter(
                         djangoContentType => djangoContentType.model_fields.length > 0
@@ -674,9 +674,9 @@ export default {
                 })
         },
         fetchDefaultValueChoices() {
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_import_schemas}default_value_choices/`)
-                .then(response => {
-                    this.defaultValueChoices = response.data
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}default_value_choices/`)
+                .then(async (response) => {
+                    this.defaultValueChoices = await response.json();
                 })
                 .catch(error => {
                     console.error(error)
@@ -963,11 +963,12 @@ export default {
         },
         validate() {
             this.validatingSchema = true;
-            this.$http.get(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/validate/`)
-                .then(response => {
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/validate/`)
+                .then(async (response) => {
+                    const data = await response.json();
                     swal.fire({
                         title: 'Schema Validated Successfully',
-                        text: response.data,
+                        text: data,
                         icon: 'success',
                         confirmButtonText: 'OK',
                         customClass: {
@@ -1025,10 +1026,17 @@ export default {
 
             this.saving = true;
             this.errors = null;
-            this.$http.put(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/`, this.schema)
-                .then(response => {
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(this.schema)
+            })
+                .then(async (response) => {
+                    const data = await response.json();
                     this.saving = false;
-                    this.schema = Object.assign({}, response.data)
+                    this.schema = Object.assign({}, data)
                     if (this.addEditMode) {
                         this.selectedColumn = this.schema.columns[this.selectedColumnIndex]
                     }
@@ -1044,8 +1052,14 @@ export default {
             this.$router.push(`/internal/occurrence-report/bulk_import_schema/`)
         },
         copySchema(id) {
-            this.$http.post(`${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`)
-                .then(response => {
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            })
+                .then(async (response) => {
+                    const data = await response.json();
                     if (response.status === 201) {
                         swal.fire({
                             title: 'Success',
@@ -1054,7 +1068,7 @@ export default {
                             showConfirmButton: false,
                             timer: 1500
                         })
-                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${response.data.id}`)
+                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${data.id}`)
                         this.fetchBulkImportSchema()
                     }
                 })
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
index 7cdc640f..c660b224 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
@@ -43,7 +43,8 @@
                             </thead>
                             <tbody class="text-muted">
                                 <tr v-for="schema in bulkSchemas" :class="schema.is_master ? 'master-schema' : ''">
-                                    <td>{{ schema.version }}<i class="bi bi-lock-fill text-warning fs-5 ps-2" v-if="schema.is_master"></i></td>
+                                    <td>{{ schema.version }}<i class="bi bi-lock-fill text-warning fs-5 ps-2"
+                                            v-if="schema.is_master"></i></td>
                                     <td class="text-truncate text-align-end" style="max-width: 285px;"
                                         :title="schema.name">{{
                                             schema.name }}</td>
@@ -63,7 +64,10 @@
                                     <td>
                                         <a class="btn btn-sm btn-primary my-0 me-2" role="button"
                                             :href="`/internal/occurrence-report/bulk_import_schema/${schema.id}`"><i
-                                                class="bi me-2" :class="schema.can_user_edit ? 'bi-pencil-fill' : 'bi-eye-fill'"></i> <template v-if="schema.can_user_edit">Edit</template><template v-else>View</template></a>
+                                                class="bi me-2"
+                                                :class="schema.can_user_edit ? 'bi-pencil-fill' : 'bi-eye-fill'"></i>
+                                            <template v-if="schema.can_user_edit">Edit</template><template
+                                                v-else>View</template></a>
 
                                         <button class="btn btn-sm btn-primary my-0"
                                             @click.prevent="copySchema(schema.id)"><i class="bi bi-copy me-2"></i>
@@ -104,9 +108,9 @@ export default {
     },
     methods: {
         fetchGroupTypes() {
-            this.$http.get(api_endpoints.group_types_dict)
-                .then(response => {
-                    this.groupTypes = response.data
+            fetch(api_endpoints.group_types_dict)
+                .then(async (response) => {
+                    this.groupTypes = await response.json();
                 })
                 .catch(error => {
                     console.error(error)
@@ -119,13 +123,12 @@ export default {
             }
             localStorage.setItem('ocr-bulk-import-group-type', this.groupType)
             this.loadingSchemas = true
-            this.$http.get(api_endpoints.occurrence_report_bulk_import_schemas, {
-                params: {
-                    group_type: this.groupType
-                }
-            })
-                .then(response => {
-                    this.bulkSchemas = response.data.results
+            fetch(api_endpoints.occurrence_report_bulk_import_schemas + '?' + new URLSearchParams(
+                { group_type: this.groupType }
+            ).toString())
+                .then(async (response) => {
+                    const data = await response.json()
+                    this.bulkSchemas = data.results
                 })
                 .catch(error => {
                     console.error(error)
@@ -135,8 +138,14 @@ export default {
                 })
         },
         copySchema(id) {
-            this.$http.post(`${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`)
-                .then(response => {
+            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+                .then(async (response) => {
+                    const data = await response.json()
                     if (response.status === 201) {
                         swal.fire({
                             title: 'Success',
@@ -145,7 +154,7 @@ export default {
                             showConfirmButton: false,
                             timer: 1500
                         })
-                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${response.data.id}`)
+                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${data.id}`)
                     }
                 })
                 .catch(error => {
@@ -153,10 +162,17 @@ export default {
                 })
         },
         createNewVersion() {
-            this.$http.post(api_endpoints.occurrence_report_bulk_import_schemas, {
-                group_type: this.groupType
+            fetch(api_endpoints.occurrence_report_bulk_import_schemas, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    group_type: this.groupType
+                })
             })
-                .then(response => {
+                .then(async (response) => {
+                    const data = await response.json()
                     if (response.status === 201) {
                         swal.fire({
                             title: 'Success',
@@ -165,7 +181,7 @@ export default {
                             showConfirmButton: false,
                             timer: 1500
                         })
-                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${response.data.id}`)
+                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${data.id}`)
                     }
                 })
                 .catch(error => {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue b/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
index e5f6706a..1564b516 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
@@ -186,8 +186,8 @@ export default {
         },
         fetchProfile: function () {
             let vm = this;
-            vm.$http.get(api_endpoints.profile).then(async (response) => {
-                vm.profile = await response.body;
+            fetch(api_endpoints.profile).then(async (response) => {
+                vm.profile = await response.json();
                 vm.$nextTick(() => {
                     if (vm.profile && vm.profile.area_of_interest) {
                         vm.set_active_tab(vm.profile.area_of_interest);
@@ -206,8 +206,8 @@ export default {
         }
     },
     created: function () {
-        this.$http.get(api_endpoints.group_types_dict).then((response) => {
-            this.group_types = response.body;
+        fetch(api_endpoints.group_types_dict).then(async (response) => {
+            this.group_types = await response.json();
         }, (error) => {
             console.log(error);
         });
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
index eae1597e..249b8fd4 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
@@ -6,11 +6,9 @@
                         }}</span></h3>
                 <h4 v-if="occurrence.combined_occurrence" class="text-muted mb-3">
                     Combined in to Occurrence:
-                    <template>
-                        OCC{{ occurrence.combined_occurrence_id }} <small><a
-                                :href="`/internal/occurrence/${occurrence.combined_occurrence_id}?group_type_name=${occurrence.group_type}&action=view`"
-                                target="_blank"><i class="bi bi-box-arrow-up-right"></i></a></small>
-                    </template>
+                    OCC{{ occurrence.combined_occurrence_id }} <small><a
+                            :href="`/internal/occurrence/${occurrence.combined_occurrence_id}?group_type_name=${occurrence.group_type}&action=view`"
+                            target="_blank"><i class="bi bi-box-arrow-up-right"></i></a></small>
                 </h4>
                 <div class="row pb-4">
                     <div v-if="!comparing" class="col-md-3">
@@ -83,39 +81,37 @@
                         </div>
                     </div>
                     <div class="col-md-9">
-                        <template>
-                            <form :action="occurrence_form_url" method="post" name="occurrence"
-                                enctype="multipart/form-data">
+                        <form :action="occurrence_form_url" method="post" name="occurrence"
+                            enctype="multipart/form-data">
 
-                                <ProposalOccurrence v-if="occurrence" :occurrence_obj="occurrence" id="OccurrenceStart"
-                                    ref="occurrence" @refreshFromResponse="refreshFromResponse">
-                                </ProposalOccurrence>
+                            <ProposalOccurrence v-if="occurrence" :occurrence_obj="occurrence" id="OccurrenceStart"
+                                ref="occurrence" @refreshFromResponse="refreshFromResponse">
+                            </ProposalOccurrence>
 
-                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                <input type='hidden' name="occurrence_id" :value="1" />
-                                <div class="row" style="margin-bottom: 50px">
-                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
-                                        <div class="container">
-                                            <div class="col-md-6">
-                                                <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
-                                                    @click.prevent="returnToDashboard">
-                                                    Return to Dashboard</button>
-                                            </div>
-                                            <div v-if="hasUserEditMode" class="col-md-6 text-end">
-                                                <button v-if="savingOccurrence" class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" disabled>Save Changes <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" @click.prevent="save()">Save
-                                                    Changes</button>
-                                            </div>
+                            <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
+                            <input type='hidden' name="occurrence_id" :value="1" />
+                            <div class="row" style="margin-bottom: 50px">
+                                <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                    <div class="container">
+                                        <div class="col-md-6">
+                                            <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
+                                                @click.prevent="returnToDashboard">
+                                                Return to Dashboard</button>
+                                        </div>
+                                        <div v-if="hasUserEditMode" class="col-md-6 text-end">
+                                            <button v-if="savingOccurrence" class="btn btn-primary pull-right"
+                                                style="margin-top:5px;" disabled>Save Changes <span
+                                                    class="spinner-border spinner-border-sm" role="status"
+                                                    aria-hidden="true"></span>
+                                                <span class="visually-hidden">Loading...</span></button>
+                                            <button v-else class="btn btn-primary pull-right" style="margin-top:5px;"
+                                                @click.prevent="save()">Save
+                                                Changes</button>
                                         </div>
                                     </div>
                                 </div>
-                            </form>
-                        </template>
+                            </div>
+                        </form>
                     </div>
                 </div>
             </div>
@@ -279,7 +275,14 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, vm.occurrence);
-            await vm.$http.post(vm.occurrence_form_url, payload).then(res => {
+            await fetch(vm.occurrence_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            }).then(async (response) => {
+                const data = await response.json();
                 swal.fire({
                     title: "Saved",
                     text: "Your changes have been saved",
@@ -290,7 +293,7 @@ export default {
                 });
                 vm.savingOccurrence = false;
                 vm.isSaved = true;
-                vm.refreshFromResponse(res);
+                vm.refreshFromResponse(data);
                 vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(false);
                 vm.$refs.occurrence.$refs.occ_location.incrementComponentMapKey();
                 vm.$refs.occurrence.$refs.occ_location.refreshDatatables();
@@ -343,7 +346,13 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, vm.occurrence);
-            const result = await vm.$http.post(vm.occurrence_form_url, payload).then(res => {
+            const result = await fetch(vm.occurrence_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            }).then(async (response) => {
                 //return true;
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
@@ -418,8 +427,14 @@ export default {
                         let payload = new Object();
                         Object.assign(payload, vm.occurrence);
                         helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence.id + '/submit');
-                        vm.$http.post(submit_url, payload).then(res => {
-                            vm.occurrence = res.body;
+                        fetch(submit_url, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload)
+                        }).then(async (repsonse) => {
+                            vm.occurrence = await repsonse.json();
                             vm.$router.push({
                                 name: 'internal-occurrence-dash'
                             });
@@ -445,15 +460,21 @@ export default {
                 name: 'internal-occurrence-dash'
             });
         },
-        refreshFromResponse: function (response) {
+        refreshFromResponse: async function (response) {
             let vm = this;
-            vm.original_occurrence = helpers.copyObject(response.body);
-            vm.occurrence = helpers.copyObject(response.body);
+            const data = await response.json();
+            vm.original_occurrence = helpers.copyObject(data);
+            vm.occurrence = helpers.copyObject(data);
             vm.combine_key++;
         },
         activateOccurrence: async function () {
             let vm = this;
-            await vm.$http.post(`/api/occurrence/${this.occurrence.id}/activate.json`).then(res => {
+            await fetch(`/api/occurrence/${this.occurrence.id}/activate.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (repsonse) => {
                 swal.fire({
                     title: "Activated",
                     text: "Occurrence has been Activated",
@@ -478,7 +499,12 @@ export default {
         },
         lockOccurrence: async function () {
             let vm = this;
-            await vm.$http.post(`/api/occurrence/${this.occurrence.id}/lock_occurrence.json`).then(res => {
+            await fetch(`/api/occurrence/${this.occurrence.id}/lock_occurrence.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (repsonse) => {
                 swal.fire({
                     title: "Locked",
                     text: "Occurrence has been Locked",
@@ -503,7 +529,12 @@ export default {
         },
         unlockOccurrence: async function () {
             let vm = this;
-            await vm.$http.post(`/api/occurrence/${this.occurrence.id}/unlock_occurrence.json`).then(res => {
+            await fetch(`/api/occurrence/${this.occurrence.id}/unlock_occurrence.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (repsonse) => {
                 swal.fire({
                     title: "Unlocked",
                     text: "Occurrence has been Unlocked",
@@ -541,7 +572,12 @@ export default {
                 reverseButtons: true,
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    await vm.$http.post(`/api/occurrence/${this.occurrence.id}/close_occurrence.json`).then(res => {
+                    await fetch(`/api/occurrence/${this.occurrence.id}/close_occurrence.json`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }).then(async (repsonse) => {
                         swal.fire({
                             title: "Closed",
                             text: "Occurrence has been Closed",
@@ -583,7 +619,12 @@ export default {
                 reverseButtons: true,
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    await vm.$http.post(`/api/occurrence/${this.occurrence.id}/reopen_occurrence.json`).then(res => {
+                    await fetch(`/api/occurrence/${this.occurrence.id}/reopen_occurrence.json`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }).then(async (repsonse) => {
                         swal.fire({
                             title: "Reopened",
                             text: "Occurrence has been Reopened",
@@ -616,8 +657,8 @@ export default {
         },
         fetchOccurrence: function () {
             let vm = this;
-            Vue.http.get(`/api/occurrence/${this.$route.params.occurrence_id}/`).then(res => {
-                vm.occurrence = res.body;
+            fetch(`/api/occurrence/${this.$route.params.occurrence_id}/`).then(async (repsonse) => {
+                vm.occurrence = await response.json();
             },
                 err => {
                     console.log(err);
@@ -637,9 +678,9 @@ export default {
     },
     beforeRouteEnter: function (to, from, next) {
         //if (to.query.group_type_name === 'flora' || to.query.group_type_name === "fauna") {
-        Vue.http.get(`/api/occurrence/${to.params.occurrence_id}/`).then(res => {
-            next(vm => {
-                vm.occurrence = res.body;
+        fetch(`/api/occurrence/${to.params.occurrence_id}/`).then(async (repsonse) => {
+            next(async vm => {
+                vm.occurrence = await response.json();
             });
         },
             err => {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
index 0b82728e..a167d7a3 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
@@ -486,7 +486,13 @@ export default {
             let vm = this;
             let formData = new FormData();
             formData.append('data', JSON.stringify(vm.occ_combine_data));
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence, vm.main_occurrence_obj.id + '/combine'), formData)
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, vm.main_occurrence_obj.id + '/combine'), {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
                 .then((response) => {
                     swal.fire({
                         title: 'Combined',
@@ -641,14 +647,20 @@ export default {
             let formData = new FormData()
             formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
             //get all key contact ids for all OCCs
-            vm.$http.post(
-                api_endpoints.combine_key_contacts_lookup, formData
-            ).then((response) => {
+            fetch(
+                api_endpoints.combine_key_contacts_lookup, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then(async (response) => {
+                const data = await response.json();
                 //copy old list
                 let old_list = vm.key_contact_ids;
                 //add to main list
-                vm.key_contact_ids = response.body.id_list;
-                vm.key_contacts = response.body.values_list;
+                vm.key_contact_ids = data.id_list;
+                vm.key_contacts = data.values_list;
 
                 let contact_names = {};
                 let taken_names = [];
@@ -667,7 +679,7 @@ export default {
                 });
 
                 //add new ids to combine list if not in old list - unless they share a name
-                response.body.id_list.forEach(id => {
+                data.id_list.forEach(id => {
                     if (!old_list.includes(id) && !taken_names.includes(contact_names[id])) {
                         vm.occ_combine_data.combine_key_contact_ids.push(id);
                         taken_names.push(contact_names[id]);
@@ -684,22 +696,28 @@ export default {
             let formData = new FormData()
             formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
             //get all document ids for all OCCs
-            vm.$http.post(
-                api_endpoints.combine_documents_lookup, formData
-            ).then((response) => {
+            fetch(
+                api_endpoints.combine_documents_lookup, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then(async (response) => {
+                const data = await response.json();
                 //copy old list
                 let old_list = vm.document_ids;
                 //add to main list
-                vm.document_ids = response.body.id_list;
-                vm.documents = response.body.values_list;
+                vm.document_ids = data.id_list;
+                vm.documents = data.values_list;
                 //remove ids from combine list if not in new list
                 vm.occ_combine_data.combine_document_ids.forEach(id => {
-                    if (!response.body.id_list.includes(id)) {
+                    if (!data.id_list.includes(id)) {
                         vm.occ_combine_data.combine_document_ids.splice(vm.occ_combine_data.combine_document_ids.indexOf(id), 1);
                     }
                 });
                 //add new ids to combine list if not in old list
-                response.body.id_list.forEach(id => {
+                data.id_list.forEach(id => {
                     if (!old_list.includes(id)) {
                         vm.occ_combine_data.combine_document_ids.push(id);
                     }
@@ -715,14 +733,20 @@ export default {
             let formData = new FormData()
             formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
             //get all threat ids for all OCCs
-            vm.$http.post(
-                api_endpoints.combine_threats_lookup, formData
-            ).then((response) => {
+            fetch(
+                api_endpoints.combine_threats_lookup, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then(async (response) => {
+                const data = await response.json();
                 //copy old list
                 let old_list = vm.threat_ids;
                 //add to main list
-                vm.threat_ids = response.body.id_list;
-                vm.threats = response.body.values_list;
+                vm.threat_ids = data.id_list;
+                vm.threats = data.values_list;
 
                 let threat_original_reports = {};
                 let taken_reports = [];
@@ -735,12 +759,12 @@ export default {
 
                 //remove ids from combine list if not in new list
                 vm.occ_combine_data.combine_threat_ids.forEach(id => {
-                    if (!response.body.id_list.includes(id)) {
+                    if (!data.id_list.includes(id)) {
                         vm.occ_combine_data.combine_threat_ids.splice(vm.occ_combine_data.combine_threat_ids.indexOf(id), 1);
                     }
                 });
                 //add new ids to combine list if not in old list - unless they share an original report
-                response.body.id_list.forEach(id => {
+                data.id_list.forEach(id => {
                     if (!old_list.includes(id) && !taken_reports.includes(threat_original_reports[id])) {
                         vm.occ_combine_data.combine_threat_ids.push(id);
                         taken_reports.push(threat_original_reports[id]);
@@ -756,14 +780,20 @@ export default {
             let formData = new FormData()
             formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
             //get all site ids for all OCCs
-            vm.$http.post(
-                api_endpoints.combine_sites_lookup, formData
-            ).then((response) => {
+            fetch(
+                api_endpoints.combine_sites_lookup, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then(async (response) => {
+                const data = await response.json();
                 //copy old list
                 let old_list = vm.site_ids;
                 //add to main list
-                vm.site_ids = response.body.id_list;
-                vm.sites = response.body.values_list;
+                vm.site_ids = data.id_list;
+                vm.sites = data.values_list;
 
                 let site_names = {};
                 let taken_names = [];
@@ -782,7 +812,7 @@ export default {
                 });
 
                 //add new ids to combine list if not in old list - unless they share a name
-                response.body.id_list.forEach(id => {
+                data.id_list.forEach(id => {
                     if (!old_list.includes(id) && !taken_names.includes(site_names[id])) {
                         vm.occ_combine_data.combine_site_ids.push(id);
                         taken_names.push(site_names[id]);
@@ -799,14 +829,20 @@ export default {
             let formData = new FormData()
             formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
             //get all site ids for all OCCs
-            vm.$http.post(
-                api_endpoints.combine_tenures_lookup, formData
-            ).then((response) => {
+            fetch(
+                api_endpoints.combine_tenures_lookup, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then(async (response) => {
+                const data = await response.json();
                 //copy old list
                 let old_list = vm.tenure_ids;
                 //add to main list
-                vm.tenure_ids = response.body.id_list;
-                vm.tenures = response.body.values_list;
+                vm.tenure_ids = data.id_list;
+                vm.tenures = data.values_list;
 
                 let tenure_feature_ids = {};
                 let taken_feature_ids = [];
@@ -827,7 +863,7 @@ export default {
                 });
 
                 //add new ids to combine list if not in old list - unless they share a feature id while current
-                response.body.id_list.forEach(id => {
+                data.id_list.forEach(id => {
                     if (!old_list.includes(id) && !(tenure_feature_ids[id] && taken_feature_ids.includes(tenure_feature_ids[id]))) {
                         vm.occ_combine_data.combine_tenure_ids.push(id);
                         if (tenure_feature_ids[id]) {
@@ -907,8 +943,8 @@ export default {
                 vm.getTenureIds();
 
                 let dict_url = api_endpoints.occ_profile_dict + '?group_type=' + vm.main_occurrence_obj.group_type
-                vm.$http.get(dict_url).then((response) => {
-                    vm.occ_profile_dict = response.body;
+                fetch(dict_url).then(async (response) => {
+                    vm.occ_profile_dict = await response.json();
                     vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
                     vm.occurrence_source_list = vm.occ_profile_dict.occurrence_source_list;
                 }, (error) => {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
index 714fb80e..1884c839 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
@@ -151,8 +151,8 @@ export default {
         viewSection:function (id) {
             let vm=this;
             //get occ object with id
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occurrence,id)).then((response) => {
-                let occObj=response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence,id)).then(async (response) => {
+                let occObj=response.json();
 
                 vm.sectionObj = occObj[vm.section_type];
                 vm.sectionOCCId = id;
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
index e20d18d3..ded12e2a 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
@@ -250,76 +250,76 @@
                     </div>
                     <div v-if="occurrence_report.user_is_assessor" class="card-body border-top text-center">
                         <button style="width:80%;" class="btn btn-primary mb-1"
-                            @click.prevent="copyOccurrenceReport()"><i class="bi bi-copy me-1"></i> Copy {{ occurrence_report.occurrence_report_number }}</button><br />
+                            @click.prevent="copyOccurrenceReport()"><i class="bi bi-copy me-1"></i> Copy {{
+                                occurrence_report.occurrence_report_number
+                            }}</button><br />
                     </div>
                 </div>
             </div>
             <div class="col-md-9">
-                <template>
-                    <form :action="occurrence_report_form_url" method="post" name="occurrence_report"
-                        enctype="multipart/form-data">
-                        <ProposalOccurrenceReport v-if="occurrence_report" :occurrence_report_obj="occurrence_report"
-                            id="OccurrenceReportStart" :canEditStatus="false" :is_external="false" :is_internal="true"
-                            ref="occurrence_report" @refreshFromResponse="refreshFromResponse"
-                            @refreshOccurrenceReport="refreshOccurrenceReport()"
-                            @saveOccurrenceReport="save_before_submit()">
-                        </ProposalOccurrenceReport>
+                <form :action="occurrence_report_form_url" method="post" name="occurrence_report"
+                    enctype="multipart/form-data">
+                    <ProposalOccurrenceReport v-if="occurrence_report" :occurrence_report_obj="occurrence_report"
+                        id="OccurrenceReportStart" :canEditStatus="false" :is_external="false" :is_internal="true"
+                        ref="occurrence_report" @refreshFromResponse="refreshFromResponse"
+                        @refreshOccurrenceReport="refreshOccurrenceReport()"
+                        @saveOccurrenceReport="save_before_submit()">
+                    </ProposalOccurrenceReport>
 
-                        <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                        <input type='hidden' name="occurrence_report_id" :value="1" />
-                        <div class="row" style="margin-bottom: 50px">
-                            <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
-                                <div class="container">
-                                    <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
-                                        @click.prevent="returnToDashboard">
-                                        Return to Dashboard</button>
-                                    <div v-if="occurrence_report.internal_application && occurrence_report.can_user_edit"
-                                        class="col-md-6 text-end">
-                                        <button v-if="savingOccurrenceReport" class="btn btn-primary me-2"
-                                            style="margin-top:5px;" disabled>Save and Continue&nbsp;
-                                            <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                            @click.prevent="save()"
-                                            :disabled="saveExitOccurrenceReport || submitOccurrenceReport">Save
-                                            and Continue</button>
+                    <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
+                    <input type='hidden' name="occurrence_report_id" :value="1" />
+                    <div class="row" style="margin-bottom: 50px">
+                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                            <div class="container">
+                                <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
+                                    @click.prevent="returnToDashboard">
+                                    Return to Dashboard</button>
+                                <div v-if="occurrence_report.internal_application && occurrence_report.can_user_edit"
+                                    class="col-md-6 text-end">
+                                    <button v-if="savingOccurrenceReport" class="btn btn-primary me-2"
+                                        style="margin-top:5px;" disabled>Save and Continue&nbsp;
+                                        <span class="spinner-border spinner-border-sm" role="status"
+                                            aria-hidden="true"></span>
+                                        <span class="visually-hidden">Loading...</span></button>
+                                    <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                        @click.prevent="save()"
+                                        :disabled="saveExitOccurrenceReport || submitOccurrenceReport">Save
+                                        and Continue</button>
 
-                                        <button v-if="saveExitOccurrenceReport" class="btn btn-primary me-2"
-                                            style="margin-top:5px;" disabled>Save and Exit&nbsp;
-                                            <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                            @click.prevent="save_exit()"
-                                            :disabled="savingOccurrenceReport || submitOccurrenceReport">Save
-                                            and Exit</button>
+                                    <button v-if="saveExitOccurrenceReport" class="btn btn-primary me-2"
+                                        style="margin-top:5px;" disabled>Save and Exit&nbsp;
+                                        <span class="spinner-border spinner-border-sm" role="status"
+                                            aria-hidden="true"></span>
+                                        <span class="visually-hidden">Loading...</span></button>
+                                    <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                        @click.prevent="save_exit()"
+                                        :disabled="savingOccurrenceReport || submitOccurrenceReport">Save
+                                        and Exit</button>
 
-                                        <button v-if="submitOccurrenceReport" class="btn btn-primary"
-                                            style="margin-top:5px;" disabled>Submit&nbsp;
-                                            <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <button v-else class="btn btn-primary" style="margin-top:5px;"
-                                            @click.prevent="submit()"
-                                            :disabled="saveExitOccurrenceReport || savingOccurrenceReport">Submit</button>
-                                    </div>
-                                    <div v-else-if="(occurrence_report.assessor_mode.has_assessor_mode || occurrence_report.assessor_mode.has_unlocked_mode)"
-                                        class="col-md-6 text-end">
-                                        <button v-if="savingOccurrenceReport" class="btn btn-primary"
-                                            style="margin-top:5px;" disabled>Save Changes <span
-                                                class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <button v-else class="btn btn-primary" style="margin-top:5px;"
-                                            @click.prevent="save()">Save
-                                            Changes</button>
-                                    </div>
+                                    <button v-if="submitOccurrenceReport" class="btn btn-primary"
+                                        style="margin-top:5px;" disabled>Submit&nbsp;
+                                        <span class="spinner-border spinner-border-sm" role="status"
+                                            aria-hidden="true"></span>
+                                        <span class="visually-hidden">Loading...</span></button>
+                                    <button v-else class="btn btn-primary" style="margin-top:5px;"
+                                        @click.prevent="submit()"
+                                        :disabled="saveExitOccurrenceReport || savingOccurrenceReport">Submit</button>
+                                </div>
+                                <div v-else-if="(occurrence_report.assessor_mode.has_assessor_mode || occurrence_report.assessor_mode.has_unlocked_mode)"
+                                    class="col-md-6 text-end">
+                                    <button v-if="savingOccurrenceReport" class="btn btn-primary"
+                                        style="margin-top:5px;" disabled>Save Changes <span
+                                            class="spinner-border spinner-border-sm" role="status"
+                                            aria-hidden="true"></span>
+                                        <span class="visually-hidden">Loading...</span></button>
+                                    <button v-else class="btn btn-primary" style="margin-top:5px;"
+                                        @click.prevent="save()">Save
+                                        Changes</button>
                                 </div>
                             </div>
                         </div>
-                    </form>
-                </template>
+                    </div>
+                </form>
             </div>
         </div>
 
@@ -521,7 +521,12 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_ocr_proposal(vm.occurrence_report.id))
+                    fetch(api_endpoints.discard_ocr_proposal(vm.occurrence_report.id), {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -557,8 +562,13 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.post(`/api/occurrence_report/${vm.occurrence_report.id}/unlock_occurrence_report.json`)
-                        .then((response) => {
+                    fetch(`/api/occurrence_report/${vm.occurrence_report.id}/unlock_occurrence_report.json`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
+                        .then(async (response) => {
                             swal.fire({
                                 title: 'Unlocked',
                                 text: 'The approved occurrence report has been unlocked for editing',
@@ -567,7 +577,7 @@ export default {
                                     confirmButton: 'btn btn-primary',
                                 },
                             });
-                            vm.occurrence_report = response.body;
+                            vm.occurrence_report = await response.json();
                         }, (error) => {
                             console.log(error);
                         });
@@ -591,8 +601,13 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.post(`/api/occurrence_report/${vm.occurrence_report.id}/lock_occurrence_report.json`)
-                        .then((response) => {
+                    fetch(`/api/occurrence_report/${vm.occurrence_report.id}/lock_occurrence_report.json`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
+                        .then(async (response) => {
                             swal.fire({
                                 title: 'Locked',
                                 text: 'The approved occurrence report has been locked from editing',
@@ -601,7 +616,7 @@ export default {
                                     confirmButton: 'btn btn-primary',
                                 },
                             });
-                            vm.occurrence_report = response.body;
+                            vm.occurrence_report = await response.json();
                         }, (error) => {
                             console.log(error);
                         });
@@ -658,7 +673,13 @@ export default {
             }
 
             let payload = { proposal: vm.occurrence_report };
-            await vm.$http.post(vm.occurrence_report_form_url, payload).then(res => {
+            await fetch(vm.occurrence_report_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 swal.fire({
                     title: "Saved",
                     text: "Your changes have been saved",
@@ -669,7 +690,7 @@ export default {
                 });
                 vm.savingOccurrenceReport = false;
                 vm.isSaved = true;
-                vm.occurrence_report = res.body
+                vm.occurrence_report = await response.json();
                 vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.setLoadingMap(
                     false
                 );
@@ -726,7 +747,13 @@ export default {
             }
 
             let payload = { proposal: vm.occurrence_report };
-            const result = await vm.$http.post(vm.occurrence_report_form_url, payload).then(res => {
+            const result = await fetch(vm.occurrence_report_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
 
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
@@ -824,8 +851,14 @@ export default {
                     if (!vm.saveError) {
                         let payload = new Object();
                         Object.assign(payload, vm.occurrence_report);
-                        vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report.id + '/submit'), payload).then(res => {
-                            vm.occurrence = res.body;
+                        fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report.id + '/submit'), {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        }).then(async (response) => {
+                            vm.occurrence = await response.json();
                             vm.$router.push({
                                 name: 'internal-occurrence-dash'
                             });
@@ -861,8 +894,13 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    this.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, this.occurrence_report.id + '/copy')).then(res => {
-                        const ocr_copy = res.body;
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, this.occurrence_report.id + '/copy'), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }).then(async (response) => {
+                        const ocr_copy = await response.json();
                         swal.fire({
                             title: 'Copied',
                             text: `The occurrence report has been copied to ${ocr_copy.occurrence_report_number}. When you click OK, the new occurrence report will open in a new window.`,
@@ -887,10 +925,11 @@ export default {
                 console.log(error);
             });
         },
-        refreshFromResponse: function (response) {
+        refreshFromResponse: async function (response) {
             let vm = this;
-            vm.original_occurrence = helpers.copyObject(response.body);
-            vm.occurrence_report = helpers.copyObject(response.body);
+            const data = await response.json();
+            vm.original_occurrence = helpers.copyObject(data);
+            vm.occurrence_report = helpers.copyObject(data);
             vm.$nextTick(() => {
                 vm.initialiseAssignedOfficerSelect(true);
                 vm.updateAssignedOfficerSelect();
@@ -909,12 +948,17 @@ export default {
             let formData = new FormData(vm.form);
             vm.sendingReferral = true;
             let data = { 'email': vm.selected_referral, 'text': vm.referral_text };
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/send_referral')), JSON.stringify(data), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/send_referral')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            }).then(async (response) => {
+                const data = await response.json();
                 vm.sendingReferral = false;
-                vm.original_occurrence_report = helpers.copyObject(response.body);
-                vm.occurrence_report = response.body;
+                vm.original_occurrence_report = helpers.copyObject(data);
+                vm.occurrence_report = data;
                 swal.fire({
                     title: 'Referral Sent',
                     text: `The referral has been sent to ${vm.selected_referral}`,
@@ -941,9 +985,10 @@ export default {
         },
         remindReferral: function (r) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/remind')).then(response => {
-                vm.original_occurrence_report = helpers.copyObject(response.body);
-                vm.occurrence_report = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/remind')).then(async (response) => {
+                const data = await response.json();
+                vm.original_occurrence_report = helpers.copyObject(data);
+                vm.occurrence_report = data;
                 swal.fire({
                     title: 'Referral Reminder',
                     text: 'A reminder has been sent to ' + vm.department_users.find(d => d.id == r.referral.id).name,
@@ -966,9 +1011,10 @@ export default {
         },
         recallReferral: function (r) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/recall')).then(response => {
-                vm.original_occurrence_report = helpers.copyObject(response.body);
-                vm.occurrence_report = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/recall')).then(async (response) => {
+                const data = await response.json();
+                vm.original_occurrence_report = helpers.copyObject(data);
+                vm.occurrence_report = data;
                 $('.popover').hide();
                 vm.enablePopovers();
                 swal.fire({
@@ -993,9 +1039,10 @@ export default {
         },
         resendReferral: function (r) {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/resend')).then(response => {
-                vm.original_occurrence_report = helpers.copyObject(response.body);
-                vm.occurrence_report = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/resend')).then(async (response) => {
+                const data = await response.json();
+                vm.original_occurrence_report = helpers.copyObject(data);
+                vm.occurrence_report = data;
                 $('.popover').hide();
                 vm.enablePopovers();
                 swal.fire({
@@ -1020,8 +1067,8 @@ export default {
         },
         fetchDeparmentUsers: function () {
             let vm = this;
-            vm.$http.get(api_endpoints.department_users).then((response) => {
-                vm.department_users = response.body
+            fetch(api_endpoints.department_users).then(async (response) => {
+                vm.department_users = await response.json();
             }, (error) => {
                 console.log(error);
             })
@@ -1095,19 +1142,22 @@ export default {
         },
         remindExternalReferee: function (external_referee_invite) {
             let vm = this;
-            vm.$http.post(
+            fetch(
                 helpers.add_endpoint_join(
                     api_endpoints.ocr_external_referee_invites,
                     `/${external_referee_invite.id}/remind/`
-                ),
-            )
-                .then((response) => {
-                    swal.fire({
-                        title: 'Reminder Email Sent',
-                        text: `A reminder email was successfully sent to ${external_referee_invite.full_name} (${external_referee_invite.email}).`,
-                        icon: 'success',
-                    });
-                })
+                ), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            }).then((response) => {
+                swal.fire({
+                    title: 'Reminder Email Sent',
+                    text: `A reminder email was successfully sent to ${external_referee_invite.full_name} (${external_referee_invite.email}).`,
+                    icon: 'success',
+                });
+            })
                 .catch((error) => {
                     console.error(`Error sending reminder. ${error}`);
                 });
@@ -1128,11 +1178,16 @@ export default {
             }).then((result) => {
                 if (result.isConfirmed) {
                     let vm = this;
-                    vm.$http.patch(
+                    fetch(
                         helpers.add_endpoint_join(
                             api_endpoints.ocr_external_referee_invites,
                             `/${external_referee_invite.id}/retract/`
-                        ),
+                        ), {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }
                     )
                         .then((response) => {
                             this.refreshOccurrenceReport();
@@ -1214,11 +1269,16 @@ export default {
                 data = { 'assessor_id': vm.occurrence_report.assigned_officer };
             }
             if (!unassign) {
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/assign_to')), JSON.stringify(data), {
-                    emulateJSON: true
-                }).then((response) => {
-                    vm.occurrence_report = response.body;
-                    vm.original_occurrence_report = helpers.copyObject(response.body);
+                fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/assign_to')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data),
+                }).then(async (response) => {
+                    const data = await response.json();
+                    vm.occurrence_report = data;
+                    vm.original_occurrence_report = helpers.copyObject(data);
                     vm.updateAssignedOfficerSelect();
                 }, (error) => {
                     vm.occurrence_report = helpers.copyObject(vm.original_occurrence_report)
@@ -1234,10 +1294,10 @@ export default {
                 });
             }
             else {
-                vm.$http.get(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/unassign')))
-                    .then((response) => {
-                        vm.occurrence_report = response.body;
-                        vm.original_occurrence_report = helpers.copyObject(response.body);
+                fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/unassign')))
+                    .then(async (response) => {
+                        vm.occurrence_report = data;
+                        vm.original_occurrence_report = helpers.copyObject(data);
                         vm.updateAssignedOfficerSelect();
                     }, (error) => {
                         vm.occurrence_report = helpers.copyObject(vm.original_occurrence_report)
@@ -1255,10 +1315,10 @@ export default {
         },
         assignRequestUser: function () {
             let vm = this;
-            vm.$http.get(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/assign_request_user')))
-                .then((response) => {
-                    vm.occurrence_report = response.body;
-                    vm.original_occurrence_report = helpers.copyObject(response.body);
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/assign_request_user')))
+                .then(async (response) => {
+                    vm.occurrence_report = data;
+                    vm.original_occurrence_report = helpers.copyObject(data);
                     vm.updateAssignedOfficerSelect();
                     vm.$nextTick(() => {
                         vm.initialiseReferreeSelect();
@@ -1295,8 +1355,8 @@ export default {
         },
         fetchOccurrenceReport: function (id) {
             let vm = this;
-            Vue.http.get(`/api/occurrence_report/${id}/`).then(res => {
-                vm.occurrence_report = res.body;
+            fetch(`/api/occurrence_report/${id}/`).then(async (repsonse) => {
+                vm.occurrence_report = await repsonse.json();
             },
                 err => {
                     console.log(err);
@@ -1323,9 +1383,9 @@ export default {
         });
     },
     beforeRouteEnter: function (to, from, next) {
-        Vue.http.get(`/api/occurrence_report/${to.params.occurrence_report_id}/`).then(res => {
-            next(vm => {
-                vm.occurrence_report = res.body;
+        fetch(`/api/occurrence_report/${to.params.occurrence_report_id}/`).then(async (response) => {
+            next(async vm => {
+                vm.occurrence_report = await response.json();
             });
         },
             err => {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
index 903d8934..b6dfcc9f 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
@@ -3,30 +3,19 @@
         <form class="form-horizontal" action="index.html" method="post">
             <div class="col-sm-12">
                 <div class="text-end">
-                    <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                        @click.prevent="newSite">
+                    <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 " @click.prevent="newSite">
                         <i class="fa-solid fa-circle-plus"></i>
                         Add New Site
                     </button>
                 </div>
             </div>
         </form>
-        <datatable
-            :id="datatable_id"
-            ref="occurrence_site_datatable"
-            :dt-options="options"
-            :dt-headers="headers"
-        />
-        <SiteDetail 
-            ref="site_detail" 
-            @refreshFromResponse="updatedSites" 
-            :url="occ_site_url"
-            :occurrence_obj="occurrence_obj"
-            >
+        <datatable :id="datatable_id" ref="occurrence_site_datatable" :dt-options="options" :dt-headers="headers" />
+        <SiteDetail ref="site_detail" @refreshFromResponse="updatedSites" :url="occ_site_url"
+            :occurrence_obj="occurrence_obj">
         </SiteDetail>
         <div v-if="occSiteHistoryId">
-            <OCCSiteHistory ref="occ_site_history" :key="occSiteHistoryId"
-                :site-id="occSiteHistoryId" />
+            <OCCSiteHistory ref="occ_site_history" :key="occSiteHistoryId" :site-id="occSiteHistoryId" />
         </div>
     </div>
 </template>
@@ -115,7 +104,7 @@ export default {
                             coord1 += ".0";
                         }
                         if (Number.isInteger((full.point_coord2))) {
-                            coord2 += ".0"; 
+                            coord2 += ".0";
                         }
 
                         let value = coord2 + ", " + coord1;
@@ -270,27 +259,27 @@ export default {
             let vm = this;
             this.$refs.site_detail.site_id = id;
             this.$refs.site_detail.site_action = 'edit';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then((response) => {
-                this.$refs.site_detail.siteObj = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(async (response) => {
+                this.$refs.site_detail.siteObj = await response.json();
             },
-            err => {
-                console.log(err);
-            });
+                err => {
+                    console.log(err);
+                });
             this.$refs.site_detail.isModalOpen = true;
         },
         viewSite: function (id) {
             let vm = this;
             this.$refs.site_detail.site_id = id;
             this.$refs.site_detail.site_action = 'view';
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then((response) => {
-                this.$refs.site_detail.siteObj = response.body;
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(async (response) => {
+                this.$refs.site_detail.siteObj = await response.json();
             },
-            err => {
-                console.log(err);
-            });
+                err => {
+                    console.log(err);
+                });
             this.$refs.site_detail.isModalOpen = true;
         },
-        updatedSites: function() {
+        updatedSites: function () {
             this.$refs.occurrence_site_datatable.vmDataTable.ajax.reload();
             this.$emit('updatedSites');
         },
@@ -309,7 +298,12 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occ_site, id + '/discard'))
+                    fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id + '/discard'), {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -331,29 +325,34 @@ export default {
         },
         reinstateSite: function (id) {
             let vm = this;
-            vm.$http.patch(helpers.add_endpoint_json(api_endpoints.occ_site, id + '/reinstate'))
-            .then((response) => {
-                swal.fire({
-                    title: 'Reinstated',
-                    text: 'The Site has been reinstated',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                }).then((result) => {
-                    vm.updatedSites();
-                });
-            }, (error) => {
-                var errorText = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id + '/reinstate'), {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then((response) => {
+                    swal.fire({
+                        title: 'Reinstated',
+                        text: 'The Site has been reinstated',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((result) => {
+                        vm.updatedSites();
+                    });
+                }, (error) => {
+                    var errorText = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
                 });
-            });            
         },
         historySite: function (id) {
             this.occSiteHistoryId = parseInt(id);
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
index 9b63183f..b2d78209 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="modalForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <alert v-if="changeWarning && !isReadOnly" type="warning"><strong>{{ changeWarning }}</strong>
                         </alert>
                         <div class="col-sm-12">
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
index 4c2f439e..7c1a3656 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
@@ -133,7 +133,13 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.post(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/approve/')), JSON.stringify(vm.approve))
+                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/approve/')), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(vm.approve),
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Occurrence Report Successfully Approved',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
index f9c40bb5..c0aabe83 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
@@ -107,7 +107,13 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.post(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/decline/')), JSON.stringify(vm.decline))
+                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/decline/')), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(vm.decline),
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Occurrence Report Successfully Declined',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
index 8463537d..ac6f9a5d 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
@@ -190,7 +190,13 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.post(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report.id + '/propose_approve/')), JSON.stringify(vm.propose_approve))
+                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report.id + '/propose_approve/')), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(vm.propose_approve),
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Proposal to Approve Successful',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
index 21762027..7f4841ea 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
@@ -101,7 +101,13 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.post(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/propose_decline/')), JSON.stringify(vm.propose_decline))
+                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/propose_decline/')), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(vm.propose_decline),
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Proposal to Decline Successful',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
index 2e442348..d8f5413e 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
@@ -59,35 +59,34 @@
             </div>
             <div class="col-md-9">
                 <div class="row">
-                    <template>
-                        <div class="">
-                            <div class="row">
-                                <form :action="species_community_ocr_form_url" method="post"
-                                    name="new_occurrence_report" enctype="multipart/form-data">
-                                    <ProposalOccurrenceReport v-if="occurrence_report_obj && profile"
-                                        :occurrence_report_obj="occurrence_report_obj" id="OccurrenceReportStart"
-                                        :canEditStatus="canEditStatus" ref="occurrence_report" :referral="referral"
-                                        @refreshOccurrenceReport="refreshOccurrenceReport()" :show_observer_contact_information="false"
-                                        @refreshFromResponse="refreshFromResponse" :is_internal="profile.is_internal">
-                                    </ProposalOccurrenceReport>
-                                    <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                    <input type='hidden' name="occurrence_report_id" :value="1" />
-                                    <div class="row" style="margin-bottom: 50px">
-                                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;"
-                                            v-if="!occurrence_report_obj.can_user_edit && !isFinalised">
-                                            <div v-if="!isFinalised" class="container">
-                                                <div class="col-md-12 text-end">
-                                                    <button class="btn btn-primary pull-right" style="margin-top:5px;"
-                                                        @click.prevent="save()">Save
-                                                        Changes</button>
-                                                </div>
+                    <div class="">
+                        <div class="row">
+                            <form :action="species_community_ocr_form_url" method="post" name="new_occurrence_report"
+                                enctype="multipart/form-data">
+                                <ProposalOccurrenceReport v-if="occurrence_report_obj && profile"
+                                    :occurrence_report_obj="occurrence_report_obj" id="OccurrenceReportStart"
+                                    :canEditStatus="canEditStatus" ref="occurrence_report" :referral="referral"
+                                    @refreshOccurrenceReport="refreshOccurrenceReport()"
+                                    :show_observer_contact_information="false"
+                                    @refreshFromResponse="refreshFromResponse" :is_internal="profile.is_internal">
+                                </ProposalOccurrenceReport>
+                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
+                                <input type='hidden' name="occurrence_report_id" :value="1" />
+                                <div class="row" style="margin-bottom: 50px">
+                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;"
+                                        v-if="!occurrence_report_obj.can_user_edit && !isFinalised">
+                                        <div v-if="!isFinalised" class="container">
+                                            <div class="col-md-12 text-end">
+                                                <button class="btn btn-primary pull-right" style="margin-top:5px;"
+                                                    @click.prevent="save()">Save
+                                                    Changes</button>
                                             </div>
                                         </div>
                                     </div>
-                                </form>
-                            </div>
+                                </div>
+                            </form>
                         </div>
-                    </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -165,7 +164,13 @@ export default {
                     component_map.getJSONFeatures(layerName);
                 component_map.setLoadingMap(true);
             }
-            vm.$http.post(vm.species_community_ocr_referral_form_url, payload).then(res => {
+            fetch(vm.species_community_ocr_referral_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            }).then(async (response) => {
                 swal.fire({
                     title: 'Saved',
                     text: 'Your changes have been saved',
@@ -184,9 +189,10 @@ export default {
                 component_map.setLoadingMap(false);
             });
         },
-        refreshFromResponse: function (response) {
+        refreshFromResponse: async function (response) {
             let vm = this;
-            vm.occurrence_report_obj = helpers.copyObject(response.body);
+            const data = await response.json();
+            vm.occurrence_report_obj = helpers.copyObject(data);
         },
         completeReferral: function () {
             let vm = this;
@@ -219,9 +225,16 @@ export default {
                 if (result.isConfirmed) {
                     let payload = new Object();
                     Object.assign(payload, vm.referral);
-                    vm.$http.post(vm.species_community_ocr_referral_form_url, payload).then(res => {
-                        vm.$http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, vm.$route.params.referral_id + '/complete')).then(res => {
-                            vm.referral = Object.assign({}, res.body);
+                    fetch(vm.species_community_ocr_referral_form_url, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(payload)
+                    }).then(async (response) => {
+                        fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, vm.$route.params.referral_id + '/complete')).then(async (response) => {
+                            const data = await response.json();
+                            vm.referral = Object.assign({}, data);
                         },
                             error => {
                                 swal.fire({
@@ -247,17 +260,18 @@ export default {
         },
         fetchReferral: function () {
             let vm = this;
-            Vue.http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, vm.$route.params.referral_id)).then(res => {
-                vm.referral = Object.assign({}, res.body);
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, vm.$route.params.referral_id)).then(async (response) => {
+                const data = await response.json();
+                vm.referral = Object.assign({}, data);
             },
                 err => {
                     console.log(err);
                 });
         },
         fetchProfile() {
-            this.$http.get(api_endpoints.profile)
-                .then(response => {
-                    this.profile = response.data
+            fetch(api_endpoints.profile)
+                .then(async (response) => {
+                    this.profile = await response.json();
                 })
                 .catch(error => {
                     console.log(error)
@@ -271,9 +285,10 @@ export default {
         }
     },
     beforeRouteEnter: function (to, from, next) {
-        Vue.http.get(helpers.add_endpoint_json(api_endpoints.ocr_referrals, to.params.referral_id)).then(res => {
-            next(vm => {
-                vm.referral = res.body;
+        fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, to.params.referral_id)).then(async (reponse) => {
+            const data = await response.json();
+            next(async vm => {
+                vm.referral = data;
             });
         },
             err => {
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
index 7436077d..14beac98 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
@@ -4,14 +4,15 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{errorString}}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="row">
                                 <div class="col-sm-offset-2 col-sm-8">
                                     <div class="form-group">
-                                        <label class="control-label pull-left"  for="Name">Reason</label>
-                                        <select class="form-control" name="reason" ref="reason" v-model="amendment.reason">
-                                            <option v-for="r in reason_choices" :value="r.key">{{r.value}}</option>
+                                        <label class="control-label pull-left" for="Name">Reason</label>
+                                        <select class="form-control" name="reason" ref="reason"
+                                            v-model="amendment.reason">
+                                            <option v-for="r in reason_choices" :value="r.key">{{ r.value }}</option>
                                         </select>
                                     </div>
                                 </div>
@@ -19,8 +20,9 @@
                             <div class="row">
                                 <div class="col-sm-offset-2 col-sm-8">
                                     <div class="form-group">
-                                        <label class="control-label pull-left"  for="Name">Details</label>
-                                        <textarea class="form-control" name="name" v-model="amendment.text" id="amendment_text"></textarea>
+                                        <label class="control-label pull-left" for="Name">Details</label>
+                                        <textarea class="form-control" name="name" v-model="amendment.text"
+                                            id="amendment_text"></textarea>
                                     </div>
                                 </div>
                             </div>
@@ -38,28 +40,28 @@ import Vue from 'vue'
 import modal from '@vue-utils/bootstrap-modal.vue'
 import alert from '@vue-utils/alert.vue'
 
-import {helpers, api_endpoints} from "@/utils/hooks.js"
+import { helpers, api_endpoints } from "@/utils/hooks.js"
 export default {
-    name:'amendment-request',
-    components:{
+    name: 'amendment-request',
+    components: {
         modal,
         alert
     },
-    props:{
-            proposal_id:{
-                type:Number,
-            },
+    props: {
+        proposal_id: {
+            type: Number,
+        },
     },
-    data:function () {
+    data: function () {
         let vm = this;
         return {
-            isModalOpen:false,
-            form:null,
+            isModalOpen: false,
+            form: null,
             amendment: {
-            reason:'',
-            reason_id: null,
-            amendingProposal: false,
-            proposal: vm.proposal_id
+                reason: '',
+                reason_id: null,
+                amendingProposal: false,
+                proposal: vm.proposal_id
             },
             reason_choices: {},
             errors: false,
@@ -68,24 +70,24 @@ export default {
         }
     },
     computed: {
-        showError: function() {
+        showError: function () {
             var vm = this;
             return vm.errors;
         }
     },
-    methods:{
+    methods: {
 
-        ok:function () {
-            let vm =this;
-            if($(vm.form).valid()){
+        ok: function () {
+            let vm = this;
+            if ($(vm.form).valid()) {
                 vm.sendData();
             }
         },
-        cancel:function () {
+        cancel: function () {
             let vm = this;
             vm.close();
         },
-        close:function () {
+        close: function () {
             this.isModalOpen = false;
             this.amendment = {
                 reason: '',
@@ -98,16 +100,16 @@ export default {
 
             this.validation_form.resetForm();
         },
-        fetchAmendmentChoices: function(){
+        fetchAmendmentChoices: function () {
             let vm = this;
-            vm.$http.get('/api/amendment_request_reason_choices.json').then((response) => {
-                vm.reason_choices = response.body;
+            fetch('/api/amendment_request_reason_choices.json').then(async (response) => {
+                vm.reason_choices = await response.json();
 
-            },(error) => {
+            }, (error) => {
                 console.log(error);
-            } );
+            });
         },
-        sendData:function(){
+        sendData: function () {
             let vm = this;
             vm.errors = false;
             // if(vm.amendment.text){
@@ -115,57 +117,60 @@ export default {
             // }
             // console.log(vm.amendment.text);
             let amendment = JSON.parse(JSON.stringify(vm.amendment));
-            vm.$http.post('/api/amendment_request.json',JSON.stringify(amendment),{
-                        emulateJSON:true,
-                    }).then((response)=>{
-                        //vm.$parent.loading.splice('processing contact',1);
-                        swal(
-                             'Sent',
-                             'An email has been sent to proponent with the request to amend this Proposal',
-                             'success'
-                        );
-                        vm.amendingProposal = true;
-                        vm.close();
-                        //vm.$emit('refreshFromResponse',response);
-                        Vue.http.get(`/api/proposal/${vm.proposal_id}/internal_proposal.json`).then((response)=>
-                        {
-                            vm.$emit('refreshFromResponse',response, vm.documents);
+            fetch('/api/amendment_request.json', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(amendment)
+            }).then((response) => {
+                //vm.$parent.loading.splice('processing contact',1);
+                swal(
+                    'Sent',
+                    'An email has been sent to proponent with the request to amend this Proposal',
+                    'success'
+                );
+                vm.amendingProposal = true;
+                vm.close();
+                //vm.$emit('refreshFromResponse',response);
+                fetch(`/api/proposal/${vm.proposal_id}/internal_proposal.json`).then((response) => {
+                    vm.$emit('refreshFromResponse', response, vm.documents);
 
-                        },(error)=>{
-                            console.log(error);
-                        });
-                        vm.$router.push({ path: '/internal' }); //Navigate to dashboard after creating Amendment request
+                }, (error) => {
+                    console.log(error);
+                });
+                vm.$router.push({ path: '/internal' }); //Navigate to dashboard after creating Amendment request
 
-                    },(error)=>{
-                        console.log(error);
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                        vm.amendingProposal = true;
+            }, (error) => {
+                console.log(error);
+                vm.errors = true;
+                vm.errorString = helpers.apiVueResourceError(error);
+                vm.amendingProposal = true;
 
-                    });
+            });
 
 
         },
-        formatText: function(text){
-            let s = text.replace(/\n/g,'<br/>')
-                    s = s.replace(/[\u2018|\u2019|\u201A]/g, "\'");
-                    // smart double quotes
-                    s = s.replace(/[\u201C|\u201D|\u201E]/g, "\"");
-                    // ellipsis
-                    s = s.replace(/\u2026/g, "...");
-                    // dashes
-                    s = s.replace(/[\u2013|\u2014]/g, "-");
-                    // circumflex
-                    s = s.replace(/\u02C6/g, "^");
-                    // open angle bracket
-                    s = s.replace(/\u2039/g, "<");
-                    // close angle bracket
-                    s = s.replace(/\u203A/g, ">");
-                    // spaces
-                    s = s.replace(/[\u02DC|\u00A0]/g, " ");
-                    return s;
+        formatText: function (text) {
+            let s = text.replace(/\n/g, '<br/>')
+            s = s.replace(/[\u2018|\u2019|\u201A]/g, "\'");
+            // smart double quotes
+            s = s.replace(/[\u201C|\u201D|\u201E]/g, "\"");
+            // ellipsis
+            s = s.replace(/\u2026/g, "...");
+            // dashes
+            s = s.replace(/[\u2013|\u2014]/g, "-");
+            // circumflex
+            s = s.replace(/\u02C6/g, "^");
+            // open angle bracket
+            s = s.replace(/\u2039/g, "<");
+            // close angle bracket
+            s = s.replace(/\u203A/g, ">");
+            // spaces
+            s = s.replace(/[\u02DC|\u00A0]/g, " ");
+            return s;
         },
-        addFormValidations: function() {
+        addFormValidations: function () {
             let vm = this;
             vm.validation_form = $(vm.form).validate({
                 rules: {
@@ -177,8 +182,8 @@ export default {
                     reason: "field is required",
 
                 },
-                showErrors: function(errorMap, errorList) {
-                    $.each(this.validElements(), function(index, element) {
+                showErrors: function (errorMap, errorList) {
+                    $.each(this.validElements(), function (index, element) {
                         var $element = $(element);
                         $element.attr("data-original-title", "").parents('.form-group').removeClass('has-error');
                     });
@@ -196,26 +201,26 @@ export default {
                     }
                 }
             });
-       },
-       eventListerners:function () {
+        },
+        eventListerners: function () {
             let vm = this;
 
             // Intialise select2
             $(vm.$refs.reason).select2({
                 "theme": "bootstrap",
                 allowClear: true,
-                placeholder:"Select Reason"
-            }).
-            on("select2:select",function (e) {
-                var selected = $(e.currentTarget);
-                vm.amendment.reason = selected.val();
-                vm.amendment.reason_id = selected.val();
+                placeholder: "Select Reason"
             }).
-            on("select2:unselect",function (e) {
-                var selected = $(e.currentTarget);
-                vm.amendment.reason = selected.val();
-                vm.amendment.reason_id = selected.val();
-            });
+                on("select2:select", function (e) {
+                    var selected = $(e.currentTarget);
+                    vm.amendment.reason = selected.val();
+                    vm.amendment.reason_id = selected.val();
+                }).
+                on("select2:unselect", function (e) {
+                    var selected = $(e.currentTarget);
+                    vm.amendment.reason = selected.val();
+                    vm.amendment.reason_id = selected.val();
+                });
 
             // let amendmentTextField = $('#amendment_text');
             // amendmentTextField.on(
@@ -247,20 +252,19 @@ export default {
             //       // insert text manually
             //       document.execCommand("insertHTML", false, s);
             //   });
-       }
-   },
-   mounted:function () {
-       let vm =this;
-       vm.form = document.forms.amendForm;
-       vm.fetchAmendmentChoices();
-       vm.addFormValidations();
-       this.$nextTick(()=>{
+        }
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.amendForm;
+        vm.fetchAmendmentChoices();
+        vm.addFormValidations();
+        this.$nextTick(() => {
             vm.eventListerners();
         });
-    //console.log(validate);
-   }
+        //console.log(validate);
+    }
 }
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
index a9e15b70..4e4d9a4e 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
@@ -131,7 +131,7 @@
                             <div class="col-md-12">
                                 <FormSpeciesCommunities v-if="species_community_original" ref="rename_community"
                                     :species_community_original="species_community_original"
-                                    :species_community.sync="species_community_original" id="rename_community"
+                                    :species_community="species_community_original" id="rename_community"
                                     :is_internal="true" :is_readonly="true" :rename_species="true"> // rename=true
                                     used to make only taxon
                                     select editable on form
@@ -272,10 +272,14 @@ export default {
             }).then((swalresult) => {
                 vm.finaliseCommunityLoading = true;
                 if (swalresult.isConfirmed) {
-                    vm.$http.post(api_endpoints.rename_community(vm.species_community_original.id), JSON.stringify(vm.new_community.taxonomy_details), {
-                        emulateJSON: true,
+                    fetch(api_endpoints.rename_community(vm.species_community_original.id), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(vm.new_community.taxonomy_details),
                     })
-                        .then(response => {
+                        .then(async (response) => {
                             console.log(response);
                             if (response.status === 200) {
                                 return response.json();
@@ -293,8 +297,8 @@ export default {
                             vm.$router.go();
                             vm.isModalOpen = false;
                         })
-                        .catch(response => {
-                            this.errors = response.body;
+                        .catch(async (response) => {
+                            this.errors = await response.json();
                         });
                 }
             }).finally(() => {
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue b/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
index d6207d4f..d099d635 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
@@ -95,8 +95,9 @@ export default {
         },
         fetchProfile: function () {
             let vm = this;
-            vm.$http.get(api_endpoints.profile).then(async (response) => {
-                vm.profile = await response.body;
+            fetch(api_endpoints.profile).then(async (response) => {
+
+                vm.profile = await response.json();
                 vm.$nextTick(() => {
                     let speciesCommunitiesActiveTab = localStorage.getItem('speciesCommunitiesActiveTab')
                     if (vm.profile && vm.profile.area_of_interest) {
@@ -115,8 +116,8 @@ export default {
         }
     },
     created: function () {
-        this.$http.get(api_endpoints.group_types_dict).then((response) => {
-            this.group_types = response.body;
+        fetch(api_endpoints.group_types_dict).then(async (response) => {
+            this.group_types = await response.json();
         }, (error) => {
             console.log(error);
         });
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
index d711efaf..92c21688 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="makePublicForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="row mb-3">
                             <label for="distribution_publishing" class="col-sm-6 control-label">Distribution: </label>
                             <div class="col-sm-6">
@@ -145,11 +145,15 @@ export default {
                 endpoint = api_endpoints.community;
             }
 
-            vm.$http.post(helpers.add_endpoint_json(endpoint, (vm.species_community.id + '/update_publishing_status')), data, {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(endpoint, (vm.species_community.id + '/update_publishing_status')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: data,
+            }).then(async (response) => {
                 vm.updatingPublishing = false;
-                vm.species_community.publishing_status = response.body;
+                vm.species_community.publishing_status = await response.json();
                 vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
                 swal.fire({
                     title: 'Saved',
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue b/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
index 56cc15b0..5cd5bd33 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="declineForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row">
@@ -115,8 +115,12 @@ export default {
             let decline = JSON.parse(JSON.stringify(vm.decline));
             vm.decliningProposal = true;
             if (vm.processing_status != 'With Approver') {
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.proposals, vm.proposal_id + '/proposed_decline'), JSON.stringify(decline), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.proposals, vm.proposal_id + '/proposed_decline'), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(decline),
                 }).then((response) => {
                     vm.decliningProposal = false;
                     vm.close();
@@ -129,8 +133,12 @@ export default {
                 });
             }
             else {
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.proposals, vm.proposal_id + '/final_decline'), JSON.stringify(decline), {
-                    emulateJSON: true,
+                fetch(helpers.add_endpoint_json(api_endpoints.proposals, vm.proposal_id + '/final_decline'), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(decline),
                 }).then((response) => {
                     vm.decliningProposal = false;
                     vm.close();
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
index 17805e8c..eb829530 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
@@ -1,10 +1,11 @@
 <template lang="html">
     <div id="combineSpecies">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" extraLarge id="species-combine-modal">
+        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" extraLarge
+            id="species-combine-modal">
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="combineSpeciesForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div>
                             <div class="col-md-12">
                                 <ul v-if="is_internal" class="nav nav-pills" id="combine-pills-tab" role="tablist">
@@ -46,7 +47,7 @@
                                     <div class="tab-pane" :id="newSpeciesBody" role="tabpanel"
                                         aria-labelledby="pills-new-species-tab">
                                         <SpeciesCombineForm v-if="new_combine_species && new_combine_species.id"
-                                            ref="species_communities_new" :species_community.sync="new_combine_species"
+                                            ref="species_communities_new" :species_community="new_combine_species"
                                             :original_species_combine_list="original_species_combine_list"
                                             id="new_combine_species" :is_internal="true" :key="speciesCombineFormKey">
                                         </SpeciesCombineForm>
@@ -55,7 +56,7 @@
                                         :key="'div' + species.id" class="tab-pane fade" :id="'species-body-' + index"
                                         role="tabpanel" :aria-labelledby="'pills-species' + index + '-tab'">
                                         <SpeciesCommunitiesComponent :ref="'species_communities_species' + index"
-                                            :species_community_original="species" :species_community.sync="species"
+                                            :species_community_original="species" :species_community="species"
                                             :id="'species-' + index" :is_internal="true" :is_readonly="true">
                                         </SpeciesCommunitiesComponent>
                                     </div>
@@ -225,7 +226,13 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, new_species);
-            const result = await vm.$http.post(`/api/species/${new_species.id}/species_split_save.json`, payload).then(res => {
+            const result = await fetch(`/api/species/${new_species.id}/species_split_save.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 return true;
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
@@ -310,8 +317,14 @@ export default {
                         let payload = new Object();
                         Object.assign(payload, new_species);
                         let submit_url = helpers.add_endpoint_json(api_endpoints.species, new_species.id + '/combine_new_species_submit')
-                        vm.$http.post(submit_url, payload).then(res => {
-                            vm.new_species = res.body;
+                        fetch(submit_url, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        }).then(async (response) => {
+                            vm.new_species = await response.json();
                             vm.$router.push({
                                 name: 'internal-species-communities-dash'
                             });
@@ -340,7 +353,12 @@ export default {
             let vm = this;
             try {
                 // In this case we are allowing a http DELETE call to remove the species
-                vm.$http.delete(api_endpoints.remove_species_proposal(species_id));
+                fetch(api_endpoints.remove_species_proposal(species_id), {
+                    method: 'DELETE',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                });
             }
             catch (err) {
                 console.log(err);
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index fe7cefc7..76074a22 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -3,79 +3,75 @@
         <div class="row" style="padding-bottom: 50px;">
             <h3>{{ display_group_type }} {{ display_number }} - {{ display_name }}</h3>
             <div v-if="!comparing" class="col-md-3">
-                <template>
-                    <div class="">
-                        <div class="card card-default mb-3">
-                            <div class="card-header">
-                                Image
-                            </div>
-                            <div class="card-body">
-                                <template>
-                                    <div class="row mb-2 pb-2">
-                                        <div v-if="!uploadingImage && speciesCommunitiesImage" class="col">
-                                            <div class="rounded"
-                                                :class="downloadingImage ? 'animated-background bg-secondary' : ''"
-                                                style="width:258px;" :style="downloadingImage ? 'height:258px;' : ''">
-                                                <img v-show="!downloadingImage" @load="onImageLoad"
-                                                    :src="speciesCommunitiesImage" width="258"
-                                                    class="img-thumbnail img-fluid rounded" />
-                                            </div>
-                                        </div>
-                                        <div v-else
-                                            class="col d-flex bg-light bg-gradient justify-content-center align-content-middle mx-2"
-                                            style="height:258px;">
-                                            <div class="align-self-center text-muted">No Image Uploaded</div>
-                                        </div>
+                <div class="">
+                    <div class="card card-default mb-3">
+                        <div class="card-header">
+                            Image
+                        </div>
+                        <div class="card-body">
+                            <div class="row mb-2 pb-2">
+                                <div v-if="!uploadingImage && speciesCommunitiesImage" class="col">
+                                    <div class="rounded"
+                                        :class="downloadingImage ? 'animated-background bg-secondary' : ''"
+                                        style="width:258px;" :style="downloadingImage ? 'height:258px;' : ''">
+                                        <img v-show="!downloadingImage" @load="onImageLoad"
+                                            :src="speciesCommunitiesImage" width="258"
+                                            class="img-thumbnail img-fluid rounded" />
                                     </div>
-                                    <div v-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
-                                        class="row border-top pt-3 mb-2">
-                                        <div class="col">
-                                            <div class="d-flex justify-content-center">
-                                                <div class="text-muted">Image Actions</div>
-                                            </div>
-                                        </div>
+                                </div>
+                                <div v-else
+                                    class="col d-flex bg-light bg-gradient justify-content-center align-content-middle mx-2"
+                                    style="height:258px;">
+                                    <div class="align-self-center text-muted">No Image Uploaded</div>
+                                </div>
+                            </div>
+                            <div v-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
+                                class="row border-top pt-3 mb-2">
+                                <div class="col">
+                                    <div class="d-flex justify-content-center">
+                                        <div class="text-muted">Image Actions</div>
                                     </div>
-                                    <div v-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
-                                        class="row">
-                                        <div class="col">
-                                            <div class="d-flex align-items-center flex-column">
-                                                <label v-if="!speciesCommunitiesImage" for="image-upload" role="button"
-                                                    class="btn btn-primary btn-sm w-50 mb-2 text-start"><i
-                                                        class="bi bi-upload me-3"></i>
-                                                    Upload</label>
-                                                <input id="image-upload" class="d-none" type="file" accept="image/*"
-                                                    ref="speciesCommunitiesImage" @change="uploadImage">
-                                                <button class="btn btn-secondary btn-sm w-50 mb-2 text-start"
-                                                    @click="showReinstateImageModal"><i
-                                                        class="bi bi-clock-history me-3"></i> Reinstate</button>
-                                                <template v-if="!uploadingImage && speciesCommunitiesImage">
-                                                    <label for="image-upload" role="button"
-                                                        class="btn btn-primary btn-sm w-50 mb-2 text-start"><i
-                                                            class="bi bi-pencil-fill me-3"></i>
-                                                        Replace</label>
-                                                    <input id="image-upload" class="d-none" type="file" accept="image/*"
-                                                        ref="speciesCommunitiesImage" @change="uploadImage">
+                                </div>
+                            </div>
+                            <div v-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
+                                class="row">
+                                <div class="col">
+                                    <div class="d-flex align-items-center flex-column">
+                                        <label v-if="!speciesCommunitiesImage" for="image-upload" role="button"
+                                            class="btn btn-primary btn-sm w-50 mb-2 text-start"><i
+                                                class="bi bi-upload me-3"></i>
+                                            Upload</label>
+                                        <input id="image-upload" class="d-none" type="file" accept="image/*"
+                                            ref="speciesCommunitiesImage" @change="uploadImage">
+                                        <button class="btn btn-secondary btn-sm w-50 mb-2 text-start"
+                                            @click="showReinstateImageModal"><i class="bi bi-clock-history me-3"></i>
+                                            Reinstate</button>
+                                        <template v-if="!uploadingImage && speciesCommunitiesImage">
+                                            <label for="image-upload" role="button"
+                                                class="btn btn-primary btn-sm w-50 mb-2 text-start"><i
+                                                    class="bi bi-pencil-fill me-3"></i>
+                                                Replace</label>
+                                            <input id="image-upload" class="d-none" type="file" accept="image/*"
+                                                ref="speciesCommunitiesImage" @change="uploadImage">
 
-                                                    <button @click="confirmDiscardImage"
-                                                        class="btn btn-danger btn-sm w-50 mb-2 text-start"><i
-                                                            class="bi bi-trash3-fill me-3"></i>
-                                                        Discard</button>
-                                                </template>
-                                                <button v-if="uploadingImage"
-                                                    class="btn btn-primary btn-sm w-50 mb-2 text-start">
-                                                    <span class="spinner-border spinner-border-sm me-3" role="status"
-                                                        aria-hidden="true"></span>
-                                                    Uploading
-                                                    <span class="visually-hidden">Loading...</span>
-                                                </button>
-                                            </div>
-                                        </div>
+                                            <button @click="confirmDiscardImage"
+                                                class="btn btn-danger btn-sm w-50 mb-2 text-start"><i
+                                                    class="bi bi-trash3-fill me-3"></i>
+                                                Discard</button>
+                                        </template>
+                                        <button v-if="uploadingImage"
+                                            class="btn btn-primary btn-sm w-50 mb-2 text-start">
+                                            <span class="spinner-border spinner-border-sm me-3" role="status"
+                                                aria-hidden="true"></span>
+                                            Uploading
+                                            <span class="visually-hidden">Loading...</span>
+                                        </button>
                                     </div>
-                                </template>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </template>
+                </div>
 
                 <CommsLogs :comms_url="comms_url" :logs_url="logs_url" :comms_add_url="comms_add_url"
                     :disable_add_entry="!species_community.can_add_log" class="mb-3" />
@@ -188,79 +184,76 @@
             </div>
             <div class="col-md-9">
                 <div class="row">
-                    <template>
-                        <div class="">
-                            <div class="row">
-                                <form :action="species_community_form_url" method="post" name="new_species"
-                                    enctype="multipart/form-data">
-                                    <ProposalSpeciesCommunities ref="species_communities"
-                                        :species_community="species_community"
-                                        :species_community_original="species_community_original"
-                                        id="speciesCommunityStart" :is_internal="true"
-                                        :is_readonly="species_community.readonly || species_community.processing_status == 'Discarded'">
-                                    </ProposalSpeciesCommunities>
-                                    <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                    <input type='hidden' name="species_community_id" :value="1" />
-                                    <div class="row" style="margin-bottom: 50px">
-                                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
-                                            <div class="container">
-                                                <div class="col-md-6">
-                                                    <button class="btn btn-primary me-2 pull-left"
-                                                        style="margin-top:5px;" @click.prevent="returnToDashboard">
-                                                        Return to Dashboard</button>
-                                                </div>
-                                                <div v-if="species_community.can_user_edit && species_community.processing_status != 'Discarded'"
-                                                    class="col-md-6 text-end">
-                                                    <button v-if="savingSpeciesCommunity"
-                                                        class="btn btn-primary me-2 pull-right" style="margin-top:5px;"
-                                                        disabled>Save and Continue <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary me-2 ull-right"
-                                                        style="margin-top:5px;" @click.prevent="save()"
-                                                        :disabled="saveExitSpeciesCommunity || submitSpeciesCommunity">Save
-                                                        and Continue</button>
+                    <div class="">
+                        <div class="row">
+                            <form :action="species_community_form_url" method="post" name="new_species"
+                                enctype="multipart/form-data">
+                                <ProposalSpeciesCommunities ref="species_communities"
+                                    :species_community="species_community"
+                                    :species_community_original="species_community_original" id="speciesCommunityStart"
+                                    :is_internal="true"
+                                    :is_readonly="species_community.readonly || species_community.processing_status == 'Discarded'">
+                                </ProposalSpeciesCommunities>
+                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
+                                <input type='hidden' name="species_community_id" :value="1" />
+                                <div class="row" style="margin-bottom: 50px">
+                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                        <div class="container">
+                                            <div class="col-md-6">
+                                                <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
+                                                    @click.prevent="returnToDashboard">
+                                                    Return to Dashboard</button>
+                                            </div>
+                                            <div v-if="species_community.can_user_edit && species_community.processing_status != 'Discarded'"
+                                                class="col-md-6 text-end">
+                                                <button v-if="savingSpeciesCommunity"
+                                                    class="btn btn-primary me-2 pull-right" style="margin-top:5px;"
+                                                    disabled>Save and Continue <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary me-2 ull-right"
+                                                    style="margin-top:5px;" @click.prevent="save()"
+                                                    :disabled="saveExitSpeciesCommunity || submitSpeciesCommunity">Save
+                                                    and Continue</button>
 
-                                                    <button v-if="saveExitSpeciesCommunity"
-                                                        class="btn btn-primary me-2 pull-right" style="margin-top:5px;"
-                                                        disabled>Save and Exit <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary me-2 pull-right"
-                                                        style="margin-top:5px;" @click.prevent="save_exit()"
-                                                        :disabled="savingSpeciesCommunity || submitSpeciesCommunity">Save
-                                                        and Exit</button>
+                                                <button v-if="saveExitSpeciesCommunity"
+                                                    class="btn btn-primary me-2 pull-right" style="margin-top:5px;"
+                                                    disabled>Save and Exit <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top:5px;" @click.prevent="save_exit()"
+                                                    :disabled="savingSpeciesCommunity || submitSpeciesCommunity">Save
+                                                    and Exit</button>
 
-                                                    <button v-if="submitSpeciesCommunity"
-                                                        class="btn btn-primary pull-right" style="margin-top:5px;"
-                                                        disabled>Submit <span class="spinner-border spinner-border-sm"
-                                                            role="status" aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary pull-right"
-                                                        style="margin-top:5px;" @click.prevent="submit()"
-                                                        :disabled="saveExitSpeciesCommunity || savingSpeciesCommunity">Submit</button>
-                                                </div>
-                                                <div v-else-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
-                                                    class="col-md-6 text-end">
-                                                    <button v-if="savingSpeciesCommunity"
-                                                        class="btn btn-primary pull-right" style="margin-top:5px;"
-                                                        disabled>Save Changes <span
-                                                            class="spinner-border spinner-border-sm" role="status"
-                                                            aria-hidden="true"></span>
-                                                        <span class="visually-hidden">Loading...</span></button>
-                                                    <button v-else class="btn btn-primary pull-right"
-                                                        style="margin-top:5px;" @click.prevent="save()">Save
-                                                        Changes</button>
-                                                </div>
+                                                <button v-if="submitSpeciesCommunity" class="btn btn-primary pull-right"
+                                                    style="margin-top:5px;" disabled>Submit <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary pull-right"
+                                                    style="margin-top:5px;" @click.prevent="submit()"
+                                                    :disabled="saveExitSpeciesCommunity || savingSpeciesCommunity">Submit</button>
+                                            </div>
+                                            <div v-else-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
+                                                class="col-md-6 text-end">
+                                                <button v-if="savingSpeciesCommunity" class="btn btn-primary pull-right"
+                                                    style="margin-top:5px;" disabled>Save Changes <span
+                                                        class="spinner-border spinner-border-sm" role="status"
+                                                        aria-hidden="true"></span>
+                                                    <span class="visually-hidden">Loading...</span></button>
+                                                <button v-else class="btn btn-primary pull-right"
+                                                    style="margin-top:5px;" @click.prevent="save()">Save
+                                                    Changes</button>
                                             </div>
                                         </div>
                                     </div>
-                                </form>
-                            </div>
+                                </div>
+                            </form>
                         </div>
-                    </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -465,13 +458,18 @@ export default {
                 else {
                     var api_url = api_endpoints.species;
                 }
-                vm.$http.post(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/upload_image')), data, {
-                    emulateJSON: true
-                }).then((response) => {
+                fetch(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/upload_image')), {
+                    method: 'POST',
+                    body: data,
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }).then(async (response) => {
+                    const data = await response.json();
                     vm.uploadingImage = false;
                     vm.speciesCommunitiesImage = null;
-                    vm.speciesCommunitiesImage = response.body.image_doc;
-                    vm.species_community.image_doc = response.body.image_doc;
+                    vm.speciesCommunitiesImage = data.image_doc;
+                    vm.species_community.image_doc = data.image_doc;
                 }, (error) => {
                     console.log(error);
                     vm.uploadingImage = false;
@@ -515,7 +513,12 @@ export default {
                 }
 
                 if (swalresult.isConfirmed) {
-                    await vm.$http.post(`${endpoint}/${this.species_community.id}/reopen_species_community.json`).then(res => {
+                    await fetch(`${endpoint}/${this.species_community.id}/reopen_species_community.json`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }).then(async (response) => {
                         swal.fire({
                             title: "Reopened",
                             text: "Record has been reopened",
@@ -548,7 +551,12 @@ export default {
             else {
                 var api_url = api_endpoints.species;
             }
-            vm.$http.patch(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/reinstate_image')), {
+            fetch(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/reinstate_image'), {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }), {
                 pk: image.id
             }).then(() => {
                 this.speciesCommunitiesImage = image.url;
@@ -603,13 +611,17 @@ export default {
                 });
             } else {
                 if (vm.species_community.image_doc) {
-                    vm.$http.post(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/delete_image')), {
-                        emulateJSON: true
-                    }).then((response) => {
+                    fetch(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/delete_image')), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }).then(async (response) => {
+                        const data = await response.json();
                         vm.uploadingImage = false;
                         vm.speciesCommunitiesImage = null;
-                        vm.speciesCommunitiesImage = response.body.image_doc;
-                        vm.species_community.image_doc = response.body.image_doc;
+                        vm.speciesCommunitiesImage = data.image_doc;
+                        vm.species_community.image_doc = data.image_doc;
                     }, (error) => {
                         console.log(error);
                         vm.uploadingImage = false;
@@ -646,7 +658,12 @@ export default {
                 reverseButtons: true
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    vm.$http.patch(api_endpoints.discard_species_proposal(vm.species_community.id))
+                    fetch(api_endpoints.discard_species_proposal(vm.species_community.id), {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    })
                         .then((response) => {
                             swal.fire({
                                 title: 'Discarded',
@@ -691,8 +708,14 @@ export default {
                 was_public = " - record is now private"
             }
 
-            await vm.$http.post(vm.species_community_form_url, payload).then(res => {
-                vm.species_community = res.body;
+            await fetch(vm.species_community_form_url, {
+                method: 'POST',
+                body: JSON.stringify(payload),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
+                vm.species_community = await response.json();
                 vm.species_community_original = helpers.copyObject(vm.species_community); //update original after save
                 swal.fire({
                     title: "Saved",
@@ -757,7 +780,13 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, vm.species_community);
-            const result = await vm.$http.post(vm.species_community_form_url, payload).then(res => {
+            const result = await fetch(vm.species_community_form_url, {
+                method: 'POST',
+                body: JSON.stringify(payload),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
                 //return true;
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
@@ -862,8 +891,14 @@ export default {
                         let submit_url = this.species_community.group_type === "community" ?
                             helpers.add_endpoint_json(api_endpoints.community, vm.species_community.id + '/submit') :
                             helpers.add_endpoint_json(api_endpoints.species, vm.species_community.id + '/submit')
-                        vm.$http.post(submit_url, payload).then(res => {
-                            vm.species_community = res.body;
+                        fetch(submit_url, {
+                            method: 'POST',
+                            body: JSON.stringify(payload),
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        }).then(async (response) => {
+                            vm.species_community = await response.json();
                             vm.species_community_original = helpers.copyObject(vm.species_community);
                             vm.$router.push({
                                 name: 'internal-species-communities-dash'
@@ -889,21 +924,29 @@ export default {
         save_wo: function () {
             let vm = this;
             let formData = new FormData(vm.form);
-            vm.$http.post(vm.proposal_form_url, formData).then(res => {
+            fetch(vm.proposal_form_url, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
             }, err => {
             });
         },
-        refreshFromResponse: function (response) {
+        refreshFromResponse: async function (response) {
             let vm = this;
-            vm.species_community = helpers.copyObject(response.body);
+            const data = await response.json();
+            vm.species_community = helpers.copyObject(data);
             vm.species_community_original = copyObject(vm.species_community);
         },
         refreshSpeciesCommunity: function () {
             let vm = this;
             if (vm.species_community.group_type === 'flora' || vm.species_community.group_type === "fauna") {
-                Vue.http.get(`/api/species/${vm.species_community.id}/internal_species.json`)
-                    .then(res => {
-                        vm.species_community = res.body.species_obj;
+                fetch(`/api/species/${vm.species_community.id}/internal_species.json`)
+                    .then(async (response) => {
+                        const data = await response.json();
+                        vm.species_community = data.species_obj;
                         vm.species_community_original = helpers.copyObject(vm.species_community);
                         vm.speciesCommunitiesImage = vm.species_community.image_doc;
                     },
@@ -911,9 +954,10 @@ export default {
                             console.log(err);
                         });
             } else {
-                Vue.http.get(`/api/community/${vm.species_community.id}/internal_community.json`)
-                    .then(res => {
-                        vm.species_community = res.body.community_obj;
+                fetch(`/api/community/${vm.species_community.id}/internal_community.json`)
+                    .then(async (response) => {
+                        const data = await response.json();
+                        vm.species_community = data.community_obj;
                         vm.species_community_original = helpers.copyObject(vm.species_community);
                         vm.speciesCommunitiesImage = vm.species_community.image_doc;
                     },
@@ -929,11 +973,18 @@ export default {
                 const createUrl = api_endpoints.species + "/";
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id;
-                let savedSpecies = await Vue.http.post(createUrl, payload);
+                let savedSpecies = await fetch(createUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload),
+                });
                 if (savedSpecies) {
                     newSpeciesId1 = savedSpecies.body.id;
-                    Vue.http.get(`/api/species/${newSpeciesId1}/internal_species.json`).then(res => {
-                        let species_obj = res.body.species_obj;
+                    fetch(`/api/species/${newSpeciesId1}/internal_species.json`).then(async (response) => {
+                        const data = await response.json();
+                        let species_obj = data.species_obj;
                         //--- to add empty documents array
                         species_obj.documents = []
                         //---empty threats array added to store the select threat ids in from the child component
@@ -956,11 +1007,18 @@ export default {
                 const createUrl = api_endpoints.species + "/";
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id
-                let savedSpecies = await Vue.http.post(createUrl, payload);
+                let savedSpecies = await fetch(createUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload),
+                });
                 if (savedSpecies) {
                     newSpeciesId2 = savedSpecies.body.id;
-                    Vue.http.get(`/api/species/${newSpeciesId2}/internal_species.json`).then(res => {
-                        let species_obj = res.body.species_obj;
+                    fetch(`/api/species/${newSpeciesId2}/internal_species.json`).then(async (response) => {
+                        const data = await response.json();
+                        let species_obj = data.species_obj;
                         // to add documents id array from original species
                         species_obj.documents = []
                         //---empty threats array added to store the select threat ids in from the child component
@@ -987,11 +1045,18 @@ export default {
                 const createUrl = api_endpoints.species + "/";
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id;
-                let savedSpecies = await Vue.http.post(createUrl, payload);
+                let savedSpecies = await fetch(createUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload),
+                });
                 if (savedSpecies) {
                     newSpeciesId = savedSpecies.body.id;
-                    Vue.http.get(`/api/species/${newSpeciesId}/internal_species.json`).then(res => {
-                        let species_obj = res.body.species_obj;
+                    fetch(`/api/species/${newSpeciesId}/internal_species.json`).then(async (response) => {
+                        const data = response.json();
+                        let species_obj = data.species_obj;
                         //--- to add empty documents array
                         species_obj.documents = []
                         //---empty threats array added to store the selected threat ids in from the child component
@@ -1014,7 +1079,7 @@ export default {
         },
         renameSpecies: async function () {
             let rename_species_obj = null;
-            let newRenameSpecies = await Vue.http.get(`/api/species/${this.species_community.id}/rename_deep_copy.json`)
+            let newRenameSpecies = await fetch(`/api/species/${this.species_community.id}/rename_deep_copy.json`)
             if (newRenameSpecies) {
                 rename_species_obj = newRenameSpecies.body.species_obj;
                 this.$refs.species_rename.new_rename_species = rename_species_obj;
@@ -1037,11 +1102,15 @@ export default {
                 vm.species_community.publishing_status.species_public = false;
             }
             let data = JSON.stringify(vm.species_community.publishing_status)
-            vm.$http.post(helpers.add_endpoint_json(endpoint, (vm.species_community.id + '/update_publishing_status')), data, {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(endpoint, (vm.species_community.id + '/update_publishing_status')),  {
+                method: 'POST',
+                body: data,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(async (response) => {
                 vm.updatingPublishing = false;
-                vm.species_community.publishing_status = response.body;
+                vm.species_community.publishing_status = await response.json();
                 vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
                 swal.fire({
                     title: 'Saved',
@@ -1074,8 +1143,9 @@ export default {
             if (this.$route.query.group_type_name === 'community') {
                 end_point_type = 'community';
             }
-            Vue.http.get(`/api/${end_point_type}/${this.$route.params.species_community_id}/internal_${end_point_type}.json`).then(res => {
-                this.species_community = res.body[`${end_point_type}_obj`]; //--temp community_obj
+            fetch(`/api/${end_point_type}/${this.$route.params.species_community_id}/internal_${end_point_type}.json`).then(async (response) => {
+                const data = await response.json();
+                this.species_community = data[`${end_point_type}_obj`]; //--temp community_obj
                 this.species_community_original = helpers.copyObject(this.species_community);
                 this.speciesCommunitiesImage = this.species_community.image_doc;
             },
@@ -1095,9 +1165,10 @@ export default {
         if (to.query.group_type_name === 'community') {
             end_point_type = 'community';
         }
-        Vue.http.get(`/api/${end_point_type}/${to.params.species_community_id}/internal_${end_point_type}.json`).then(res => {
-            next(vm => {
-                vm.species_community = res.body[`${end_point_type}_obj`]; //--temp community_obj
+        fetch(`/api/${end_point_type}/${to.params.species_community_id}/internal_${end_point_type}.json`).then(async (response) => {
+            next(async vm => {
+                const data = await response.json();
+                vm.species_community = data[`${end_point_type}_obj`]; //--temp community_obj
                 vm.species_community_original = helpers.copyObject(vm.species_community);
                 vm.speciesCommunitiesImage = vm.species_community.image_doc;
             });
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
index eb51a416..662940c3 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
@@ -1,15 +1,16 @@
 <template lang="html">
     <div id="renameSpecies">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" extraLarge id="species-rename-modal">
+        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" extraLarge
+            id="species-rename-modal">
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="renameSpeciesForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div>
                             <div class="col-md-12">
                                 <SpeciesCommunitiesComponent v-if="new_rename_species != null" ref="rename_species"
                                     :species_community_original="new_rename_species"
-                                    :species_community.sync="new_rename_species" id="rename_species" :is_internal="true"
+                                    :species_community="new_rename_species" id="rename_species" :is_internal="true"
                                     :is_readonly="true" :rename_species="true"> // rename=true used to make only taxon
                                     select editable on form
                                 </SpeciesCommunitiesComponent>
@@ -100,7 +101,12 @@ export default {
             let vm = this;
             try {
                 // In this case we are allowing a http DELETE call to remove the species
-                vm.$http.delete(api_endpoints.remove_species_proposal(species_id));
+                fetch(api_endpoints.remove_species_proposal(species_id), {
+                    method: 'DELETE',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                });
             }
             catch (err) {
                 console.log(err);
@@ -114,7 +120,13 @@ export default {
             vm.saveError = false;
             let payload = new Object();
             Object.assign(payload, new_species);
-            const result = await vm.$http.post(`/api/species/${new_species.id}/species_save.json`, payload).then(res => {
+            const result = await fetch(`/api/species/${new_species.id}/species_save.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            }).then(async (response) => {
                 return true;
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
@@ -134,7 +146,7 @@ export default {
         },
         sendData: async function () {
             let vm = this;
-            if(!vm.new_rename_species.taxonomy_id){
+            if (!vm.new_rename_species.taxonomy_id) {
                 swal.fire({
                     title: "Please fix following errors",
                     text: "Please select a species by searching for the scientific name",
@@ -181,8 +193,14 @@ export default {
                             let payload = new Object();
                             Object.assign(payload, new_species);
                             let submit_url = helpers.add_endpoint_json(api_endpoints.species, new_species.id + '/rename_new_species_submit')
-                            vm.$http.post(submit_url, payload).then(res => {
-                                vm.new_species = res.body;
+                            fetch(submit_url, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify(payload)
+                            }).then(async (response) => {
+                                vm.new_species = await response.json();
                                 vm.$router.push({
                                     name: 'internal-species-communities-dash'
                                 });
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
index 32300d50..15534bef 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
@@ -4,7 +4,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="splitSpeciesForm">
-                        <alert :show.sync="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
                         <div>
                             <div class="col-md-12">
                                 <ul v-if="is_internal" class="nav nav-pills" id="split-pills-tab" role="tablist">
@@ -47,7 +47,7 @@
                                         <SpeciesCommunitiesComponent v-if="species_community_original != null"
                                             ref="species_communities_original"
                                             :species_community_original="species_community_original"
-                                            :species_community.sync="species_community_original" id="species_original"
+                                            :species_community="species_community_original" id="species_original"
                                             :is_internal="true" :is_readonly="true">
                                             <!-- this prop is only send from split species form to make the original species readonly -->
                                         </SpeciesCommunitiesComponent>
@@ -56,9 +56,8 @@
                                         class="tab-pane fade" :id="'species-body-' + index" role="tabpanel"
                                         :aria-labelledby="'pills-species-' + index + '-tab'">
                                         <SpeciesSplitForm :ref="'species_communities_species' + index"
-                                            :species_community.sync="species"
-                                            :species_original="species_community_original" :id="'species-' + index"
-                                            :is_internal="true">
+                                            :species_community="species" :species_original="species_community_original"
+                                            :id="'species-' + index" :is_internal="true">
                                         </SpeciesSplitForm>
                                     </div>
                                     <div v-if="species_community_original && new_species_list && new_species_list.length > 0"
@@ -211,7 +210,13 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, new_species);
-            const result = await vm.$http.post(`/api/species/${new_species.id}/species_split_save.json`, payload).then(res => {
+            const result = await fetch(`/api/species/${new_species.id}/species_split_save.json`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
                 return true;
             }, err => {
                 var errorText = helpers.apiVueResourceError(err);
@@ -294,8 +299,14 @@ export default {
                             let payload = new Object();
                             Object.assign(payload, new_species);
                             let submit_url = helpers.add_endpoint_json(api_endpoints.species, new_species.id + '/split_new_species_submit')
-                            vm.$http.post(submit_url, payload).then(res => {
-                                vm.new_species = res.body;
+                            fetch(submit_url, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify(payload),
+                            }).then(async (response) => {
+                                vm.new_species = await response.json();
                                 //-- to change status of original species only after all new split species are submitted
                                 if (index == vm.new_species_list.length - 1) {
                                     vm.submit_original_species();
@@ -325,8 +336,14 @@ export default {
             let payload = new Object();
             Object.assign(payload, vm.species_community_original);
             let submit_url = helpers.add_endpoint_json(api_endpoints.species, vm.species_community_original.id + '/change_status_historical')
-            vm.$http.post(submit_url, payload).then(res => {
-                vm.species_community_original = res.body;
+            fetch(submit_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            }).then(async (response) => {
+                vm.species_community_original = await response.json();
                 vm.$router.push({
                     name: 'internal-species-communities-dash'
                 });
@@ -346,7 +363,12 @@ export default {
 
             try {
                 // In this case we are allowing a http DELETE call to remove the species
-                vm.$http.delete(api_endpoints.remove_species_proposal(species_id));
+                fetch(api_endpoints.remove_species_proposal(species_id), {
+                    method: 'DELETE',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
             }
             catch (err) {
                 console.log(err);
@@ -376,10 +398,17 @@ export default {
                         let payload = new Object();
                         payload.group_type_id = vm.species_community_original.group_type_id;
                         payload.parent_species_id = vm.species_community_original.id;
-                        Vue.http.post(createUrl, payload).then(resp => {
+                        fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        }).then(resp => {
                             newSpeciesId = resp.body.id;
-                            Vue.http.get(`/api/species/${newSpeciesId}/internal_species.json`).then(res => {
-                                let species_obj = res.body.species_obj;
+                            fetch(`/api/species/${newSpeciesId}/internal_species.json`).then(async (response) => {
+                                const data = await response.json();
+                                let species_obj = data.species_obj;
                                 //---documents array added to store the select document ids in from the child component
                                 species_obj.documents = []
                                 //---threats array added to store the select threat ids in from the child component
diff --git a/boranga/frontend/boranga/src/components/internal/users/manage.vue b/boranga/frontend/boranga/src/components/internal/users/manage.vue
index 02af8dd1..e032fd40 100644
--- a/boranga/frontend/boranga/src/components/internal/users/manage.vue
+++ b/boranga/frontend/boranga/src/components/internal/users/manage.vue
@@ -117,8 +117,10 @@
                                                                 class="pull-right btn btn-primary"
                                                                 @click.prevent="updateAddress()">Update</button>
                                                             <button v-else disabled
-                                                                class="pull-right btn btn-primary">Updating <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                                                    <span class="visually-hidden">Loading...</span></button>
+                                                                class="pull-right btn btn-primary">Updating <span
+                                                                    class="spinner-border spinner-border-sm"
+                                                                    role="status" aria-hidden="true"></span>
+                                                                <span class="visually-hidden">Loading...</span></button>
                                                         </div>
                                                     </div>
                                                 </form>
@@ -168,8 +170,10 @@
                                                                 class="pull-right btn btn-primary"
                                                                 @click.prevent="updateContact()">Update</button>
                                                             <button v-else disabled
-                                                                class="pull-right btn btn-primary">Updating <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                                                    <span class="visually-hidden">Loading...</span></button>
+                                                                class="pull-right btn btn-primary">Updating <span
+                                                                    class="spinner-border spinner-border-sm"
+                                                                    role="status" aria-hidden="true"></span>
+                                                                <span class="visually-hidden">Loading...</span></button>
                                                         </div>
                                                     </div>
                                                 </form>
@@ -338,8 +342,12 @@ export default {
                 });
                 return;
             }
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_personal')), JSON.stringify(vm.user), {
-                emulateJSON: true
+            fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_personal')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.user)
             }).then((response) => {
                 swal({
                     title: 'Update Personal Details',
@@ -368,11 +376,15 @@ export default {
         updateContact: function () {
             let vm = this;
             vm.updatingContact = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_contact')), JSON.stringify(vm.user), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_contact')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.user)
+            }).then(async (response) => {
                 vm.updatingContact = false;
-                vm.user = response.body;
+                vm.user = await response.json();
                 if (vm.user.residential_address == null) { vm.user.residential_address = {}; }
                 swal({
                     title: 'Update Contact Details',
@@ -395,11 +407,15 @@ export default {
         updateAddress: function () {
             let vm = this;
             vm.updatingAddress = true;
-            vm.$http.post(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_address')), JSON.stringify(vm.user.residential_address), {
-                emulateJSON: true
-            }).then((response) => {
+            fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_address')), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.user)
+            }).then(async (response) => {
                 vm.updatingAddress = false;
-                vm.user = response.body;
+                vm.user = await response.json();
                 if (vm.user.residential_address == null) { vm.user.residential_address = {}; }
                 swal({
                     title: 'Update Address Details',
@@ -430,11 +446,15 @@ export default {
                 confirmButtonText: 'Accept'
             }).then((result) => {
                 if (result.value) {
-                    vm.$http.post(helpers.add_endpoint_json(api_endpoints.organisations, org.id + '/unlink_user'), JSON.stringify(vm.user), {
-                        emulateJSON: true
+                    fetch(helpers.add_endpoint_json(api_endpoints.organisations, org.id + '/unlink_user'), {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ user_id: vm.user.id })
                     }).then((response) => {
-                        vm.$http.get(helpers.add_endpoint_json(api_endpoints.users, vm.user.id)).then((response) => {
-                            vm.user = response.body
+                        fetch(helpers.add_endpoint_json(api_endpoints.users, vm.user.id)).then(async (response) => {
+                            vm.user = await response.json();
                             if (vm.user.residential_address == null) { vm.user.residential_address = {}; }
                             if (vm.user.borangacompliance_organisations && vm.user.borangacompliance_organisations.length > 0) {
                                 vm.managesOrg = 'Yes'
@@ -486,8 +506,12 @@ export default {
                     type: 'error'
                 });
             } else {
-                vm.$http.post(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/upload_id')), data, {
-                    emulateJSON: true
+                fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/upload_id')), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: data
                 }).then((response) => {
                     vm.uploadingID = false;
                     vm.uploadedID = null;
diff --git a/boranga/frontend/boranga/src/components/internal/utils.js b/boranga/frontend/boranga/src/components/internal/utils.js
index e5c59a98..a5a0e280 100755
--- a/boranga/frontend/boranga/src/components/internal/utils.js
+++ b/boranga/frontend/boranga/src/components/internal/utils.js
@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import api from './api'
-import {helpers} from '@/utils/hooks' 
+import {helpers} from '@/utils/hooks'
 
 export default {
     fetchProposal: function(id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(helpers.add_endpoint_json(api.proposals,id)).then((response) => {
+            fetch(helpers.add_endpoint_json(api.proposals,id)).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -15,7 +15,7 @@ export default {
     },
     fetchOrganisations: function(id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(api.organisations).then((response) => {
+            fetch(api.organisations).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -25,7 +25,7 @@ export default {
     },
     fetchCountries: function (){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(api.countries).then((response) => {
+            fetch(api.countries).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -36,7 +36,7 @@ export default {
     },
     fetchOrganisation: function(id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(helpers.add_endpoint_json(api.organisations,id)).then((response) => {
+            fetch(helpers.add_endpoint_json(api.organisations,id)).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -46,7 +46,7 @@ export default {
     },
     fetchUser: function(id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(helpers.add_endpoint_json(api.users,id)).then((response) => {
+            fetch(helpers.add_endpoint_json(api.users,id)).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -56,7 +56,7 @@ export default {
     },
     fetchOrgRequestPending:function (id){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(helpers.add_endpoint_json(api.users,id + '/pending_org_requests')).then((response) => {
+            fetch(helpers.add_endpoint_json(api.users,id + '/pending_org_requests')).then((response) => {
                 resolve(response.body);
             },
             (error) => {
@@ -66,7 +66,7 @@ export default {
     },
     fetchProfile: function (){
         return new Promise ((resolve,reject) => {
-            Vue.http.get(api.profile).then((response) => {
+            fetch(api.profile).then((response) => {
                 resolve(response.body);
             },
             (error) => {
diff --git a/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue b/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
index f5d0cf23..b9f8d800 100755
--- a/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
+++ b/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
@@ -122,7 +122,7 @@ export default {
             document.body.className += ' modal-open';
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         document.body.className = document.body.className.replace(/\s?modal-open/, '');
     },
     watch: {

From 2b491ecd7611455b524822969321d28615b53a9f Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:27:52 +0800
Subject: [PATCH 025/138] More minor changes to support vue 3.

---
 .../src/components/common/occurrence/occ_locations.vue     | 5 -----
 .../src/components/common/occurrence/ocr_location.vue      | 5 -----
 .../conservation_status/conservation_status_proposal.vue   | 2 +-
 .../external/occurrence/occurrence_report_proposal.vue     | 7 ++-----
 .../boranga/src/components/internal/meetings/cs_queue.vue  | 2 +-
 .../internal/species_communities/species_split.vue         | 5 +++--
 6 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
index 6cb1be72..0d5d595f 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -601,11 +601,6 @@ export default {
 
             payload.site_geometry = vm.$refs.component_map.getJSONFeatures("site_layer");
 
-            // const res = await fetch(vm.proposal_form_url, {
-            //     body: JSON.stringify(payload),
-            //     method: 'POST',
-            // });
-
             vm.$http
                 .post(
                     helpers.add_endpoint_json(
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
index 9eba3f1a..01a711b7 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
@@ -527,11 +527,6 @@ export default {
                 vm.$refs.component_map.setLoadingMap(true);
             }
 
-            // const res = await fetch(vm.proposal_form_url, {
-            //     body: JSON.stringify(payload),
-            //     method: 'POST',
-            // });
-
             vm.$http
                 .post(
                     helpers.add_endpoint_json(
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
index 2cbe3c51..dc1216f6 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
@@ -445,7 +445,7 @@ export default {
                     const data = await response.json();
                     vm.conservation_status_obj = data;
                     vm.setdata(vm.conservation_status_obj.readonly);
-                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, to.params.conservation_status_id + '/amendment_request')).then((res) => {
+                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, to.params.conservation_status_id + '/amendment_request')).then(async (response) => {
                         vm.setAmendmentData(data);
                     },
                         err => {
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
index 1af25364..388b071a 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
@@ -218,7 +218,7 @@ export default {
                 // Provide an action to have the backend lock the geometry
                 payload.action = 'submit';
             }
-            const res = await fetch(vm.ocr_proposal_form_url, {
+            await fetch(vm.ocr_proposal_form_url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -628,11 +628,8 @@ export default {
                     vm.occurrence_report_obj = data;
                     vm.loading.splice('fetching occurrence report proposal', 1);
                     vm.setdata(vm.occurrence_report_obj.readonly);
-
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, to.params.occurrence_report_id + '/amendment_request')).then((res) => {
-
+                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, to.params.occurrence_report_id + '/amendment_request')).then(async (response) => {
                         vm.setAmendmentData(data);
-
                     },
                         err => {
                             console.log(err);
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index 96503446..fb4070db 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -314,7 +314,7 @@ export default {
             let vm = this;
             let movement = direction == 'down' ? 'move_down' : 'move_up';
             try {
-                const res = await fetch(helpers.add_endpoint_json(api_endpoints.meeting_agenda_items, req + '/' + movement))
+                await fetch(helpers.add_endpoint_json(api_endpoints.meeting_agenda_items, req + '/' + movement))
                 this.$parent.uuid++;
             } catch (error) {
                 console.log(error);
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
index 15534bef..a0631f7e 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
@@ -404,8 +404,9 @@ export default {
                                 'Content-Type': 'application/json',
                             },
                             body: JSON.stringify(payload),
-                        }).then(resp => {
-                            newSpeciesId = resp.body.id;
+                        }).then(async (response) => {
+                            const data = await response.json();
+                            newSpeciesId = data.id;
                             fetch(`/api/species/${newSpeciesId}/internal_species.json`).then(async (response) => {
                                 const data = await response.json();
                                 let species_obj = data.species_obj;

From 6631f7261a847a5bcbad633ff1e4204ae8dc00a9 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 6 Dec 2024 14:36:11 +0800
Subject: [PATCH 026/138] Pin sweet alert 2 to specific version for now as
 higher versions contain 'undesirable behaviour.

---
 boranga/frontend/boranga/package-lock.json | 10 +++++-----
 boranga/frontend/boranga/package.json      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index 2ce0b09e..0bcfed69 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -32,7 +32,7 @@
                 "select2-bootstrap-5-theme": "^1.3.0",
                 "shpjs": "^6.1.0",
                 "sortablejs": "^1.15.6",
-                "sweetalert2": "^11.4",
+                "sweetalert2": "11.4.8",
                 "uuid": "^11.0",
                 "vue": "^3.4",
                 "vue-router": "^4.0"
@@ -7695,12 +7695,12 @@
             }
         },
         "node_modules/sweetalert2": {
-            "version": "11.14.5",
-            "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.5.tgz",
-            "integrity": "sha512-8MWk5uc/r6bWhiJWkUXyEuApfXAhSCZT8FFX7pZXL7YwaPxq+9Ynhi2dUzWkOFn9jvLjKj22CXuccZ+IHcnjvQ==",
+            "version": "11.4.8",
+            "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.8.tgz",
+            "integrity": "sha512-BDS/+E8RwaekGSxCPUbPnsRAyQ439gtXkTF/s98vY2l9DaVEOMjGj1FaQSorfGREKsbbxGSP7UXboibL5vgTMA==",
             "funding": {
                 "type": "individual",
-                "url": "https://github.com/sponsors/limonte"
+                "url": "https://sweetalert2.github.io/#donations"
             }
         },
         "node_modules/synckit": {
diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index dda223b7..719d1a6c 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -33,7 +33,7 @@
         "select2-bootstrap-5-theme": "^1.3.0",
         "shpjs": "^6.1.0",
         "sortablejs": "^1.15.6",
-        "sweetalert2": "^11.4",
+        "sweetalert2": "11.4.8",
         "uuid": "^11.0",
         "vue": "^3.4",
         "vue-router": "^4.0"

From 767eea1ecd720bb21575573d5d517b3f22649e0c Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:32:30 +0800
Subject: [PATCH 027/138] Install django-vite package.

---
 boranga/settings.py | 30 +++++++++++++++++++++---------
 requirements.txt    |  1 +
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/boranga/settings.py b/boranga/settings.py
index 1b722baf..1c198c55 100755
--- a/boranga/settings.py
+++ b/boranga/settings.py
@@ -5,7 +5,6 @@
 
 import confy
 from confy import env
-from django.core.exceptions import ImproperlyConfigured
 
 logger = logging.getLogger(__name__)
 
@@ -130,6 +129,7 @@ def show_toolbar(request):
     "colorfield",
     "django_filters",
     "ordered_model",
+    "django_vite",
 ]
 
 ADD_REVERSION_ADMIN = True
@@ -186,10 +186,9 @@ def show_toolbar(request):
 }
 STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
 STATICFILES_DIRS.append(os.path.join(os.path.join(BASE_DIR, "boranga", "static")))
-DEV_STATIC = env("DEV_STATIC", False)
-DEV_STATIC_URL = env("DEV_STATIC_URL")
-if DEV_STATIC and not DEV_STATIC_URL:
-    raise ImproperlyConfigured("If running in DEV_STATIC, DEV_STATIC_URL has to be set")
+STATICFILES_DIRS.append(
+    os.path.join(os.path.join(BASE_DIR, "boranga", "static", "boranga_vue"))
+)
 DATA_UPLOAD_MAX_NUMBER_FIELDS = None
 DATA_UPLOAD_MAX_MEMORY_SIZE = 20 * 1024 * 1024
 
@@ -266,10 +265,6 @@ def show_toolbar(request):
     }
 
 DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
-DEV_APP_BUILD_URL = env(
-    "DEV_APP_BUILD_URL"
-)  # URL of the Dev app.js served by webpack & express
-
 
 # Use git commit hash for purging cache in browser for deployment changes
 GIT_COMMIT_HASH = os.popen(
@@ -338,6 +333,23 @@ def show_toolbar(request):
 if USE_X_FORWARDED_HOST:
     SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
 
+DJANGO_VITE = {
+    "default": {
+        "dev_mode": True,
+        "dev_server_host": "localhost",  # Default host for vite (can change if needed)
+        "dev_server_port": 5173,  # Default port for vite (can change if needed)
+        "static_url_prefix": "/static/boranga_vue/",
+    }
+}
+VUE3_ENTRY_SCRIPT = env(
+    "VUE3_ENTRY_SCRIPT",
+    default="src/main.js",  # This path will be auto prefixed with the static_url_prefix from DJANGO_VITE above
+)  # Path of the vue3 entry point script served by vite
+
+# Highly recommended to make sure this returns true when in local development
+USE_VITE_DEV_SERVER = RUNNING_DEVSERVER and EMAIL_INSTANCE == "DEV"
+
+
 # ---------- Identifier fields for logging ----------
 
 """ Fields that the logging functions will check for on the instance
diff --git a/requirements.txt b/requirements.txt
index 2e2ead11..68565a81 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -77,3 +77,4 @@ django-colorfield~=0.11.0
 py7zr~=0.21.1
 git+https://github.com/dbca-wa/django5-utils-six.git#egg=django5_six
 django-ordered-model~=3.7
+django-vite~=3.0.5

From 0d9f9207bb2e0cb70416a5d923ef603ff0068301 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:33:44 +0800
Subject: [PATCH 028/138] Remove unnecessary context data (is added to every
 request in context_processors.py).

---
 boranga/views.py | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/boranga/views.py b/boranga/views.py
index 77d3260d..86fb95e5 100644
--- a/boranga/views.py
+++ b/boranga/views.py
@@ -43,38 +43,14 @@ class InternalView(UserPassesTestMixin, TemplateView):
     def test_func(self):
         return is_internal(self.request)
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context["dev"] = settings.DEV_STATIC
-        context["dev_url"] = settings.DEV_STATIC_URL
-        if hasattr(settings, "DEV_APP_BUILD_URL") and settings.DEV_APP_BUILD_URL:
-            context["app_build_url"] = settings.DEV_APP_BUILD_URL
-        return context
-
 
 class PublicView(TemplateView):
     template_name = "boranga/dash/index.html"
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context["dev"] = settings.DEV_STATIC
-        context["dev_url"] = settings.DEV_STATIC_URL
-        if hasattr(settings, "DEV_APP_BUILD_URL") and settings.DEV_APP_BUILD_URL:
-            context["app_build_url"] = settings.DEV_APP_BUILD_URL
-        return context
-
 
 class ExternalView(LoginRequiredMixin, TemplateView):
     template_name = "boranga/dash/index.html"
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context["dev"] = settings.DEV_STATIC
-        context["dev_url"] = settings.DEV_STATIC_URL
-        if hasattr(settings, "DEV_APP_BUILD_URL") and settings.DEV_APP_BUILD_URL:
-            context["app_build_url"] = settings.DEV_APP_BUILD_URL
-        return context
-
 
 class SpeciesView(TemplateView):
     template_name = "boranga/dash/index.html"

From b7ae70e33007bf0b68334f0cdbafcefc1ecf9d1d Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:34:17 +0800
Subject: [PATCH 029/138] Add new settings for vite to request context.

---
 boranga/context_processors.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/boranga/context_processors.py b/boranga/context_processors.py
index 3dd05e41..67999f85 100644
--- a/boranga/context_processors.py
+++ b/boranga/context_processors.py
@@ -8,5 +8,6 @@ def config(request):
         "build_tag": settings.BUILD_TAG,
         "GIT_COMMIT_HASH": settings.GIT_COMMIT_HASH,
         "GIS_SERVER_URL": settings.GIS_SERVER_URL,
-        "app_build_url": settings.DEV_APP_BUILD_URL,
+        "vue3_entry_script": settings.VUE3_ENTRY_SCRIPT,
+        "use_vite_dev_server": settings.USE_VITE_DEV_SERVER,
     }

From e3231f5b919731517555d720028ca432cab039ca Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:36:51 +0800
Subject: [PATCH 030/138] Replace DEV_APP_BUILD_URL with VUE3_ENTRY_SCRIPT env
 in docs.

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e5480a64..35f6366c 100644
--- a/README.md
+++ b/README.md
@@ -92,7 +92,8 @@ EMAIL_HOST='smtp.corporateict.domain'
 DJANGO_HTTPS=True
 DEFAULT_FROM_EMAIL='no-reply@dbca.wa.gov.au'
 ALLOWED_HOSTS=['*']
-DEV_APP_BUILD_URL="http://localhost:8080/app.js"
+VUE3_ENTRY_SCRIPT="src/main.js"
+
 
 ```
 
@@ -159,7 +160,6 @@ SITE_PREFIX=''
 SITE_DOMAIN=''
 SITE_URL='localhost:8000'
 DISABLE_EMAIL=False
-DEV_APP_BUILD_URL="http://localhost:8080/app.js"
 CONSOLE_EMAIL_BACKEND=True
 SUPPORT_EMAIL="support@dbca.wa.gov.au"
 CSRF_MIDDLEWARE_TOKEN='my_csrf_middleware_token'

From 8ab1f0482e8cf9e1b119c5b50dd32c0e34196511 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:37:16 +0800
Subject: [PATCH 031/138] Update comment to make more descriptive.

---
 boranga/settings.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/boranga/settings.py b/boranga/settings.py
index 1c198c55..400e8de8 100755
--- a/boranga/settings.py
+++ b/boranga/settings.py
@@ -346,7 +346,8 @@ def show_toolbar(request):
     default="src/main.js",  # This path will be auto prefixed with the static_url_prefix from DJANGO_VITE above
 )  # Path of the vue3 entry point script served by vite
 
-# Highly recommended to make sure this returns true when in local development
+# Make sure this returns true when in local development
+# so you can use the vite dev server with hot module reloading
 USE_VITE_DEV_SERVER = RUNNING_DEVSERVER and EMAIL_INSTANCE == "DEV"
 
 

From b7a4640ff322e7a8f6fb3afadd30ae82be6ea1a2 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:42:03 +0800
Subject: [PATCH 032/138] Remove unneeded file.

---
 boranga/static/boranga_vue/index.html | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 boranga/static/boranga_vue/index.html

diff --git a/boranga/static/boranga_vue/index.html b/boranga/static/boranga_vue/index.html
deleted file mode 100644
index 62b52432..00000000
--- a/boranga/static/boranga_vue/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Vue App</title>
-  <script defer src="/static/boranga_vue/js/chunk-vendors.js"></script><script defer src="/static/boranga_vue/js/app.js"></script></head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

From 486550282009e088c5271ee013be5196db4a7253 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:42:34 +0800
Subject: [PATCH 033/138] Update base template to work with vite for both dev
 server and production build.

---
 boranga/templates/boranga/base.html | 76 +++++++++++++++++------------
 1 file changed, 44 insertions(+), 32 deletions(-)

diff --git a/boranga/templates/boranga/base.html b/boranga/templates/boranga/base.html
index ae5f161e..f3415b93 100755
--- a/boranga/templates/boranga/base.html
+++ b/boranga/templates/boranga/base.html
@@ -1,5 +1,6 @@
-{% extends "webtemplate_dbca/base_b5_auth_session.html" %}
+{% extends 'webtemplate_dbca/base_b5_auth_session.html' %}
 {% load static %}
+{% load django_vite %}
 
 {% load users %}
 {% load utils %}
@@ -13,64 +14,75 @@
 {% is_django_admin as is_django_admin_user %}
 {% build_tag as build_tag %}
 
-{% block header_top_menu %}{% endblock %}
+{% block header_top_menu %}
+{% endblock %}
 
 {% block extra_css %}
-    <link rel="icon" type="image/png" href="/static/boranga/favicon.ico">
+  <link rel="icon" type="image/png" href="/static/boranga/favicon.ico" />
+
+  <link rel="stylesheet" href="{% static 'boranga/css/base.css' %}?v={{ build_tag }}" />
+  {% if not use_vite_dev_server %}
+  <link rel="stylesheet" href="{% static 'boranga_vue/css/index.css' %}?v={{ build_tag }}" />
+  {% endif %}
+{% endblock %}
 
-    <link rel="stylesheet" href="{% static 'boranga/css/base.css' %}?v={{build_tag}}">
-    <link rel="stylesheet" href="{% static 'boranga_vue/css/app.css' %}?v={{build_tag}}">
-    <link rel="stylesheet" href="{% static 'boranga_vue/css/chunk-vendors.css' %}?v={{build_tag}}">
+{% block extra_js %}
+    {% if use_vite_dev_server %}
+        {% vite_hmr_client %}
+    {% endif %}
 {% endblock %}
 
 {% block custom_js %}
-    <script language="javascript">
+  <script language="javascript">
             var env = {
                 "gis_server_url": "{{ GIS_SERVER_URL }}",
                 "user_is_authenticated": {% if request.user.is_authenticated %}true{% else %}false{% endif %},
             }
     </script>
-    <script type="text/javascript" src="{% static 'boranga_vue/js/chunk-vendors.js' %}?v={{build_tag}}"></script>
-    <script type="text/javascript" src="{% static 'boranga_vue/js/app.js' %}?v={{build_tag}}"></script>
+    {% if use_vite_dev_server %}
+        <script type="module" src="{% vite_asset_url vue3_entry_script %}?v={{ build_tag }}"></script>
+    {% else %}
+        <script type="module" src="{% static 'boranga_vue/js/index.js' %}?v={{ build_tag }}"></script>
+    {% endif %}
 {% endblock %}
 
 {% block menu_items_left_brand %}
-<div class="navbar-nav">
+  <div class="navbar-nav">
     <div class="nav-item">
-        <a class="nav-link{% if request.path == '/' %} active{% endif %}" href="{% url 'home'%}"><img src="/static/img/pwl_icon.png">Home</a>
+      <a class="nav-link{% if request.path == '/' %} active{% endif %}" href="{% url 'home' %}"><img src="/static/img/pwl_icon.png" />Home</a>
     </div>
-</div>
+  </div>
 {% endblock %}
 
 {% block menu_items2_right %}
-    {% if request.user.is_authenticated %}
+  {% if request.user.is_authenticated %}
 
-    {% else %}
+  {% else %}
     <a href="/ssologin" class="btn btn-primary btn-sm">Login</a>
-    {% endif %}
+  {% endif %}
 {% endblock %}
 
 {% block menu_spacer %}
-    <br>
+  <br />
 {% endblock %}
 
 {% block footer %}
-{% application_version as application_version %}
-{% support_email as support_email %}
-{% dept_support_phone as dept_support_phone %}
-<footer class="footer fixed-bottom mt-3">
+  {% application_version as application_version %}
+  {% support_email as support_email %}
+  {% dept_support_phone as dept_support_phone %}
+  <footer class="footer fixed-bottom mt-3">
     <div class="container-fluid border-top py-2 bg-light text-secondary">
-        <div class="row">
-            <div class="col">
-                <small class="float-start">Version: {% application_version %}</small>
-            </div>
-            <div class="col">
-                <small>Support: <a href="mailto:{% support_email %}">{% support_email %}</a> | <a href="tel:{% dept_support_phone %}">{% dept_support_phone %}</a></small>
-            </div>
-            <div class="col">
-                <small class="float-end">&copy; {% dept_name %}</small>
-            </div>
+      <div class="row">
+        <div class="col">
+          <small class="float-start">Version:{% application_version %}</small>
         </div>
+        <div class="col">
+          <small>Support: <a href="mailto:{% support_email %}">{% support_email %}</a> | <a href="tel:{% dept_support_phone %}">{% dept_support_phone %}</a></small>
+        </div>
+        <div class="col">
+          <small class="float-end">&copy; {% dept_name %}</small>
+        </div>
+      </div>
     </div>
-</footer>
-{% endblock footer %}
+  </footer>
+{% endblock %}

From ade6005ebbe9b2d86434d09a574e9a31c6bc6baf Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:44:42 +0800
Subject: [PATCH 034/138] Configure vite and update packages to remove all
 vulnerabilities.

---
 boranga/frontend/boranga/package-lock.json | 7888 +++++---------------
 boranga/frontend/boranga/package.json      |   26 +-
 boranga/frontend/boranga/vite.config.js    |   66 +
 3 files changed, 1998 insertions(+), 5982 deletions(-)
 create mode 100644 boranga/frontend/boranga/vite.config.js

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index 0bcfed69..50323591 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -14,19 +14,18 @@
                 "@turf/boolean-within": "^7.1.0",
                 "@turf/helpers": "^7.1.0",
                 "@turf/intersect": "^7.1.0",
-                "@vue/cli-service": "^5.0.4",
-                "babel-polyfill": "^6.26.0",
+                "@vitejs/plugin-vue": "^5.2.1",
                 "datatables.net-bs5": "^2.0.0",
                 "datatables.net-buttons": "^3.0.0",
                 "datatables.net-buttons-bs5": "^3.0.0",
                 "datatables.net-responsive-bs5": "^3.0.2",
-                "jquery": "^3.6",
+                "jquery": "^3.7.1",
                 "jquery-validation": "^1.21.0",
                 "jszip": "^3.9",
                 "lodash": "^4.17",
                 "moment-locales-webpack-plugin": "^1.2.0",
                 "moment-range": "^4.0.2",
-                "ol": "^10.1",
+                "ol": "^8.1",
                 "ol-ext": "^4.0.24",
                 "select2": "^4.1.0-rc.0",
                 "select2-bootstrap-5-theme": "^1.3.0",
@@ -34,69 +33,29 @@
                 "sortablejs": "^1.15.6",
                 "sweetalert2": "11.4.8",
                 "uuid": "^11.0",
+                "vite": "^6.0.3",
+                "vite-plugin-commonjs": "^0.10.4",
+                "vite-plugin-externals": "^0.6.2",
+                "vite-plugin-static-copy": "^2.2.0",
                 "vue": "^3.4",
                 "vue-router": "^4.0"
             },
             "devDependencies": {
-                "eslint": "^9.0",
+                "@rollup/plugin-commonjs": "^28.0.1",
+                "@rollup/plugin-inject": "^5.0.5",
+                "eslint": "^9.16.0",
                 "eslint-config-prettier": "^9.0.0",
                 "eslint-plugin-prettier": "^5.0.1",
-                "prettier": "^3.3"
+                "eslint-plugin-vue": "^9.32.0",
+                "prettier": "^3.3",
+                "vite-plugin-eslint": "^1.8.1",
+                "vite-svg-loader": "^5.1.0"
             },
             "engines": {
                 "node": ">= 20.0.0",
                 "npm": ">= 10.0.0"
             }
         },
-        "node_modules/@achrinza/node-ipc": {
-            "version": "9.2.9",
-            "resolved": "https://registry.npmjs.org/@achrinza/node-ipc/-/node-ipc-9.2.9.tgz",
-            "integrity": "sha512-7s0VcTwiK/0tNOVdSX9FWMeFdOEcsAOz9HesBldXxFMaGvIak7KC2z9tV9EgsQXn6KUsWsfIkViMNuIo0GoZDQ==",
-            "dependencies": {
-                "@node-ipc/js-queue": "2.0.3",
-                "event-pubsub": "4.3.0",
-                "js-message": "1.0.7"
-            },
-            "engines": {
-                "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19 || 20 || 21 || 22"
-            }
-        },
-        "node_modules/@babel/code-frame": {
-            "version": "7.26.2",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-            "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
-            "dependencies": {
-                "@babel/helper-validator-identifier": "^7.25.9",
-                "js-tokens": "^4.0.0",
-                "picocolors": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
-        "node_modules/@babel/compat-data": {
-            "version": "7.26.3",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
-            "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
-        "node_modules/@babel/helper-compilation-targets": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
-            "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
-            "dependencies": {
-                "@babel/compat-data": "^7.25.9",
-                "@babel/helper-validator-option": "^7.25.9",
-                "browserslist": "^4.24.0",
-                "lru-cache": "^5.1.1",
-                "semver": "^6.3.1"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
         "node_modules/@babel/helper-string-parser": {
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
@@ -113,14 +72,6 @@
                 "node": ">=6.9.0"
             }
         },
-        "node_modules/@babel/helper-validator-option": {
-            "version": "7.25.9",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-            "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
         "node_modules/@babel/parser": {
             "version": "7.26.3",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
@@ -147,12 +98,364 @@
                 "node": ">=6.9.0"
             }
         },
-        "node_modules/@discoveryjs/json-ext": {
-            "version": "0.5.7",
-            "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
-            "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+        "node_modules/@esbuild/aix-ppc64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+            "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+            "cpu": [
+                "ppc64"
+            ],
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+            "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
             "engines": {
-                "node": ">=10.0.0"
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+            "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+            "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+            "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+            "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+            "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+            "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+            "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+            "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+            "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+            "cpu": [
+                "ia32"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+            "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+            "cpu": [
+                "loong64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+            "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+            "cpu": [
+                "mips64el"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+            "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+            "cpu": [
+                "ppc64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+            "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+            "cpu": [
+                "riscv64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+            "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+            "cpu": [
+                "s390x"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+            "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+            "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-arm64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+            "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+            "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+            "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+            "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+            "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+            "cpu": [
+                "ia32"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+            "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
             }
         },
         "node_modules/@eslint-community/eslint-utils": {
@@ -281,19 +584,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/@hapi/hoek": {
-            "version": "9.3.0",
-            "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
-            "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
-        },
-        "node_modules/@hapi/topo": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
-            "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
-            "dependencies": {
-                "@hapi/hoek": "^9.0.0"
-            }
-        },
         "node_modules/@humanfs/core": {
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -359,6 +649,7 @@
             "version": "0.3.5",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
             "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+            "peer": true,
             "dependencies": {
                 "@jridgewell/set-array": "^1.2.1",
                 "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -372,6 +663,7 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
             "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "peer": true,
             "engines": {
                 "node": ">=6.0.0"
             }
@@ -380,6 +672,7 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
             "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+            "peer": true,
             "engines": {
                 "node": ">=6.0.0"
             }
@@ -388,6 +681,7 @@
             "version": "0.3.6",
             "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
             "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+            "peer": true,
             "dependencies": {
                 "@jridgewell/gen-mapping": "^0.3.5",
                 "@jridgewell/trace-mapping": "^0.3.25"
@@ -402,27 +696,12 @@
             "version": "0.3.25",
             "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
             "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+            "peer": true,
             "dependencies": {
                 "@jridgewell/resolve-uri": "^3.1.0",
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
-        "node_modules/@leichtgewicht/ip-codec": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
-            "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
-        },
-        "node_modules/@node-ipc/js-queue": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
-            "integrity": "sha512-fL1wpr8hhD5gT2dA1qifeVaoDFlQR5es8tFuKqjHX+kdOtdNHnxkVZbtIrR2rxnMFvehkjaZRNV2H/gPXlb0hw==",
-            "dependencies": {
-                "easy-stack": "1.0.1"
-            },
-            "engines": {
-                "node": ">=1.0.0"
-            }
-        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -472,11 +751,6 @@
                 "url": "https://opencollective.com/unts"
             }
         },
-        "node_modules/@polka/url": {
-            "version": "1.0.0-next.28",
-            "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
-            "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw=="
-        },
         "node_modules/@popperjs/core": {
             "version": "2.11.8",
             "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -487,50 +761,297 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
-        "node_modules/@sideway/address": {
-            "version": "4.1.5",
-            "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
-            "integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
-            "dependencies": {
-                "@hapi/hoek": "^9.0.0"
-            }
-        },
-        "node_modules/@sideway/formula": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
-            "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
-        },
-        "node_modules/@sideway/pinpoint": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
-            "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
-        },
-        "node_modules/@soda/friendly-errors-webpack-plugin": {
-            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
-            "integrity": "sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==",
+        "node_modules/@rollup/plugin-commonjs": {
+            "version": "28.0.1",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.1.tgz",
+            "integrity": "sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==",
+            "dev": true,
             "dependencies": {
-                "chalk": "^3.0.0",
-                "error-stack-parser": "^2.0.6",
-                "string-width": "^4.2.3",
-                "strip-ansi": "^6.0.1"
+                "@rollup/pluginutils": "^5.0.1",
+                "commondir": "^1.0.1",
+                "estree-walker": "^2.0.2",
+                "fdir": "^6.2.0",
+                "is-reference": "1.2.1",
+                "magic-string": "^0.30.3",
+                "picomatch": "^4.0.2"
             },
             "engines": {
-                "node": ">=8.0.0"
+                "node": ">=16.0.0 || 14 >= 14.17"
             },
             "peerDependencies": {
-                "webpack": "^4.0.0 || ^5.0.0"
+                "rollup": "^2.68.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
             }
         },
-        "node_modules/@soda/get-current-script": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/@soda/get-current-script/-/get-current-script-1.0.2.tgz",
-            "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w=="
+        "node_modules/@rollup/plugin-inject": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
+            "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
+            "dev": true,
+            "dependencies": {
+                "@rollup/pluginutils": "^5.0.1",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.30.3"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/pluginutils": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+            "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
+            "dev": true,
+            "dependencies": {
+                "@types/estree": "^1.0.0",
+                "estree-walker": "^2.0.2",
+                "picomatch": "^4.0.2"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/rollup-android-arm-eabi": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.0.tgz",
+            "integrity": "sha512-wLJuPLT6grGZsy34g4N1yRfYeouklTgPhH1gWXCYspenKYD0s3cR99ZevOGw5BexMNywkbV3UkjADisozBmpPQ==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-android-arm64": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.0.tgz",
+            "integrity": "sha512-eiNkznlo0dLmVG/6wf+Ifi/v78G4d4QxRhuUl+s8EWZpDewgk7PX3ZyECUXU0Zq/Ca+8nU8cQpNC4Xgn2gFNDA==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-arm64": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.0.tgz",
+            "integrity": "sha512-lmKx9yHsppblnLQZOGxdO66gT77bvdBtr/0P+TPOseowE7D9AJoBw8ZDULRasXRWf1Z86/gcOdpBrV6VDUY36Q==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-x64": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.0.tgz",
+            "integrity": "sha512-8hxgfReVs7k9Js1uAIhS6zq3I+wKQETInnWQtgzt8JfGx51R1N6DRVy3F4o0lQwumbErRz52YqwjfvuwRxGv1w==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-freebsd-arm64": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.0.tgz",
+            "integrity": "sha512-lA1zZB3bFx5oxu9fYud4+g1mt+lYXCoch0M0V/xhqLoGatbzVse0wlSQ1UYOWKpuSu3gyN4qEc0Dxf/DII1bhQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
+        "node_modules/@rollup/rollup-freebsd-x64": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.0.tgz",
+            "integrity": "sha512-aI2plavbUDjCQB/sRbeUZWX9qp12GfYkYSJOrdYTL/C5D53bsE2/nBPuoiJKoWp5SN78v2Vr8ZPnB+/VbQ2pFA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.0.tgz",
+            "integrity": "sha512-WXveUPKtfqtaNvpf0iOb0M6xC64GzUX/OowbqfiCSXTdi/jLlOmH0Ba94/OkiY2yTGTwteo4/dsHRfh5bDCZ+w==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.0.tgz",
+            "integrity": "sha512-yLc3O2NtOQR67lI79zsSc7lk31xjwcaocvdD1twL64PK1yNaIqCeWI9L5B4MFPAVGEVjH5k1oWSGuYX1Wutxpg==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-gnu": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.0.tgz",
+            "integrity": "sha512-+P9G9hjEpHucHRXqesY+3X9hD2wh0iNnJXX/QhS/J5vTdG6VhNYMxJ2rJkQOxRUd17u5mbMLHM7yWGZdAASfcg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-musl": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.0.tgz",
+            "integrity": "sha512-1xsm2rCKSTpKzi5/ypT5wfc+4bOGa/9yI/eaOLW0oMs7qpC542APWhl4A37AENGZ6St6GBMWhCCMM6tXgTIplw==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.0.tgz",
+            "integrity": "sha512-zgWxMq8neVQeXL+ouSf6S7DoNeo6EPgi1eeqHXVKQxqPy1B2NvTbaOUWPn/7CfMKL7xvhV0/+fq/Z/J69g1WAQ==",
+            "cpu": [
+                "ppc64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.0.tgz",
+            "integrity": "sha512-VEdVYacLniRxbRJLNtzwGt5vwS0ycYshofI7cWAfj7Vg5asqj+pt+Q6x4n+AONSZW/kVm+5nklde0qs2EUwU2g==",
+            "cpu": [
+                "riscv64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-s390x-gnu": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.0.tgz",
+            "integrity": "sha512-LQlP5t2hcDJh8HV8RELD9/xlYtEzJkm/aWGsauvdO2ulfl3QYRjqrKW+mGAIWP5kdNCBheqqqYIGElSRCaXfpw==",
+            "cpu": [
+                "s390x"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-gnu": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.0.tgz",
+            "integrity": "sha512-Nl4KIzteVEKE9BdAvYoTkW19pa7LR/RBrT6F1dJCV/3pbjwDcaOq+edkP0LXuJ9kflW/xOK414X78r+K84+msw==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-musl": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.0.tgz",
+            "integrity": "sha512-eKpJr4vBDOi4goT75MvW+0dXcNUqisK4jvibY9vDdlgLx+yekxSm55StsHbxUsRxSTt3JEQvlr3cGDkzcSP8bw==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-arm64-msvc": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.0.tgz",
+            "integrity": "sha512-Vi+WR62xWGsE/Oj+mD0FNAPY2MEox3cfyG0zLpotZdehPFXwz6lypkGs5y38Jd/NVSbOD02aVad6q6QYF7i8Bg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-ia32-msvc": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.0.tgz",
+            "integrity": "sha512-kN/Vpip8emMLn/eOza+4JwqDZBL6MPNpkdaEsgUtW1NYN3DZvZqSQrbKzJcTL6hd8YNmFTn7XGWMwccOcJBL0A==",
+            "cpu": [
+                "ia32"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-x64-msvc": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.0.tgz",
+            "integrity": "sha512-Bvno2/aZT6usSa7lRDL2+hMjVAGjuqaymF1ApZm31JXzniR/hvr14jpU+/z4X6Gt5BPlzosscyJZGUvguXIqeQ==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ]
         },
         "node_modules/@trysound/sax": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
             "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+            "dev": true,
             "engines": {
                 "node": ">=10.13.0"
             }
@@ -721,44 +1242,11 @@
                 "url": "https://opencollective.com/turf"
             }
         },
-        "node_modules/@types/body-parser": {
-            "version": "1.19.5",
-            "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
-            "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
-            "dependencies": {
-                "@types/connect": "*",
-                "@types/node": "*"
-            }
-        },
-        "node_modules/@types/bonjour": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
-            "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
-            "dependencies": {
-                "@types/node": "*"
-            }
-        },
-        "node_modules/@types/connect": {
-            "version": "3.4.38",
-            "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-            "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
-            "dependencies": {
-                "@types/node": "*"
-            }
-        },
-        "node_modules/@types/connect-history-api-fallback": {
-            "version": "1.5.4",
-            "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
-            "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
-            "dependencies": {
-                "@types/express-serve-static-core": "*",
-                "@types/node": "*"
-            }
-        },
         "node_modules/@types/eslint": {
             "version": "9.6.1",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
             "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
+            "peer": true,
             "dependencies": {
                 "@types/estree": "*",
                 "@types/json-schema": "*"
@@ -768,6 +1256,7 @@
             "version": "3.7.7",
             "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
             "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+            "peer": true,
             "dependencies": {
                 "@types/eslint": "*",
                 "@types/estree": "*"
@@ -778,522 +1267,126 @@
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
             "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
         },
-        "node_modules/@types/express": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-            "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
-            "dependencies": {
-                "@types/body-parser": "*",
-                "@types/express-serve-static-core": "^4.17.33",
-                "@types/qs": "*",
-                "@types/serve-static": "*"
-            }
-        },
-        "node_modules/@types/express-serve-static-core": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz",
-            "integrity": "sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==",
-            "dependencies": {
-                "@types/node": "*",
-                "@types/qs": "*",
-                "@types/range-parser": "*",
-                "@types/send": "*"
-            }
-        },
-        "node_modules/@types/express/node_modules/@types/express-serve-static-core": {
-            "version": "4.19.6",
-            "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
-            "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
-            "dependencies": {
-                "@types/node": "*",
-                "@types/qs": "*",
-                "@types/range-parser": "*",
-                "@types/send": "*"
-            }
-        },
         "node_modules/@types/geojson": {
             "version": "7946.0.14",
             "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
             "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
         },
-        "node_modules/@types/html-minifier-terser": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-            "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
-        },
-        "node_modules/@types/http-errors": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
-            "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA=="
-        },
-        "node_modules/@types/http-proxy": {
-            "version": "1.17.15",
-            "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
-            "integrity": "sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==",
-            "dependencies": {
-                "@types/node": "*"
-            }
-        },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
         },
-        "node_modules/@types/mime": {
-            "version": "1.3.5",
-            "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-            "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
-        },
-        "node_modules/@types/minimist": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
-            "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag=="
-        },
         "node_modules/@types/node": {
             "version": "22.10.1",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
             "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
+            "peer": true,
             "dependencies": {
                 "undici-types": "~6.20.0"
             }
         },
-        "node_modules/@types/node-forge": {
-            "version": "1.3.11",
-            "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
-            "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
-            "dependencies": {
-                "@types/node": "*"
+        "node_modules/@vitejs/plugin-vue": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
+            "integrity": "sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==",
+            "engines": {
+                "node": "^18.0.0 || >=20.0.0"
+            },
+            "peerDependencies": {
+                "vite": "^5.0.0 || ^6.0.0",
+                "vue": "^3.2.25"
             }
         },
-        "node_modules/@types/normalize-package-data": {
-            "version": "2.4.4",
-            "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
-            "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA=="
-        },
-        "node_modules/@types/parse-json": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-            "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
-        },
-        "node_modules/@types/qs": {
-            "version": "6.9.17",
-            "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz",
-            "integrity": "sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ=="
-        },
-        "node_modules/@types/range-parser": {
-            "version": "1.2.7",
-            "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-            "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
-        },
-        "node_modules/@types/rbush": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
-            "integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ=="
-        },
-        "node_modules/@types/retry": {
-            "version": "0.12.0",
-            "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-            "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
+        "node_modules/@vue/compiler-core": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+            "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+            "dependencies": {
+                "@babel/parser": "^7.25.3",
+                "@vue/shared": "3.5.13",
+                "entities": "^4.5.0",
+                "estree-walker": "^2.0.2",
+                "source-map-js": "^1.2.0"
+            }
         },
-        "node_modules/@types/send": {
-            "version": "0.17.4",
-            "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
-            "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+        "node_modules/@vue/compiler-dom": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+            "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
             "dependencies": {
-                "@types/mime": "^1",
-                "@types/node": "*"
+                "@vue/compiler-core": "3.5.13",
+                "@vue/shared": "3.5.13"
             }
         },
-        "node_modules/@types/serve-index": {
-            "version": "1.9.4",
-            "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
-            "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
+        "node_modules/@vue/compiler-sfc": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+            "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
             "dependencies": {
-                "@types/express": "*"
+                "@babel/parser": "^7.25.3",
+                "@vue/compiler-core": "3.5.13",
+                "@vue/compiler-dom": "3.5.13",
+                "@vue/compiler-ssr": "3.5.13",
+                "@vue/shared": "3.5.13",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.30.11",
+                "postcss": "^8.4.48",
+                "source-map-js": "^1.2.0"
             }
         },
-        "node_modules/@types/serve-static": {
-            "version": "1.15.7",
-            "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
-            "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
+        "node_modules/@vue/compiler-ssr": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+            "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
             "dependencies": {
-                "@types/http-errors": "*",
-                "@types/node": "*",
-                "@types/send": "*"
+                "@vue/compiler-dom": "3.5.13",
+                "@vue/shared": "3.5.13"
             }
         },
-        "node_modules/@types/sockjs": {
-            "version": "0.3.36",
-            "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
-            "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+        },
+        "node_modules/@vue/reactivity": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+            "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
             "dependencies": {
-                "@types/node": "*"
+                "@vue/shared": "3.5.13"
             }
         },
-        "node_modules/@types/ws": {
-            "version": "8.5.13",
-            "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
-            "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+        "node_modules/@vue/runtime-core": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+            "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
             "dependencies": {
-                "@types/node": "*"
+                "@vue/reactivity": "3.5.13",
+                "@vue/shared": "3.5.13"
             }
         },
-        "node_modules/@vue/cli-overlay": {
-            "version": "5.0.8",
-            "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-5.0.8.tgz",
-            "integrity": "sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ=="
+        "node_modules/@vue/runtime-dom": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+            "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+            "dependencies": {
+                "@vue/reactivity": "3.5.13",
+                "@vue/runtime-core": "3.5.13",
+                "@vue/shared": "3.5.13",
+                "csstype": "^3.1.3"
+            }
         },
-        "node_modules/@vue/cli-plugin-router": {
-            "version": "5.0.8",
-            "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-5.0.8.tgz",
-            "integrity": "sha512-Gmv4dsGdAsWPqVijz3Ux2OS2HkMrWi1ENj2cYL75nUeL+Xj5HEstSqdtfZ0b1q9NCce+BFB6QnHfTBXc/fCvMg==",
+        "node_modules/@vue/server-renderer": {
+            "version": "3.5.13",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+            "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
             "dependencies": {
-                "@vue/cli-shared-utils": "^5.0.8"
+                "@vue/compiler-ssr": "3.5.13",
+                "@vue/shared": "3.5.13"
             },
             "peerDependencies": {
-                "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
-            }
-        },
-        "node_modules/@vue/cli-plugin-vuex": {
-            "version": "5.0.8",
-            "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
-            "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-            "peerDependencies": {
-                "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
-            }
-        },
-        "node_modules/@vue/cli-service": {
-            "version": "5.0.8",
-            "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-5.0.8.tgz",
-            "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
-            "dependencies": {
-                "@babel/helper-compilation-targets": "^7.12.16",
-                "@soda/friendly-errors-webpack-plugin": "^1.8.0",
-                "@soda/get-current-script": "^1.0.2",
-                "@types/minimist": "^1.2.0",
-                "@vue/cli-overlay": "^5.0.8",
-                "@vue/cli-plugin-router": "^5.0.8",
-                "@vue/cli-plugin-vuex": "^5.0.8",
-                "@vue/cli-shared-utils": "^5.0.8",
-                "@vue/component-compiler-utils": "^3.3.0",
-                "@vue/vue-loader-v15": "npm:vue-loader@^15.9.7",
-                "@vue/web-component-wrapper": "^1.3.0",
-                "acorn": "^8.0.5",
-                "acorn-walk": "^8.0.2",
-                "address": "^1.1.2",
-                "autoprefixer": "^10.2.4",
-                "browserslist": "^4.16.3",
-                "case-sensitive-paths-webpack-plugin": "^2.3.0",
-                "cli-highlight": "^2.1.10",
-                "clipboardy": "^2.3.0",
-                "cliui": "^7.0.4",
-                "copy-webpack-plugin": "^9.0.1",
-                "css-loader": "^6.5.0",
-                "css-minimizer-webpack-plugin": "^3.0.2",
-                "cssnano": "^5.0.0",
-                "debug": "^4.1.1",
-                "default-gateway": "^6.0.3",
-                "dotenv": "^10.0.0",
-                "dotenv-expand": "^5.1.0",
-                "fs-extra": "^9.1.0",
-                "globby": "^11.0.2",
-                "hash-sum": "^2.0.0",
-                "html-webpack-plugin": "^5.1.0",
-                "is-file-esm": "^1.0.0",
-                "launch-editor-middleware": "^2.2.1",
-                "lodash.defaultsdeep": "^4.6.1",
-                "lodash.mapvalues": "^4.6.0",
-                "mini-css-extract-plugin": "^2.5.3",
-                "minimist": "^1.2.5",
-                "module-alias": "^2.2.2",
-                "portfinder": "^1.0.26",
-                "postcss": "^8.2.6",
-                "postcss-loader": "^6.1.1",
-                "progress-webpack-plugin": "^1.0.12",
-                "ssri": "^8.0.1",
-                "terser-webpack-plugin": "^5.1.1",
-                "thread-loader": "^3.0.0",
-                "vue-loader": "^17.0.0",
-                "vue-style-loader": "^4.1.3",
-                "webpack": "^5.54.0",
-                "webpack-bundle-analyzer": "^4.4.0",
-                "webpack-chain": "^6.5.1",
-                "webpack-dev-server": "^4.7.3",
-                "webpack-merge": "^5.7.3",
-                "webpack-virtual-modules": "^0.4.2",
-                "whatwg-fetch": "^3.6.2"
-            },
-            "bin": {
-                "vue-cli-service": "bin/vue-cli-service.js"
-            },
-            "engines": {
-                "node": "^12.0.0 || >= 14.0.0"
-            },
-            "peerDependencies": {
-                "vue-template-compiler": "^2.0.0",
-                "webpack-sources": "*"
-            },
-            "peerDependenciesMeta": {
-                "cache-loader": {
-                    "optional": true
-                },
-                "less-loader": {
-                    "optional": true
-                },
-                "pug-plain-loader": {
-                    "optional": true
-                },
-                "raw-loader": {
-                    "optional": true
-                },
-                "sass-loader": {
-                    "optional": true
-                },
-                "stylus-loader": {
-                    "optional": true
-                },
-                "vue-template-compiler": {
-                    "optional": true
-                },
-                "webpack-sources": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@vue/cli-shared-utils": {
-            "version": "5.0.8",
-            "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-5.0.8.tgz",
-            "integrity": "sha512-uK2YB7bBVuQhjOJF+O52P9yFMXeJVj7ozqJkwYE9PlMHL1LMHjtCYm4cSdOebuPzyP+/9p0BimM/OqxsevIopQ==",
-            "dependencies": {
-                "@achrinza/node-ipc": "^9.2.5",
-                "chalk": "^4.1.2",
-                "execa": "^1.0.0",
-                "joi": "^17.4.0",
-                "launch-editor": "^2.2.1",
-                "lru-cache": "^6.0.0",
-                "node-fetch": "^2.6.7",
-                "open": "^8.0.2",
-                "ora": "^5.3.0",
-                "read-pkg": "^5.1.1",
-                "semver": "^7.3.4",
-                "strip-ansi": "^6.0.0"
-            }
-        },
-        "node_modules/@vue/cli-shared-utils/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/@vue/cli-shared-utils/node_modules/lru-cache": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/@vue/cli-shared-utils/node_modules/semver": {
-            "version": "7.6.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-            "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/@vue/cli-shared-utils/node_modules/yallist": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-        },
-        "node_modules/@vue/compiler-core": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
-            "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
-            "dependencies": {
-                "@babel/parser": "^7.25.3",
-                "@vue/shared": "3.5.13",
-                "entities": "^4.5.0",
-                "estree-walker": "^2.0.2",
-                "source-map-js": "^1.2.0"
-            }
-        },
-        "node_modules/@vue/compiler-core/node_modules/entities": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-            "engines": {
-                "node": ">=0.12"
-            },
-            "funding": {
-                "url": "https://github.com/fb55/entities?sponsor=1"
-            }
-        },
-        "node_modules/@vue/compiler-dom": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
-            "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
-            "dependencies": {
-                "@vue/compiler-core": "3.5.13",
-                "@vue/shared": "3.5.13"
-            }
-        },
-        "node_modules/@vue/compiler-sfc": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
-            "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
-            "dependencies": {
-                "@babel/parser": "^7.25.3",
-                "@vue/compiler-core": "3.5.13",
-                "@vue/compiler-dom": "3.5.13",
-                "@vue/compiler-ssr": "3.5.13",
-                "@vue/shared": "3.5.13",
-                "estree-walker": "^2.0.2",
-                "magic-string": "^0.30.11",
-                "postcss": "^8.4.48",
-                "source-map-js": "^1.2.0"
-            }
-        },
-        "node_modules/@vue/compiler-ssr": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
-            "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
-            "dependencies": {
-                "@vue/compiler-dom": "3.5.13",
-                "@vue/shared": "3.5.13"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils": {
-            "version": "3.3.0",
-            "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
-            "integrity": "sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==",
-            "dependencies": {
-                "consolidate": "^0.15.1",
-                "hash-sum": "^1.0.2",
-                "lru-cache": "^4.1.2",
-                "merge-source-map": "^1.1.0",
-                "postcss": "^7.0.36",
-                "postcss-selector-parser": "^6.0.2",
-                "source-map": "~0.6.1",
-                "vue-template-es2015-compiler": "^1.9.0"
-            },
-            "optionalDependencies": {
-                "prettier": "^1.18.2 || ^2.0.0"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/hash-sum": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-            "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/lru-cache": {
-            "version": "4.1.5",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-            "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-            "dependencies": {
-                "pseudomap": "^1.0.2",
-                "yallist": "^2.1.2"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/picocolors": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/postcss": {
-            "version": "7.0.39",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-            "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-            "dependencies": {
-                "picocolors": "^0.2.1",
-                "source-map": "^0.6.1"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/prettier": {
-            "version": "2.8.8",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-            "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-            "optional": true,
-            "bin": {
-                "prettier": "bin-prettier.js"
-            },
-            "engines": {
-                "node": ">=10.13.0"
-            },
-            "funding": {
-                "url": "https://github.com/prettier/prettier?sponsor=1"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/yallist": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-            "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
-        },
-        "node_modules/@vue/devtools-api": {
-            "version": "6.6.4",
-            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
-            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
-        },
-        "node_modules/@vue/reactivity": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
-            "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
-            "dependencies": {
-                "@vue/shared": "3.5.13"
-            }
-        },
-        "node_modules/@vue/runtime-core": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
-            "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
-            "dependencies": {
-                "@vue/reactivity": "3.5.13",
-                "@vue/shared": "3.5.13"
-            }
-        },
-        "node_modules/@vue/runtime-dom": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
-            "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
-            "dependencies": {
-                "@vue/reactivity": "3.5.13",
-                "@vue/runtime-core": "3.5.13",
-                "@vue/shared": "3.5.13",
-                "csstype": "^3.1.3"
-            }
-        },
-        "node_modules/@vue/server-renderer": {
-            "version": "3.5.13",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
-            "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
-            "dependencies": {
-                "@vue/compiler-ssr": "3.5.13",
-                "@vue/shared": "3.5.13"
-            },
-            "peerDependencies": {
-                "vue": "3.5.13"
+                "vue": "3.5.13"
             }
         },
         "node_modules/@vue/shared": {
@@ -1301,48 +1394,11 @@
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
             "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
         },
-        "node_modules/@vue/vue-loader-v15": {
-            "name": "vue-loader",
-            "version": "15.11.1",
-            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
-            "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
-            "dependencies": {
-                "@vue/component-compiler-utils": "^3.1.0",
-                "hash-sum": "^1.0.2",
-                "loader-utils": "^1.1.0",
-                "vue-hot-reload-api": "^2.3.0",
-                "vue-style-loader": "^4.1.0"
-            },
-            "peerDependencies": {
-                "css-loader": "*",
-                "webpack": "^3.0.0 || ^4.1.0 || ^5.0.0-0"
-            },
-            "peerDependenciesMeta": {
-                "cache-loader": {
-                    "optional": true
-                },
-                "prettier": {
-                    "optional": true
-                },
-                "vue-template-compiler": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/@vue/vue-loader-v15/node_modules/hash-sum": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-            "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
-        },
-        "node_modules/@vue/web-component-wrapper": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
-            "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA=="
-        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
             "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/helper-numbers": "1.13.2",
                 "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -1351,22 +1407,26 @@
         "node_modules/@webassemblyjs/floating-point-hex-parser": {
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-            "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA=="
+            "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+            "peer": true
         },
         "node_modules/@webassemblyjs/helper-api-error": {
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-            "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ=="
+            "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+            "peer": true
         },
         "node_modules/@webassemblyjs/helper-buffer": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-            "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA=="
+            "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+            "peer": true
         },
         "node_modules/@webassemblyjs/helper-numbers": {
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
             "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/floating-point-hex-parser": "1.13.2",
                 "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1376,12 +1436,14 @@
         "node_modules/@webassemblyjs/helper-wasm-bytecode": {
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-            "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA=="
+            "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+            "peer": true
         },
         "node_modules/@webassemblyjs/helper-wasm-section": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
             "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/ast": "1.14.1",
                 "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1393,6 +1455,7 @@
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
             "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+            "peer": true,
             "dependencies": {
                 "@xtuc/ieee754": "^1.2.0"
             }
@@ -1401,6 +1464,7 @@
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
             "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+            "peer": true,
             "dependencies": {
                 "@xtuc/long": "4.2.2"
             }
@@ -1408,12 +1472,14 @@
         "node_modules/@webassemblyjs/utf8": {
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-            "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ=="
+            "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+            "peer": true
         },
         "node_modules/@webassemblyjs/wasm-edit": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
             "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/ast": "1.14.1",
                 "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1429,6 +1495,7 @@
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
             "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/ast": "1.14.1",
                 "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -1441,6 +1508,7 @@
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
             "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/ast": "1.14.1",
                 "@webassemblyjs/helper-buffer": "1.14.1",
@@ -1452,6 +1520,7 @@
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
             "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/ast": "1.14.1",
                 "@webassemblyjs/helper-api-error": "1.13.2",
@@ -1465,6 +1534,7 @@
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
             "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+            "peer": true,
             "dependencies": {
                 "@webassemblyjs/ast": "1.14.1",
                 "@xtuc/long": "4.2.2"
@@ -1473,32 +1543,14 @@
         "node_modules/@xtuc/ieee754": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-            "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+            "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+            "peer": true
         },
         "node_modules/@xtuc/long": {
             "version": "4.2.2",
             "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-            "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
-        },
-        "node_modules/accepts": {
-            "version": "1.3.8",
-            "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-            "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-            "dependencies": {
-                "mime-types": "~2.1.34",
-                "negotiator": "0.6.3"
-            },
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/accepts/node_modules/negotiator": {
-            "version": "0.6.3",
-            "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-            "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-            "engines": {
-                "node": ">= 0.6"
-            }
+            "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+            "peer": true
         },
         "node_modules/acorn": {
             "version": "8.14.0",
@@ -1520,25 +1572,6 @@
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
         },
-        "node_modules/acorn-walk": {
-            "version": "8.3.4",
-            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
-            "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-            "dependencies": {
-                "acorn": "^8.11.0"
-            },
-            "engines": {
-                "node": ">=0.4.0"
-            }
-        },
-        "node_modules/address": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
-            "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
-            "engines": {
-                "node": ">= 10.0.0"
-            }
-        },
         "node_modules/ajv": {
             "version": "6.12.6",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1554,81 +1587,20 @@
                 "url": "https://github.com/sponsors/epoberezkin"
             }
         },
-        "node_modules/ajv-formats": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-            "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-            "dependencies": {
-                "ajv": "^8.0.0"
-            },
-            "peerDependencies": {
-                "ajv": "^8.0.0"
-            },
-            "peerDependenciesMeta": {
-                "ajv": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/ajv-formats/node_modules/ajv": {
-            "version": "8.17.1",
-            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3",
-                "fast-uri": "^3.0.1",
-                "json-schema-traverse": "^1.0.0",
-                "require-from-string": "^2.0.2"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/epoberezkin"
-            }
-        },
-        "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "node_modules/ajv-keywords": {
             "version": "3.5.2",
             "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
             "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+            "peer": true,
             "peerDependencies": {
                 "ajv": "^6.9.1"
             }
         },
-        "node_modules/ansi-escapes": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-            "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/ansi-html-community": {
-            "version": "0.0.8",
-            "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-            "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
-            "engines": [
-                "node >= 0.8.0"
-            ],
-            "bin": {
-                "ansi-html": "bin/ansi-html"
-            }
-        },
-        "node_modules/ansi-regex": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/ansi-styles": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
             "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
             "dependencies": {
                 "color-convert": "^2.0.1"
             },
@@ -1639,11 +1611,6 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
-        "node_modules/any-promise": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
-        },
         "node_modules/anymatch": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -1656,24 +1623,16 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/arch": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
-            "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ]
+        "node_modules/anymatch/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
         },
         "node_modules/argparse": {
             "version": "2.0.1",
@@ -1681,131 +1640,11 @@
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
             "dev": true
         },
-        "node_modules/array-flatten": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-            "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
-        },
-        "node_modules/array-union": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-            "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/async": {
-            "version": "2.6.4",
-            "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-            "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-            "dependencies": {
-                "lodash": "^4.17.14"
-            }
-        },
-        "node_modules/at-least-node": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-            "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-            "engines": {
-                "node": ">= 4.0.0"
-            }
-        },
-        "node_modules/autoprefixer": {
-            "version": "10.4.20",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-            "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/postcss/"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "dependencies": {
-                "browserslist": "^4.23.3",
-                "caniuse-lite": "^1.0.30001646",
-                "fraction.js": "^4.3.7",
-                "normalize-range": "^0.1.2",
-                "picocolors": "^1.0.1",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "bin": {
-                "autoprefixer": "bin/autoprefixer"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
-        "node_modules/babel-polyfill": {
-            "version": "6.26.0",
-            "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
-            "integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
-            "dependencies": {
-                "babel-runtime": "^6.26.0",
-                "core-js": "^2.5.0",
-                "regenerator-runtime": "^0.10.5"
-            }
-        },
-        "node_modules/babel-runtime": {
-            "version": "6.26.0",
-            "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-            "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
-            "dependencies": {
-                "core-js": "^2.4.0",
-                "regenerator-runtime": "^0.11.0"
-            }
-        },
-        "node_modules/babel-runtime/node_modules/regenerator-runtime": {
-            "version": "0.11.1",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-            "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
-        },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-        },
-        "node_modules/base64-js": {
-            "version": "1.5.1",
-            "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ]
-        },
-        "node_modules/batch": {
-            "version": "0.6.1",
-            "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-            "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
-        },
-        "node_modules/big.js": {
-            "version": "5.2.2",
-            "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-            "engines": {
-                "node": "*"
-            }
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true
         },
         "node_modules/binary-extensions": {
             "version": "2.3.0",
@@ -1818,83 +1657,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/bl": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-            "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-            "dependencies": {
-                "buffer": "^5.5.0",
-                "inherits": "^2.0.4",
-                "readable-stream": "^3.4.0"
-            }
-        },
-        "node_modules/bl/node_modules/readable-stream": {
-            "version": "3.6.2",
-            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-            "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-            "dependencies": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
-        },
-        "node_modules/bluebird": {
-            "version": "3.7.2",
-            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-            "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
-        },
-        "node_modules/body-parser": {
-            "version": "1.20.3",
-            "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-            "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
-            "dependencies": {
-                "bytes": "3.1.2",
-                "content-type": "~1.0.5",
-                "debug": "2.6.9",
-                "depd": "2.0.0",
-                "destroy": "1.2.0",
-                "http-errors": "2.0.0",
-                "iconv-lite": "0.4.24",
-                "on-finished": "2.4.1",
-                "qs": "6.13.0",
-                "raw-body": "2.5.2",
-                "type-is": "~1.6.18",
-                "unpipe": "1.0.0"
-            },
-            "engines": {
-                "node": ">= 0.8",
-                "npm": "1.2.8000 || >= 1.4.16"
-            }
-        },
-        "node_modules/body-parser/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
-        "node_modules/body-parser/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "node_modules/bonjour-service": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
-            "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3",
-                "multicast-dns": "^7.2.5"
-            }
-        },
         "node_modules/boolbase": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+            "dev": true
         },
         "node_modules/bootstrap": {
             "version": "5.3.3",
@@ -1918,6 +1685,7 @@
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "dev": true,
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -1952,6 +1720,7 @@
                     "url": "https://github.com/sponsors/ai"
                 }
             ],
+            "peer": true,
             "dependencies": {
                 "caniuse-lite": "^1.0.30001669",
                 "electron-to-chromium": "^1.5.41",
@@ -1965,93 +1734,26 @@
                 "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
             }
         },
-        "node_modules/buffer": {
-            "version": "5.7.1",
-            "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-            "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ],
-            "dependencies": {
-                "base64-js": "^1.3.1",
-                "ieee754": "^1.1.13"
-            }
-        },
         "node_modules/buffer-from": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-            "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+            "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+            "peer": true
         },
         "node_modules/but-unzip": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/but-unzip/-/but-unzip-0.1.4.tgz",
             "integrity": "sha512-Q5/55MTk0PHjxtYyZBbhIVMJP0+FNc/AOKBrrnqaxnbJR4I7w+R4CMRNYMxUQrKmCLrih7D1p4/nwZHMn7IToA=="
         },
-        "node_modules/bytes": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-            "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/call-bind": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-            "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-            "dependencies": {
-                "es-define-property": "^1.0.0",
-                "es-errors": "^1.3.0",
-                "function-bind": "^1.1.2",
-                "get-intrinsic": "^1.2.4",
-                "set-function-length": "^1.2.1"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+            "dev": true,
             "engines": {
                 "node": ">=6"
             }
         },
-        "node_modules/camel-case": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-            "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-            "dependencies": {
-                "pascal-case": "^3.1.2",
-                "tslib": "^2.0.3"
-            }
-        },
-        "node_modules/caniuse-api": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-            "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
-            "dependencies": {
-                "browserslist": "^4.0.0",
-                "caniuse-lite": "^1.0.0",
-                "lodash.memoize": "^4.1.2",
-                "lodash.uniq": "^4.5.0"
-            }
-        },
         "node_modules/caniuse-lite": {
             "version": "1.0.30001686",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
@@ -2069,27 +1771,8 @@
                     "type": "github",
                     "url": "https://github.com/sponsors/ai"
                 }
-            ]
-        },
-        "node_modules/case-sensitive-paths-webpack-plugin": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
-            "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/chalk": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-            "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
+            ],
+            "peer": true
         },
         "node_modules/chokidar": {
             "version": "3.6.0",
@@ -2129,126 +1812,16 @@
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
             "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+            "peer": true,
             "engines": {
                 "node": ">=6.0"
             }
         },
-        "node_modules/clean-css": {
-            "version": "5.3.3",
-            "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
-            "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
-            "dependencies": {
-                "source-map": "~0.6.0"
-            },
-            "engines": {
-                "node": ">= 10.0"
-            }
-        },
-        "node_modules/cli-cursor": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-            "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-            "dependencies": {
-                "restore-cursor": "^3.1.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/cli-highlight": {
-            "version": "2.1.11",
-            "resolved": "https://registry.npmjs.org/cli-highlight/-/cli-highlight-2.1.11.tgz",
-            "integrity": "sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==",
-            "dependencies": {
-                "chalk": "^4.0.0",
-                "highlight.js": "^10.7.1",
-                "mz": "^2.4.0",
-                "parse5": "^5.1.1",
-                "parse5-htmlparser2-tree-adapter": "^6.0.0",
-                "yargs": "^16.0.0"
-            },
-            "bin": {
-                "highlight": "bin/highlight"
-            },
-            "engines": {
-                "node": ">=8.0.0",
-                "npm": ">=5.0.0"
-            }
-        },
-        "node_modules/cli-highlight/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/cli-spinners": {
-            "version": "2.9.2",
-            "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
-            "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
-            "engines": {
-                "node": ">=6"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/clipboardy": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
-            "integrity": "sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==",
-            "dependencies": {
-                "arch": "^2.1.1",
-                "execa": "^1.0.0",
-                "is-wsl": "^2.1.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/cliui": {
-            "version": "7.0.4",
-            "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-            "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-            "dependencies": {
-                "string-width": "^4.2.0",
-                "strip-ansi": "^6.0.0",
-                "wrap-ansi": "^7.0.0"
-            }
-        },
-        "node_modules/clone": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-            "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
-            "engines": {
-                "node": ">=0.8"
-            }
-        },
-        "node_modules/clone-deep": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-            "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-            "dependencies": {
-                "is-plain-object": "^2.0.4",
-                "kind-of": "^6.0.2",
-                "shallow-clone": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
             "dependencies": {
                 "color-name": "~1.1.4"
             },
@@ -2259,7 +1832,8 @@
         "node_modules/color-name": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true
         },
         "node_modules/color-parse": {
             "version": "2.0.2",
@@ -2291,214 +1865,37 @@
             "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
             "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA=="
         },
-        "node_modules/colord": {
-            "version": "2.9.3",
-            "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-            "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
-        },
-        "node_modules/colorette": {
-            "version": "2.0.20",
-            "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-            "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
-        },
         "node_modules/commander": {
-            "version": "8.3.0",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-            "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "dev": true,
             "engines": {
-                "node": ">= 12"
+                "node": ">= 10"
             }
         },
-        "node_modules/compressible": {
-            "version": "2.0.18",
-            "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-            "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-            "dependencies": {
-                "mime-db": ">= 1.43.0 < 2"
-            },
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/compression": {
-            "version": "1.7.5",
-            "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.5.tgz",
-            "integrity": "sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==",
-            "dependencies": {
-                "bytes": "3.1.2",
-                "compressible": "~2.0.18",
-                "debug": "2.6.9",
-                "negotiator": "~0.6.4",
-                "on-headers": "~1.0.2",
-                "safe-buffer": "5.2.1",
-                "vary": "~1.1.2"
-            },
-            "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/compression/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
-        "node_modules/compression/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "node_modules/compression/node_modules/safe-buffer": {
-            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ]
+        "node_modules/commondir": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+            "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+            "dev": true
         },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-        },
-        "node_modules/connect-history-api-fallback": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
-            "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
-            "engines": {
-                "node": ">=0.8"
-            }
-        },
-        "node_modules/consolidate": {
-            "version": "0.15.1",
-            "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
-            "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
-            "deprecated": "Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog",
-            "dependencies": {
-                "bluebird": "^3.1.1"
-            },
-            "engines": {
-                "node": ">= 0.10.0"
-            }
-        },
-        "node_modules/content-disposition": {
-            "version": "0.5.4",
-            "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-            "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-            "dependencies": {
-                "safe-buffer": "5.2.1"
-            },
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/content-disposition/node_modules/safe-buffer": {
-            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ]
-        },
-        "node_modules/content-type": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-            "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/cookie": {
-            "version": "0.7.1",
-            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-            "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/cookie-signature": {
-            "version": "1.0.6",
-            "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-            "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-        },
-        "node_modules/copy-webpack-plugin": {
-            "version": "9.1.0",
-            "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
-            "integrity": "sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==",
-            "dependencies": {
-                "fast-glob": "^3.2.7",
-                "glob-parent": "^6.0.1",
-                "globby": "^11.0.3",
-                "normalize-path": "^3.0.0",
-                "schema-utils": "^3.1.1",
-                "serialize-javascript": "^6.0.0"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^5.1.0"
-            }
-        },
-        "node_modules/core-js": {
-            "version": "2.6.12",
-            "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-            "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-            "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-            "hasInstallScript": true
+            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+            "dev": true
         },
         "node_modules/core-util-is": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
             "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
         },
-        "node_modules/cosmiconfig": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-            "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-            "dependencies": {
-                "@types/parse-json": "^4.0.0",
-                "import-fresh": "^3.2.1",
-                "parse-json": "^5.0.0",
-                "path-type": "^4.0.0",
-                "yaml": "^1.10.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
             "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "dev": true,
             "dependencies": {
                 "path-key": "^3.1.0",
                 "shebang-command": "^2.0.0",
@@ -2508,157 +1905,16 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/css-declaration-sorter": {
-            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
-            "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
-            "engines": {
-                "node": "^10 || ^12 || >=14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.0.9"
-            }
-        },
-        "node_modules/css-loader": {
-            "version": "6.11.0",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
-            "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
-            "dependencies": {
-                "icss-utils": "^5.1.0",
-                "postcss": "^8.4.33",
-                "postcss-modules-extract-imports": "^3.1.0",
-                "postcss-modules-local-by-default": "^4.0.5",
-                "postcss-modules-scope": "^3.2.0",
-                "postcss-modules-values": "^4.0.0",
-                "postcss-value-parser": "^4.2.0",
-                "semver": "^7.5.4"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "@rspack/core": "0.x || 1.x",
-                "webpack": "^5.0.0"
-            },
-            "peerDependenciesMeta": {
-                "@rspack/core": {
-                    "optional": true
-                },
-                "webpack": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/css-loader/node_modules/semver": {
-            "version": "7.6.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-            "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/css-minimizer-webpack-plugin": {
-            "version": "3.4.1",
-            "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
-            "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
-            "dependencies": {
-                "cssnano": "^5.0.6",
-                "jest-worker": "^27.0.2",
-                "postcss": "^8.3.5",
-                "schema-utils": "^4.0.0",
-                "serialize-javascript": "^6.0.0",
-                "source-map": "^0.6.1"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^5.0.0"
-            },
-            "peerDependenciesMeta": {
-                "@parcel/css": {
-                    "optional": true
-                },
-                "clean-css": {
-                    "optional": true
-                },
-                "csso": {
-                    "optional": true
-                },
-                "esbuild": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-            "version": "8.17.1",
-            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3",
-                "fast-uri": "^3.0.1",
-                "json-schema-traverse": "^1.0.0",
-                "require-from-string": "^2.0.2"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/epoberezkin"
-            }
-        },
-        "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-            "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3"
-            },
-            "peerDependencies": {
-                "ajv": "^8.8.2"
-            }
-        },
-        "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
-        "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
-            "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
-            "dependencies": {
-                "@types/json-schema": "^7.0.9",
-                "ajv": "^8.9.0",
-                "ajv-formats": "^2.1.1",
-                "ajv-keywords": "^5.1.0"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            }
-        },
         "node_modules/css-select": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-            "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+            "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+            "dev": true,
             "dependencies": {
                 "boolbase": "^1.0.0",
-                "css-what": "^6.0.1",
-                "domhandler": "^4.3.1",
-                "domutils": "^2.8.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
                 "nth-check": "^2.0.1"
             },
             "funding": {
@@ -2666,21 +1922,23 @@
             }
         },
         "node_modules/css-tree": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-            "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+            "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+            "dev": true,
             "dependencies": {
-                "mdn-data": "2.0.14",
-                "source-map": "^0.6.1"
+                "mdn-data": "2.0.30",
+                "source-map-js": "^1.0.1"
             },
             "engines": {
-                "node": ">=8.0.0"
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
             }
         },
         "node_modules/css-what": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
             "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+            "dev": true,
             "engines": {
                 "node": ">= 6"
             },
@@ -2692,6 +1950,7 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
             "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
             "bin": {
                 "cssesc": "bin/cssesc"
             },
@@ -2699,90 +1958,39 @@
                 "node": ">=4"
             }
         },
-        "node_modules/cssnano": {
-            "version": "5.1.15",
-            "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
-            "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+        "node_modules/csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "dev": true,
             "dependencies": {
-                "cssnano-preset-default": "^5.2.14",
-                "lilconfig": "^2.0.3",
-                "yaml": "^1.10.2"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/cssnano"
+                "css-tree": "~2.2.0"
             },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/cssnano-preset-default": {
-            "version": "5.2.14",
-            "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
-            "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
-            "dependencies": {
-                "css-declaration-sorter": "^6.3.1",
-                "cssnano-utils": "^3.1.0",
-                "postcss-calc": "^8.2.3",
-                "postcss-colormin": "^5.3.1",
-                "postcss-convert-values": "^5.1.3",
-                "postcss-discard-comments": "^5.1.2",
-                "postcss-discard-duplicates": "^5.1.0",
-                "postcss-discard-empty": "^5.1.1",
-                "postcss-discard-overridden": "^5.1.0",
-                "postcss-merge-longhand": "^5.1.7",
-                "postcss-merge-rules": "^5.1.4",
-                "postcss-minify-font-values": "^5.1.0",
-                "postcss-minify-gradients": "^5.1.1",
-                "postcss-minify-params": "^5.1.4",
-                "postcss-minify-selectors": "^5.2.1",
-                "postcss-normalize-charset": "^5.1.0",
-                "postcss-normalize-display-values": "^5.1.0",
-                "postcss-normalize-positions": "^5.1.1",
-                "postcss-normalize-repeat-style": "^5.1.1",
-                "postcss-normalize-string": "^5.1.0",
-                "postcss-normalize-timing-functions": "^5.1.0",
-                "postcss-normalize-unicode": "^5.1.1",
-                "postcss-normalize-url": "^5.1.0",
-                "postcss-normalize-whitespace": "^5.1.1",
-                "postcss-ordered-values": "^5.1.3",
-                "postcss-reduce-initial": "^5.1.2",
-                "postcss-reduce-transforms": "^5.1.0",
-                "postcss-svgo": "^5.1.0",
-                "postcss-unique-selectors": "^5.1.1"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/cssnano-utils": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-            "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
             }
         },
-        "node_modules/csso": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-            "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+        "node_modules/csso/node_modules/css-tree": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+            "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+            "dev": true,
             "dependencies": {
-                "css-tree": "^1.1.2"
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
             },
             "engines": {
-                "node": ">=8.0.0"
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
             }
         },
+        "node_modules/csso/node_modules/mdn-data": {
+            "version": "2.0.28",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+            "dev": true
+        },
         "node_modules/csstype": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2855,15 +2063,11 @@
                 "jquery": ">=1.7"
             }
         },
-        "node_modules/debounce": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
-        },
         "node_modules/debug": {
             "version": "4.3.7",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
             "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+            "dev": true,
             "dependencies": {
                 "ms": "^2.1.3"
             },
@@ -2882,301 +2086,77 @@
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
             "dev": true
         },
-        "node_modules/deepmerge": {
-            "version": "1.5.2",
-            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-            "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/default-gateway": {
-            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-            "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+        "node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dev": true,
             "dependencies": {
-                "execa": "^5.0.0"
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
             },
-            "engines": {
-                "node": ">= 10"
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
             }
         },
-        "node_modules/default-gateway/node_modules/execa": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-            "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+        "node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ]
+        },
+        "node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dev": true,
             "dependencies": {
-                "cross-spawn": "^7.0.3",
-                "get-stream": "^6.0.0",
-                "human-signals": "^2.1.0",
-                "is-stream": "^2.0.0",
-                "merge-stream": "^2.0.0",
-                "npm-run-path": "^4.0.1",
-                "onetime": "^5.1.2",
-                "signal-exit": "^3.0.3",
-                "strip-final-newline": "^2.0.0"
+                "domelementtype": "^2.3.0"
             },
             "engines": {
-                "node": ">=10"
+                "node": ">= 4"
             },
             "funding": {
-                "url": "https://github.com/sindresorhus/execa?sponsor=1"
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
             }
         },
-        "node_modules/default-gateway/node_modules/get-stream": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-            "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-            "engines": {
-                "node": ">=10"
+        "node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dev": true,
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
             },
             "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
+                "url": "https://github.com/fb55/domutils?sponsor=1"
             }
         },
-        "node_modules/default-gateway/node_modules/is-stream": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-            "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/default-gateway/node_modules/npm-run-path": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-            "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-            "dependencies": {
-                "path-key": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/defaults": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
-            "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
-            "dependencies": {
-                "clone": "^1.0.2"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/define-data-property": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-            "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-            "dependencies": {
-                "es-define-property": "^1.0.0",
-                "es-errors": "^1.3.0",
-                "gopd": "^1.0.1"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
-        "node_modules/define-lazy-prop": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-            "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/depd": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-            "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/destroy": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-            "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-            "engines": {
-                "node": ">= 0.8",
-                "npm": "1.2.8000 || >= 1.4.16"
-            }
-        },
-        "node_modules/detect-node": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-            "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
-        },
-        "node_modules/dir-glob": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-            "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-            "dependencies": {
-                "path-type": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/dns-packet": {
-            "version": "5.6.1",
-            "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
-            "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
-            "dependencies": {
-                "@leichtgewicht/ip-codec": "^2.0.1"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/dom-converter": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-            "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
-            "dependencies": {
-                "utila": "~0.4"
-            }
-        },
-        "node_modules/dom-serializer": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-            "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-            "dependencies": {
-                "domelementtype": "^2.0.1",
-                "domhandler": "^4.2.0",
-                "entities": "^2.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-            }
-        },
-        "node_modules/domelementtype": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/fb55"
-                }
-            ]
-        },
-        "node_modules/domhandler": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-            "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-            "dependencies": {
-                "domelementtype": "^2.2.0"
-            },
-            "engines": {
-                "node": ">= 4"
-            },
-            "funding": {
-                "url": "https://github.com/fb55/domhandler?sponsor=1"
-            }
-        },
-        "node_modules/domutils": {
-            "version": "2.8.0",
-            "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-            "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-            "dependencies": {
-                "dom-serializer": "^1.0.1",
-                "domelementtype": "^2.2.0",
-                "domhandler": "^4.2.0"
-            },
-            "funding": {
-                "url": "https://github.com/fb55/domutils?sponsor=1"
-            }
-        },
-        "node_modules/dot-case": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-            "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-            "dependencies": {
-                "no-case": "^3.0.4",
-                "tslib": "^2.0.3"
-            }
-        },
-        "node_modules/dotenv": {
-            "version": "10.0.0",
-            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-            "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/dotenv-expand": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-            "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
-        },
-        "node_modules/duplexer": {
-            "version": "0.1.2",
-            "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-            "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
-        },
         "node_modules/earcut": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz",
-            "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
-        },
-        "node_modules/easy-stack": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.1.tgz",
-            "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
-        "node_modules/ee-first": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-            "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+            "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
         },
         "node_modules/electron-to-chromium": {
             "version": "1.5.71",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
-            "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA=="
-        },
-        "node_modules/emoji-regex": {
-            "version": "8.0.0",
-            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-        },
-        "node_modules/emojis-list": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-            "engines": {
-                "node": ">= 4"
-            }
-        },
-        "node_modules/encodeurl": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-            "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/end-of-stream": {
-            "version": "1.4.4",
-            "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-            "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-            "dependencies": {
-                "once": "^1.4.0"
-            }
+            "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
+            "peer": true
         },
         "node_modules/enhanced-resolve": {
             "version": "5.17.1",
             "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
             "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+            "peer": true,
             "dependencies": {
                 "graceful-fs": "^4.2.4",
                 "tapable": "^2.2.0"
@@ -3186,48 +2166,16 @@
             }
         },
         "node_modules/entities": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-            "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "engines": {
+                "node": ">=0.12"
+            },
             "funding": {
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
-        "node_modules/error-ex": {
-            "version": "1.3.2",
-            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-            "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-            "dependencies": {
-                "is-arrayish": "^0.2.1"
-            }
-        },
-        "node_modules/error-stack-parser": {
-            "version": "2.1.4",
-            "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
-            "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
-            "dependencies": {
-                "stackframe": "^1.3.4"
-            }
-        },
-        "node_modules/es-define-property": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-            "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-            "dependencies": {
-                "get-intrinsic": "^1.2.4"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            }
-        },
-        "node_modules/es-errors": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-            "engines": {
-                "node": ">= 0.4"
-            }
-        },
         "node_modules/es-module-lexer": {
             "version": "1.5.4",
             "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
@@ -3270,23 +2218,58 @@
                 "node": ">=0.12"
             }
         },
+        "node_modules/esbuild": {
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+            "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
+            "hasInstallScript": true,
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "optionalDependencies": {
+                "@esbuild/aix-ppc64": "0.24.0",
+                "@esbuild/android-arm": "0.24.0",
+                "@esbuild/android-arm64": "0.24.0",
+                "@esbuild/android-x64": "0.24.0",
+                "@esbuild/darwin-arm64": "0.24.0",
+                "@esbuild/darwin-x64": "0.24.0",
+                "@esbuild/freebsd-arm64": "0.24.0",
+                "@esbuild/freebsd-x64": "0.24.0",
+                "@esbuild/linux-arm": "0.24.0",
+                "@esbuild/linux-arm64": "0.24.0",
+                "@esbuild/linux-ia32": "0.24.0",
+                "@esbuild/linux-loong64": "0.24.0",
+                "@esbuild/linux-mips64el": "0.24.0",
+                "@esbuild/linux-ppc64": "0.24.0",
+                "@esbuild/linux-riscv64": "0.24.0",
+                "@esbuild/linux-s390x": "0.24.0",
+                "@esbuild/linux-x64": "0.24.0",
+                "@esbuild/netbsd-x64": "0.24.0",
+                "@esbuild/openbsd-arm64": "0.24.0",
+                "@esbuild/openbsd-x64": "0.24.0",
+                "@esbuild/sunos-x64": "0.24.0",
+                "@esbuild/win32-arm64": "0.24.0",
+                "@esbuild/win32-ia32": "0.24.0",
+                "@esbuild/win32-x64": "0.24.0"
+            }
+        },
         "node_modules/escalade": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
             "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+            "peer": true,
             "engines": {
                 "node": ">=6"
             }
         },
-        "node_modules/escape-html": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-            "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-        },
         "node_modules/escape-string-regexp": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+            "dev": true,
             "engines": {
                 "node": ">=10"
             },
@@ -3395,6 +2378,43 @@
                 }
             }
         },
+        "node_modules/eslint-plugin-vue": {
+            "version": "9.32.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.32.0.tgz",
+            "integrity": "sha512-b/Y05HYmnB/32wqVcjxjHZzNpwxj1onBOvqW89W+V+XNG1dRuaFbNd3vT9CLbr2LXjEoq+3vn8DanWf7XU22Ug==",
+            "dev": true,
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "globals": "^13.24.0",
+                "natural-compare": "^1.4.0",
+                "nth-check": "^2.1.1",
+                "postcss-selector-parser": "^6.0.15",
+                "semver": "^7.6.3",
+                "vue-eslint-parser": "^9.4.3",
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": "^14.17.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
+            }
+        },
+        "node_modules/eslint-plugin-vue/node_modules/globals": {
+            "version": "13.24.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+            "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+            "dev": true,
+            "dependencies": {
+                "type-fest": "^0.20.2"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/eslint-scope": {
             "version": "8.2.0",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
@@ -3515,14 +2535,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/etag": {
-            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-            "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
         "node_modules/event-emitter": {
             "version": "0.3.5",
             "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
@@ -3532,182 +2544,15 @@
                 "es5-ext": "~0.10.14"
             }
         },
-        "node_modules/event-pubsub": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/event-pubsub/-/event-pubsub-4.3.0.tgz",
-            "integrity": "sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==",
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
-        "node_modules/eventemitter3": {
-            "version": "4.0.7",
-            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-        },
         "node_modules/events": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
             "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+            "peer": true,
             "engines": {
                 "node": ">=0.8.x"
             }
         },
-        "node_modules/execa": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-            "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-            "dependencies": {
-                "cross-spawn": "^6.0.0",
-                "get-stream": "^4.0.0",
-                "is-stream": "^1.1.0",
-                "npm-run-path": "^2.0.0",
-                "p-finally": "^1.0.0",
-                "signal-exit": "^3.0.0",
-                "strip-eof": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/execa/node_modules/cross-spawn": {
-            "version": "6.0.6",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
-            "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
-            "dependencies": {
-                "nice-try": "^1.0.4",
-                "path-key": "^2.0.1",
-                "semver": "^5.5.0",
-                "shebang-command": "^1.2.0",
-                "which": "^1.2.9"
-            },
-            "engines": {
-                "node": ">=4.8"
-            }
-        },
-        "node_modules/execa/node_modules/path-key": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-            "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/execa/node_modules/semver": {
-            "version": "5.7.2",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-            "bin": {
-                "semver": "bin/semver"
-            }
-        },
-        "node_modules/execa/node_modules/shebang-command": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-            "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
-            "dependencies": {
-                "shebang-regex": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/execa/node_modules/shebang-regex": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-            "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/execa/node_modules/which": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-            "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-            "dependencies": {
-                "isexe": "^2.0.0"
-            },
-            "bin": {
-                "which": "bin/which"
-            }
-        },
-        "node_modules/express": {
-            "version": "4.21.2",
-            "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
-            "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
-            "dependencies": {
-                "accepts": "~1.3.8",
-                "array-flatten": "1.1.1",
-                "body-parser": "1.20.3",
-                "content-disposition": "0.5.4",
-                "content-type": "~1.0.4",
-                "cookie": "0.7.1",
-                "cookie-signature": "1.0.6",
-                "debug": "2.6.9",
-                "depd": "2.0.0",
-                "encodeurl": "~2.0.0",
-                "escape-html": "~1.0.3",
-                "etag": "~1.8.1",
-                "finalhandler": "1.3.1",
-                "fresh": "0.5.2",
-                "http-errors": "2.0.0",
-                "merge-descriptors": "1.0.3",
-                "methods": "~1.1.2",
-                "on-finished": "2.4.1",
-                "parseurl": "~1.3.3",
-                "path-to-regexp": "0.1.12",
-                "proxy-addr": "~2.0.7",
-                "qs": "6.13.0",
-                "range-parser": "~1.2.1",
-                "safe-buffer": "5.2.1",
-                "send": "0.19.0",
-                "serve-static": "1.16.2",
-                "setprototypeof": "1.2.0",
-                "statuses": "2.0.1",
-                "type-is": "~1.6.18",
-                "utils-merge": "1.0.1",
-                "vary": "~1.1.2"
-            },
-            "engines": {
-                "node": ">= 0.10.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/express"
-            }
-        },
-        "node_modules/express/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
-        "node_modules/express/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "node_modules/express/node_modules/safe-buffer": {
-            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ]
-        },
         "node_modules/ext": {
             "version": "1.7.0",
             "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
@@ -3764,11 +2609,6 @@
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
             "dev": true
         },
-        "node_modules/fast-uri": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
-            "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw=="
-        },
         "node_modules/fastq": {
             "version": "1.17.1",
             "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -3777,34 +2617,18 @@
                 "reusify": "^1.0.4"
             }
         },
-        "node_modules/faye-websocket": {
-            "version": "0.11.4",
-            "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-            "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-            "dependencies": {
-                "websocket-driver": ">=0.5.1"
-            },
-            "engines": {
-                "node": ">=0.8.0"
-            }
-        },
-        "node_modules/figures": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-            "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
-            "dependencies": {
-                "escape-string-regexp": "^1.0.5"
+        "node_modules/fdir": {
+            "version": "6.4.2",
+            "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+            "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+            "dev": true,
+            "peerDependencies": {
+                "picomatch": "^3 || ^4"
             },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/figures/node_modules/escape-string-regexp": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-            "engines": {
-                "node": ">=0.8.0"
+            "peerDependenciesMeta": {
+                "picomatch": {
+                    "optional": true
+                }
             }
         },
         "node_modules/file-entry-cache": {
@@ -3830,36 +2654,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/finalhandler": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
-            "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
-            "dependencies": {
-                "debug": "2.6.9",
-                "encodeurl": "~2.0.0",
-                "escape-html": "~1.0.3",
-                "on-finished": "2.4.1",
-                "parseurl": "~1.3.3",
-                "statuses": "2.0.1",
-                "unpipe": "~1.0.0"
-            },
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/finalhandler/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
-        "node_modules/finalhandler/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
         "node_modules/find-up": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3876,14 +2670,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/flat": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-            "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
-            "bin": {
-                "flat": "cli.js"
-            }
-        },
         "node_modules/flat-cache": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@@ -3903,77 +2689,19 @@
             "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
             "dev": true
         },
-        "node_modules/follow-redirects": {
-            "version": "1.15.9",
-            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-            "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-            "funding": [
-                {
-                    "type": "individual",
-                    "url": "https://github.com/sponsors/RubenVerborgh"
-                }
-            ],
-            "engines": {
-                "node": ">=4.0"
-            },
-            "peerDependenciesMeta": {
-                "debug": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/forwarded": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-            "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/fraction.js": {
-            "version": "4.3.7",
-            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-            "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-            "engines": {
-                "node": "*"
-            },
-            "funding": {
-                "type": "patreon",
-                "url": "https://github.com/sponsors/rawify"
-            }
-        },
-        "node_modules/fresh": {
-            "version": "0.5.2",
-            "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-            "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
         "node_modules/fs-extra": {
-            "version": "9.1.0",
-            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-            "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+            "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
             "dependencies": {
-                "at-least-node": "^1.0.0",
                 "graceful-fs": "^4.2.0",
                 "jsonfile": "^6.0.1",
                 "universalify": "^2.0.0"
             },
             "engines": {
-                "node": ">=10"
+                "node": ">=12"
             }
         },
-        "node_modules/fs-monkey": {
-            "version": "1.0.6",
-            "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
-            "integrity": "sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg=="
-        },
-        "node_modules/fs.realpath": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
-        },
         "node_modules/fsevents": {
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3987,14 +2715,6 @@
                 "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
             }
         },
-        "node_modules/function-bind": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/geotiff": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
@@ -4018,67 +2738,11 @@
             "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
             "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
         },
-        "node_modules/get-caller-file": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-            "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-            "engines": {
-                "node": "6.* || 8.* || >= 10.*"
-            }
-        },
-        "node_modules/get-intrinsic": {
-            "version": "1.2.4",
-            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-            "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-            "dependencies": {
-                "es-errors": "^1.3.0",
-                "function-bind": "^1.1.2",
-                "has-proto": "^1.0.1",
-                "has-symbols": "^1.0.3",
-                "hasown": "^2.0.0"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
-        "node_modules/get-stream": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-            "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-            "dependencies": {
-                "pump": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/glob": {
-            "version": "7.2.3",
-            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-            "deprecated": "Glob versions prior to v9 are no longer supported",
-            "dependencies": {
-                "fs.realpath": "^1.0.0",
-                "inflight": "^1.0.4",
-                "inherits": "2",
-                "minimatch": "^3.1.1",
-                "once": "^1.3.0",
-                "path-is-absolute": "^1.0.0"
-            },
-            "engines": {
-                "node": "*"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
         "node_modules/glob-parent": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
             "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
             "dependencies": {
                 "is-glob": "^4.0.3"
             },
@@ -4089,7 +2753,8 @@
         "node_modules/glob-to-regexp": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-            "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+            "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+            "peer": true
         },
         "node_modules/globals": {
             "version": "14.0.0",
@@ -4103,60 +2768,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/globby": {
-            "version": "11.1.0",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-            "dependencies": {
-                "array-union": "^2.1.0",
-                "dir-glob": "^3.0.1",
-                "fast-glob": "^3.2.9",
-                "ignore": "^5.2.0",
-                "merge2": "^1.4.1",
-                "slash": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/gopd": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-            "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/graceful-fs": {
             "version": "4.2.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
             "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
         },
-        "node_modules/gzip-size": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-            "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-            "dependencies": {
-                "duplexer": "^0.1.2"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/handle-thing": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-            "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
-        },
         "node_modules/has-flag": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -4165,2354 +2781,686 @@
                 "node": ">=8"
             }
         },
-        "node_modules/has-property-descriptors": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-            "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-            "dependencies": {
-                "es-define-property": "^1.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
+        "node_modules/ieee754": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ]
+        },
+        "node_modules/ignore": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "dev": true,
+            "engines": {
+                "node": ">= 4"
             }
         },
-        "node_modules/has-proto": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.1.0.tgz",
-            "integrity": "sha512-QLdzI9IIO1Jg7f9GT1gXpPpXArAn6cS31R1eEZqz08Gc+uQ8/XiqHWt17Fiw+2p6oTTIq5GXEpQkAlA88YRl/Q==",
+        "node_modules/immediate": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+            "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+        },
+        "node_modules/import-fresh": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+            "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+            "dev": true,
             "dependencies": {
-                "call-bind": "^1.0.7"
+                "parent-module": "^1.0.0",
+                "resolve-from": "^4.0.0"
             },
             "engines": {
-                "node": ">= 0.4"
+                "node": ">=6"
             },
             "funding": {
-                "url": "https://github.com/sponsors/ljharb"
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/has-symbols": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-            "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+        "node_modules/imurmurhash": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+            "dev": true,
             "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
+                "node": ">=0.8.19"
             }
         },
-        "node_modules/hash-sum": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
-            "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
+        "node_modules/inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
-        "node_modules/hasown": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+        "node_modules/is-binary-path": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
             "dependencies": {
-                "function-bind": "^1.1.2"
+                "binary-extensions": "^2.0.0"
             },
             "engines": {
-                "node": ">= 0.4"
+                "node": ">=8"
             }
         },
-        "node_modules/he": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-            "bin": {
-                "he": "bin/he"
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "engines": {
+                "node": ">=0.10.0"
             }
         },
-        "node_modules/highlight.js": {
-            "version": "10.7.3",
-            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-            "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
             "engines": {
-                "node": "*"
+                "node": ">=0.10.0"
             }
         },
-        "node_modules/hosted-git-info": {
-            "version": "2.8.9",
-            "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-            "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+        "node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "engines": {
+                "node": ">=0.12.0"
+            }
         },
-        "node_modules/hpack.js": {
-            "version": "2.1.6",
-            "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-            "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+        "node_modules/is-reference": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+            "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+            "dev": true,
             "dependencies": {
-                "inherits": "^2.0.1",
-                "obuf": "^1.0.0",
-                "readable-stream": "^2.0.1",
-                "wbuf": "^1.1.0"
+                "@types/estree": "*"
             }
         },
-        "node_modules/html-entities": {
-            "version": "2.5.2",
-            "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
-            "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/mdevils"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://patreon.com/mdevils"
-                }
-            ]
+        "node_modules/isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
         },
-        "node_modules/html-escaper": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-            "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true
         },
-        "node_modules/html-minifier-terser": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-            "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+        "node_modules/jest-worker": {
+            "version": "27.5.1",
+            "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+            "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+            "peer": true,
             "dependencies": {
-                "camel-case": "^4.1.2",
-                "clean-css": "^5.2.2",
-                "commander": "^8.3.0",
-                "he": "^1.2.0",
-                "param-case": "^3.0.4",
-                "relateurl": "^0.2.7",
-                "terser": "^5.10.0"
-            },
-            "bin": {
-                "html-minifier-terser": "cli.js"
+                "@types/node": "*",
+                "merge-stream": "^2.0.0",
+                "supports-color": "^8.0.0"
             },
             "engines": {
-                "node": ">=12"
+                "node": ">= 10.13.0"
             }
         },
-        "node_modules/html-webpack-plugin": {
-            "version": "5.6.3",
-            "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
-            "integrity": "sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==",
+        "node_modules/jest-worker/node_modules/supports-color": {
+            "version": "8.1.1",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+            "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+            "peer": true,
             "dependencies": {
-                "@types/html-minifier-terser": "^6.0.0",
-                "html-minifier-terser": "^6.0.2",
-                "lodash": "^4.17.21",
-                "pretty-error": "^4.0.0",
-                "tapable": "^2.0.0"
+                "has-flag": "^4.0.0"
             },
             "engines": {
-                "node": ">=10.13.0"
+                "node": ">=10"
             },
             "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/html-webpack-plugin"
-            },
-            "peerDependencies": {
-                "@rspack/core": "0.x || 1.x",
-                "webpack": "^5.20.0"
-            },
-            "peerDependenciesMeta": {
-                "@rspack/core": {
-                    "optional": true
-                },
-                "webpack": {
-                    "optional": true
-                }
+                "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
-        "node_modules/htmlparser2": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-            "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-            "funding": [
-                "https://github.com/fb55/htmlparser2?sponsor=1",
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/fb55"
-                }
-            ],
-            "dependencies": {
-                "domelementtype": "^2.0.1",
-                "domhandler": "^4.0.0",
-                "domutils": "^2.5.2",
-                "entities": "^2.0.0"
-            }
+        "node_modules/jquery": {
+            "version": "3.7.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
         },
-        "node_modules/http-deceiver": {
-            "version": "1.2.7",
-            "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-            "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
+        "node_modules/jquery-validation": {
+            "version": "1.21.0",
+            "resolved": "https://registry.npmjs.org/jquery-validation/-/jquery-validation-1.21.0.tgz",
+            "integrity": "sha512-xNot0rlUIgu7duMcQ5qb6MGkGL/Z1PQaRJQoZAURW9+a/2PGOUxY36o/WyNeP2T9R6jvWB8Z9lUVvvQWI/Zs5w==",
+            "peerDependencies": {
+                "jquery": "^1.7 || ^2.0 || ^3.1"
+            }
         },
-        "node_modules/http-errors": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-            "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+        "node_modules/js-yaml": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+            "dev": true,
             "dependencies": {
-                "depd": "2.0.0",
-                "inherits": "2.0.4",
-                "setprototypeof": "1.2.0",
-                "statuses": "2.0.1",
-                "toidentifier": "1.0.1"
+                "argparse": "^2.0.1"
             },
-            "engines": {
-                "node": ">= 0.8"
+            "bin": {
+                "js-yaml": "bin/js-yaml.js"
             }
         },
-        "node_modules/http-parser-js": {
-            "version": "0.5.8",
-            "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
-            "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+        "node_modules/json-buffer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true
+        },
+        "node_modules/json-parse-even-better-errors": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+            "peer": true
+        },
+        "node_modules/json-schema-traverse": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
+        "node_modules/json-stable-stringify-without-jsonify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+            "dev": true
         },
-        "node_modules/http-proxy": {
-            "version": "1.18.1",
-            "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-            "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+        "node_modules/jsonfile": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+            "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
             "dependencies": {
-                "eventemitter3": "^4.0.0",
-                "follow-redirects": "^1.0.0",
-                "requires-port": "^1.0.0"
+                "universalify": "^2.0.0"
             },
-            "engines": {
-                "node": ">=8.0.0"
+            "optionalDependencies": {
+                "graceful-fs": "^4.1.6"
             }
         },
-        "node_modules/http-proxy-middleware": {
-            "version": "2.0.7",
-            "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
-            "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
+        "node_modules/jszip": {
+            "version": "3.10.1",
+            "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+            "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
             "dependencies": {
-                "@types/http-proxy": "^1.17.8",
-                "http-proxy": "^1.18.1",
-                "is-glob": "^4.0.1",
-                "is-plain-obj": "^3.0.0",
-                "micromatch": "^4.0.2"
-            },
-            "engines": {
-                "node": ">=12.0.0"
-            },
-            "peerDependencies": {
-                "@types/express": "^4.17.13"
-            },
-            "peerDependenciesMeta": {
-                "@types/express": {
-                    "optional": true
-                }
+                "lie": "~3.3.0",
+                "pako": "~1.0.2",
+                "readable-stream": "~2.3.6",
+                "setimmediate": "^1.0.5"
             }
         },
-        "node_modules/human-signals": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-            "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-            "engines": {
-                "node": ">=10.17.0"
+        "node_modules/keyv": {
+            "version": "4.5.4",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
+            "dependencies": {
+                "json-buffer": "3.0.1"
             }
         },
-        "node_modules/iconv-lite": {
-            "version": "0.4.24",
-            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-            "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+        "node_modules/lerc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+            "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+        },
+        "node_modules/levn": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+            "dev": true,
             "dependencies": {
-                "safer-buffer": ">= 2.1.2 < 3"
+                "prelude-ls": "^1.2.1",
+                "type-check": "~0.4.0"
             },
             "engines": {
-                "node": ">=0.10.0"
+                "node": ">= 0.8.0"
             }
         },
-        "node_modules/icss-utils": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-            "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
+        "node_modules/lie": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+            "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+            "dependencies": {
+                "immediate": "~3.0.5"
             }
         },
-        "node_modules/ieee754": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ]
-        },
-        "node_modules/ignore": {
-            "version": "5.3.2",
-            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+        "node_modules/loader-runner": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+            "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+            "peer": true,
             "engines": {
-                "node": ">= 4"
+                "node": ">=6.11.5"
             }
         },
-        "node_modules/immediate": {
-            "version": "3.0.6",
-            "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-            "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
-        },
-        "node_modules/import-fresh": {
-            "version": "3.3.0",
-            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-            "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+        "node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
             "dependencies": {
-                "parent-module": "^1.0.0",
-                "resolve-from": "^4.0.0"
+                "p-locate": "^5.0.0"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=10"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/imurmurhash": {
-            "version": "0.1.4",
-            "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.8.19"
-            }
-        },
-        "node_modules/inflight": {
-            "version": "1.0.6",
-            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-            "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-            "dependencies": {
-                "once": "^1.3.0",
-                "wrappy": "1"
-            }
-        },
-        "node_modules/inherits": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
-        "node_modules/ipaddr.js": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
-            "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
-            "engines": {
-                "node": ">= 10"
-            }
+        "node_modules/lodash.difference": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+            "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="
         },
-        "node_modules/is-arrayish": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-            "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+        "node_modules/lodash.merge": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+            "dev": true
         },
-        "node_modules/is-binary-path": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+        "node_modules/magic-string": {
+            "version": "0.30.14",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
+            "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
             "dependencies": {
-                "binary-extensions": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=8"
+                "@jridgewell/sourcemap-codec": "^1.5.0"
             }
         },
-        "node_modules/is-core-module": {
-            "version": "2.15.1",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
-            "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-            "dependencies": {
-                "hasown": "^2.0.2"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
+        "node_modules/mdn-data": {
+            "version": "2.0.30",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+            "dev": true
         },
-        "node_modules/is-docker": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-            "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-            "bin": {
-                "is-docker": "cli.js"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
+        "node_modules/merge-stream": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+            "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+            "peer": true
         },
-        "node_modules/is-extglob": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+        "node_modules/merge2": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+            "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
             "engines": {
-                "node": ">=0.10.0"
+                "node": ">= 8"
             }
         },
-        "node_modules/is-file-esm": {
+        "node_modules/mgrs": {
             "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/is-file-esm/-/is-file-esm-1.0.0.tgz",
-            "integrity": "sha512-rZlaNKb4Mr8WlRu2A9XdeoKgnO5aA53XdPHgCKVyCrQ/rWi89RET1+bq37Ru46obaQXeiX4vmFIm1vks41hoSA==",
-            "dependencies": {
-                "read-pkg-up": "^7.0.1"
-            }
+            "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+            "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
         },
-        "node_modules/is-fullwidth-code-point": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-            "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/is-glob": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-            "dependencies": {
-                "is-extglob": "^2.1.1"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/is-interactive": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
-            "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/is-number": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-            "engines": {
-                "node": ">=0.12.0"
-            }
-        },
-        "node_modules/is-plain-obj": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-            "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/is-plain-object": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-            "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-            "dependencies": {
-                "isobject": "^3.0.1"
-            },
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/is-stream": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-            "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/is-unicode-supported": {
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
-            "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/is-wsl": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-            "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-            "dependencies": {
-                "is-docker": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/isarray": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-        },
-        "node_modules/isexe": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-        },
-        "node_modules/isobject": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-            "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/javascript-stringify": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
-            "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg=="
-        },
-        "node_modules/jest-worker": {
-            "version": "27.5.1",
-            "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-            "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-            "dependencies": {
-                "@types/node": "*",
-                "merge-stream": "^2.0.0",
-                "supports-color": "^8.0.0"
-            },
-            "engines": {
-                "node": ">= 10.13.0"
-            }
-        },
-        "node_modules/jest-worker/node_modules/supports-color": {
-            "version": "8.1.1",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-            "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-            "dependencies": {
-                "has-flag": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/supports-color?sponsor=1"
-            }
-        },
-        "node_modules/joi": {
-            "version": "17.13.3",
-            "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz",
-            "integrity": "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==",
-            "dependencies": {
-                "@hapi/hoek": "^9.3.0",
-                "@hapi/topo": "^5.1.0",
-                "@sideway/address": "^4.1.5",
-                "@sideway/formula": "^3.0.1",
-                "@sideway/pinpoint": "^2.0.0"
-            }
-        },
-        "node_modules/jquery": {
-            "version": "3.7.1",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
-        },
-        "node_modules/jquery-validation": {
-            "version": "1.21.0",
-            "resolved": "https://registry.npmjs.org/jquery-validation/-/jquery-validation-1.21.0.tgz",
-            "integrity": "sha512-xNot0rlUIgu7duMcQ5qb6MGkGL/Z1PQaRJQoZAURW9+a/2PGOUxY36o/WyNeP2T9R6jvWB8Z9lUVvvQWI/Zs5w==",
-            "peerDependencies": {
-                "jquery": "^1.7 || ^2.0 || ^3.1"
-            }
-        },
-        "node_modules/js-message": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
-            "integrity": "sha512-efJLHhLjIyKRewNS9EGZ4UpI8NguuL6fKkhRxVuMmrGV2xN/0APGdQYwLFky5w9naebSZ0OwAGp0G6/2Cg90rA==",
-            "engines": {
-                "node": ">=0.6.0"
-            }
-        },
-        "node_modules/js-tokens": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-        },
-        "node_modules/js-yaml": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-            "dev": true,
-            "dependencies": {
-                "argparse": "^2.0.1"
-            },
-            "bin": {
-                "js-yaml": "bin/js-yaml.js"
-            }
-        },
-        "node_modules/json-buffer": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-            "dev": true
-        },
-        "node_modules/json-parse-better-errors": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-            "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
-        },
-        "node_modules/json-parse-even-better-errors": {
-            "version": "2.3.1",
-            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
-        },
-        "node_modules/json-schema-traverse": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-        },
-        "node_modules/json-stable-stringify-without-jsonify": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-            "dev": true
-        },
-        "node_modules/json5": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-            "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-            "dependencies": {
-                "minimist": "^1.2.0"
-            },
-            "bin": {
-                "json5": "lib/cli.js"
-            }
-        },
-        "node_modules/jsonfile": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-            "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-            "dependencies": {
-                "universalify": "^2.0.0"
-            },
-            "optionalDependencies": {
-                "graceful-fs": "^4.1.6"
-            }
-        },
-        "node_modules/jszip": {
-            "version": "3.10.1",
-            "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
-            "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-            "dependencies": {
-                "lie": "~3.3.0",
-                "pako": "~1.0.2",
-                "readable-stream": "~2.3.6",
-                "setimmediate": "^1.0.5"
-            }
-        },
-        "node_modules/keyv": {
-            "version": "4.5.4",
-            "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-            "dev": true,
-            "dependencies": {
-                "json-buffer": "3.0.1"
-            }
-        },
-        "node_modules/kind-of": {
-            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-            "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/klona": {
-            "version": "2.0.6",
-            "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-            "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-            "engines": {
-                "node": ">= 8"
-            }
-        },
-        "node_modules/launch-editor": {
-            "version": "2.9.1",
-            "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.9.1.tgz",
-            "integrity": "sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==",
-            "dependencies": {
-                "picocolors": "^1.0.0",
-                "shell-quote": "^1.8.1"
-            }
-        },
-        "node_modules/launch-editor-middleware": {
-            "version": "2.9.1",
-            "resolved": "https://registry.npmjs.org/launch-editor-middleware/-/launch-editor-middleware-2.9.1.tgz",
-            "integrity": "sha512-4wF6AtPtaIENiZdH/a+3yW8Xni7uxzTEDd1z+gH00hUWBCSmQknFohznMd9BWhLk8MXObeB5ir69GbIr9qFW1w==",
-            "dependencies": {
-                "launch-editor": "^2.9.1"
-            }
-        },
-        "node_modules/lerc": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
-            "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
-        },
-        "node_modules/levn": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-            "dev": true,
-            "dependencies": {
-                "prelude-ls": "^1.2.1",
-                "type-check": "~0.4.0"
-            },
-            "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/lie": {
-            "version": "3.3.0",
-            "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-            "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-            "dependencies": {
-                "immediate": "~3.0.5"
-            }
-        },
-        "node_modules/lilconfig": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-            "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/lines-and-columns": {
-            "version": "1.2.4",
-            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
-        },
-        "node_modules/loader-runner": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-            "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-            "engines": {
-                "node": ">=6.11.5"
-            }
-        },
-        "node_modules/loader-utils": {
-            "version": "1.4.2",
-            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-            "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-            "dependencies": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^1.0.1"
-            },
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
-        "node_modules/locate-path": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-            "dev": true,
-            "dependencies": {
-                "p-locate": "^5.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/lodash": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-        },
-        "node_modules/lodash.defaultsdeep": {
-            "version": "4.6.1",
-            "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",
-            "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA=="
-        },
-        "node_modules/lodash.difference": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-            "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="
-        },
-        "node_modules/lodash.mapvalues": {
-            "version": "4.6.0",
-            "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
-            "integrity": "sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ=="
-        },
-        "node_modules/lodash.memoize": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-            "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
-        },
-        "node_modules/lodash.merge": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-            "dev": true
-        },
-        "node_modules/lodash.uniq": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-            "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
-        },
-        "node_modules/log-symbols": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
-            "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-            "dependencies": {
-                "chalk": "^4.1.0",
-                "is-unicode-supported": "^0.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/log-symbols/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/log-update": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz",
-            "integrity": "sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==",
-            "dependencies": {
-                "ansi-escapes": "^3.0.0",
-                "cli-cursor": "^2.0.0",
-                "wrap-ansi": "^3.0.1"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/ansi-regex": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-            "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/cli-cursor": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-            "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==",
-            "dependencies": {
-                "restore-cursor": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/is-fullwidth-code-point": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-            "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/mimic-fn": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-            "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/onetime": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
-            "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
-            "dependencies": {
-                "mimic-fn": "^1.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/restore-cursor": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
-            "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==",
-            "dependencies": {
-                "onetime": "^2.0.0",
-                "signal-exit": "^3.0.2"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/string-width": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-            "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-            "dependencies": {
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/strip-ansi": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-            "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-            "dependencies": {
-                "ansi-regex": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/log-update/node_modules/wrap-ansi": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
-            "integrity": "sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==",
-            "dependencies": {
-                "string-width": "^2.1.1",
-                "strip-ansi": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/lower-case": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-            "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-            "dependencies": {
-                "tslib": "^2.0.3"
-            }
-        },
-        "node_modules/lru-cache": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-            "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-            "dependencies": {
-                "yallist": "^3.0.2"
-            }
-        },
-        "node_modules/magic-string": {
-            "version": "0.30.14",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
-            "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
-            "dependencies": {
-                "@jridgewell/sourcemap-codec": "^1.5.0"
-            }
-        },
-        "node_modules/mdn-data": {
-            "version": "2.0.14",
-            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-            "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-        },
-        "node_modules/media-typer": {
-            "version": "0.3.0",
-            "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-            "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/memfs": {
-            "version": "3.5.3",
-            "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
-            "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
-            "dependencies": {
-                "fs-monkey": "^1.0.4"
-            },
-            "engines": {
-                "node": ">= 4.0.0"
-            }
-        },
-        "node_modules/merge-descriptors": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-            "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/merge-source-map": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
-            "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
-            "dependencies": {
-                "source-map": "^0.6.1"
-            }
-        },
-        "node_modules/merge-stream": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-            "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
-        },
-        "node_modules/merge2": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-            "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-            "engines": {
-                "node": ">= 8"
-            }
-        },
-        "node_modules/methods": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-            "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/mgrs": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
-            "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
-        },
-        "node_modules/micromatch": {
-            "version": "4.0.8",
-            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-            "dependencies": {
-                "braces": "^3.0.3",
-                "picomatch": "^2.3.1"
-            },
-            "engines": {
-                "node": ">=8.6"
-            }
-        },
-        "node_modules/mime": {
-            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-            "bin": {
-                "mime": "cli.js"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/mime-db": {
-            "version": "1.52.0",
-            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/mime-types": {
-            "version": "2.1.35",
-            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-            "dependencies": {
-                "mime-db": "1.52.0"
-            },
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/mimic-fn": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-            "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/mini-css-extract-plugin": {
-            "version": "2.9.2",
-            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz",
-            "integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==",
-            "dependencies": {
-                "schema-utils": "^4.0.0",
-                "tapable": "^2.2.1"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^5.0.0"
-            }
-        },
-        "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-            "version": "8.17.1",
-            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3",
-                "fast-uri": "^3.0.1",
-                "json-schema-traverse": "^1.0.0",
-                "require-from-string": "^2.0.2"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/epoberezkin"
-            }
-        },
-        "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-            "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3"
-            },
-            "peerDependencies": {
-                "ajv": "^8.8.2"
-            }
-        },
-        "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
-        "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
-            "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
-            "dependencies": {
-                "@types/json-schema": "^7.0.9",
-                "ajv": "^8.9.0",
-                "ajv-formats": "^2.1.1",
-                "ajv-keywords": "^5.1.0"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            }
-        },
-        "node_modules/minimalistic-assert": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-            "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
-        },
-        "node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dependencies": {
-                "brace-expansion": "^1.1.7"
-            },
-            "engines": {
-                "node": "*"
-            }
-        },
-        "node_modules/minimist": {
-            "version": "1.2.8",
-            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
-        "node_modules/minipass": {
-            "version": "3.3.6",
-            "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-            "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/minipass/node_modules/yallist": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-        },
-        "node_modules/mkdirp": {
-            "version": "0.5.6",
-            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-            "dependencies": {
-                "minimist": "^1.2.6"
-            },
-            "bin": {
-                "mkdirp": "bin/cmd.js"
-            }
-        },
-        "node_modules/module-alias": {
-            "version": "2.2.3",
-            "resolved": "https://registry.npmjs.org/module-alias/-/module-alias-2.2.3.tgz",
-            "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q=="
-        },
-        "node_modules/moment": {
-            "version": "2.30.1",
-            "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-            "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-            "peer": true,
-            "engines": {
-                "node": "*"
-            }
-        },
-        "node_modules/moment-locales-webpack-plugin": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz",
-            "integrity": "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==",
-            "dependencies": {
-                "lodash.difference": "^4.5.0"
-            },
-            "peerDependencies": {
-                "moment": "^2.8.0",
-                "webpack": "^1 || ^2 || ^3 || ^4 || ^5"
-            }
-        },
-        "node_modules/moment-range": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/moment-range/-/moment-range-4.0.2.tgz",
-            "integrity": "sha512-n8sceWwSTjmz++nFHzeNEUsYtDqjgXgcOBzsHi+BoXQU2FW+eU92LUaK8gqOiSu5PG57Q9sYj1Fz4LRDj4FtKA==",
-            "dependencies": {
-                "es6-symbol": "^3.1.0"
-            },
-            "engines": {
-                "node": "*"
-            },
-            "peerDependencies": {
-                "moment": ">= 2"
-            }
-        },
-        "node_modules/mrmime": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
-            "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/ms": {
-            "version": "2.1.3",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-        },
-        "node_modules/multicast-dns": {
-            "version": "7.2.5",
-            "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
-            "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
-            "dependencies": {
-                "dns-packet": "^5.2.2",
-                "thunky": "^1.0.2"
-            },
-            "bin": {
-                "multicast-dns": "cli.js"
-            }
-        },
-        "node_modules/mz": {
-            "version": "2.7.0",
-            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-            "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-            "dependencies": {
-                "any-promise": "^1.0.0",
-                "object-assign": "^4.0.1",
-                "thenify-all": "^1.0.0"
-            }
-        },
-        "node_modules/nanoid": {
-            "version": "3.3.8",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "bin": {
-                "nanoid": "bin/nanoid.cjs"
-            },
-            "engines": {
-                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-            }
-        },
-        "node_modules/natural-compare": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-            "dev": true
-        },
-        "node_modules/negotiator": {
-            "version": "0.6.4",
-            "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
-            "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/neo-async": {
-            "version": "2.6.2",
-            "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-            "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
-        },
-        "node_modules/next-tick": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-            "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
-        },
-        "node_modules/nice-try": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-            "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
-        },
-        "node_modules/no-case": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-            "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-            "dependencies": {
-                "lower-case": "^2.0.2",
-                "tslib": "^2.0.3"
-            }
-        },
-        "node_modules/node-fetch": {
-            "version": "2.7.0",
-            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-            "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-            "dependencies": {
-                "whatwg-url": "^5.0.0"
-            },
-            "engines": {
-                "node": "4.x || >=6.0.0"
-            },
-            "peerDependencies": {
-                "encoding": "^0.1.0"
-            },
-            "peerDependenciesMeta": {
-                "encoding": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/node-forge": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-            "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
-            "engines": {
-                "node": ">= 6.13.0"
-            }
-        },
-        "node_modules/node-releases": {
-            "version": "2.0.18",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-            "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
-        },
-        "node_modules/normalize-package-data": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-            "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-            "dependencies": {
-                "hosted-git-info": "^2.1.4",
-                "resolve": "^1.10.0",
-                "semver": "2 || 3 || 4 || 5",
-                "validate-npm-package-license": "^3.0.1"
-            }
-        },
-        "node_modules/normalize-package-data/node_modules/semver": {
-            "version": "5.7.2",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-            "bin": {
-                "semver": "bin/semver"
-            }
-        },
-        "node_modules/normalize-path": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/normalize-range": {
-            "version": "0.1.2",
-            "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-            "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/normalize-url": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-            "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/npm-run-path": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-            "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
-            "dependencies": {
-                "path-key": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/npm-run-path/node_modules/path-key": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-            "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/nth-check": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-            "dependencies": {
-                "boolbase": "^1.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/fb55/nth-check?sponsor=1"
-            }
-        },
-        "node_modules/object-assign": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/object-inspect": {
-            "version": "1.13.3",
-            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
-            "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
-        "node_modules/obuf": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-            "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
-        },
-        "node_modules/ol": {
-            "version": "10.3.1",
-            "resolved": "https://registry.npmjs.org/ol/-/ol-10.3.1.tgz",
-            "integrity": "sha512-D1nRQVLOBCRempVqBFV8pSI5H13BtnhuLDjGl+3NKdMOFyjx/UqRX/tcMspEw3LhFOSPWn1Ev+1KIRV8AlHM7A==",
-            "dependencies": {
-                "@types/rbush": "4.0.0",
-                "color-rgba": "^3.0.0",
-                "color-space": "^2.0.1",
-                "earcut": "^3.0.0",
-                "geotiff": "^2.1.3",
-                "pbf": "4.0.1",
-                "rbush": "^4.0.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/openlayers"
-            }
-        },
-        "node_modules/ol-ext": {
-            "version": "4.0.24",
-            "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.24.tgz",
-            "integrity": "sha512-VEf1+mjvbe35mMsszVsugqcvWfeGcU8TwS+GgXm3nGYqiHR7CckX2DWmM9B94QCDnrJWKKXBicfInbkoe2xT7w==",
-            "peerDependencies": {
-                "ol": ">= 5.3.0"
-            }
-        },
-        "node_modules/on-finished": {
-            "version": "2.4.1",
-            "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-            "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-            "dependencies": {
-                "ee-first": "1.1.1"
-            },
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/on-headers": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-            "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/once": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-            "dependencies": {
-                "wrappy": "1"
-            }
-        },
-        "node_modules/onetime": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-            "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-            "dependencies": {
-                "mimic-fn": "^2.1.0"
-            },
-            "engines": {
-                "node": ">=6"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/open": {
-            "version": "8.4.2",
-            "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-            "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
-            "dependencies": {
-                "define-lazy-prop": "^2.0.0",
-                "is-docker": "^2.1.1",
-                "is-wsl": "^2.2.0"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/opener": {
-            "version": "1.5.2",
-            "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-            "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-            "bin": {
-                "opener": "bin/opener-bin.js"
-            }
-        },
-        "node_modules/optionator": {
-            "version": "0.9.4",
-            "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-            "dev": true,
-            "dependencies": {
-                "deep-is": "^0.1.3",
-                "fast-levenshtein": "^2.0.6",
-                "levn": "^0.4.1",
-                "prelude-ls": "^1.2.1",
-                "type-check": "^0.4.0",
-                "word-wrap": "^1.2.5"
-            },
-            "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/ora": {
-            "version": "5.4.1",
-            "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
-            "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
-            "dependencies": {
-                "bl": "^4.1.0",
-                "chalk": "^4.1.0",
-                "cli-cursor": "^3.1.0",
-                "cli-spinners": "^2.5.0",
-                "is-interactive": "^1.0.0",
-                "is-unicode-supported": "^0.1.0",
-                "log-symbols": "^4.1.0",
-                "strip-ansi": "^6.0.0",
-                "wcwidth": "^1.0.1"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/ora/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/p-finally": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-            "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/p-limit": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-            "dev": true,
-            "dependencies": {
-                "yocto-queue": "^0.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/p-locate": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-            "dev": true,
-            "dependencies": {
-                "p-limit": "^3.0.2"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/p-retry": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
-            "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
-            "dependencies": {
-                "@types/retry": "0.12.0",
-                "retry": "^0.13.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/p-try": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-            "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/pako": {
-            "version": "1.0.11",
-            "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
-        },
-        "node_modules/param-case": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-            "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-            "dependencies": {
-                "dot-case": "^3.0.4",
-                "tslib": "^2.0.3"
-            }
-        },
-        "node_modules/parent-module": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-            "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-            "dependencies": {
-                "callsites": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/parse-headers": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
-            "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
-        },
-        "node_modules/parse-json": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-            "dependencies": {
-                "@babel/code-frame": "^7.0.0",
-                "error-ex": "^1.3.1",
-                "json-parse-even-better-errors": "^2.3.0",
-                "lines-and-columns": "^1.1.6"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/parse5": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
-            "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
-        },
-        "node_modules/parse5-htmlparser2-tree-adapter": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
-            "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
-            "dependencies": {
-                "parse5": "^6.0.1"
-            }
-        },
-        "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-            "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
-        },
-        "node_modules/parsedbf": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/parsedbf/-/parsedbf-2.0.0.tgz",
-            "integrity": "sha512-WNjKn/cwgGBkXqQLif+2VMEahcRHkBRU0/RfBWZ7Vj7snRNNW63yW1mVuuHRDyXTRxuGCzAHHBcr/Fn+U/bXjQ=="
-        },
-        "node_modules/parseurl": {
-            "version": "1.3.3",
-            "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-            "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/pascal-case": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-            "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-            "dependencies": {
-                "no-case": "^3.0.4",
-                "tslib": "^2.0.3"
-            }
-        },
-        "node_modules/path-exists": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/path-is-absolute": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/path-key": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/path-parse": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-        },
-        "node_modules/path-to-regexp": {
-            "version": "0.1.12",
-            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
-            "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
-        },
-        "node_modules/path-type": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/pbf": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
-            "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
-            "dependencies": {
-                "resolve-protobuf-schema": "^2.1.0"
-            },
-            "bin": {
-                "pbf": "bin/pbf"
-            }
-        },
-        "node_modules/picocolors": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
-        },
-        "node_modules/picomatch": {
-            "version": "2.3.1",
-            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-            "engines": {
-                "node": ">=8.6"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/jonschlinkert"
-            }
-        },
-        "node_modules/point-in-polygon-hao": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.3.tgz",
-            "integrity": "sha512-uZsWylGd8nthIYS8F7aSyM7Pot+4L/bgXheJcCNdRr4eLpsM/rMb3hIi5SqNxAVjUoDDao3QzCtdaVDzmeF9Cw==",
-            "dependencies": {
-                "robust-predicates": "^3.0.2"
-            }
-        },
-        "node_modules/polygon-clipping": {
-            "version": "0.15.7",
-            "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz",
-            "integrity": "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==",
-            "dependencies": {
-                "robust-predicates": "^3.0.2",
-                "splaytree": "^3.1.0"
-            }
-        },
-        "node_modules/portfinder": {
-            "version": "1.0.32",
-            "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
-            "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
-            "dependencies": {
-                "async": "^2.6.4",
-                "debug": "^3.2.7",
-                "mkdirp": "^0.5.6"
-            },
-            "engines": {
-                "node": ">= 0.12.0"
-            }
-        },
-        "node_modules/portfinder/node_modules/debug": {
-            "version": "3.2.7",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-            "dependencies": {
-                "ms": "^2.1.1"
-            }
-        },
-        "node_modules/postcss": {
-            "version": "8.4.49",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-            "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/postcss/"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/postcss"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "dependencies": {
-                "nanoid": "^3.3.7",
-                "picocolors": "^1.1.1",
-                "source-map-js": "^1.2.1"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14"
-            }
-        },
-        "node_modules/postcss-calc": {
-            "version": "8.2.4",
-            "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-            "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-            "dependencies": {
-                "postcss-selector-parser": "^6.0.9",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.2"
-            }
-        },
-        "node_modules/postcss-colormin": {
-            "version": "5.3.1",
-            "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
-            "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
-            "dependencies": {
-                "browserslist": "^4.21.4",
-                "caniuse-api": "^3.0.0",
-                "colord": "^2.9.1",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/postcss-convert-values": {
-            "version": "5.1.3",
-            "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
-            "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+        "node_modules/micromatch": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
             "dependencies": {
-                "browserslist": "^4.21.4",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/postcss-discard-comments": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-            "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/postcss-discard-duplicates": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-            "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/postcss-discard-empty": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-            "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
+                "braces": "^3.0.3",
+                "picomatch": "^2.3.1"
             },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/postcss-discard-overridden": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-            "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": ">=8.6"
             }
         },
-        "node_modules/postcss-loader": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
-            "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
-            "dependencies": {
-                "cosmiconfig": "^7.0.0",
-                "klona": "^2.0.5",
-                "semver": "^7.3.5"
-            },
+        "node_modules/micromatch/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
             "engines": {
-                "node": ">= 12.13.0"
+                "node": ">=8.6"
             },
             "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "postcss": "^7.0.0 || ^8.0.1",
-                "webpack": "^5.0.0"
+                "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
-        "node_modules/postcss-loader/node_modules/semver": {
-            "version": "7.6.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-            "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "peer": true,
             "engines": {
-                "node": ">=10"
+                "node": ">= 0.6"
             }
         },
-        "node_modules/postcss-merge-longhand": {
-            "version": "5.1.7",
-            "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
-            "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "peer": true,
             "dependencies": {
-                "postcss-value-parser": "^4.2.0",
-                "stylehacks": "^5.1.1"
+                "mime-db": "1.52.0"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": ">= 0.6"
             }
         },
-        "node_modules/postcss-merge-rules": {
-            "version": "5.1.4",
-            "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
-            "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+        "node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
             "dependencies": {
-                "browserslist": "^4.21.4",
-                "caniuse-api": "^3.0.0",
-                "cssnano-utils": "^3.1.0",
-                "postcss-selector-parser": "^6.0.5"
+                "brace-expansion": "^1.1.7"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": "*"
             }
         },
-        "node_modules/postcss-minify-font-values": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
-            "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
-            "dependencies": {
-                "postcss-value-parser": "^4.2.0"
-            },
+        "node_modules/moment": {
+            "version": "2.30.1",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+            "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+            "peer": true,
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": "*"
             }
         },
-        "node_modules/postcss-minify-gradients": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
-            "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+        "node_modules/moment-locales-webpack-plugin": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz",
+            "integrity": "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==",
             "dependencies": {
-                "colord": "^2.9.1",
-                "cssnano-utils": "^3.1.0",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
+                "lodash.difference": "^4.5.0"
             },
             "peerDependencies": {
-                "postcss": "^8.2.15"
+                "moment": "^2.8.0",
+                "webpack": "^1 || ^2 || ^3 || ^4 || ^5"
             }
         },
-        "node_modules/postcss-minify-params": {
-            "version": "5.1.4",
-            "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
-            "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+        "node_modules/moment-range": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/moment-range/-/moment-range-4.0.2.tgz",
+            "integrity": "sha512-n8sceWwSTjmz++nFHzeNEUsYtDqjgXgcOBzsHi+BoXQU2FW+eU92LUaK8gqOiSu5PG57Q9sYj1Fz4LRDj4FtKA==",
             "dependencies": {
-                "browserslist": "^4.21.4",
-                "cssnano-utils": "^3.1.0",
-                "postcss-value-parser": "^4.2.0"
+                "es6-symbol": "^3.1.0"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
+                "node": "*"
             },
             "peerDependencies": {
-                "postcss": "^8.2.15"
+                "moment": ">= 2"
             }
         },
-        "node_modules/postcss-minify-selectors": {
-            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
-            "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
-            "dependencies": {
-                "postcss-selector-parser": "^6.0.5"
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
             }
         },
-        "node_modules/postcss-modules-extract-imports": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
-            "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
+        "node_modules/natural-compare": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+            "dev": true
         },
-        "node_modules/postcss-modules-local-by-default": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.1.0.tgz",
-            "integrity": "sha512-rm0bdSv4jC3BDma3s9H19ZddW0aHX6EoqwDYU2IfZhRN+53QrufTRo2IdkAbRqLx4R2IYbZnbjKKxg4VN5oU9Q==",
-            "dependencies": {
-                "icss-utils": "^5.0.0",
-                "postcss-selector-parser": "^7.0.0",
-                "postcss-value-parser": "^4.1.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
+        "node_modules/neo-async": {
+            "version": "2.6.2",
+            "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+            "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+            "peer": true
         },
-        "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
-            "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
-            "dependencies": {
-                "cssesc": "^3.0.0",
-                "util-deprecate": "^1.0.2"
-            },
-            "engines": {
-                "node": ">=4"
-            }
+        "node_modules/next-tick": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+            "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
         },
-        "node_modules/postcss-modules-scope": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
-            "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
-            "dependencies": {
-                "postcss-selector-parser": "^7.0.0"
-            },
+        "node_modules/node-releases": {
+            "version": "2.0.18",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+            "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+            "peer": true
+        },
+        "node_modules/normalize-path": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
             "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
+                "node": ">=0.10.0"
             }
         },
-        "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
-            "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
+        "node_modules/nth-check": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+            "dev": true,
             "dependencies": {
-                "cssesc": "^3.0.0",
-                "util-deprecate": "^1.0.2"
+                "boolbase": "^1.0.0"
             },
-            "engines": {
-                "node": ">=4"
+            "funding": {
+                "url": "https://github.com/fb55/nth-check?sponsor=1"
             }
         },
-        "node_modules/postcss-modules-values": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-            "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+        "node_modules/ol": {
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
+            "integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
             "dependencies": {
-                "icss-utils": "^5.0.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
+                "color-rgba": "^3.0.0",
+                "color-space": "^2.0.1",
+                "earcut": "^2.2.3",
+                "geotiff": "^2.0.7",
+                "pbf": "3.2.1",
+                "rbush": "^3.0.1"
             },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/openlayers"
             }
         },
-        "node_modules/postcss-normalize-charset": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-            "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
+        "node_modules/ol-ext": {
+            "version": "4.0.24",
+            "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.24.tgz",
+            "integrity": "sha512-VEf1+mjvbe35mMsszVsugqcvWfeGcU8TwS+GgXm3nGYqiHR7CckX2DWmM9B94QCDnrJWKKXBicfInbkoe2xT7w==",
             "peerDependencies": {
-                "postcss": "^8.2.15"
+                "ol": ">= 5.3.0"
             }
         },
-        "node_modules/postcss-normalize-display-values": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
-            "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+        "node_modules/optionator": {
+            "version": "0.9.4",
+            "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+            "dev": true,
             "dependencies": {
-                "postcss-value-parser": "^4.2.0"
+                "deep-is": "^0.1.3",
+                "fast-levenshtein": "^2.0.6",
+                "levn": "^0.4.1",
+                "prelude-ls": "^1.2.1",
+                "type-check": "^0.4.0",
+                "word-wrap": "^1.2.5"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": ">= 0.8.0"
             }
         },
-        "node_modules/postcss-normalize-positions": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
-            "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+        "node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
             "dependencies": {
-                "postcss-value-parser": "^4.2.0"
+                "yocto-queue": "^0.1.0"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
+                "node": ">=10"
             },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/postcss-normalize-repeat-style": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
-            "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+        "node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
             "dependencies": {
-                "postcss-value-parser": "^4.2.0"
+                "p-limit": "^3.0.2"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
+                "node": ">=10"
             },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/postcss-normalize-string": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
-            "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+        "node_modules/pako": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+        },
+        "node_modules/parent-module": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+            "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+            "dev": true,
             "dependencies": {
-                "postcss-value-parser": "^4.2.0"
+                "callsites": "^3.0.0"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": ">=6"
             }
         },
-        "node_modules/postcss-normalize-timing-functions": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
-            "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
-            "dependencies": {
-                "postcss-value-parser": "^4.2.0"
-            },
+        "node_modules/parse-headers": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+            "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+        },
+        "node_modules/parsedbf": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/parsedbf/-/parsedbf-2.0.0.tgz",
+            "integrity": "sha512-WNjKn/cwgGBkXqQLif+2VMEahcRHkBRU0/RfBWZ7Vj7snRNNW63yW1mVuuHRDyXTRxuGCzAHHBcr/Fn+U/bXjQ=="
+        },
+        "node_modules/path-exists": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+            "dev": true,
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": ">=8"
             }
         },
-        "node_modules/postcss-normalize-unicode": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
-            "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
-            "dependencies": {
-                "browserslist": "^4.21.4",
-                "postcss-value-parser": "^4.2.0"
-            },
+        "node_modules/path-key": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": ">=8"
             }
         },
-        "node_modules/postcss-normalize-url": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
-            "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+        "node_modules/pbf": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+            "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
             "dependencies": {
-                "normalize-url": "^6.0.1",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
+                "ieee754": "^1.1.12",
+                "resolve-protobuf-schema": "^2.1.0"
             },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+            "bin": {
+                "pbf": "bin/pbf"
             }
         },
-        "node_modules/postcss-normalize-whitespace": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
-            "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
-            "dependencies": {
-                "postcss-value-parser": "^4.2.0"
-            },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+        },
+        "node_modules/picomatch": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+            "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+            "dev": true,
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
+                "node": ">=12"
             },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
-        "node_modules/postcss-ordered-values": {
-            "version": "5.1.3",
-            "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
-            "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+        "node_modules/point-in-polygon-hao": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.3.tgz",
+            "integrity": "sha512-uZsWylGd8nthIYS8F7aSyM7Pot+4L/bgXheJcCNdRr4eLpsM/rMb3hIi5SqNxAVjUoDDao3QzCtdaVDzmeF9Cw==",
             "dependencies": {
-                "cssnano-utils": "^3.1.0",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "robust-predicates": "^3.0.2"
             }
         },
-        "node_modules/postcss-reduce-initial": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
-            "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+        "node_modules/polygon-clipping": {
+            "version": "0.15.7",
+            "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz",
+            "integrity": "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==",
             "dependencies": {
-                "browserslist": "^4.21.4",
-                "caniuse-api": "^3.0.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "robust-predicates": "^3.0.2",
+                "splaytree": "^3.1.0"
             }
         },
-        "node_modules/postcss-reduce-transforms": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
-            "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+        "node_modules/postcss": {
+            "version": "8.4.49",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+            "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
             "dependencies": {
-                "postcss-value-parser": "^4.2.0"
+                "nanoid": "^3.3.7",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
             },
             "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
+                "node": "^10 || ^12 || >=14"
             }
         },
         "node_modules/postcss-selector-parser": {
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
             "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+            "dev": true,
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "util-deprecate": "^1.0.2"
@@ -6521,40 +3469,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/postcss-svgo": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
-            "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
-            "dependencies": {
-                "postcss-value-parser": "^4.2.0",
-                "svgo": "^2.7.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/postcss-unique-selectors": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
-            "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
-            "dependencies": {
-                "postcss-selector-parser": "^6.0.5"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
-        "node_modules/postcss-value-parser": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-        },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6591,327 +3505,83 @@
                 "node": ">=6.0.0"
             }
         },
-        "node_modules/pretty-error": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
-            "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
-            "dependencies": {
-                "lodash": "^4.17.20",
-                "renderkid": "^3.0.0"
-            }
-        },
         "node_modules/process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
             "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
         },
-        "node_modules/progress-webpack-plugin": {
-            "version": "1.0.16",
-            "resolved": "https://registry.npmjs.org/progress-webpack-plugin/-/progress-webpack-plugin-1.0.16.tgz",
-            "integrity": "sha512-sdiHuuKOzELcBANHfrupYo+r99iPRyOnw15qX+rNlVUqXGfjXdH4IgxriKwG1kNJwVswKQHMdj1hYZMcb9jFaA==",
-            "dependencies": {
-                "chalk": "^2.1.0",
-                "figures": "^2.0.0",
-                "log-update": "^2.3.0"
-            },
-            "engines": {
-                "node": ">= 10.13.0"
-            },
-            "peerDependencies": {
-                "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
-            }
-        },
-        "node_modules/progress-webpack-plugin/node_modules/ansi-styles": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-            "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-            "dependencies": {
-                "color-convert": "^1.9.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/progress-webpack-plugin/node_modules/chalk": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-            "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-            "dependencies": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/progress-webpack-plugin/node_modules/color-convert": {
-            "version": "1.9.3",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-            "dependencies": {
-                "color-name": "1.1.3"
-            }
-        },
-        "node_modules/progress-webpack-plugin/node_modules/color-name": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-        },
-        "node_modules/progress-webpack-plugin/node_modules/escape-string-regexp": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-            "engines": {
-                "node": ">=0.8.0"
-            }
-        },
-        "node_modules/progress-webpack-plugin/node_modules/has-flag": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-            "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/progress-webpack-plugin/node_modules/supports-color": {
-            "version": "5.5.0",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-            "dependencies": {
-                "has-flag": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/proj4": {
             "version": "2.15.0",
             "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.15.0.tgz",
-            "integrity": "sha512-LqCNEcPdI03BrCHxPLj29vsd5afsm+0sV1H/O3nTDKrv8/LA01ea1z4QADDMjUqxSXWnrmmQDjqFm1J/uZ5RLw==",
-            "dependencies": {
-                "mgrs": "1.0.0",
-                "wkt-parser": "^1.4.0"
-            }
-        },
-        "node_modules/protocol-buffers-schema": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
-            "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
-        },
-        "node_modules/proxy-addr": {
-            "version": "2.0.7",
-            "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-            "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-            "dependencies": {
-                "forwarded": "0.2.0",
-                "ipaddr.js": "1.9.1"
-            },
-            "engines": {
-                "node": ">= 0.10"
-            }
-        },
-        "node_modules/proxy-addr/node_modules/ipaddr.js": {
-            "version": "1.9.1",
-            "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-            "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-            "engines": {
-                "node": ">= 0.10"
-            }
-        },
-        "node_modules/pseudomap": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-            "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
-        },
-        "node_modules/pump": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
-            "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
-            "dependencies": {
-                "end-of-stream": "^1.1.0",
-                "once": "^1.3.1"
-            }
-        },
-        "node_modules/punycode": {
-            "version": "2.3.1",
-            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/qs": {
-            "version": "6.13.0",
-            "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-            "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-            "dependencies": {
-                "side-channel": "^1.0.6"
-            },
-            "engines": {
-                "node": ">=0.6"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
-        "node_modules/queue-microtask": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-            "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/feross"
-                },
-                {
-                    "type": "patreon",
-                    "url": "https://www.patreon.com/feross"
-                },
-                {
-                    "type": "consulting",
-                    "url": "https://feross.org/support"
-                }
-            ]
-        },
-        "node_modules/quick-lru": {
-            "version": "6.1.2",
-            "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz",
-            "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/quickselect": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
-            "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
-        },
-        "node_modules/randombytes": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-            "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-            "dependencies": {
-                "safe-buffer": "^5.1.0"
-            }
-        },
-        "node_modules/range-parser": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-            "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/raw-body": {
-            "version": "2.5.2",
-            "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-            "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-            "dependencies": {
-                "bytes": "3.1.2",
-                "http-errors": "2.0.0",
-                "iconv-lite": "0.4.24",
-                "unpipe": "1.0.0"
-            },
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
-        "node_modules/rbush": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz",
-            "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
-            "dependencies": {
-                "quickselect": "^3.0.0"
-            }
-        },
-        "node_modules/read-pkg": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-            "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-            "dependencies": {
-                "@types/normalize-package-data": "^2.4.0",
-                "normalize-package-data": "^2.5.0",
-                "parse-json": "^5.0.0",
-                "type-fest": "^0.6.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/read-pkg-up": {
-            "version": "7.0.1",
-            "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-            "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-            "dependencies": {
-                "find-up": "^4.1.0",
-                "read-pkg": "^5.2.0",
-                "type-fest": "^0.8.1"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/read-pkg-up/node_modules/find-up": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-            "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-            "dependencies": {
-                "locate-path": "^5.0.0",
-                "path-exists": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
+            "integrity": "sha512-LqCNEcPdI03BrCHxPLj29vsd5afsm+0sV1H/O3nTDKrv8/LA01ea1z4QADDMjUqxSXWnrmmQDjqFm1J/uZ5RLw==",
+            "dependencies": {
+                "mgrs": "1.0.0",
+                "wkt-parser": "^1.4.0"
             }
         },
-        "node_modules/read-pkg-up/node_modules/locate-path": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-            "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-            "dependencies": {
-                "p-locate": "^4.1.0"
-            },
+        "node_modules/protocol-buffers-schema": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+            "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+        },
+        "node_modules/punycode": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
             "engines": {
-                "node": ">=8"
+                "node": ">=6"
             }
         },
-        "node_modules/read-pkg-up/node_modules/p-limit": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-            "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-            "dependencies": {
-                "p-try": "^2.0.0"
-            },
+        "node_modules/queue-microtask": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+            "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ]
+        },
+        "node_modules/quick-lru": {
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz",
+            "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
             "engines": {
-                "node": ">=6"
+                "node": ">=12"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/read-pkg-up/node_modules/p-locate": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-            "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+        "node_modules/quickselect": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+            "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+        },
+        "node_modules/randombytes": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+            "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+            "peer": true,
             "dependencies": {
-                "p-limit": "^2.2.0"
-            },
-            "engines": {
-                "node": ">=8"
+                "safe-buffer": "^5.1.0"
             }
         },
-        "node_modules/read-pkg-up/node_modules/type-fest": {
-            "version": "0.8.1",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-            "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-            "engines": {
-                "node": ">=8"
+        "node_modules/rbush": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+            "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+            "dependencies": {
+                "quickselect": "^2.0.0"
             }
         },
         "node_modules/readable-stream": {
@@ -6939,72 +3609,22 @@
                 "node": ">=8.10.0"
             }
         },
-        "node_modules/regenerator-runtime": {
-            "version": "0.10.5",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-            "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
-        },
-        "node_modules/relateurl": {
-            "version": "0.2.7",
-            "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-            "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
-            "engines": {
-                "node": ">= 0.10"
-            }
-        },
-        "node_modules/renderkid": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
-            "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
-            "dependencies": {
-                "css-select": "^4.1.3",
-                "dom-converter": "^0.2.0",
-                "htmlparser2": "^6.1.0",
-                "lodash": "^4.17.21",
-                "strip-ansi": "^6.0.1"
-            }
-        },
-        "node_modules/require-directory": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-            "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/require-from-string": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-            "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+        "node_modules/readdirp/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
             "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/requires-port": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
-        },
-        "node_modules/resolve": {
-            "version": "1.22.8",
-            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-            "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-            "dependencies": {
-                "is-core-module": "^2.13.0",
-                "path-parse": "^1.0.7",
-                "supports-preserve-symlinks-flag": "^1.0.0"
-            },
-            "bin": {
-                "resolve": "bin/resolve"
+                "node": ">=8.6"
             },
             "funding": {
-                "url": "https://github.com/sponsors/ljharb"
+                "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
         "node_modules/resolve-from": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+            "dev": true,
             "engines": {
                 "node": ">=4"
             }
@@ -7017,26 +3637,6 @@
                 "protocol-buffers-schema": "^3.3.1"
             }
         },
-        "node_modules/restore-cursor": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-            "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-            "dependencies": {
-                "onetime": "^5.1.0",
-                "signal-exit": "^3.0.2"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/retry": {
-            "version": "0.13.1",
-            "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-            "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-            "engines": {
-                "node": ">= 4"
-            }
-        },
         "node_modules/reusify": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -7046,26 +3646,47 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/rimraf": {
+        "node_modules/robust-predicates": {
             "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-            "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-            "deprecated": "Rimraf versions prior to v4 are no longer supported",
+            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+            "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+        },
+        "node_modules/rollup": {
+            "version": "4.28.0",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.0.tgz",
+            "integrity": "sha512-G9GOrmgWHBma4YfCcX8PjH0qhXSdH8B4HDE2o4/jaxj93S4DPCIDoLcXz99eWMji4hB29UFCEd7B2gwGJDR9cQ==",
             "dependencies": {
-                "glob": "^7.1.3"
+                "@types/estree": "1.0.6"
             },
             "bin": {
-                "rimraf": "bin.js"
+                "rollup": "dist/bin/rollup"
             },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
+            "engines": {
+                "node": ">=18.0.0",
+                "npm": ">=8.0.0"
+            },
+            "optionalDependencies": {
+                "@rollup/rollup-android-arm-eabi": "4.28.0",
+                "@rollup/rollup-android-arm64": "4.28.0",
+                "@rollup/rollup-darwin-arm64": "4.28.0",
+                "@rollup/rollup-darwin-x64": "4.28.0",
+                "@rollup/rollup-freebsd-arm64": "4.28.0",
+                "@rollup/rollup-freebsd-x64": "4.28.0",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.28.0",
+                "@rollup/rollup-linux-arm-musleabihf": "4.28.0",
+                "@rollup/rollup-linux-arm64-gnu": "4.28.0",
+                "@rollup/rollup-linux-arm64-musl": "4.28.0",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.28.0",
+                "@rollup/rollup-linux-riscv64-gnu": "4.28.0",
+                "@rollup/rollup-linux-s390x-gnu": "4.28.0",
+                "@rollup/rollup-linux-x64-gnu": "4.28.0",
+                "@rollup/rollup-linux-x64-musl": "4.28.0",
+                "@rollup/rollup-win32-arm64-msvc": "4.28.0",
+                "@rollup/rollup-win32-ia32-msvc": "4.28.0",
+                "@rollup/rollup-win32-x64-msvc": "4.28.0",
+                "fsevents": "~2.3.2"
             }
         },
-        "node_modules/robust-predicates": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
-            "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
-        },
         "node_modules/run-parallel": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -7093,15 +3714,11 @@
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
-        "node_modules/safer-buffer": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-        },
         "node_modules/schema-utils": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
             "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+            "peer": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.8",
                 "ajv": "^6.12.5",
@@ -7115,11 +3732,6 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
-        "node_modules/select-hose": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-            "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
-        },
         "node_modules/select2": {
             "version": "4.1.0-rc.0",
             "resolved": "https://registry.npmjs.org/select2/-/select2-4.1.0-rc.0.tgz",
@@ -7133,203 +3745,37 @@
                 "bootstrap": "^5.1.3"
             }
         },
-        "node_modules/selfsigned": {
-            "version": "2.4.1",
-            "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
-            "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
-            "dependencies": {
-                "@types/node-forge": "^1.3.0",
-                "node-forge": "^1"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/semver": {
-            "version": "6.3.1",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+            "version": "7.6.3",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+            "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+            "dev": true,
             "bin": {
                 "semver": "bin/semver.js"
-            }
-        },
-        "node_modules/send": {
-            "version": "0.19.0",
-            "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-            "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
-            "dependencies": {
-                "debug": "2.6.9",
-                "depd": "2.0.0",
-                "destroy": "1.2.0",
-                "encodeurl": "~1.0.2",
-                "escape-html": "~1.0.3",
-                "etag": "~1.8.1",
-                "fresh": "0.5.2",
-                "http-errors": "2.0.0",
-                "mime": "1.6.0",
-                "ms": "2.1.3",
-                "on-finished": "2.4.1",
-                "range-parser": "~1.2.1",
-                "statuses": "2.0.1"
             },
             "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/send/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
-        "node_modules/send/node_modules/debug/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "node_modules/send/node_modules/encodeurl": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-            "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-            "engines": {
-                "node": ">= 0.8"
+                "node": ">=10"
             }
         },
         "node_modules/serialize-javascript": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
             "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+            "peer": true,
             "dependencies": {
                 "randombytes": "^2.1.0"
             }
         },
-        "node_modules/serve-index": {
-            "version": "1.9.1",
-            "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-            "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
-            "dependencies": {
-                "accepts": "~1.3.4",
-                "batch": "0.6.1",
-                "debug": "2.6.9",
-                "escape-html": "~1.0.3",
-                "http-errors": "~1.6.2",
-                "mime-types": "~2.1.17",
-                "parseurl": "~1.3.2"
-            },
-            "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/serve-index/node_modules/debug": {
-            "version": "2.6.9",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dependencies": {
-                "ms": "2.0.0"
-            }
-        },
-        "node_modules/serve-index/node_modules/depd": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-            "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/serve-index/node_modules/http-errors": {
-            "version": "1.6.3",
-            "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-            "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
-            "dependencies": {
-                "depd": "~1.1.2",
-                "inherits": "2.0.3",
-                "setprototypeof": "1.1.0",
-                "statuses": ">= 1.4.0 < 2"
-            },
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/serve-index/node_modules/inherits": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-            "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
-        },
-        "node_modules/serve-index/node_modules/ms": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "node_modules/serve-index/node_modules/setprototypeof": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-            "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
-        },
-        "node_modules/serve-index/node_modules/statuses": {
-            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-            "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/serve-static": {
-            "version": "1.16.2",
-            "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-            "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
-            "dependencies": {
-                "encodeurl": "~2.0.0",
-                "escape-html": "~1.0.3",
-                "parseurl": "~1.3.3",
-                "send": "0.19.0"
-            },
-            "engines": {
-                "node": ">= 0.8.0"
-            }
-        },
-        "node_modules/set-function-length": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-            "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-            "dependencies": {
-                "define-data-property": "^1.1.4",
-                "es-errors": "^1.3.0",
-                "function-bind": "^1.1.2",
-                "get-intrinsic": "^1.2.4",
-                "gopd": "^1.0.1",
-                "has-property-descriptors": "^1.0.2"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            }
-        },
         "node_modules/setimmediate": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
             "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
         },
-        "node_modules/setprototypeof": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-            "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-        },
-        "node_modules/shallow-clone": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-            "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
-            "dependencies": {
-                "kind-of": "^6.0.2"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/shebang-command": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
             "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
             "dependencies": {
                 "shebang-regex": "^3.0.0"
             },
@@ -7341,21 +3787,11 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
             "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
             "engines": {
                 "node": ">=8"
             }
         },
-        "node_modules/shell-quote": {
-            "version": "1.8.2",
-            "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
-            "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/shpjs": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/shpjs/-/shpjs-6.1.0.tgz",
@@ -7366,67 +3802,6 @@
                 "proj4": "^2.1.4"
             }
         },
-        "node_modules/side-channel": {
-            "version": "1.0.6",
-            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-            "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-            "dependencies": {
-                "call-bind": "^1.0.7",
-                "es-errors": "^1.3.0",
-                "get-intrinsic": "^1.2.4",
-                "object-inspect": "^1.13.1"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
-        "node_modules/signal-exit": {
-            "version": "3.0.7",
-            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-            "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
-        },
-        "node_modules/sirv": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
-            "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
-            "dependencies": {
-                "@polka/url": "^1.0.0-next.24",
-                "mrmime": "^2.0.0",
-                "totalist": "^3.0.0"
-            },
-            "engines": {
-                "node": ">= 10"
-            }
-        },
-        "node_modules/slash": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/sockjs": {
-            "version": "0.3.24",
-            "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
-            "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
-            "dependencies": {
-                "faye-websocket": "^0.11.3",
-                "uuid": "^8.3.2",
-                "websocket-driver": "^0.7.4"
-            }
-        },
-        "node_modules/sockjs/node_modules/uuid": {
-            "version": "8.3.2",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-            "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-            "bin": {
-                "uuid": "dist/bin/uuid"
-            }
-        },
         "node_modules/sortablejs": {
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
@@ -7436,6 +3811,7 @@
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -7452,115 +3828,23 @@
             "version": "0.5.21",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
             "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+            "peer": true,
             "dependencies": {
-                "buffer-from": "^1.0.0",
-                "source-map": "^0.6.0"
-            }
-        },
-        "node_modules/spdx-correct": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
-            "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
-            "dependencies": {
-                "spdx-expression-parse": "^3.0.0",
-                "spdx-license-ids": "^3.0.0"
-            }
-        },
-        "node_modules/spdx-exceptions": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
-            "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w=="
-        },
-        "node_modules/spdx-expression-parse": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-            "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-            "dependencies": {
-                "spdx-exceptions": "^2.1.0",
-                "spdx-license-ids": "^3.0.0"
-            }
-        },
-        "node_modules/spdx-license-ids": {
-            "version": "3.0.20",
-            "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz",
-            "integrity": "sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw=="
-        },
-        "node_modules/spdy": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-            "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-            "dependencies": {
-                "debug": "^4.1.0",
-                "handle-thing": "^2.0.0",
-                "http-deceiver": "^1.2.7",
-                "select-hose": "^2.0.0",
-                "spdy-transport": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
-        "node_modules/spdy-transport": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-            "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-            "dependencies": {
-                "debug": "^4.1.0",
-                "detect-node": "^2.0.4",
-                "hpack.js": "^2.1.6",
-                "obuf": "^1.1.2",
-                "readable-stream": "^3.0.6",
-                "wbuf": "^1.7.3"
+                "buffer-from": "^1.0.0",
+                "source-map": "^0.6.0"
             }
         },
-        "node_modules/spdy-transport/node_modules/readable-stream": {
-            "version": "3.6.2",
-            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-            "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-            "dependencies": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
+        "node_modules/sourcemap-codec": {
+            "version": "1.4.8",
+            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+            "deprecated": "Please use @jridgewell/sourcemap-codec instead"
         },
         "node_modules/splaytree": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
             "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A=="
         },
-        "node_modules/ssri": {
-            "version": "8.0.1",
-            "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-            "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
-            "dependencies": {
-                "minipass": "^3.1.1"
-            },
-            "engines": {
-                "node": ">= 8"
-            }
-        },
-        "node_modules/stable": {
-            "version": "0.1.8",
-            "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-            "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-            "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
-        },
-        "node_modules/stackframe": {
-            "version": "1.3.4",
-            "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-            "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
-        },
-        "node_modules/statuses": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-            "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
         "node_modules/string_decoder": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -7569,46 +3853,6 @@
                 "safe-buffer": "~5.1.0"
             }
         },
-        "node_modules/string-width": {
-            "version": "4.2.3",
-            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-            "dependencies": {
-                "emoji-regex": "^8.0.0",
-                "is-fullwidth-code-point": "^3.0.0",
-                "strip-ansi": "^6.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/strip-ansi": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-            "dependencies": {
-                "ansi-regex": "^5.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/strip-eof": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-            "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/strip-final-newline": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-            "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/strip-json-comments": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -7621,25 +3865,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/stylehacks": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
-            "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
-            "dependencies": {
-                "browserslist": "^4.21.4",
-                "postcss-selector-parser": "^6.0.4"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.15"
-            }
-        },
         "node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
             "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
             "dependencies": {
                 "has-flag": "^4.0.0"
             },
@@ -7647,43 +3877,29 @@
                 "node": ">=8"
             }
         },
-        "node_modules/supports-preserve-symlinks-flag": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-            "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/svgo": {
-            "version": "2.8.0",
-            "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-            "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+            "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+            "dev": true,
             "dependencies": {
                 "@trysound/sax": "0.2.0",
                 "commander": "^7.2.0",
-                "css-select": "^4.1.3",
-                "css-tree": "^1.1.3",
-                "csso": "^4.2.0",
-                "picocolors": "^1.0.0",
-                "stable": "^0.1.8"
+                "css-select": "^5.1.0",
+                "css-tree": "^2.3.1",
+                "css-what": "^6.1.0",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
             },
             "bin": {
                 "svgo": "bin/svgo"
             },
             "engines": {
-                "node": ">=10.13.0"
-            }
-        },
-        "node_modules/svgo/node_modules/commander": {
-            "version": "7.2.0",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-            "engines": {
-                "node": ">= 10"
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/svgo"
             }
         },
         "node_modules/sweepline-intersections": {
@@ -7723,6 +3939,7 @@
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
             "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+            "peer": true,
             "engines": {
                 "node": ">=6"
             }
@@ -7731,6 +3948,7 @@
             "version": "5.37.0",
             "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
             "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
+            "peer": true,
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.3",
                 "acorn": "^8.8.2",
@@ -7748,6 +3966,7 @@
             "version": "5.3.10",
             "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
             "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
+            "peer": true,
             "dependencies": {
                 "@jridgewell/trace-mapping": "^0.3.20",
                 "jest-worker": "^27.4.5",
@@ -7780,77 +3999,8 @@
         "node_modules/terser/node_modules/commander": {
             "version": "2.20.3",
             "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
-        "node_modules/thenify": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-            "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-            "dependencies": {
-                "any-promise": "^1.0.0"
-            }
-        },
-        "node_modules/thenify-all": {
-            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-            "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-            "dependencies": {
-                "thenify": ">= 3.1.0 < 4"
-            },
-            "engines": {
-                "node": ">=0.8"
-            }
-        },
-        "node_modules/thread-loader": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/thread-loader/-/thread-loader-3.0.4.tgz",
-            "integrity": "sha512-ByaL2TPb+m6yArpqQUZvP+5S1mZtXsEP7nWKKlAUTm7fCml8kB5s1uI3+eHRP2bk5mVYfRSBI7FFf+tWEyLZwA==",
-            "dependencies": {
-                "json-parse-better-errors": "^1.0.2",
-                "loader-runner": "^4.1.0",
-                "loader-utils": "^2.0.0",
-                "neo-async": "^2.6.2",
-                "schema-utils": "^3.0.0"
-            },
-            "engines": {
-                "node": ">= 10.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^4.27.0 || ^5.0.0"
-            }
-        },
-        "node_modules/thread-loader/node_modules/json5": {
-            "version": "2.2.3",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-            "bin": {
-                "json5": "lib/cli.js"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/thread-loader/node_modules/loader-utils": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-            "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-            "dependencies": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-            },
-            "engines": {
-                "node": ">=8.9.0"
-            }
-        },
-        "node_modules/thunky": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-            "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
+            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+            "peer": true
         },
         "node_modules/tinyqueue": {
             "version": "2.0.3",
@@ -7868,27 +4018,6 @@
                 "node": ">=8.0"
             }
         },
-        "node_modules/toidentifier": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-            "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-            "engines": {
-                "node": ">=0.6"
-            }
-        },
-        "node_modules/totalist": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
-            "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/tr46": {
-            "version": "0.0.3",
-            "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-            "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-        },
         "node_modules/tslib": {
             "version": "2.8.1",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -7912,29 +4041,22 @@
             }
         },
         "node_modules/type-fest": {
-            "version": "0.6.0",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-            "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+            "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+            "dev": true,
             "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/type-is": {
-            "version": "1.6.18",
-            "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-            "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-            "dependencies": {
-                "media-typer": "0.3.0",
-                "mime-types": "~2.1.24"
+                "node": ">=10"
             },
-            "engines": {
-                "node": ">= 0.6"
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/undici-types": {
             "version": "6.20.0",
             "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
-            "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="
+            "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+            "peer": true
         },
         "node_modules/universalify": {
             "version": "2.0.1",
@@ -7944,14 +4066,6 @@
                 "node": ">= 10.0.0"
             }
         },
-        "node_modules/unpipe": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-            "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
         "node_modules/update-browserslist-db": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -7970,6 +4084,7 @@
                     "url": "https://github.com/sponsors/ai"
                 }
             ],
+            "peer": true,
             "dependencies": {
                 "escalade": "^3.2.0",
                 "picocolors": "^1.1.0"
@@ -7994,19 +4109,6 @@
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
         },
-        "node_modules/utila": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-            "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
-        },
-        "node_modules/utils-merge": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-            "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-            "engines": {
-                "node": ">= 0.4.0"
-            }
-        },
         "node_modules/uuid": {
             "version": "11.0.3",
             "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz",
@@ -8019,21 +4121,232 @@
                 "uuid": "dist/esm/bin/uuid"
             }
         },
-        "node_modules/validate-npm-package-license": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-            "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+        "node_modules/vite": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.3.tgz",
+            "integrity": "sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==",
+            "dependencies": {
+                "esbuild": "^0.24.0",
+                "postcss": "^8.4.49",
+                "rollup": "^4.23.0"
+            },
+            "bin": {
+                "vite": "bin/vite.js"
+            },
+            "engines": {
+                "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/vitejs/vite?sponsor=1"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.3"
+            },
+            "peerDependencies": {
+                "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+                "jiti": ">=1.21.0",
+                "less": "*",
+                "lightningcss": "^1.21.0",
+                "sass": "*",
+                "sass-embedded": "*",
+                "stylus": "*",
+                "sugarss": "*",
+                "terser": "^5.16.0",
+                "tsx": "^4.8.1",
+                "yaml": "^2.4.2"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "jiti": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "lightningcss": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "sass-embedded": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "terser": {
+                    "optional": true
+                },
+                "tsx": {
+                    "optional": true
+                },
+                "yaml": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/vite-plugin-commonjs": {
+            "version": "0.10.4",
+            "resolved": "https://registry.npmjs.org/vite-plugin-commonjs/-/vite-plugin-commonjs-0.10.4.tgz",
+            "integrity": "sha512-eWQuvQKCcx0QYB5e5xfxBNjQKyrjEWZIR9UOkOV6JAgxVhtbZvCOF+FNC2ZijBJ3U3Px04ZMMyyMyFBVWIJ5+g==",
+            "dependencies": {
+                "acorn": "^8.12.1",
+                "magic-string": "^0.30.11",
+                "vite-plugin-dynamic-import": "^1.6.0"
+            }
+        },
+        "node_modules/vite-plugin-dynamic-import": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.6.0.tgz",
+            "integrity": "sha512-TM0sz70wfzTIo9YCxVFwS8OA9lNREsh+0vMHGSkWDTZ7bgd1Yjs5RV8EgB634l/91IsXJReg0xtmuQqP0mf+rg==",
+            "dependencies": {
+                "acorn": "^8.12.1",
+                "es-module-lexer": "^1.5.4",
+                "fast-glob": "^3.3.2",
+                "magic-string": "^0.30.11"
+            }
+        },
+        "node_modules/vite-plugin-eslint": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/vite-plugin-eslint/-/vite-plugin-eslint-1.8.1.tgz",
+            "integrity": "sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==",
+            "dev": true,
+            "dependencies": {
+                "@rollup/pluginutils": "^4.2.1",
+                "@types/eslint": "^8.4.5",
+                "rollup": "^2.77.2"
+            },
+            "peerDependencies": {
+                "eslint": ">=7",
+                "vite": ">=2"
+            }
+        },
+        "node_modules/vite-plugin-eslint/node_modules/@rollup/pluginutils": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+            "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+            "dev": true,
+            "dependencies": {
+                "estree-walker": "^2.0.1",
+                "picomatch": "^2.2.2"
+            },
+            "engines": {
+                "node": ">= 8.0.0"
+            }
+        },
+        "node_modules/vite-plugin-eslint/node_modules/@types/eslint": {
+            "version": "8.56.12",
+            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
+            "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
+            "dev": true,
+            "dependencies": {
+                "@types/estree": "*",
+                "@types/json-schema": "*"
+            }
+        },
+        "node_modules/vite-plugin-eslint/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/vite-plugin-eslint/node_modules/rollup": {
+            "version": "2.79.2",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+            "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
+            "dev": true,
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/vite-plugin-externals": {
+            "version": "0.6.2",
+            "resolved": "https://registry.npmjs.org/vite-plugin-externals/-/vite-plugin-externals-0.6.2.tgz",
+            "integrity": "sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==",
+            "dependencies": {
+                "acorn": "^8.4.0",
+                "es-module-lexer": "^0.4.1",
+                "fs-extra": "^10.0.0",
+                "magic-string": "^0.25.7"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "vite": ">=2.0.0"
+            }
+        },
+        "node_modules/vite-plugin-externals/node_modules/es-module-lexer": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
+            "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA=="
+        },
+        "node_modules/vite-plugin-externals/node_modules/magic-string": {
+            "version": "0.25.9",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+            "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+            "dependencies": {
+                "sourcemap-codec": "^1.4.8"
+            }
+        },
+        "node_modules/vite-plugin-static-copy": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-2.2.0.tgz",
+            "integrity": "sha512-ytMrKdR9iWEYHbUxs6x53m+MRl4SJsOSoMu1U1+Pfg0DjPeMlsRVx3RR5jvoonineDquIue83Oq69JvNsFSU5w==",
+            "dependencies": {
+                "chokidar": "^3.5.3",
+                "fast-glob": "^3.2.11",
+                "fs-extra": "^11.1.0",
+                "picocolors": "^1.0.0"
+            },
+            "engines": {
+                "node": "^18.0.0 || >=20.0.0"
+            },
+            "peerDependencies": {
+                "vite": "^5.0.0 || ^6.0.0"
+            }
+        },
+        "node_modules/vite-plugin-static-copy/node_modules/fs-extra": {
+            "version": "11.2.0",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+            "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
             "dependencies": {
-                "spdx-correct": "^3.0.0",
-                "spdx-expression-parse": "^3.0.0"
+                "graceful-fs": "^4.2.0",
+                "jsonfile": "^6.0.1",
+                "universalify": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=14.14"
             }
         },
-        "node_modules/vary": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-            "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-            "engines": {
-                "node": ">= 0.8"
+        "node_modules/vite-svg-loader": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
+            "integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
+            "dev": true,
+            "dependencies": {
+                "svgo": "^3.0.2"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2.13"
             }
         },
         "node_modules/vue": {
@@ -8056,45 +4369,73 @@
                 }
             }
         },
-        "node_modules/vue-hot-reload-api": {
-            "version": "2.3.4",
-            "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
-            "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
-        },
-        "node_modules/vue-loader": {
-            "version": "17.4.2",
-            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",
-            "integrity": "sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==",
+        "node_modules/vue-eslint-parser": {
+            "version": "9.4.3",
+            "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
+            "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
+            "dev": true,
             "dependencies": {
-                "chalk": "^4.1.0",
-                "hash-sum": "^2.0.0",
-                "watchpack": "^2.4.0"
+                "debug": "^4.3.4",
+                "eslint-scope": "^7.1.1",
+                "eslint-visitor-keys": "^3.3.0",
+                "espree": "^9.3.1",
+                "esquery": "^1.4.0",
+                "lodash": "^4.17.21",
+                "semver": "^7.3.6"
+            },
+            "engines": {
+                "node": "^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/mysticatea"
             },
             "peerDependencies": {
-                "webpack": "^4.1.0 || ^5.0.0-0"
+                "eslint": ">=6.0.0"
+            }
+        },
+        "node_modules/vue-eslint-parser/node_modules/eslint-scope": {
+            "version": "7.2.2",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+            "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+            "dev": true,
+            "dependencies": {
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
             },
-            "peerDependenciesMeta": {
-                "@vue/compiler-sfc": {
-                    "optional": true
-                },
-                "vue": {
-                    "optional": true
-                }
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/vue-loader/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+        "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "dev": true,
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/vue-eslint-parser/node_modules/espree": {
+            "version": "9.6.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+            "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+            "dev": true,
             "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
+                "acorn": "^8.9.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^3.4.1"
             },
             "engines": {
-                "node": ">=10"
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             },
             "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
+                "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/vue-router": {
@@ -8111,29 +4452,11 @@
                 "vue": "^3.2.0"
             }
         },
-        "node_modules/vue-style-loader": {
-            "version": "4.1.3",
-            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
-            "integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
-            "dependencies": {
-                "hash-sum": "^1.0.2",
-                "loader-utils": "^1.0.2"
-            }
-        },
-        "node_modules/vue-style-loader/node_modules/hash-sum": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-            "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
-        },
-        "node_modules/vue-template-es2015-compiler": {
-            "version": "1.9.1",
-            "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
-            "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
-        },
         "node_modules/watchpack": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
             "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
+            "peer": true,
             "dependencies": {
                 "glob-to-regexp": "^0.4.1",
                 "graceful-fs": "^4.1.2"
@@ -8142,36 +4465,16 @@
                 "node": ">=10.13.0"
             }
         },
-        "node_modules/wbuf": {
-            "version": "1.7.3",
-            "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-            "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-            "dependencies": {
-                "minimalistic-assert": "^1.0.0"
-            }
-        },
-        "node_modules/wcwidth": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-            "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
-            "dependencies": {
-                "defaults": "^1.0.3"
-            }
-        },
         "node_modules/web-worker": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
             "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
         },
-        "node_modules/webidl-conversions": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-            "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-        },
         "node_modules/webpack": {
             "version": "5.97.1",
             "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.1.tgz",
             "integrity": "sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==",
+            "peer": true,
             "dependencies": {
                 "@types/eslint-scope": "^3.7.7",
                 "@types/estree": "^1.0.6",
@@ -8213,280 +4516,20 @@
                 }
             }
         },
-        "node_modules/webpack-bundle-analyzer": {
-            "version": "4.10.2",
-            "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
-            "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==",
-            "dependencies": {
-                "@discoveryjs/json-ext": "0.5.7",
-                "acorn": "^8.0.4",
-                "acorn-walk": "^8.0.0",
-                "commander": "^7.2.0",
-                "debounce": "^1.2.1",
-                "escape-string-regexp": "^4.0.0",
-                "gzip-size": "^6.0.0",
-                "html-escaper": "^2.0.2",
-                "opener": "^1.5.2",
-                "picocolors": "^1.0.0",
-                "sirv": "^2.0.3",
-                "ws": "^7.3.1"
-            },
-            "bin": {
-                "webpack-bundle-analyzer": "lib/bin/analyzer.js"
-            },
-            "engines": {
-                "node": ">= 10.13.0"
-            }
-        },
-        "node_modules/webpack-bundle-analyzer/node_modules/commander": {
-            "version": "7.2.0",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-            "engines": {
-                "node": ">= 10"
-            }
-        },
-        "node_modules/webpack-chain": {
-            "version": "6.5.1",
-            "resolved": "https://registry.npmjs.org/webpack-chain/-/webpack-chain-6.5.1.tgz",
-            "integrity": "sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==",
-            "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-            "dependencies": {
-                "deepmerge": "^1.5.2",
-                "javascript-stringify": "^2.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/webpack-dev-middleware": {
-            "version": "5.3.4",
-            "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
-            "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
-            "dependencies": {
-                "colorette": "^2.0.10",
-                "memfs": "^3.4.3",
-                "mime-types": "^2.1.31",
-                "range-parser": "^1.2.1",
-                "schema-utils": "^4.0.0"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^4.0.0 || ^5.0.0"
-            }
-        },
-        "node_modules/webpack-dev-middleware/node_modules/ajv": {
-            "version": "8.17.1",
-            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3",
-                "fast-uri": "^3.0.1",
-                "json-schema-traverse": "^1.0.0",
-                "require-from-string": "^2.0.2"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/epoberezkin"
-            }
-        },
-        "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-            "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3"
-            },
-            "peerDependencies": {
-                "ajv": "^8.8.2"
-            }
-        },
-        "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
-        "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
-            "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
-            "dependencies": {
-                "@types/json-schema": "^7.0.9",
-                "ajv": "^8.9.0",
-                "ajv-formats": "^2.1.1",
-                "ajv-keywords": "^5.1.0"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            }
-        },
-        "node_modules/webpack-dev-server": {
-            "version": "4.15.2",
-            "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
-            "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
-            "dependencies": {
-                "@types/bonjour": "^3.5.9",
-                "@types/connect-history-api-fallback": "^1.3.5",
-                "@types/express": "^4.17.13",
-                "@types/serve-index": "^1.9.1",
-                "@types/serve-static": "^1.13.10",
-                "@types/sockjs": "^0.3.33",
-                "@types/ws": "^8.5.5",
-                "ansi-html-community": "^0.0.8",
-                "bonjour-service": "^1.0.11",
-                "chokidar": "^3.5.3",
-                "colorette": "^2.0.10",
-                "compression": "^1.7.4",
-                "connect-history-api-fallback": "^2.0.0",
-                "default-gateway": "^6.0.3",
-                "express": "^4.17.3",
-                "graceful-fs": "^4.2.6",
-                "html-entities": "^2.3.2",
-                "http-proxy-middleware": "^2.0.3",
-                "ipaddr.js": "^2.0.1",
-                "launch-editor": "^2.6.0",
-                "open": "^8.0.9",
-                "p-retry": "^4.5.0",
-                "rimraf": "^3.0.2",
-                "schema-utils": "^4.0.0",
-                "selfsigned": "^2.1.1",
-                "serve-index": "^1.9.1",
-                "sockjs": "^0.3.24",
-                "spdy": "^4.0.2",
-                "webpack-dev-middleware": "^5.3.4",
-                "ws": "^8.13.0"
-            },
-            "bin": {
-                "webpack-dev-server": "bin/webpack-dev-server.js"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^4.37.0 || ^5.0.0"
-            },
-            "peerDependenciesMeta": {
-                "webpack": {
-                    "optional": true
-                },
-                "webpack-cli": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/webpack-dev-server/node_modules/ajv": {
-            "version": "8.17.1",
-            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3",
-                "fast-uri": "^3.0.1",
-                "json-schema-traverse": "^1.0.0",
-                "require-from-string": "^2.0.2"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/epoberezkin"
-            }
-        },
-        "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-            "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3"
-            },
-            "peerDependencies": {
-                "ajv": "^8.8.2"
-            }
-        },
-        "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
-        "node_modules/webpack-dev-server/node_modules/schema-utils": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
-            "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
-            "dependencies": {
-                "@types/json-schema": "^7.0.9",
-                "ajv": "^8.9.0",
-                "ajv-formats": "^2.1.1",
-                "ajv-keywords": "^5.1.0"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            }
-        },
-        "node_modules/webpack-dev-server/node_modules/ws": {
-            "version": "8.18.0",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
-            "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
-            "engines": {
-                "node": ">=10.0.0"
-            },
-            "peerDependencies": {
-                "bufferutil": "^4.0.1",
-                "utf-8-validate": ">=5.0.2"
-            },
-            "peerDependenciesMeta": {
-                "bufferutil": {
-                    "optional": true
-                },
-                "utf-8-validate": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/webpack-merge": {
-            "version": "5.10.0",
-            "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
-            "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
-            "dependencies": {
-                "clone-deep": "^4.0.1",
-                "flat": "^5.0.2",
-                "wildcard": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=10.0.0"
-            }
-        },
         "node_modules/webpack-sources": {
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
             "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+            "peer": true,
             "engines": {
                 "node": ">=10.13.0"
             }
         },
-        "node_modules/webpack-virtual-modules": {
-            "version": "0.4.6",
-            "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.6.tgz",
-            "integrity": "sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA=="
-        },
         "node_modules/webpack/node_modules/eslint-scope": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
             "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+            "peer": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^4.1.1"
@@ -8499,49 +4542,16 @@
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
             "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+            "peer": true,
             "engines": {
                 "node": ">=4.0"
             }
         },
-        "node_modules/websocket-driver": {
-            "version": "0.7.4",
-            "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-            "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-            "dependencies": {
-                "http-parser-js": ">=0.5.1",
-                "safe-buffer": ">=5.1.0",
-                "websocket-extensions": ">=0.1.1"
-            },
-            "engines": {
-                "node": ">=0.8.0"
-            }
-        },
-        "node_modules/websocket-extensions": {
-            "version": "0.1.4",
-            "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-            "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
-            "engines": {
-                "node": ">=0.8.0"
-            }
-        },
-        "node_modules/whatwg-fetch": {
-            "version": "3.6.20",
-            "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
-            "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
-        },
-        "node_modules/whatwg-url": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-            "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-            "dependencies": {
-                "tr46": "~0.0.3",
-                "webidl-conversions": "^3.0.0"
-            }
-        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
             "dependencies": {
                 "isexe": "^2.0.0"
             },
@@ -8552,11 +4562,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/wildcard": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
-            "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ=="
-        },
         "node_modules/wkt-parser": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.4.0.tgz",
@@ -8571,45 +4576,13 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/wrap-ansi": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-            "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-            "dependencies": {
-                "ansi-styles": "^4.0.0",
-                "string-width": "^4.1.0",
-                "strip-ansi": "^6.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-            }
-        },
-        "node_modules/wrappy": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-        },
-        "node_modules/ws": {
-            "version": "7.5.10",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
-            "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+        "node_modules/xml-name-validator": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+            "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+            "dev": true,
             "engines": {
-                "node": ">=8.3.0"
-            },
-            "peerDependencies": {
-                "bufferutil": "^4.0.1",
-                "utf-8-validate": "^5.0.2"
-            },
-            "peerDependenciesMeta": {
-                "bufferutil": {
-                    "optional": true
-                },
-                "utf-8-validate": {
-                    "optional": true
-                }
+                "node": ">=12"
             }
         },
         "node_modules/xml-utils": {
@@ -8617,50 +4590,17 @@
             "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.1.tgz",
             "integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ=="
         },
-        "node_modules/y18n": {
-            "version": "5.0.8",
-            "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-            "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/yallist": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-            "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
-        },
         "node_modules/yaml": {
-            "version": "1.10.2",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-            "engines": {
-                "node": ">= 6"
-            }
-        },
-        "node_modules/yargs": {
-            "version": "16.2.0",
-            "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-            "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-            "dependencies": {
-                "cliui": "^7.0.2",
-                "escalade": "^3.1.1",
-                "get-caller-file": "^2.0.5",
-                "require-directory": "^2.1.1",
-                "string-width": "^4.2.0",
-                "y18n": "^5.0.5",
-                "yargs-parser": "^20.2.2"
+            "version": "2.6.1",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
+            "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
+            "optional": true,
+            "peer": true,
+            "bin": {
+                "yaml": "bin.mjs"
             },
             "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/yargs-parser": {
-            "version": "20.2.9",
-            "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-            "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-            "engines": {
-                "node": ">=10"
+                "node": ">= 14"
             }
         },
         "node_modules/yocto-queue": {
diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index 719d1a6c..b6159c74 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -4,9 +4,11 @@
     "description": "The boranga web application (DBCA)",
     "author": "ASI <asi@dbca.wa.gov.au>",
     "private": true,
+    "type": "module",
     "scripts": {
-        "build": "vue-cli-service build",
-        "serve": "vue-cli-service serve"
+        "dev": "vite",
+        "build": "vite build",
+        "serve": "vite preview"
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.0",
@@ -15,19 +17,18 @@
         "@turf/boolean-within": "^7.1.0",
         "@turf/helpers": "^7.1.0",
         "@turf/intersect": "^7.1.0",
-        "@vue/cli-service": "^5.0.4",
-        "babel-polyfill": "^6.26.0",
+        "@vitejs/plugin-vue": "^5.2.1",
         "datatables.net-bs5": "^2.0.0",
         "datatables.net-buttons": "^3.0.0",
         "datatables.net-buttons-bs5": "^3.0.0",
         "datatables.net-responsive-bs5": "^3.0.2",
-        "jquery": "^3.6",
+        "jquery": "^3.7.1",
         "jquery-validation": "^1.21.0",
         "jszip": "^3.9",
         "lodash": "^4.17",
         "moment-locales-webpack-plugin": "^1.2.0",
         "moment-range": "^4.0.2",
-        "ol": "^10.1",
+        "ol": "^8.1",
         "ol-ext": "^4.0.24",
         "select2": "^4.1.0-rc.0",
         "select2-bootstrap-5-theme": "^1.3.0",
@@ -35,6 +36,10 @@
         "sortablejs": "^1.15.6",
         "sweetalert2": "11.4.8",
         "uuid": "^11.0",
+        "vite": "^6.0.3",
+        "vite-plugin-commonjs": "^0.10.4",
+        "vite-plugin-externals": "^0.6.2",
+        "vite-plugin-static-copy": "^2.2.0",
         "vue": "^3.4",
         "vue-router": "^4.0"
     },
@@ -48,9 +53,14 @@
         "not ie <= 8"
     ],
     "devDependencies": {
-        "eslint": "^9.0",
+        "@rollup/plugin-commonjs": "^28.0.1",
+        "@rollup/plugin-inject": "^5.0.5",
+        "eslint": "^9.16.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.1",
-        "prettier": "^3.3"
+        "eslint-plugin-vue": "^9.32.0",
+        "prettier": "^3.3",
+        "vite-plugin-eslint": "^1.8.1",
+        "vite-svg-loader": "^5.1.0"
     }
 }
diff --git a/boranga/frontend/boranga/vite.config.js b/boranga/frontend/boranga/vite.config.js
new file mode 100644
index 00000000..e7a4b707
--- /dev/null
+++ b/boranga/frontend/boranga/vite.config.js
@@ -0,0 +1,66 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import eslint from 'vite-plugin-eslint';
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+import svgLoader from 'vite-svg-loader'
+
+const port = process.env.PORT ? parseInt(process.env.PORT) : 5173;
+const host = process.env.HOST || '0.0.0.0';
+
+export default defineConfig({
+    base: '/static/boranga_vue/',
+    server: {
+        host: host,
+        port: port,
+        strictPort: true,
+        open: false,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
+        },
+        hmr: {
+            protocol: 'ws',
+            host: host,
+            port: port,
+        },
+    },
+    plugins: [
+        vue(),
+        eslint(),
+        svgLoader(),
+        viteStaticCopy({
+            // Had to do this to get the relative paths to work
+            // Probably a better way but I couldn't figure it out
+            targets: [
+                { src: 'src/assets', dest: 'src' },
+                { src: 'node_modules/@fortawesome/fontawesome-free/webfonts', dest: 'node_modules/@fortawesome/fontawesome-free/' },
+            ]
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+            '@vue-utils': path.resolve(__dirname, 'src/utils/vue'),
+            '@common-utils': path.resolve(__dirname, 'src/components/common/'),
+            '@static-root': path.resolve(__dirname, '../../../staticfiles/')
+        },
+    },
+    build: {
+        manifest: "manifest.json",
+        filenameHashing: false,
+        commonjsOptions: { transformMixedEsModules: true },
+        root: path.resolve(__dirname, './src'),
+        outDir: path.resolve(__dirname, '../../static/boranga_vue'),
+        publicPath: '/static/boranga_vue/',
+        sourcemap: true,
+        rollupOptions: {
+            output: {
+                entryFileNames: 'js/[name].js',
+                chunkFileNames: 'js/[name].js',
+                assetFileNames: '[ext]/[name].[ext]',
+            },
+        },
+        emptyOutDir: true,
+    },
+})

From 5ecadfb28d04ab28f0b11e5e07a70eef7a359744 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:45:12 +0800
Subject: [PATCH 035/138] Replace eslint config.

---
 boranga/frontend/boranga/.eslintrc         | 31 ------------
 boranga/frontend/boranga/eslint.config.mjs | 56 ++++++++++++++++++++++
 2 files changed, 56 insertions(+), 31 deletions(-)
 delete mode 100644 boranga/frontend/boranga/.eslintrc
 create mode 100644 boranga/frontend/boranga/eslint.config.mjs

diff --git a/boranga/frontend/boranga/.eslintrc b/boranga/frontend/boranga/.eslintrc
deleted file mode 100644
index c207e225..00000000
--- a/boranga/frontend/boranga/.eslintrc
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-    "extends": [
-        "eslint:recommended",
-        "plugin:vue/recommended",
-        "prettier"
-    ],
-    "plugins": [
-        "vue",
-        "prettier"
-    ],
-    "rules": {
-        "prettier/prettier": "error"
-    },
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2021
-    },
-    "env": {
-        "browser": true,
-        "es6": true,
-        "node": true,
-        "jquery": true
-    },
-    "globals": {
-        "moment": true,
-        "swal": true,
-        "bootstrap": true,
-        "env": true,
-        "_": true // Lodash
-    }
-}
diff --git a/boranga/frontend/boranga/eslint.config.mjs b/boranga/frontend/boranga/eslint.config.mjs
new file mode 100644
index 00000000..2c205c8f
--- /dev/null
+++ b/boranga/frontend/boranga/eslint.config.mjs
@@ -0,0 +1,56 @@
+import globals from 'globals';
+import jsLint from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import vueEslintParser from 'vue-eslint-parser';
+import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+const projectGlobals = {
+    ...globals.browser,
+    ...globals.node,
+    ...globals.jquery,
+    es6: true,
+    moment: true,
+    swal: true,
+    bootstrap: true,
+    env: true,
+    _: true, // Lodash
+};
+
+export default [
+    jsLint.configs.recommended,
+    pluginPrettierRecommended,
+    ...pluginVue.configs['flat/recommended'],
+    eslintConfigPrettier,
+    {
+        ignores: ['node_modules/', 'build/*.js', 'config/*.js'],
+    },
+    {
+        files: ['**/*.{js,mjs,cjs,ts,mts,jsx,tsx}'],
+        languageOptions: {
+            parserOptions: {
+                sourceType: 'module',
+            },
+            globals: projectGlobals,
+        },
+    },
+    {
+        files: ['src/**/*.vue'],
+        plugins: {
+            vue: pluginVue,
+        },
+        languageOptions: {
+            sourceType: 'module',
+            ecmaVersion: 12,
+            parser: vueEslintParser,
+            parserOptions: {
+                sourceType: 'module',
+                ecmaVersion: 12,
+            },
+            globals: projectGlobals,
+        },
+        rules: {
+            'prettier/prettier': 'error',
+        },
+    },
+];

From cffd3d48a57cc120dc583a9d7e5aa8cf4511eaf6 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:45:47 +0800
Subject: [PATCH 036/138] Remove no longer used postcss config.

---
 boranga/frontend/boranga/.postcssrc.js | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100755 boranga/frontend/boranga/.postcssrc.js

diff --git a/boranga/frontend/boranga/.postcssrc.js b/boranga/frontend/boranga/.postcssrc.js
deleted file mode 100755
index ea9a5ab8..00000000
--- a/boranga/frontend/boranga/.postcssrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  "plugins": {
-    // to edit target browsers: use "browserlist" field in package.json
-    "autoprefixer": {}
-  }
-}

From 58b5c800efacc6782ec6a4143dff9ab92381d150 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:46:06 +0800
Subject: [PATCH 037/138] Update main.js to work with vite.

---
 boranga/frontend/boranga/src/main.js | 29 +++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/boranga/frontend/boranga/src/main.js b/boranga/frontend/boranga/src/main.js
index 3cfb0586..94218e7f 100755
--- a/boranga/frontend/boranga/src/main.js
+++ b/boranga/frontend/boranga/src/main.js
@@ -1,28 +1,39 @@
+import 'vite/modulepreload-polyfill';
+
 import { createApp } from 'vue';
-import App from './App'
-import router from './router'
-import helpers from '@/utils/helpers'
+import App from './App.vue';
+import router from './router';
+import helpers from '@/utils/helpers';
 import { extendMoment } from 'moment-range';
 
+import _ from 'lodash';
+window._ = _;
+import $ from 'jquery';
+import select2 from 'select2';
+window.$ = $;
+import moment from 'moment';
+window.moment = moment;
+import swal from 'sweetalert2';
+window.swal = swal;
+select2();
+
 import 'datatables.net-bs5';
 import 'datatables.net-buttons-bs5';
 import 'datatables.net-responsive-bs5';
 import 'datatables.net-buttons/js/dataTables.buttons.js';
-const jsZip = require('jszip');
-window.JSZip = jsZip;
+import JSZip from 'jszip';
+window.JSZip = JSZip;
 import 'datatables.net-buttons/js/buttons.html5.js';
 import 'select2';
 import 'jquery-validation';
 
 import 'sweetalert2/dist/sweetalert2.css';
-import '@/../node_modules/@fortawesome/fontawesome-free/css/all.min.css';
 import 'select2/dist/css/select2.min.css';
 import 'select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css';
 import '@/../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css';
 import '@/../node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css';
-
-require('@/../node_modules/@fortawesome/fontawesome-free/css/all.min.css')
-require('@/../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css')
+import '@/../node_modules/@fortawesome/fontawesome-free/css/all.min.css';
+import '@/../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css';
 
 extendMoment(moment);
 

From 2a48521d91c79463a7ec948e8915801f4324f645 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:48:55 +0800
Subject: [PATCH 038/138] Update exports in .js files to ES module and lint.

---
 boranga/frontend/boranga/src/api.js           | 334 ++++++++++--------
 .../boranga/src/components/internal/api.js    |   4 +-
 .../boranga/src/components/internal/utils.js  | 140 ++++----
 .../frontend/boranga/src/utils/constants.js   |   9 +-
 boranga/frontend/boranga/src/utils/helpers.js | 313 ++++++++--------
 boranga/frontend/boranga/src/utils/hooks.js   |  12 +-
 6 files changed, 442 insertions(+), 370 deletions(-)

diff --git a/boranga/frontend/boranga/src/api.js b/boranga/frontend/boranga/src/api.js
index ead72597..4c25f021 100644
--- a/boranga/frontend/boranga/src/api.js
+++ b/boranga/frontend/boranga/src/api.js
@@ -1,112 +1,143 @@
-var site_url = location.origin
-var group_type_flora = 'flora'
-var group_type_fauna = 'fauna'
-var group_type_community = 'community'
+var site_url = location.origin;
+var group_type_flora = 'flora';
+var group_type_fauna = 'fauna';
+var group_type_community = 'community';
 
-module.exports = {
-    access_types: "/api/access_types.json",
-    activity_matrix: "/api/activity_matrix.json",
-    amendment_request: "/api/amendment_request.json",
-    application_types: "/api/application_types.json",
-    approvals: "/api/approvals.json",
-    assessments: "/api/assessments.json",
-    community_documents: "/api/community_documents.json",
-    community: "/api/community",
-    compliances: "/api/compliances.json",
-    conservation_status_documents: "/api/conservation_status_documents.json",
-    conservation_status: "/api/conservation_status",
-    content_types: "/api/content_types/",
+export default {
+    access_types: '/api/access_types.json',
+    activity_matrix: '/api/activity_matrix.json',
+    amendment_request: '/api/amendment_request.json',
+    application_types: '/api/application_types.json',
+    approvals: '/api/approvals.json',
+    assessments: '/api/assessments.json',
+    community_documents: '/api/community_documents.json',
+    community: '/api/community',
+    compliances: '/api/compliances.json',
+    conservation_status_documents: '/api/conservation_status_documents.json',
+    conservation_status: '/api/conservation_status',
+    content_types: '/api/content_types/',
     countries: '/api/countries',
-    cs_external_referee_invites: "/api/cs_external_referee_invites",
-    cs_referrals: "/api/cs_referrals.json",
+    cs_external_referee_invites: '/api/cs_external_referee_invites',
+    cs_referrals: '/api/cs_referrals.json',
     department_users: '/api/department_users',
-    districts: "/api/districts.json",
-    document_categories_dict: "/api/document_categories_dict",
+    districts: '/api/districts.json',
+    document_categories_dict: '/api/document_categories_dict',
     filtered_organisations: '/api/filtered_organisations',
-    help_text_entries: "/api/help_text_entries",
-    lookup_schema_types: "/api/occurrence_report_bulk_import_schema_columns/get_lookup_filter_types/",
-    marine_treeview: "/api/marine_treeview",
-    occurrence_report_bulk_imports: "/api/occurrence_report_bulk_imports/",
-    occurrence_report_bulk_import_schemas: "/api/occurrence_report_bulk_import_schemas/",
-    occurrence_report_bulk_import_schemas_by_group_type: "/api/occurrence_report_bulk_import_schemas/get_schema_list_by_group_type/",
-    ocr_external_referee_invites: "/api/ocr_external_referee_invites",
-    ocr_referrals: "/api/ocr_referrals.json",
+    help_text_entries: '/api/help_text_entries',
+    lookup_schema_types:
+        '/api/occurrence_report_bulk_import_schema_columns/get_lookup_filter_types/',
+    marine_treeview: '/api/marine_treeview',
+    occurrence_report_bulk_imports: '/api/occurrence_report_bulk_imports/',
+    occurrence_report_bulk_import_schemas:
+        '/api/occurrence_report_bulk_import_schemas/',
+    occurrence_report_bulk_import_schemas_by_group_type:
+        '/api/occurrence_report_bulk_import_schemas/get_schema_list_by_group_type/',
+    ocr_external_referee_invites: '/api/ocr_external_referee_invites',
+    ocr_referrals: '/api/ocr_referrals.json',
     organisation_access_group_members: '/api/organisation_access_group_members',
     organisation_contacts: '/api/organisation_contacts.json',
     organisation_requests: '/api/organisation_requests.json',
     organisations: '/api/organisations.json',
-    overdue_invoices: "/api/overdue_invoices.json",
+    overdue_invoices: '/api/overdue_invoices.json',
     profile: '/api/profile',
-    proposal_requirements: "/api/proposal_requirements.json",
-    proposal_standard_requirements: "/api/proposal_standard_requirements.json",
-    proposal_submit: "/api/proposal_submit.json",
-    proposal_type: "/api/proposal_type",
-    proposals: "/api/proposal.json",
+    proposal_requirements: '/api/proposal_requirements.json',
+    proposal_standard_requirements: '/api/proposal_standard_requirements.json',
+    proposal_submit: '/api/proposal_submit.json',
+    proposal_type: '/api/proposal_type',
+    proposals: '/api/proposal.json',
     referral_recipient_groups: '/api/referrals/user_group_list',
-    referrals: "/api/referrals.json",
-    regions: "/api/regions.json",
-    save_submitter_information: "/api/save_submitter_information",
-    save_area_of_interest: "/api/save_area_of_interest",
-    species_documents: "/api/species_documents.json",
-    species: "/api/species",
-    submitter_categories: "/api/submitter_categories",
-    taxonomy: "/api/taxonomy",
-    threat: "/api/threat.json",
-    trails: "/api/trails.json",
+    referrals: '/api/referrals.json',
+    regions: '/api/regions.json',
+    save_submitter_information: '/api/save_submitter_information',
+    save_area_of_interest: '/api/save_area_of_interest',
+    species_documents: '/api/species_documents.json',
+    species: '/api/species',
+    submitter_categories: '/api/submitter_categories',
+    taxonomy: '/api/taxonomy',
+    threat: '/api/threat.json',
+    trails: '/api/trails.json',
     users_api: '/api/users',
     users: '/api/users.json',
 
     // used in internal and external dashboards
-    approvals_paginated_external: "/api/approval_paginated/approvals_external/?format=datatables",
-    common_name_lookup: "/api/common_name_lookup",
-    communities_lookup: "/api/communities_lookup",
-    communities_paginated_external: "/api/communities_paginated/communities_external/?format=datatables",
-    communities_paginated_internal: "/api/communities_paginated/communities_internal/?format=datatables",
-    community_agenda_conservation_status_paginated_internal: "/api/community_conservation_status_paginated/agenda_cs_internal/?format=datatables",
-    community_conservation_plans_paginated_internal: "/api/community_conservation_plans_paginated/community_cp_internal/?format=datatables",
-    community_conservation_status_paginated_internal: "/api/community_conservation_status_paginated/community_cs_internal/?format=datatables",
-    community_conservation_status_referrals_paginated_internal: "/api/community_conservation_status_paginated/community_cs_referrals_internal/?format=datatables",
-    community_filter_dict: "/api/community_filter_dict",
-    community_id_lookup: "/api/community_id_lookup",
-    community_name_lookup: "/api/community_name_lookup",
-    compliances_paginated_external: "/api/compliance_paginated/compliances_external/?format=datatables",
-    conservation_status_paginated_external: "/api/conservation_status_paginated/conservation_status_external?format=datatables",
-    conservation_status_referred_to_me: "/api/conservation_status_paginated/referred_to_me/?format=datatables",
-    family_lookup: "/api/family_lookup",
-    filter_lists_species: "/api/filter_lists_species",
-    genera_lookup: "/api/genera_lookup",
-    group_types_dict: "/api/group_types_dict",
-    meeting_agenda_items: "/api/meeting_agenda_items.json",
-    meetings_paginated: "/api/meeting_paginated/?format=datatables",
-    occurrence_lookup: "/api/occurrence_paginated/occurrence_lookup",
-    occurrence_name_lookup: "/api/occurrence_paginated/occurrence_name_lookup",
-    combine_occurrence_name_lookup: "/api/occurrence_paginated/combine_occurrence_name_lookup",
-    occurrence_internal_export: "/api/occurrence_paginated/occurrence_internal_export",
-    occurrence_paginated_internal: "/api/occurrence_paginated/occurrence_internal?format=datatables",
-    occurrence_report_external_export: "/api/occurrence_report_paginated/occurrence_report_external_export",
-    occurrence_report_internal_export: "/api/occurrence_report_paginated/occurrence_report_internal_export",
-    community_occurrence_report_internal_export: "/api/occurrence_report_paginated/community_occurrence_report_internal_export",
-    occurrence_report_paginated_external: "/api/occurrence_report_paginated/occurrence_report_external?format=datatables",
-    occurrence_report_paginated_internal: "/api/occurrence_report_paginated/occurrence_report_internal?format=datatables",
-    occurrence_report_paginated_referred_to_me: "/api/occurrence_report_paginated/referred_to_me?format=datatables",
-    occurrence: "/api/occurrence/",
-    phylo_group_lookup: "/api/phylo_group_lookup",
-    proposals_paginated_external: "/api/proposal_paginated/proposals_external/?format=datatables",
-    proposals_paginated_internal: "/api/proposal_paginated/proposals_internal/?format=datatables",
-    referrals_paginated_internal: "/api/proposal_paginated/referrals_internal/?format=datatables",
-    region_district_filter_dict: "/api/region_district_filter_dict",
-    regions:"/api/regions.json",
-    scientific_name_lookup_by_groupname: "/api/scientific_name_lookup_by_groupname",
-    scientific_name_lookup: "/api/scientific_name_lookup",
-    species_agenda_conservation_status_paginated_internal: "/api/species_conservation_status_paginated/agenda_cs_internal/?format=datatables",
-    species_conservation_plans_paginated_internal: "/api/species_conservation_plans_paginated/species_cp_internal/?format=datatables",
-    species_conservation_status_paginated_internal: "/api/species_conservation_status_paginated/species_cs_internal/?format=datatables",
-    meeting_export: "/api/meeting_paginated/meeting_export",
-    species_conservation_status_referrals_paginated_internal: "/api/species_conservation_status_paginated/species_cs_referrals_internal/?format=datatables",
-    species_lookup: "/api/species_lookup",
-    species_paginated_external: "/api/species_paginated/species_external/?format=datatables",
-    species_paginated_internal: "/api/species_paginated/species_internal/?format=datatables",
-    wild_status_lookup: "/api/wild_status_lookup",
+    approvals_paginated_external:
+        '/api/approval_paginated/approvals_external/?format=datatables',
+    common_name_lookup: '/api/common_name_lookup',
+    communities_lookup: '/api/communities_lookup',
+    communities_paginated_external:
+        '/api/communities_paginated/communities_external/?format=datatables',
+    communities_paginated_internal:
+        '/api/communities_paginated/communities_internal/?format=datatables',
+    community_agenda_conservation_status_paginated_internal:
+        '/api/community_conservation_status_paginated/agenda_cs_internal/?format=datatables',
+    community_conservation_plans_paginated_internal:
+        '/api/community_conservation_plans_paginated/community_cp_internal/?format=datatables',
+    community_conservation_status_paginated_internal:
+        '/api/community_conservation_status_paginated/community_cs_internal/?format=datatables',
+    community_conservation_status_referrals_paginated_internal:
+        '/api/community_conservation_status_paginated/community_cs_referrals_internal/?format=datatables',
+    community_filter_dict: '/api/community_filter_dict',
+    community_id_lookup: '/api/community_id_lookup',
+    community_name_lookup: '/api/community_name_lookup',
+    compliances_paginated_external:
+        '/api/compliance_paginated/compliances_external/?format=datatables',
+    conservation_status_paginated_external:
+        '/api/conservation_status_paginated/conservation_status_external?format=datatables',
+    conservation_status_referred_to_me:
+        '/api/conservation_status_paginated/referred_to_me/?format=datatables',
+    family_lookup: '/api/family_lookup',
+    filter_lists_species: '/api/filter_lists_species',
+    genera_lookup: '/api/genera_lookup',
+    group_types_dict: '/api/group_types_dict',
+    meeting_agenda_items: '/api/meeting_agenda_items.json',
+    meetings_paginated: '/api/meeting_paginated/?format=datatables',
+    occurrence_lookup: '/api/occurrence_paginated/occurrence_lookup',
+    occurrence_name_lookup: '/api/occurrence_paginated/occurrence_name_lookup',
+    combine_occurrence_name_lookup:
+        '/api/occurrence_paginated/combine_occurrence_name_lookup',
+    occurrence_internal_export:
+        '/api/occurrence_paginated/occurrence_internal_export',
+    occurrence_paginated_internal:
+        '/api/occurrence_paginated/occurrence_internal?format=datatables',
+    occurrence_report_external_export:
+        '/api/occurrence_report_paginated/occurrence_report_external_export',
+    occurrence_report_internal_export:
+        '/api/occurrence_report_paginated/occurrence_report_internal_export',
+    community_occurrence_report_internal_export:
+        '/api/occurrence_report_paginated/community_occurrence_report_internal_export',
+    occurrence_report_paginated_external:
+        '/api/occurrence_report_paginated/occurrence_report_external?format=datatables',
+    occurrence_report_paginated_internal:
+        '/api/occurrence_report_paginated/occurrence_report_internal?format=datatables',
+    occurrence_report_paginated_referred_to_me:
+        '/api/occurrence_report_paginated/referred_to_me?format=datatables',
+    occurrence: '/api/occurrence/',
+    phylo_group_lookup: '/api/phylo_group_lookup',
+    proposals_paginated_external:
+        '/api/proposal_paginated/proposals_external/?format=datatables',
+    proposals_paginated_internal:
+        '/api/proposal_paginated/proposals_internal/?format=datatables',
+    referrals_paginated_internal:
+        '/api/proposal_paginated/referrals_internal/?format=datatables',
+    region_district_filter_dict: '/api/region_district_filter_dict',
+    scientific_name_lookup_by_groupname:
+        '/api/scientific_name_lookup_by_groupname',
+    scientific_name_lookup: '/api/scientific_name_lookup',
+    species_agenda_conservation_status_paginated_internal:
+        '/api/species_conservation_status_paginated/agenda_cs_internal/?format=datatables',
+    species_conservation_plans_paginated_internal:
+        '/api/species_conservation_plans_paginated/species_cp_internal/?format=datatables',
+    species_conservation_status_paginated_internal:
+        '/api/species_conservation_status_paginated/species_cs_internal/?format=datatables',
+    meeting_export: '/api/meeting_paginated/meeting_export',
+    species_conservation_status_referrals_paginated_internal:
+        '/api/species_conservation_status_paginated/species_cs_referrals_internal/?format=datatables',
+    species_lookup: '/api/species_lookup',
+    species_paginated_external:
+        '/api/species_paginated/species_external/?format=datatables',
+    species_paginated_internal:
+        '/api/species_paginated/species_internal/?format=datatables',
+    wild_status_lookup: '/api/wild_status_lookup',
     occurrence_tenure: '/api/occurrence_tenure/',
     occurrence_tenure_list_of_values:
         '/api/occurrence_tenure/occurrence_tenure_list_of_values',
@@ -120,43 +151,46 @@ module.exports = {
         '/api/occurrence_tenure_paginated/occurrence_tenure_purpose_lookup',
 
     // Pending - need to create viewsets for the below when working on search filters for OR dashboard
-    or_status_lookup: "/api/or_status_lookup",
-    or_submitted_from_lookup: "/api/or_submitted_from_lookup",
+    or_status_lookup: '/api/or_status_lookup',
+    or_submitted_from_lookup: '/api/or_submitted_from_lookup',
 
     //conservation Status profile page list of value dict
-    species_display: "/api/species_display",
-    community_display: "/api/community_display",
-    cs_profile_dict: "/api/cs_profile_dict",
+    species_display: '/api/species_display',
+    community_display: '/api/community_display',
+    cs_profile_dict: '/api/cs_profile_dict',
 
-    filter_list: "/api/proposal/filter_list.json",
-    filter_list_approvals: "/api/approvals/filter_list.json",
-    filter_list_compliances: "/api/compliances/filter_list.json",
-    filter_list_referrals: "/api/referrals/filter_list.json",
-    filter_list_district_proposals: "/api/district_proposals/filter_list.json",
-    filter_list_cs_referrals: "/api/cs_referrals/filter_list.json",
-    filter_list_cs_referrals_community: "/api/cs_referrals/community_filter_list.json",
+    filter_list: '/api/proposal/filter_list.json',
+    filter_list_approvals: '/api/approvals/filter_list.json',
+    filter_list_compliances: '/api/compliances/filter_list.json',
+    filter_list_referrals: '/api/referrals/filter_list.json',
+    filter_list_district_proposals: '/api/district_proposals/filter_list.json',
+    filter_list_cs_referrals: '/api/cs_referrals/filter_list.json',
+    filter_list_cs_referrals_community:
+        '/api/cs_referrals/community_filter_list.json',
 
-    meeting: "/api/meeting",
-    meeting_dict: "/api/meeting_dict",
-    minutes: "/api/minutes.json",
+    meeting: '/api/meeting',
+    meeting_dict: '/api/meeting_dict',
+    minutes: '/api/minutes.json',
 
-    occurrence_report: "/api/occurrence_report",
-    observer_detail: "/api/observer_detail.json",
-    contact_detail: "/api/contact_detail.json",
-    occurrence_report_documents: "/api/occurrence_report_documents.json",
-    occurrence_documents: "/api/occurrence_documents.json",
-    ocr_threat: "/api/ocr_threat.json",
-    occ_threat: "/api/occ_threat.json",
-    occ_site: "/api/occurrence_sites.json",
-    occ_profile_dict: "/api/occ_profile_dict",
+    occurrence_report: '/api/occurrence_report',
+    observer_detail: '/api/observer_detail.json',
+    contact_detail: '/api/contact_detail.json',
+    occurrence_report_documents: '/api/occurrence_report_documents.json',
+    occurrence_documents: '/api/occurrence_documents.json',
+    ocr_threat: '/api/ocr_threat.json',
+    occ_threat: '/api/occ_threat.json',
+    occ_site: '/api/occurrence_sites.json',
+    occ_profile_dict: '/api/occ_profile_dict',
 
-    combine_key_contacts_lookup: "/api/occurrence_paginated/combine_key_contacts_lookup/",
-    combine_documents_lookup: "/api/occurrence_paginated/combine_documents_lookup/",
-    combine_threats_lookup: "/api/occurrence_paginated/combine_threats_lookup/",
-    combine_sites_lookup: "/api/occurrence_paginated/combine_sites_lookup/",
-    combine_tenures_lookup: "/api/occurrence_paginated/combine_tenures_lookup/",
+    combine_key_contacts_lookup:
+        '/api/occurrence_paginated/combine_key_contacts_lookup/',
+    combine_documents_lookup:
+        '/api/occurrence_paginated/combine_documents_lookup/',
+    combine_threats_lookup: '/api/occurrence_paginated/combine_threats_lookup/',
+    combine_sites_lookup: '/api/occurrence_paginated/combine_sites_lookup/',
+    combine_tenures_lookup: '/api/occurrence_paginated/combine_tenures_lookup/',
 
-    tile_layer: "/api/tile_layer",
+    tile_layer: '/api/tile_layer',
 
     discard_cs_proposal: function (id) {
         return `/api/conservation_status/${id}/discard/`;
@@ -210,81 +244,81 @@ module.exports = {
         return `/api/observer_detail/${id}.json`;
     },
     lookup_history_species_document: function (id) {
-      return `/api/history/boranga/species-communities/SpeciesDocument/${id}/`;
+        return `/api/history/boranga/species-communities/SpeciesDocument/${id}/`;
     },
     lookup_history_species: function (id) {
-      return `/api/history/boranga/species-communities/Species/${id}/`;
+        return `/api/history/boranga/species-communities/Species/${id}/`;
     },
     lookup_history_community_document: function (id) {
-      return `/api/history/boranga/species-communities/CommunityDocument/${id}/`;
+        return `/api/history/boranga/species-communities/CommunityDocument/${id}/`;
     },
     lookup_history_community: function (id) {
-      return `/api/history/boranga/species-communities/Community/${id}/`;
+        return `/api/history/boranga/species-communities/Community/${id}/`;
     },
 
     lookup_history_conservation_status_document: function (id) {
-      return `/api/history/boranga/conservation_status/ConservationStatusDocument/${id}/`;
+        return `/api/history/boranga/conservation_status/ConservationStatusDocument/${id}/`;
     },
     lookup_history_conservation_status: function (id) {
-      return `/api/history/boranga/conservation_status/ConservationStatus/${id}/`;
+        return `/api/history/boranga/conservation_status/ConservationStatus/${id}/`;
     },
 
     lookup_history_occurrence_report_document: function (id) {
-      return `/api/history/boranga/occurrence/OccurrenceReportDocument/${id}/`;
+        return `/api/history/boranga/occurrence/OccurrenceReportDocument/${id}/`;
     },
     lookup_history_occurrence_report: function (id) {
-      return `/api/history/boranga/occurrence/OccurrenceReport/${id}/`;
+        return `/api/history/boranga/occurrence/OccurrenceReport/${id}/`;
     },
 
     lookup_history_ocr_observer_detail: function (id) {
-      return `/api/history/boranga/occurrence/OCRObserverDetail/${id}/`;
+        return `/api/history/boranga/occurrence/OCRObserverDetail/${id}/`;
     },
 
     lookup_history_occurrence_document: function (id) {
-      return `/api/history/boranga/occurrence/OccurrenceDocument/${id}/`;
+        return `/api/history/boranga/occurrence/OccurrenceDocument/${id}/`;
     },
     lookup_history_occurrence: function (id) {
-      return `/api/history/boranga/occurrence/Occurrence/${id}/`;
+        return `/api/history/boranga/occurrence/Occurrence/${id}/`;
     },
 
     lookup_history_conservation_threat: function (id) {
-      return `/api/history/boranga/species-communities/ConservationThreat/${id}/`;
+        return `/api/history/boranga/species-communities/ConservationThreat/${id}/`;
     },
 
     lookup_history_ocr_conservation_threat: function (id) {
-      return `/api/history/boranga/occurrence/OCRConservationThreat/${id}/`;
+        return `/api/history/boranga/occurrence/OCRConservationThreat/${id}/`;
     },
 
     lookup_history_occ_conservation_threat: function (id) {
-      return `/api/history/boranga/occurrence/OCCConservationThreat/${id}/`;
+        return `/api/history/boranga/occurrence/OCCConservationThreat/${id}/`;
     },
 
     lookup_history_occurrence_site: function (id) {
-      return `/api/history/boranga/occurrence/OccurrenceSite/${id}/`;
+        return `/api/history/boranga/occurrence/OccurrenceSite/${id}/`;
     },
 
     lookup_history_occurrence_tenure: function (id) {
-      return `/api/history/boranga/occurrence/OccurrenceTenure/${id}/`;
+        return `/api/history/boranga/occurrence/OccurrenceTenure/${id}/`;
     },
 
     lookup_history_occ_contact_detail: function (id) {
-      return `/api/history/boranga/occurrence/OCCContactDetail/${id}/`;
+        return `/api/history/boranga/occurrence/OCCContactDetail/${id}/`;
     },
 
     lookup_history_minutes: function (id) {
-      return `/api/history/boranga/meeting/Minutes/${id}/`;
+        return `/api/history/boranga/meeting/Minutes/${id}/`;
     },
 
-    lookup_revision_versions: function (model,id) {
-      return `/api/history/boranga/${model}/${id}/`;
+    lookup_revision_versions: function (model, id) {
+        return `/api/history/boranga/${model}/${id}/`;
     },
 
-    lookup_ocr_section_values: function (model,id) {
-      return `/api/occurrence_report/${id}/section_values/?section=${model}`;
+    lookup_ocr_section_values: function (model, id) {
+        return `/api/occurrence_report/${id}/section_values/?section=${model}`;
     },
 
-    lookup_occ_section_values: function (model,id) {
-      return `/api/occurrence/${id}/section_values/?section=${model}`;
+    lookup_occ_section_values: function (model, id) {
+        return `/api/occurrence/${id}/section_values/?section=${model}`;
     },
 
     committee_members: function (committee_id) {
@@ -301,4 +335,4 @@ module.exports = {
     group_types: ['Fauna', 'Flora', 'Communities'],
     site_url: site_url,
     system_name: 'Boranga System',
-}
+};
diff --git a/boranga/frontend/boranga/src/components/internal/api.js b/boranga/frontend/boranga/src/components/internal/api.js
index 77ea9dbb..65ca766a 100755
--- a/boranga/frontend/boranga/src/components/internal/api.js
+++ b/boranga/frontend/boranga/src/components/internal/api.js
@@ -1,6 +1,6 @@
-module.exports = {
+export default {
     organisations: '/api/organisations.json',
     countries: '/api/countries',
     users: '/api/users.json',
     profile: '/api/profile',
-}
+};
diff --git a/boranga/frontend/boranga/src/components/internal/utils.js b/boranga/frontend/boranga/src/components/internal/utils.js
index a5a0e280..2a2966b9 100755
--- a/boranga/frontend/boranga/src/components/internal/utils.js
+++ b/boranga/frontend/boranga/src/components/internal/utils.js
@@ -1,78 +1,94 @@
-import Vue from 'vue'
-import api from './api'
-import {helpers} from '@/utils/hooks'
+import api from './api.js';
+import { helpers } from '@/utils/hooks';
 
 export default {
-    fetchProposal: function(id){
-        return new Promise ((resolve,reject) => {
-            fetch(helpers.add_endpoint_json(api.proposals,id)).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchProposal: function (id) {
+        return new Promise((resolve, reject) => {
+            fetch(helpers.add_endpoint_json(api.proposals, id)).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-    fetchOrganisations: function(id){
-        return new Promise ((resolve,reject) => {
-            fetch(api.organisations).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchOrganisations: function () {
+        return new Promise((resolve, reject) => {
+            fetch(api.organisations).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-    fetchCountries: function (){
-        return new Promise ((resolve,reject) => {
-            fetch(api.countries).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchCountries: function () {
+        return new Promise((resolve, reject) => {
+            fetch(api.countries).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
-
     },
-    fetchOrganisation: function(id){
-        return new Promise ((resolve,reject) => {
-            fetch(helpers.add_endpoint_json(api.organisations,id)).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchOrganisation: function (id) {
+        return new Promise((resolve, reject) => {
+            fetch(helpers.add_endpoint_json(api.organisations, id)).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-    fetchUser: function(id){
-        return new Promise ((resolve,reject) => {
-            fetch(helpers.add_endpoint_json(api.users,id)).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchUser: function (id) {
+        return new Promise((resolve, reject) => {
+            fetch(helpers.add_endpoint_json(api.users, id)).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-    fetchOrgRequestPending:function (id){
-        return new Promise ((resolve,reject) => {
-            fetch(helpers.add_endpoint_json(api.users,id + '/pending_org_requests')).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchOrgRequestPending: function (id) {
+        return new Promise((resolve, reject) => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api.users,
+                    id + '/pending_org_requests'
+                )
+            ).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-    fetchProfile: function (){
-        return new Promise ((resolve,reject) => {
-            fetch(api.profile).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchProfile: function () {
+        return new Promise((resolve, reject) => {
+            fetch(api.profile).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
-
     },
-}
+};
diff --git a/boranga/frontend/boranga/src/utils/constants.js b/boranga/frontend/boranga/src/utils/constants.js
index 2d31332c..0b95b793 100755
--- a/boranga/frontend/boranga/src/utils/constants.js
+++ b/boranga/frontend/boranga/src/utils/constants.js
@@ -1,11 +1,14 @@
-module.exports = {
+export default {
     PROPOSAL_STATUS: {
         DRAFT: { ID: 'draft', TEXT: 'Draft' },
         DISCARDED: { ID: 'discarded', TEXT: 'Discarded' },
         WITH_ASSESSOR: { ID: 'with_assessor', TEXT: 'With Assessor' },
         WITH_REFERRAL: { ID: 'with_referral', TEXT: 'With Referral' },
         DEFERRED: { ID: 'deferred', TEXT: 'Deferred' },
-        PROPOSED_FOR_AGENDA: { ID: 'proposed_for_agenda', TEXT: 'Proposed For Agenda' },
+        PROPOSED_FOR_AGENDA: {
+            ID: 'proposed_for_agenda',
+            TEXT: 'Proposed For Agenda',
+        },
         READY_FOR_AGENDA: { ID: 'ready_for_agenda', TEXT: 'Ready For Agenda' },
         ON_AGENDA: { ID: 'on_agenda', TEXT: 'On Agenda' },
         WITH_APPROVER: { ID: 'with_approver', TEXT: 'Proposed DeListed' },
@@ -28,4 +31,4 @@ module.exports = {
     },
     DATATABLE_PROCESSING_HTML:
         '<div class="d-flex justify-content-center"><div class="d-flex spinner-border text-primary my-4" role="status"><span class="visually-hidden">Loading...</span></div></div>',
-}
+};
diff --git a/boranga/frontend/boranga/src/utils/helpers.js b/boranga/frontend/boranga/src/utils/helpers.js
index 0f8d0cac..24692821 100755
--- a/boranga/frontend/boranga/src/utils/helpers.js
+++ b/boranga/frontend/boranga/src/utils/helpers.js
@@ -1,202 +1,218 @@
-module.exports = {
-    formatError: function(err) {
+export default {
+    formatError: function (err) {
         let returnStr = '';
         // object {}
-        if (typeof(err.body) === 'object' && !err.body.hasOwnProperty('length')) {
+        if (
+            typeof err.body === 'object' &&
+            !Object.prototype.hasOwnProperty.call(err.body, 'length')
+        ) {
             for (const key of Object.keys(err.body)) {
                 returnStr += `${key}: ${err.body[key]} <br/>`;
             }
-        // array
-        } else if (typeof(err.body) === 'object') {
+            // array
+        } else if (typeof err.body === 'object') {
             returnStr = err.body[0];
-        // string
+            // string
         } else {
             returnStr = err.body;
         }
         return returnStr;
     },
-  apiError: function ( resp ) {
-    var error_str = '';
-    if ( resp.status === 400 ) {
-      try {
-        obj = JSON.parse( resp.responseText );
-        error_str = obj.non_field_errors[ 0 ].replace( /[\[\]"]/g, '' );
-      }
-      catch ( e ) {
-        error_str = resp.responseText.replace( /[\[\]"]/g, '' );
-      }
-    }
-    else if ( resp.status === 404 ) {
-      error_str = 'The resource you are looking for does not exist.';
-    }
-    else {
-      error_str = resp.responseText.replace( /[\[\]"]/g, '' );
-    }
-    return error_str;
-  },
-    apiVueResourceError: function(resp){
-        console.log('in apiVueResourceError')
-        console.log(resp)
+    apiError: function (resp) {
+        var error_str = '';
+        if (resp.status === 400) {
+            try {
+                let obj = JSON.parse(resp.responseText);
+                error_str = obj.non_field_errors[0].replace(/[[\]"]/g, '');
+            } catch (e) {
+                console.log(e);
+                error_str = resp.responseText.replace(/[[\]"]/g, '');
+            }
+        } else if (resp.status === 404) {
+            error_str = 'The resource you are looking for does not exist.';
+        } else {
+            error_str = resp.responseText.replace(/[[\]"]/g, '');
+        }
+        return error_str;
+    },
+    apiVueResourceError: function (resp) {
+        console.log('in apiVueResourceError');
+        console.log(resp);
         var error_str = '';
         var text = null;
         if (resp.status === 400) {
-            if (Array.isArray(resp.body)){
+            if (Array.isArray(resp.body)) {
                 text = resp.body[0];
-            }
-            else if (typeof resp.body == 'object'){
+            } else if (typeof resp.body == 'object') {
                 text = resp.body;
-            }
-            else{
+            } else {
                 text = resp.body;
             }
 
-            if (typeof text == 'object'){
-                if (text.hasOwnProperty('non_field_errors')) {
-                    error_str = text.non_field_errors[0].replace(/[\[\]"]/g, '');
-                } else{
-                    console.log('text')
-                    console.log(text)
-                    for (let key in text){
-                        error_str += key + ': ' + text[key] + '<br/>'
+            if (typeof text == 'object') {
+                if (
+                    Object.prototype.hasOwnProperty.call(
+                        text,
+                        'non_field_errors'
+                    )
+                ) {
+                    error_str = text.non_field_errors[0].replace(/[[\]"]/g, '');
+                } else {
+                    console.log('text');
+                    console.log(text);
+                    for (let key in text) {
+                        error_str += key + ': ' + text[key] + '<br/>';
                     }
                 }
-            }
-            else{
-                error_str = text.replace(/[\[\]"]/g,'');
+            } else {
+                error_str = text.replace(/[[\]"]/g, '');
                 error_str = text.replace(/^['"](.*)['"]$/, '$1');
             }
-        }
-        else if ( resp.status === 404) {
+        } else if (resp.status === 404) {
             error_str = 'The resource you are looking for does not exist.';
         }
-        console.log('error_str')
-        console.log(error_str)
+        console.log('error_str');
+        console.log(error_str);
         return error_str;
     },
 
-  goBack: function ( vm ) {
-    vm.$router.go( window.history.back() );
-  },
-  copyObject: function(obj){
+    goBack: function (vm) {
+        vm.$router.go(window.history.back());
+    },
+    copyObject: function (obj) {
         return JSON.parse(JSON.stringify(obj));
-  },
-  getCookie: function ( name ) {
-    var value = null;
-    if ( document.cookie && document.cookie !== '' ) {
-      var cookies = document.cookie.split( ';' );
-      for ( var i = 0; i < cookies.length; i++ ) {
-        var cookie = cookies[ i ].trim();
-        if ( cookie.substring( 0, name.length + 1 )
-          .trim() === ( name + '=' ) ) {
-          value = decodeURIComponent( cookie.substring( name.length + 1 ) );
-          break;
+    },
+    getCookie: function (name) {
+        var value = null;
+        if (document.cookie && document.cookie !== '') {
+            var cookies = document.cookie.split(';');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = cookies[i].trim();
+                if (
+                    cookie.substring(0, name.length + 1).trim() ===
+                    name + '='
+                ) {
+                    value = decodeURIComponent(
+                        cookie.substring(name.length + 1)
+                    );
+                    break;
+                }
+            }
         }
-      }
-    }
-    return value;
-  },
-  namePopover: function ( $, vmDataTable ) {
-    vmDataTable.on( 'mouseover', '.name_popover', function ( e ) {
-      $( this )
-        .popover( 'show' );
-      $( this )
-        .on( 'mouseout', function () {
-          $( this )
-            .popover( 'hide' );
-        } );
-    } );
-  },
-    add_endpoint_json: function ( string, addition ) {
-        let res = string.split( ".json" )
-        let endpoint = res[ 0 ] + '/' + addition + '.json';
-        endpoint = endpoint.replace("//", "/")  // Remove duplicated '/' just in case
-        return endpoint
+        return value;
     },
-    add_endpoint_join: function ( api_string, addition ) {
+    namePopover: function ($, vmDataTable) {
+        vmDataTable.on('mouseover', '.name_popover', function () {
+            $(this).popover('show');
+            $(this).on('mouseout', function () {
+                $(this).popover('hide');
+            });
+        });
+    },
+    add_endpoint_json: function (string, addition) {
+        let res = string.split('.json');
+        let endpoint = res[0] + '/' + addition + '.json';
+        endpoint = endpoint.replace('//', '/'); // Remove duplicated '/' just in case
+        return endpoint;
+    },
+    add_endpoint_join: function (api_string, addition) {
         // assumes api_string has trailing forward slash "/" character required for POST
         let endpoint = api_string + addition;
-        endpoint = endpoint.replace("//", "/")  // Remove duplicated '/' just in case
-        return endpoint
+        endpoint = endpoint.replace('//', '/'); // Remove duplicated '/' just in case
+        return endpoint;
     },
-    dtPopover: function(value,truncate_length=30, trigger='hover'){
+    dtPopover: function (value, truncate_length = 30, trigger = 'hover') {
         var ellipsis = '...',
-        truncated = _.truncate(value, {
-            length: truncate_length,
-            omission: ellipsis,
-            separator: ' '
-        }),
-        result = '<span>' + truncated + '</span>',
-        popTemplate = _.template('<a class="mx-0 ps-1 pe-0" href="javascript://" ' +
-            'role="button" ' +
-            'data-bs-toggle="popover" ' +
-            'data-bs-trigger="'+trigger+'" ' +
-            'data-bs-placement="top"' +
-            'data-bs-html="true" ' +
-            'data-bs-content="<%= text %>" ' +
-            '><small>hover for more</small></a>');
+            truncated = _.truncate(value, {
+                length: truncate_length,
+                omission: ellipsis,
+                separator: ' ',
+            }),
+            result = '<span>' + truncated + '</span>',
+            popTemplate = _.template(
+                '<a class="mx-0 ps-1 pe-0" href="javascript://" ' +
+                    'role="button" ' +
+                    'data-bs-toggle="popover" ' +
+                    'data-bs-trigger="' +
+                    trigger +
+                    '" ' +
+                    'data-bs-placement="top"' +
+                    'data-bs-html="true" ' +
+                    'data-bs-content="<%= text %>" ' +
+                    '><small>hover for more</small></a>'
+            );
         if (_.endsWith(truncated, ellipsis)) {
             result += popTemplate({
-                text: value
+                text: value,
             });
         }
         return result;
     },
     //for when we need the text and hover link to be separated
-    dtPopoverSplit: function(value,truncate_length=30,trigger='hover'){
+    dtPopoverSplit: function (value, truncate_length = 30, trigger = 'hover') {
         var ellipsis = '...',
-        truncated = _.truncate(value, {
-            length: truncate_length,
-            omission: ellipsis,
-            separator: ' '
-        }),
-        result = '<span>' + truncated + '</span>',
-        popTemplate = _.template('<a class="mx-0 ps-1 pe-0" href="javascript://" ' +
-            'role="button" ' +
-            'data-bs-toggle="popover" ' +
-            'data-bs-trigger="'+trigger+'" ' +
-            'data-bs-placement="top"' +
-            'data-bs-html="true" ' +
-            'data-bs-content="<%= text %>" ' +
-            '><small>hover for more</small></a>');
+            truncated = _.truncate(value, {
+                length: truncate_length,
+                omission: ellipsis,
+                separator: ' ',
+            }),
+            result = '<span>' + truncated + '</span>',
+            popTemplate = _.template(
+                '<a class="mx-0 ps-1 pe-0" href="javascript://" ' +
+                    'role="button" ' +
+                    'data-bs-toggle="popover" ' +
+                    'data-bs-trigger="' +
+                    trigger +
+                    '" ' +
+                    'data-bs-placement="top"' +
+                    'data-bs-html="true" ' +
+                    'data-bs-content="<%= text %>" ' +
+                    '><small>hover for more</small></a>'
+            );
 
         if (_.endsWith(truncated, ellipsis)) {
-            return {"text":result, "link":popTemplate({
-                text: value
-            })}
+            return {
+                text: result,
+                link: popTemplate({
+                    text: value,
+                }),
+            };
         } else {
-            return {"text":result, link: ""}
-        };
+            return { text: result, link: '' };
+        }
     },
-    processError: async function(err){
-        console.log(err)
+    processError: async function (err) {
+        console.log(err);
         let errorText = '';
         if (err.body.non_field_errors) {
-            console.log('non_field_errors')
+            console.log('non_field_errors');
             // When non field errors raised
-            for (let i=0; i<err.body.non_field_errors.length; i++){
+            for (let i = 0; i < err.body.non_field_errors.length; i++) {
                 errorText += err.body.non_field_errors[i] + '<br />';
             }
-        } else if(Array.isArray(err.body)) {
-            console.log('isArray')
+        } else if (Array.isArray(err.body)) {
+            console.log('isArray');
             // When serializers.ValidationError raised
-            for (let i=0; i<err.body.length; i++){
+            for (let i = 0; i < err.body.length; i++) {
                 errorText += err.body[i] + '<br />';
             }
         } else {
-            console.log('else')
+            console.log('else');
             // When field errors raised
-            for (let field_name in err.body){
-                if (err.body.hasOwnProperty(field_name)){
+            for (let field_name in err.body) {
+                if (
+                    Object.prototype.hasOwnProperty.call(err.body, field_name)
+                ) {
                     errorText += field_name + ':<br />';
-                    for (let j=0; j<err.body[field_name].length; j++){
+                    for (let j = 0; j < err.body[field_name].length; j++) {
                         errorText += err.body[field_name][j] + '<br />';
                     }
                 }
             }
         }
-        await swal("Error", errorText, "error");
+        await swal('Error', errorText, 'error');
     },
-    post_and_redirect: function(url, postData) {
+    post_and_redirect: function (url, postData) {
         /* http.post and ajax do not allow redirect from Django View (post method),
            this function allows redirect by mimicking a form submit.
 
@@ -205,27 +221,34 @@ module.exports = {
         var postFormStr = "<form method='POST' action='" + url + "'>";
 
         for (var key in postData) {
-            if (postData.hasOwnProperty(key)) {
-                postFormStr += "<input type='hidden' name='" + key + "' value='" + postData[key] + "'>";
+            if (Object.prototype.hasOwnProperty.call(postData, key)) {
+                postFormStr +=
+                    "<input type='hidden' name='" +
+                    key +
+                    "' value='" +
+                    postData[key] +
+                    "'>";
             }
         }
-        postFormStr += "</form>";
+        postFormStr += '</form>';
         var formElement = $(postFormStr);
         $('body').append(formElement);
         $(formElement).submit();
     },
-    enablePopovers: function(){
-        let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-        let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-            let popover = new bootstrap.Popover(popoverTriggerEl)
-        })
+    enablePopovers: function () {
+        let popoverTriggerList = [].slice.call(
+            document.querySelectorAll('[data-bs-toggle="popover"]')
+        );
+        popoverTriggerList.map(function (popoverTriggerEl) {
+            new bootstrap.Popover(popoverTriggerEl);
+        });
     },
-    checkForChange: function(before, after) {
+    checkForChange: function (before, after) {
         //compare two objects, return true if the are the same
         console.log(before);
         console.log(after);
         //JSON.stringify does not guarantee order and removes keys with undefined values
         //that is acceptable for this use case, however
         return JSON.stringify(before) === JSON.stringify(after);
-    }
+    },
 };
diff --git a/boranga/frontend/boranga/src/utils/hooks.js b/boranga/frontend/boranga/src/utils/hooks.js
index b2e247b4..9e3cda45 100755
--- a/boranga/frontend/boranga/src/utils/hooks.js
+++ b/boranga/frontend/boranga/src/utils/hooks.js
@@ -1,10 +1,6 @@
 import api_endpoints from '@/api.js';
-import helpers from './helpers'
-import constants from './constants'
+import helpers from './helpers';
+import constants from './constants';
 import utils from '@/utils/utils';
-export {
-  api_endpoints,
-  helpers,
-  constants,
-  utils,
-}
+
+export { api_endpoints, helpers, constants, utils };

From 067b0ae11803790035f595d1c19e1febdeebee64 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:49:54 +0800
Subject: [PATCH 039/138] Update routes to be Vue3 compatible.

---
 .../src/components/external/routes/index.js   | 169 ++++++-----
 .../src/components/internal/routes/index.js   | 273 +++++++++---------
 boranga/frontend/boranga/src/router/index.js  |  14 +-
 3 files changed, 227 insertions(+), 229 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/external/routes/index.js b/boranga/frontend/boranga/src/components/external/routes/index.js
index d00793a7..328a3392 100755
--- a/boranga/frontend/boranga/src/components/external/routes/index.js
+++ b/boranga/frontend/boranga/src/components/external/routes/index.js
@@ -1,92 +1,91 @@
 import { RouterView } from 'vue-router';
 
-import SpeciesCommunitiesDash from '../species_communities/dashboard.vue'
-import ExternalConservationStatusDash from '../conservation_status/dashboard.vue'
+import SpeciesCommunitiesDash from '../species_communities/dashboard.vue';
+import ExternalConservationStatusDash from '../conservation_status/dashboard.vue';
 
-import ExternalSpeciesCommunity from '../species_communities/species_communities.vue'
+import ExternalSpeciesCommunity from '../species_communities/species_communities.vue';
 
-import ConservationStatusProposal from '../conservation_status/conservation_status_proposal.vue'
-import ConservationStatusProposalSubmit from '../conservation_status/conservation_status_proposal_submit.vue'
-import ConservationStatusReferral from '../../internal/conservation_status/referral.vue'
+import ConservationStatusProposal from '../conservation_status/conservation_status_proposal.vue';
+import ConservationStatusProposalSubmit from '../conservation_status/conservation_status_proposal_submit.vue';
+import ConservationStatusReferral from '../../internal/conservation_status/referral.vue';
 
-import ExternalOccurrenceReportDash from '../occurrence/dashboard.vue'
-import OccurrenceReportProposal from '../occurrence/occurrence_report_proposal.vue'
-import OccurrenceReportReferral from '../../internal/occurrence/referral.vue'
+import ExternalOccurrenceReportDash from '../occurrence/dashboard.vue';
+import OccurrenceReportProposal from '../occurrence/occurrence_report_proposal.vue';
+import OccurrenceReportReferral from '../../internal/occurrence/referral.vue';
 
-import OCRProposalSubmit from '../occurrence/ocr_proposal_submit.vue'
+import OCRProposalSubmit from '../occurrence/ocr_proposal_submit.vue';
 
-export default
-    {
-        path: '/external',
-        component: RouterView,
-        children: [
-            {
-                path: 'species-communities',
-                component: SpeciesCommunitiesDash,
-                name: "external-species-communities-dash"
-            },
-            {
-                path: 'species-communities',
-                component: RouterView,
-                children: [
-                    {
-                        path: ':species_community_id',
-                        name: "external-species-communities",
-                        component: ExternalSpeciesCommunity,
-                    },
-                ]
-            },
-            {
-                path: 'occurrence-report',
-                component: ExternalOccurrenceReportDash,
-                name: "external-occurrence-report-dash"
-            },
-            {
-                path: 'occurrence-report',
-                component: RouterView,
-                children: [
-                    {
-                        path: ':occurrence_report_id',
-                        component: OccurrenceReportProposal,
-                        name: "draft_ocr_proposal"
-                    },
-                    {
-                        path: '/submit',
-                        component: OCRProposalSubmit,
-                        name: "submit_ocr_proposal"
-                    },
-                    {
-                        path: ':occurrence_report_id/referral/:referral_id',
-                        component: OccurrenceReportReferral,
-                        name: "occurrence-report-referral"
-                    }
-                ]
-            },
-            {
-                path: 'conservation-status',
-                component: ExternalConservationStatusDash,
-                name: "external-conservation_status-dash"
-            },
-            {
-                path: 'conservation-status',
-                component: RouterView,
-                children: [
-                    {
-                        path: ':conservation_status_id',
-                        component: ConservationStatusProposal,
-                        name: "draft_cs_proposal"
-                    },
-                    {
-                        path: 'submit',
-                        component: ConservationStatusProposalSubmit,
-                        name: "submit_cs_proposal"
-                    },
-                    {
-                        path: ':conservation_status_id/referral/:referral_id',
-                        component: ConservationStatusReferral,
-                        name: "conservation-status-referral"
-                    }
-                ]
-            },
-        ]
-    }
+export default {
+    path: '/external',
+    component: RouterView,
+    children: [
+        {
+            path: 'species-communities',
+            component: SpeciesCommunitiesDash,
+            name: 'external-species-communities-dash',
+        },
+        {
+            path: 'species-communities',
+            component: RouterView,
+            children: [
+                {
+                    path: ':species_community_id',
+                    name: 'external-species-communities',
+                    component: ExternalSpeciesCommunity,
+                },
+            ],
+        },
+        {
+            path: 'occurrence-report',
+            component: ExternalOccurrenceReportDash,
+            name: 'external-occurrence-report-dash',
+        },
+        {
+            path: 'occurrence-report',
+            component: RouterView,
+            children: [
+                {
+                    path: ':occurrence_report_id',
+                    component: OccurrenceReportProposal,
+                    name: 'draft_ocr_proposal',
+                },
+                {
+                    path: '/submit',
+                    component: OCRProposalSubmit,
+                    name: 'submit_ocr_proposal',
+                },
+                {
+                    path: ':occurrence_report_id/referral/:referral_id',
+                    component: OccurrenceReportReferral,
+                    name: 'occurrence-report-referral',
+                },
+            ],
+        },
+        {
+            path: 'conservation-status',
+            component: ExternalConservationStatusDash,
+            name: 'external-conservation_status-dash',
+        },
+        {
+            path: 'conservation-status',
+            component: RouterView,
+            children: [
+                {
+                    path: ':conservation_status_id',
+                    component: ConservationStatusProposal,
+                    name: 'draft_cs_proposal',
+                },
+                {
+                    path: 'submit',
+                    component: ConservationStatusProposalSubmit,
+                    name: 'submit_cs_proposal',
+                },
+                {
+                    path: ':conservation_status_id/referral/:referral_id',
+                    component: ConservationStatusReferral,
+                    name: 'conservation-status-referral',
+                },
+            ],
+        },
+    ],
+};
diff --git a/boranga/frontend/boranga/src/components/internal/routes/index.js b/boranga/frontend/boranga/src/components/internal/routes/index.js
index 7b556c9f..83b2442c 100755
--- a/boranga/frontend/boranga/src/components/internal/routes/index.js
+++ b/boranga/frontend/boranga/src/components/internal/routes/index.js
@@ -1,140 +1,139 @@
 import { RouterView } from 'vue-router';
 
-import User from '../users/manage.vue'
-import SpeciesCommunitiesDash from '../species_communities/dashboard.vue'
-import SpeciesCommunities from '../species_communities/species_communities.vue'
-import ConservationStatusDash from '../conservation_status/dashboard.vue'
-import ConservationStatus from '../conservation_status/conservation_status.vue'
-import ConservationStatusReferral from '../conservation_status/referral.vue'
-import MeetingsDash from '../meetings/dashboard.vue'
-import Meeting from '../meetings/meeting.vue'
-import OccurrenceDash from '../occurrence/dashboard.vue'
-import Occurrence from '../occurrence/occurrence.vue'
-import OccurrenceReport from '../occurrence/occurrence_report.vue'
-import OccurrenceReportReferral from '../occurrence/referral.vue'
-import BulkImport from '../occurrence/bulk_import.vue'
-import BulkImportSchemaList from '../occurrence/bulk_import_schema_list.vue'
-import BulkImportSchema from '../occurrence/bulk_import_schema.vue'
+import User from '../users/manage.vue';
+import SpeciesCommunitiesDash from '../species_communities/dashboard.vue';
+import SpeciesCommunities from '../species_communities/species_communities.vue';
+import ConservationStatusDash from '../conservation_status/dashboard.vue';
+import ConservationStatus from '../conservation_status/conservation_status.vue';
+import ConservationStatusReferral from '../conservation_status/referral.vue';
+import MeetingsDash from '../meetings/dashboard.vue';
+import Meeting from '../meetings/meeting.vue';
+import OccurrenceDash from '../occurrence/dashboard.vue';
+import Occurrence from '../occurrence/occurrence.vue';
+import OccurrenceReport from '../occurrence/occurrence_report.vue';
+import OccurrenceReportReferral from '../occurrence/referral.vue';
+import BulkImport from '../occurrence/bulk_import.vue';
+import BulkImportSchemaList from '../occurrence/bulk_import_schema_list.vue';
+import BulkImportSchema from '../occurrence/bulk_import_schema.vue';
 
-export default
-    {
-        path: '/internal',
-        component: RouterView,
-        children: [
-            {
-                path: '/',
-                component: SpeciesCommunitiesDash,
-            },
-            {
-                path: 'species-communities',
-                component: SpeciesCommunitiesDash,
-                name: "internal-species-communities-dash"
-            },
-            {
-                path: 'conservation-status',
-                component: ConservationStatusDash,
-                name: "internal-conservation-status-dash"
-            },
-            {
-                path: 'meetings',
-                component: MeetingsDash,
-                name: "internal-meetings-dash"
-            },
-            {
-                path: 'meetings/:meeting_id',
-                component: Meeting,
-                name: "internal-meetings"
-            },
-            {
-                path: 'occurrence',
-                component: OccurrenceDash,
-                name: "internal-occurrence-dash"
-            },
-            {
-                path: 'occurrence/:occurrence_id',
-                component: Occurrence,
-                name: "internal-occurrence-detail"
-            },
-            {
-                path: 'occurrence-report',
-                component: RouterView,
-                children: [
-                    {
-                        path: 'bulk_import_schema/:bulk_import_schema_id',
-                        name: "occurrence-report-bulk-import-schema-details",
-                        component: BulkImportSchema
-                    },
-                    {
-                        path: 'bulk_import_schema/',
-                        name: "occurrence-report-bulk-import-schema-list",
-                        component: BulkImportSchemaList
-                    },
-                    {
-                        path: 'bulk_import/',
-                        name: "occurrence-report-bulk-import",
-                        component: BulkImport
-                    },
-                    {
-                        path: ':occurrence_report_id',
-                        component: RouterView,
-                        children: [
-                            {
-                                path: '',
-                                component: OccurrenceReport,
-                                name: "internal-occurrence-report-detail",
-                            },
-                            {
-                                path: 'referral/:referral_id',
-                                component: OccurrenceReportReferral,
-                                name: "internal-occurrence-report-referral"
-                            }
-                        ]
-                    },
-                ]
-            },
-            {
-                path: 'users',
-                component: RouterView,
-                children: [
-                    {
-                        path: ':user_id',
-                        component: User,
-                        name: "internal-user-detail"
-                    },
-                ]
-            },
-            {
-                path: 'species-communities',
-                component: RouterView,
-                children: [
-                    {
-                        path: ':species_community_id',
-                        component: SpeciesCommunities,
-                        name: "internal-species-communities"
-                    },
-                ]
-            },
-            {
-                path: 'conservation-status',
-                component: RouterView,
-                children: [
-                    {
-                        path: ':conservation_status_id',
-                        component: RouterView,
-                        children: [
-                            {
-                                path: '',
-                                component: ConservationStatus,
-                                name: "internal-conservation-status"
-                            },
-                            {
-                                path: 'referral/:referral_id',
-                                component: ConservationStatusReferral,
-                                name: "internal-conservation-status-referral"
-                            }
-                        ]
-                    },
-                ]
-            }
-        ]
-    }
+export default {
+    path: '/internal',
+    component: RouterView,
+    children: [
+        {
+            path: '/',
+            component: SpeciesCommunitiesDash,
+        },
+        {
+            path: 'species-communities',
+            component: SpeciesCommunitiesDash,
+            name: 'internal-species-communities-dash',
+        },
+        {
+            path: 'conservation-status',
+            component: ConservationStatusDash,
+            name: 'internal-conservation-status-dash',
+        },
+        {
+            path: 'meetings',
+            component: MeetingsDash,
+            name: 'internal-meetings-dash',
+        },
+        {
+            path: 'meetings/:meeting_id',
+            component: Meeting,
+            name: 'internal-meetings',
+        },
+        {
+            path: 'occurrence',
+            component: OccurrenceDash,
+            name: 'internal-occurrence-dash',
+        },
+        {
+            path: 'occurrence/:occurrence_id',
+            component: Occurrence,
+            name: 'internal-occurrence-detail',
+        },
+        {
+            path: 'occurrence-report',
+            component: RouterView,
+            children: [
+                {
+                    path: 'bulk_import_schema/:bulk_import_schema_id',
+                    name: 'occurrence-report-bulk-import-schema-details',
+                    component: BulkImportSchema,
+                },
+                {
+                    path: 'bulk_import_schema/',
+                    name: 'occurrence-report-bulk-import-schema-list',
+                    component: BulkImportSchemaList,
+                },
+                {
+                    path: 'bulk_import/',
+                    name: 'occurrence-report-bulk-import',
+                    component: BulkImport,
+                },
+                {
+                    path: ':occurrence_report_id',
+                    component: RouterView,
+                    children: [
+                        {
+                            path: '',
+                            component: OccurrenceReport,
+                            name: 'internal-occurrence-report-detail',
+                        },
+                        {
+                            path: 'referral/:referral_id',
+                            component: OccurrenceReportReferral,
+                            name: 'internal-occurrence-report-referral',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            path: 'users',
+            component: RouterView,
+            children: [
+                {
+                    path: ':user_id',
+                    component: User,
+                    name: 'internal-user-detail',
+                },
+            ],
+        },
+        {
+            path: 'species-communities',
+            component: RouterView,
+            children: [
+                {
+                    path: ':species_community_id',
+                    component: SpeciesCommunities,
+                    name: 'internal-species-communities',
+                },
+            ],
+        },
+        {
+            path: 'conservation-status',
+            component: RouterView,
+            children: [
+                {
+                    path: ':conservation_status_id',
+                    component: RouterView,
+                    children: [
+                        {
+                            path: '',
+                            component: ConservationStatus,
+                            name: 'internal-conservation-status',
+                        },
+                        {
+                            path: 'referral/:referral_id',
+                            component: ConservationStatusReferral,
+                            name: 'internal-conservation-status-referral',
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
diff --git a/boranga/frontend/boranga/src/router/index.js b/boranga/frontend/boranga/src/router/index.js
index 0885209a..1261c87e 100755
--- a/boranga/frontend/boranga/src/router/index.js
+++ b/boranga/frontend/boranga/src/router/index.js
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '@/components/internal/Home'
-import external_routes from '@/components/external/routes'
-import internal_routes from '@/components/internal/routes'
+import Home from '@/components/internal/Home.vue';
+import external_routes from '@/components/external/routes';
+import internal_routes from '@/components/internal/routes';
 
 const router = createRouter({
     history: createWebHistory(),
@@ -9,11 +9,11 @@ const router = createRouter({
     routes: [
         {
             path: '/',
-            component: Home
+            component: Home,
         },
         external_routes,
-        internal_routes
-    ]
-})
+        internal_routes,
+    ],
+});
 
 export default router;

From 4f9df7c941bd15007d804b3aa14f9996b7f8123b Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:50:24 +0800
Subject: [PATCH 040/138] Lint.

---
 .../boranga/src/components/external/utils.js  | 99 ++++++++++---------
 1 file changed, 53 insertions(+), 46 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/external/utils.js b/boranga/frontend/boranga/src/components/external/utils.js
index a404caf4..b8d9d0e9 100755
--- a/boranga/frontend/boranga/src/components/external/utils.js
+++ b/boranga/frontend/boranga/src/components/external/utils.js
@@ -1,58 +1,65 @@
-import Vue from 'vue'
-import api from './api'
-import {helpers} from '@/utils/hooks'
+import api from './api.js';
+import { helpers } from '@/utils/hooks';
 
 export default {
-    fetchProfile: function (){
-        return new Promise ((resolve,reject) => {
-            fetch(api.profile).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchProfile: function () {
+        return new Promise((resolve, reject) => {
+            fetch(api.profile).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
-
     },
-    fetchProposal: function(id){
-        return new Promise ((resolve,reject) => {
-            fetch(helpers.add_endpoint_json(api.proposals,id)).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchProposal: function (id) {
+        return new Promise((resolve, reject) => {
+            fetch(helpers.add_endpoint_json(api.proposals, id)).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-    fetchCountries: function (){
-        return new Promise ((resolve,reject) => {
-            fetch(api.countries).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchCountries: function () {
+        return new Promise((resolve, reject) => {
+            fetch(api.countries).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
-
     },
-    fetchOrganisationPermissions: function(id){
-        return new Promise ((resolve,reject) => {
-            fetch(helpers.add_endpoint_json(api.my_organisations,id)).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchOrganisationPermissions: function (id) {
+        return new Promise((resolve, reject) => {
+            fetch(helpers.add_endpoint_json(api.my_organisations, id)).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-    fetchOrganisation: function(id){
-        return new Promise ((resolve,reject) => {
-            fetch(helpers.add_endpoint_json(api.organisations,id)).then((response) => {
-                resolve(response.body);
-            },
-            (error) => {
-                reject(error);
-            });
+    fetchOrganisation: function (id) {
+        return new Promise((resolve, reject) => {
+            fetch(helpers.add_endpoint_json(api.organisations, id)).then(
+                (response) => {
+                    resolve(response.body);
+                },
+                (error) => {
+                    reject(error);
+                }
+            );
         });
     },
-}
+};

From 0264c7880d49f45a0ad6dd24f4cf6211b54fa99d Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:51:15 +0800
Subject: [PATCH 041/138] Remove unused file.

---
 boranga/frontend/boranga/index.html | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100755 boranga/frontend/boranga/index.html

diff --git a/boranga/frontend/boranga/index.html b/boranga/frontend/boranga/index.html
deleted file mode 100755
index 45c323a9..00000000
--- a/boranga/frontend/boranga/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Commercial Operator</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

From 527e64f8c5237b72f75da88cd21c7c532a731e80 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 11:53:56 +0800
Subject: [PATCH 042/138] Enable eslint again.

---
 .vscode/settings.json | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 74a53f59..76df8658 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,9 @@
 {
-    "editor.formatOnSaveMode": "modifications"
-}
\ No newline at end of file
+    "editor.formatOnSaveMode": "file",
+    "eslint.debug": true,
+    "eslint.enable": true,
+    "eslint.format.enable": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "always",
+    },
+}

From 873bfcbe68ea4440053d25cb8c905f5cd36c7e51 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 12:04:47 +0800
Subject: [PATCH 043/138] Changes to support running under vite.

---
 boranga/frontend/boranga/src/App.vue          | 15 ++--
 .../src/components/common/add_document.vue    |  2 +-
 .../common/communities_dashboard.vue          |  4 +-
 .../src/components/common/component_map.vue   | 73 ++++++++++---------
 .../conservation_status/community_status.vue  |  2 -
 .../conservation_status/cs_documents.vue      |  2 +-
 ...onservation_status_community_dashboard.vue |  4 +-
 .../conservation_status_fauna_dashboard.vue   |  4 +-
 .../conservation_status_flora_dashboard.vue   |  4 +-
 .../cs_community_referrals_dashboard.vue      |  2 +-
 .../cs_external_referrals_dashboard.vue       |  2 +-
 .../common/cs_fauna_referrals_dashboard.vue   |  2 +-
 .../common/cs_flora_referrals_dashboard.vue   |  2 +-
 .../src/components/common/display_history.vue |  2 -
 .../common/occurrence/animal_observation.vue  |  2 +-
 .../common/occurrence/contact_datatable.vue   |  2 +-
 .../common/occurrence/observer_datatable.vue  |  2 +-
 .../common/occurrence/occ_documents.vue       |  2 +-
 .../common/occurrence/occ_habitat.vue         |  2 +-
 .../common/occurrence/occ_locations.vue       |  2 +-
 .../common/occurrence/occ_observation.vue     |  6 +-
 .../occurrence/occ_ocr_existing_threats.vue   |  2 +-
 .../occurrence/occ_related_ocr_table.vue      |  2 +-
 .../occurrence/occ_related_species_table.vue  |  2 +-
 .../common/occurrence/occ_threats.vue         |  2 +-
 .../occurrence/occurrence_report_profile.vue  |  6 +-
 .../common/occurrence/ocr_documents.vue       |  2 +-
 .../common/occurrence/ocr_habitat.vue         |  4 +-
 .../common/occurrence/ocr_location.vue        |  6 +-
 .../common/occurrence/ocr_observation.vue     |  2 +-
 .../occurrence/ocr_related_species_table.vue  |  1 -
 .../common/occurrence/ocr_threats.vue         |  2 +-
 .../common/occurrence/plant_count.vue         |  2 +-
 .../common/occurrence_community_dashboard.vue |  4 +-
 .../common/occurrence_fauna_dashboard.vue     |  4 +-
 .../common/occurrence_flora_dashboard.vue     |  4 +-
 .../occurrence_report_community_dashboard.vue |  4 +-
 .../occurrence_report_fauna_dashboard.vue     |  4 +-
 .../occurrence_report_flora_dashboard.vue     |  4 +-
 .../ocr_external_referrals_dashboard.vue      |  2 +-
 .../common/ocr_referrals_dashboard.vue        |  2 +-
 .../community_documents.vue                   |  2 +-
 .../community_occ_threats.vue                 |  2 +-
 .../species_communities/community_profile.vue |  2 +-
 .../species_communities/community_threats.vue |  2 +-
 .../species_communities/related_items.vue     | 13 ++--
 .../species_combine/add_combine_species.vue   |  2 +-
 .../species_combine_documents.vue             |  2 +-
 .../species_combine_profile.vue               |  2 +-
 .../species_combine_threats.vue               |  2 +-
 .../species_communities/species_documents.vue |  2 +-
 .../species_occ_threats.vue                   |  2 +-
 .../species_communities/species_profile.vue   |  2 +-
 .../species_split/species_split_documents.vue |  2 +-
 .../species_split/species_split_profile.vue   |  2 +-
 .../species_split/species_split_threats.vue   |  2 +-
 .../species_communities/species_threats.vue   |  8 +-
 .../common/species_fauna_dashboard.vue        |  4 +-
 .../common/species_flora_dashboard.vue        |  2 -
 .../conservation_status_proposal.vue          |  2 +-
 .../conservation_status_proposal_table.vue    |  4 +-
 .../occurrence/occurrence_report_proposal.vue |  2 +-
 .../occurrence/occurrence_report_table.vue    |  4 +-
 .../species_communities.vue                   |  2 +-
 .../conservation_status/amendment_request.vue |  2 +-
 .../conservation_status.vue                   |  6 +-
 .../internal/conservation_status/referral.vue |  2 +-
 .../components/internal/meetings/cs_queue.vue |  4 +-
 .../components/internal/meetings/meeting.vue  |  2 +-
 .../internal/meetings/meetings_datatable.vue  |  4 +-
 .../components/internal/meetings/minutes.vue  |  2 +-
 .../internal/occurrence/amendment_request.vue |  2 +-
 .../internal/occurrence/back_to_assessor.vue  | 13 +---
 .../internal/occurrence/occurrence.vue        | 20 ++---
 .../occurrence_combine_selection.vue          |  2 +-
 .../internal/occurrence/occurrence_report.vue |  6 +-
 .../occurrence/occurrence_site_datatable.vue  |  2 +-
 .../internal/occurrence/referral.vue          |  2 +-
 .../species_communities/amendment_request.vue |  2 +-
 .../species_communities.vue                   |  4 +-
 .../species_communities/species_split.vue     |  2 +-
 .../boranga/src/utils/vue/datatable.vue       |  2 +-
 82 files changed, 163 insertions(+), 184 deletions(-)

diff --git a/boranga/frontend/boranga/src/App.vue b/boranga/frontend/boranga/src/App.vue
index 85ce0f31..1a9c0785 100755
--- a/boranga/frontend/boranga/src/App.vue
+++ b/boranga/frontend/boranga/src/App.vue
@@ -1,22 +1,21 @@
 <template>
-<div id="app">
-  <router-view></router-view>
-</div>
+    <div id="app">
+        <router-view></router-view>
+    </div>
 </template>
 
 <script>
 export default {
-  name: 'app'
-}
-
-
+    name: 'App',
+};
 </script>
 
 <style>
 .popover {
     max-width: 100% !important;
 }
-.select2-container--disabled, .select2-container--focus{
+.select2-container--disabled,
+.select2-container--focus {
     z-index: 1;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/add_document.vue b/boranga/frontend/boranga/src/components/common/add_document.vue
index 3611b7f9..32d53d26 100644
--- a/boranga/frontend/boranga/src/components/common/add_document.vue
+++ b/boranga/frontend/boranga/src/components/common/add_document.vue
@@ -277,7 +277,7 @@ export default {
                 fetch(helpers.add_endpoint_json(vm.url, documentObj.id), {
                     method: 'PUT',
                     headers: {
-                        'Content-Type': 'application/json',
+                        'Content-Type': 'multipart/form-data',
                     },
                     body: JSON.stringify(formData)
                 }).then((response) => {
diff --git a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
index c0298c8e..7cddf6d6 100644
--- a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
@@ -122,12 +122,12 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import CommunityHistory from '../internal/species_communities/community_history.vue';
-import Vue from 'vue'
+
 import {
     api_endpoints,
     constants,
diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 3fba787c..ce94e6b8 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -231,11 +231,11 @@
                                             feature.getProperties().show_on_map
                                         "
                                         :set="
-                                            (displayProperties =
+                                            displayProperties =
                                                 featureGetDisplayProperties(
                                                     feature,
                                                     getLayerByName(name)
-                                                ))
+                                                )
                                         "
                                         class="input-group input-group-sm mb-1 text-nowrap"
                                     >
@@ -1130,15 +1130,13 @@
                                                 "
                                             >
                                                 <img
-                                                    :src="
-                                                        require(`../../assets/${
-                                                            spatialOperationsAvailable.find(
-                                                                (op) =>
-                                                                    op.id ==
-                                                                    selectedSpatialOperation
-                                                            ).icon
-                                                        }`)
-                                                    "
+                                                    :src="`../../static/boranga_vue/src/assets/${
+                                                        spatialOperationsAvailable.find(
+                                                            (op) =>
+                                                                op.id ==
+                                                                selectedSpatialOperation
+                                                        ).icon
+                                                    }.svg`"
                                                 />
                                             </div>
                                         </div>
@@ -1948,6 +1946,7 @@ export default {
         'refreshFromResponse',
         'features-loaded',
         'toggle-show-hide',
+        'crs-select-search',
     ],
     data() {
         return {
@@ -2030,6 +2029,8 @@ export default {
             cursorInLeftHalfOfMap: true,
             cursorInBottomHalfOfMap: true,
             showToastCloseButton: false,
+
+            mapMarker: '../../static/boranga_vue/src/assets/map-marker.svg',
         };
     },
     computed: {
@@ -2204,37 +2205,37 @@ export default {
                 {
                     id: 'buffer_geometries',
                     name: 'Buffer',
-                    icon: 'buffer-geometries.svg',
+                    icon: 'buffer-geometries',
                     number_params: 1,
                 },
                 {
                     id: 'convex_hull',
                     name: 'Convex Hull',
-                    icon: 'convex-hull.svg',
+                    icon: 'convex-hull',
                     number_params: 0,
                 },
                 {
                     id: 'intersect_geometries',
                     name: 'Intersection',
-                    icon: 'intersect-geometries.svg',
+                    icon: 'intersect-geometries',
                     number_params: 0,
                 },
                 {
                     id: 'union_geometries',
                     name: 'Union',
-                    icon: 'union-geometries.svg',
+                    icon: 'union-geometries',
                     number_params: 0,
                 },
                 {
                     id: 'voronoi',
                     name: 'Voronoi',
-                    icon: 'voronoi.svg',
+                    icon: 'voronoi',
                     number_params: 0,
                 },
                 {
                     id: 'centroid',
                     name: 'Centroid',
-                    icon: 'centroid.svg',
+                    icon: 'centroid',
                     number_params: 0,
                 },
                 // Spatial statistics functions below
@@ -2358,7 +2359,7 @@ export default {
                 this.queryLayerDefinition.query_param_key
             ),
             // Tile Layers
-            this.fetchTileLayers(this, this.tileLayerApiUrl),
+            fetchTileLayers(this, this.tileLayerApiUrl),
         ];
         // Addional Layers
         const additionalInitialisers = [];
@@ -2952,7 +2953,7 @@ export default {
                             'Point',
                             null,
                             null,
-                            require('../../assets/map-marker.svg'),
+                            this.mapMarker,
                             rgba[3]
                         );
                     }
@@ -3132,6 +3133,7 @@ export default {
             return proposals;
         },
         initialiseBaseLayers: function (tileLayers) {
+            console.log('initialiseBaseLayers()');
             this.tileLayerMapbox = new TileLayer({
                 title: 'Mapbox Streets',
                 type: 'base',
@@ -3159,6 +3161,7 @@ export default {
                 title: 'Background Maps',
                 layers: [this.tileLayerMapbox, this.tileLayerSat],
             });
+            console.log('baseLayers', baseLayers);
             // Hack
             if (!baseLayers.getSource) {
                 baseLayers.getSource = () => {
@@ -3217,7 +3220,10 @@ export default {
 
                     const img = $('<img>');
                     img.addClass('svg-object');
-                    img.attr('src', require('../../assets/pen-icon.svg'));
+                    img.attr(
+                        'src',
+                        '../../static/boranga_vue/src/assets/pen-icon.svg?raw'
+                    );
 
                     divDraw.append(img);
                     divWrapper.append(divDraw);
@@ -3501,7 +3507,7 @@ export default {
                         'Point',
                         null,
                         null,
-                        require('../../assets/map-marker.svg'),
+                        vm.mapMarker,
                         rgba[3]
                     );
                 }
@@ -3570,7 +3576,7 @@ export default {
                                     type,
                                     null,
                                     null,
-                                    require('../../assets/map-marker.svg'),
+                                    vm.mapMarker,
                                     rgba[3]
                                 )
                             );
@@ -3923,7 +3929,6 @@ export default {
             });
 
             const transformEndCallback = function (evt) {
-                // eslint-disable-next-line no-unused-vars
                 evt.features.forEach((feature) => {
                     vm.emitValidateFeature(feature);
                     const original_srid =
@@ -4376,6 +4381,7 @@ export default {
         addTileLayers: function () {
             let vm = this;
             for (let tileLayer of this.optionalLayers) {
+                console.log('Adding optional layer', tileLayer);
                 vm.map.addLayer(tileLayer);
                 tileLayer.on('change:visible', function (e) {
                     if (e.oldValue == false) {
@@ -4766,6 +4772,7 @@ export default {
                     layers.push(layer);
                 } catch (error) {
                     //
+                    console.log(error);
                 }
             }, layers);
 
@@ -5107,7 +5114,7 @@ export default {
                     type,
                     null,
                     null,
-                    require('../../assets/map-marker.svg'),
+                    this.mapMarker,
                     rgba[3]
                 );
             }
@@ -5455,11 +5462,11 @@ export default {
                 document.querySelectorAll('[data-bs-toggle="tooltip"]')
             );
             // eslint-disable-next-line no-unused-vars
-            var tooltipList = tooltipTriggerList.map(function (
-                tooltipTriggerEl
-            ) {
-                return new bootstrap.Tooltip(tooltipTriggerEl);
-            });
+            var tooltipList = tooltipTriggerList.map(
+                function (tooltipTriggerEl) {
+                    return new bootstrap.Tooltip(tooltipTriggerEl);
+                }
+            );
         },
         /**
          * Returns the type of a feature
@@ -5470,10 +5477,10 @@ export default {
                 'getGeometry' in feature
                     ? feature.getGeometry().getType()
                     : feature.geometry
-                    ? feature.geometry.type
-                    : feature.type
-                    ? feature.type
-                    : null;
+                      ? feature.geometry.type
+                      : feature.type
+                        ? feature.type
+                        : null;
             if (!type) {
                 console.error('Unknown feature type: ' + feature);
             }
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
index f4296dc7..3a6e587f 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
@@ -618,10 +618,8 @@ import FormSection from '@/components/forms/section_toggle.vue';
 import CollapsibleComponent from '@/components/forms/collapsible_component.vue'
 import {
     api_endpoints,
-    helpers
 }
     from '@/utils/hooks'
-import { cs_profile_dict } from '../../../api';
 
 export default {
     name: 'CommunityStatus',
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
index 0f64f307..87f29e74 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
@@ -29,7 +29,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import ViewDocument from '@/components/common/view_document.vue'
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
index 394df6e3..88053378 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
@@ -173,13 +173,13 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import CommunityConservationStatusHistory from '../internal/conservation_status/community_conservation_status_history.vue';
 
-import Vue from 'vue'
+
 import {
     api_endpoints,
     constants,
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
index 6076c8bd..b16e065d 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
@@ -189,12 +189,12 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import SpeciesConservationStatusHistory from '../internal/conservation_status/species_conservation_status_history.vue';
-import Vue from 'vue'
+
 
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
index 4f4d7f94..434ec0f7 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
@@ -189,12 +189,12 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import SpeciesConservationStatusHistory from '../internal/conservation_status/species_conservation_status_history.vue';
-import Vue from 'vue'
+
 
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
index 7a83ef3e..a933c8f8 100644
--- a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
@@ -38,7 +38,7 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
diff --git a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
index 3b479f11..80a734aa 100644
--- a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
@@ -40,7 +40,7 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 
diff --git a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
index b2b68bac..31acc71b 100644
--- a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
@@ -60,7 +60,7 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 
diff --git a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
index e70bef3f..3ef29aaa 100644
--- a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
@@ -61,7 +61,7 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 
diff --git a/boranga/frontend/boranga/src/components/common/display_history.vue b/boranga/frontend/boranga/src/components/common/display_history.vue
index 4a36ce97..7c0b0538 100755
--- a/boranga/frontend/boranga/src/components/common/display_history.vue
+++ b/boranga/frontend/boranga/src/components/common/display_history.vue
@@ -84,12 +84,10 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import modal from '@vue-utils/bootstrap-modal.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
   api_endpoints,
-  helpers
 }
 from '@/utils/hooks'
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
index 08b9bdc8..fd7e4ca7 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
@@ -338,7 +338,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
index 08764878..626cb28a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
@@ -24,7 +24,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue';
+;
 import datatable from '@vue-utils/datatable.vue';
 import ContactDetail from './add_contact_detail.vue'
 import OCCContactDetailHistory from '../../internal/occurrence/occ_contact_detail_history.vue';
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
index e6572985..3d58ef43 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
@@ -24,7 +24,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue';
+;
 import datatable from '@vue-utils/datatable.vue';
 import ObserverDetail from './add_observer_detail.vue'
 import OCRObserverDetailHistory from '../../internal/occurrence/ocr_observer_detail_history.vue';
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
index 0ee79ff7..f40e0cac 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
@@ -28,7 +28,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '@/components/common/add_document.vue'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
index a50f7c60..fd90d9a8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
@@ -415,7 +415,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue'
 import RelatedSpecies from '@/components/common/occurrence/occ_related_species_table.vue'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
index 0d5d595f..0431c2ed 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -274,7 +274,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { api_endpoints, helpers } from '@/utils/hooks';
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
index 04352ff9..85340192 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
@@ -246,7 +246,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import PlantCount from './plant_count.vue'
 import AnimalObservation from './animal_observation.vue'
@@ -446,8 +446,8 @@ export default {
     created: async function () {
         let vm = this;
         //------fetch list of values
-        const repsonse = await fetch(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_obj.group_type}`);
-        vm.listOfValuesDict = await repsonse.json();
+        const response = await fetch(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_obj.group_type}`);
+        vm.listOfValuesDict = await response.json();
         vm.observation_method_list = vm.listOfValuesDict.observation_method_list;
         vm.observation_method_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
index a3820137..45463cd5 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
@@ -23,7 +23,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
index c84ea10a..7f38986a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import { v4 as uuid } from 'uuid'
 import datatable from '@/utils/vue/datatable.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
index 17f24f1d..fdf136d2 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import { v4 as uuid } from 'uuid'
 import datatable from '@/utils/vue/datatable.vue'
 import {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
index e67811d0..e645bd06 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
@@ -107,7 +107,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
 import ExistingThreat from '@/components/common/occurrence/occ_ocr_existing_threats.vue'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
index 0f076c08..2c91068b 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
@@ -167,7 +167,7 @@ import {
     from '@/utils/hooks'
 
 export default {
-    name: 'SpeciesOccurrenceReport',
+    name: 'OccurrenceReportProfile',
     props: {
         occurrence_report_obj: {
             type: Object,
@@ -464,10 +464,6 @@ export default {
     },
     computed: {
         isReadOnly: function () {
-            //override for split reports
-            if (this.is_readonly) {
-                return this.is_readonly;
-            }
             return this.occurrence_report_obj.readonly
         },
         csrf_token: function () {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
index 9ee4317e..5b4b49c8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
@@ -29,7 +29,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import ViewDocument from '@/components/common/view_document.vue'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
index 6c4502db..fa99646e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
@@ -363,7 +363,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import RelatedSpecies from '@/components/common/occurrence/ocr_related_species_table.vue'
 import {
@@ -713,7 +713,7 @@ export default {
         let vm = this;
         //------fetch list of values
         const response = await fetch('/api/occurrence_report/list_of_values.json');
-        vm.listOfValuesDict = response.json();
+        vm.listOfValuesDict = await response.json();
         vm.land_form_list = vm.listOfValuesDict.land_form_list;
         vm.land_form_list.splice(0, 0,
             {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
index 01a711b7..892ad526 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
@@ -238,7 +238,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import { v4 as uuid } from 'uuid';
 // import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -381,10 +381,6 @@ export default {
             }
         },
         isReadOnly: function () {
-            //override for split reports
-            if (this.is_readonly) {
-                return this.is_readonly;
-            }
             return this.occurrence_report_obj.readonly
         },
         componentMapKey: function () {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
index 7e246a7e..da0f76f2 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
@@ -220,7 +220,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import PlantCount from './plant_count.vue'
 import AnimalObservation from './animal_observation.vue'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
index c33d68a4..5ee2e7e3 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
@@ -26,7 +26,6 @@
 </template>
 
 <script>
-import Vue, { readonly } from 'vue'
 import { v4 as uuid } from 'uuid'
 import datatable from '@/utils/vue/datatable.vue'
 import {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
index bd3c6369..e9b6acd4 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
@@ -89,7 +89,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
index ec8a1c2a..f96cd342 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
@@ -396,7 +396,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
index ed564bc3..f59ac4a3 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
@@ -49,12 +49,12 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import OccurrenceReportHistory from '../internal/occurrence/community_occurrence_history.vue';
-import Vue from 'vue'
+
 import {
     api_endpoints,
     constants,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
index 83b64740..5e0e936e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
@@ -51,12 +51,12 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import OccurrenceHistory from '../internal/occurrence/species_occurrence_history.vue';
-import Vue from 'vue'
+
 
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
index ee6d6cc7..293496ff 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
@@ -51,12 +51,12 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import OccurrenceHistory from '../internal/occurrence/species_occurrence_history.vue';
-import Vue from 'vue'
+
 
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
index 79dc1022..d950dc34 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
@@ -80,12 +80,12 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import OccurrenceReportHistory from '../internal/occurrence/community_occurrence_report_history.vue';
-import Vue from 'vue'
+
 import {
     api_endpoints,
     constants,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
index d94de8de..98645d0a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
@@ -80,12 +80,12 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import OccurrenceReportHistory from '../internal/occurrence/species_occurrence_report_history.vue';
-import Vue from 'vue'
+
 
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
index c002f7cd..faa4aef6 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
@@ -81,12 +81,12 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import OccurrenceReportHistory from '../internal/occurrence/species_occurrence_report_history.vue';
-import Vue from 'vue'
+
 
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
index 5f95fce0..419cae67 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
@@ -40,7 +40,7 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 
diff --git a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
index 5633d066..731f4d24 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
@@ -47,7 +47,7 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
index 5d40dd52..5224fc27 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
@@ -26,7 +26,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '../add_document.vue'
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
index 959a9d9b..ef4caf88 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
@@ -85,7 +85,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
 import ConservationThreatHistory from '../../internal/occurrence/occ_conservation_threat_history.vue';
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
index a2603508..545cbdc0 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
@@ -461,7 +461,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import BasicConservationStatus from './basic_conservation_status.vue';
 import HelpText from '@/components/common/help_text.vue';
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
index 717f04b1..2e4d5f65 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
@@ -92,7 +92,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from './add_threat.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue b/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
index c570f5fd..fa22511e 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
@@ -10,9 +10,9 @@
                 </h3>
             </div>
             <div class="panel-body collapse in" :id="lBody">
-                <div class="" >                        
+                <div class="" >
                     <div class="form-horizontal col-sm-12 borderDecoration">
-                        
+
                         <div class="form-group">
                             <div class="row">
                                 <div class="col-sm-3">
@@ -22,10 +22,10 @@
                                     <input type="text" class="form-control" name="Some species data" placeholder="" :disabled="species_community.readonly" >
                                 </div>
                             </div>
-                        </div> 
+                        </div>
                     </div>
                 </div>
-            </div>                
+            </div>
         </div>
     </div>
 
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import Vue from 'vue' 
+
 import {
   api_endpoints,
   helpers
@@ -71,7 +71,7 @@ export default {
         computed: {
         },
         watch:{
-            
+
         },
         methods:{
             eventListeners:function (){
@@ -106,4 +106,3 @@ export default {
     border-bottom:none;
     }
 </style>
-
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
index 26854981..50b3bd9b 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import modal from '@vue-utils/bootstrap-modal.vue'
 import alert from '@vue-utils/alert.vue'
 import { helpers, api_endpoints } from "@/utils/hooks.js"
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
index 765f0a92..6d77e2dc 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
@@ -19,7 +19,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
index a94da69e..9ac2ba94 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
@@ -1300,7 +1300,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
index 41a44353..499e27af 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
@@ -19,7 +19,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
index 7e3c9cb3..cbed6787 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
@@ -27,7 +27,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '../add_document.vue'
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
index 2adf1bac..27b8e951 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
@@ -86,7 +86,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
 import ConservationThreatHistory from '../../internal/occurrence/occ_conservation_threat_history.vue';
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
index 09d88dbf..3282ccd1 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
@@ -768,7 +768,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import BasicConservationStatus from './basic_conservation_status.vue';
 import HelpText from '@/components/common/help_text.vue';
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
index 292afb3f..daa38687 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
@@ -19,7 +19,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
index 59a665c4..4618c010 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
@@ -1273,7 +1273,7 @@
 </template>
 
 <script>
-import Vue from 'vue';
+;
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
index 46268b8a..61c9127c 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
@@ -20,7 +20,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
index 3bac5fdf..cbec9ee1 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
@@ -94,7 +94,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from './add_threat.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -137,9 +137,9 @@ export default {
         return {
             uuid: 0,
             conservationThreatHistoryId: null,
-            threatBody: "threatBody" + vm._uid,
-            occThreatBody: "occThreatBody" + vm._uid,
-            panelBody: "species-threats-" + vm._uid,
+            threatBody: "threatBody" + vm.uid,
+            occThreatBody: "occThreatBody" + vm.uid,
+            panelBody: "species-threats-" + vm.uid,
             values: null,
             threat_url: api_endpoints.threat,
 
diff --git a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
index 8001a8eb..42b086b3 100644
--- a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
@@ -152,12 +152,12 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import SpeciesHistory from '../internal/species_communities/species_history.vue';
-import Vue from 'vue'
+
 import {
     api_endpoints,
     constants,
diff --git a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
index 9c5ef592..6875ac60 100755
--- a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
@@ -153,12 +153,10 @@
 </template>
 <script>
 
-import "babel-polyfill"
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
 import SpeciesHistory from '../internal/species_communities/species_history.vue';
-import Vue from 'vue'
 
 import {
     api_endpoints,
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
index dc1216f6..226e62cb 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
@@ -103,7 +103,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import ProposalConservationStatus from '@/components/form_conservation_status.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
index d22e9ab6..9afc1875 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
@@ -64,11 +64,11 @@
 </template>
 <script>
 
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
-import Vue from 'vue'
+
 
 import {
     constants,
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
index 388b071a..dd3ecb29 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
@@ -100,7 +100,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
 import {
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
index 7c507d9b..a2ce8425 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
@@ -63,11 +63,11 @@
     </div>
 </template>
 <script>
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import FormSection from '@/components/forms/section_toggle.vue'
-import Vue from 'vue'
+
 
 import {
     constants,
diff --git a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
index 32abc890..ecc67d3e 100755
--- a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
@@ -63,7 +63,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import ProposalSpeciesCommunities from '@/components/form_species_communities.vue'
 
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
index ca84b534..f3bfcdf2 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import modal from '@vue-utils/bootstrap-modal.vue'
 import alert from '@vue-utils/alert.vue'
 import FileField2 from '@/components/forms/filefield.vue'
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index 25c6ba70..094ee62c 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -457,7 +457,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import CommsLogs from '@common-utils/comms_logs.vue'
 import Submission from '@common-utils/submission.vue'
@@ -466,8 +466,8 @@ import BackToAssessor from './back_to_assessor.vue'
 import Defer from './defer.vue'
 import ProposeForAgenda from './propose_for_agenda.vue'
 import ReadyForAgenda from './ready_for_agenda.vue'
-import ProposedDecline from './proposal_proposed_decline'
-import ProposeDelist from './proposal_propose_delist'
+import ProposedDecline from './proposal_proposed_decline.vue'
+import ProposeDelist from './proposal_propose_delist.vue'
 import ProposedApproval from './proposed_issuance.vue'
 import InviteExternalReferee from '@common-utils/invite_external_referee.vue'
 import CSMoreReferrals from '@common-utils/conservation_status/cs_more_referrals.vue'
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
index bf154824..9230ecea 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
@@ -90,7 +90,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import Submission from '@common-utils/submission.vue'
 import ProposalConservationStatus from '@/components/form_conservation_status.vue'
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index fb4070db..ad29b268 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -23,8 +23,8 @@ import {
     helpers
 }
     from '@/utils/hooks'
-import Vue from 'vue'
-import "babel-polyfill"
+
+
 import datatable from '@/utils/vue/datatable.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
 import AgendaModal from './agenda_datatable.vue';
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
index 14d66593..0aa3d127 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
@@ -135,7 +135,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import CommsLogs from '@common-utils/comms_logs.vue'
 import MeetingSidePanel from '@common-utils/meeting_side_panel.vue'
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
index 92fb407e..f0cfbfba 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
@@ -65,11 +65,11 @@ import {
     helpers
 }
     from '@/utils/hooks'
-import "babel-polyfill"
+
 import datatable from '@/utils/vue/datatable.vue'
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
 import moment from 'moment'
-import Vue from 'vue'
+
 
 export default {
     name: 'MeetingsDatatable',
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
index f832b255..39ba42c3 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
@@ -26,7 +26,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '@/components/common/add_document.vue'
 import FormSection from '@/components/forms/section_toggle.vue';
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
index d7fcea44..5e1d774d 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import modal from '@vue-utils/bootstrap-modal.vue'
 import alert from '@vue-utils/alert.vue'
 import FileField2 from '@/components/forms/filefield.vue'
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
index 92357e0a..adc4e655 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
@@ -25,13 +25,11 @@
 </template>
 
 <script>
-
-import Vue from 'vue'
 import modal from '@vue-utils/bootstrap-modal.vue'
 import alert from '@vue-utils/alert.vue'
 
 import { helpers, api_endpoints } from "@/utils/hooks.js"
-import { occurrence } from '../../../api'
+
 export default {
     name: 'back-to-assessor',
     components: {
@@ -104,15 +102,6 @@ export default {
                 }).then((result) => {
                     vm.$router.go();
                 });
-                /*vm.close();
-
-                fetch(`/api/occurrence_report/${vm.occurrence_report_id}/internal_occurrence_report.json`).then((response) => {
-                    vm.$emit('refreshFromResponse', response);
-
-                }, (error) => {
-                    console.log(error);
-                });
-                vm.$router.push({ path: '/internal/occurrence' });*/
 
             }, (error) => {
                 console.log(error);
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
index 249b8fd4..73cfef6b 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
@@ -124,7 +124,7 @@
 
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import CommsLogs from '@common-utils/comms_logs.vue'
 import Submission from '@common-utils/submission.vue'
@@ -433,8 +433,8 @@ export default {
                                 'Content-Type': 'application/json',
                             },
                             body: JSON.stringify(payload)
-                        }).then(async (repsonse) => {
-                            vm.occurrence = await repsonse.json();
+                        }).then(async (response) => {
+                            vm.occurrence = await response.json();
                             vm.$router.push({
                                 name: 'internal-occurrence-dash'
                             });
@@ -474,7 +474,7 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(async (repsonse) => {
+            }).then(async (response) => {
                 swal.fire({
                     title: "Activated",
                     text: "Occurrence has been Activated",
@@ -504,7 +504,7 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(async (repsonse) => {
+            }).then(async (response) => {
                 swal.fire({
                     title: "Locked",
                     text: "Occurrence has been Locked",
@@ -534,7 +534,7 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(async (repsonse) => {
+            }).then(async (response) => {
                 swal.fire({
                     title: "Unlocked",
                     text: "Occurrence has been Unlocked",
@@ -577,7 +577,7 @@ export default {
                         headers: {
                             'Content-Type': 'application/json',
                         },
-                    }).then(async (repsonse) => {
+                    }).then(async (response) => {
                         swal.fire({
                             title: "Closed",
                             text: "Occurrence has been Closed",
@@ -624,7 +624,7 @@ export default {
                         headers: {
                             'Content-Type': 'application/json',
                         },
-                    }).then(async (repsonse) => {
+                    }).then(async (response) => {
                         swal.fire({
                             title: "Reopened",
                             text: "Occurrence has been Reopened",
@@ -657,7 +657,7 @@ export default {
         },
         fetchOccurrence: function () {
             let vm = this;
-            fetch(`/api/occurrence/${this.$route.params.occurrence_id}/`).then(async (repsonse) => {
+            fetch(`/api/occurrence/${this.$route.params.occurrence_id}/`).then(async (response) => {
                 vm.occurrence = await response.json();
             },
                 err => {
@@ -678,7 +678,7 @@ export default {
     },
     beforeRouteEnter: function (to, from, next) {
         //if (to.query.group_type_name === 'flora' || to.query.group_type_name === "fauna") {
-        fetch(`/api/occurrence/${to.params.occurrence_id}/`).then(async (repsonse) => {
+        fetch(`/api/occurrence/${to.params.occurrence_id}/`).then(async (response) => {
             next(async vm => {
                 vm.occurrence = await response.json();
             });
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
index 1884c839..a2592e50 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue';
 import {constants,api_endpoints,helpers} from '@/utils/hooks'
 import SectionModal from '@/components/common/occurrence/occ_section_modal.vue'
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
index ded12e2a..a7b8ef5d 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
@@ -355,7 +355,7 @@
 
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import CommsLogs from '@common-utils/comms_logs.vue'
 import Submission from '@common-utils/submission.vue'
@@ -1355,8 +1355,8 @@ export default {
         },
         fetchOccurrenceReport: function (id) {
             let vm = this;
-            fetch(`/api/occurrence_report/${id}/`).then(async (repsonse) => {
-                vm.occurrence_report = await repsonse.json();
+            fetch(`/api/occurrence_report/${id}/`).then(async (response) => {
+                vm.occurrence_report = await response.json();
             },
                 err => {
                     console.log(err);
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
index b6dfcc9f..235e7383 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import datatable from '@/utils/vue/datatable.vue';
 import SiteDetail from '@/components/internal/occurrence/add_site.vue'
 import OCCSiteHistory from '../../internal/occurrence/occ_site_history.vue';
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
index d8f5413e..f6ec8bdc 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
@@ -93,7 +93,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import Submission from '@common-utils/submission.vue'
 import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue'
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
index 14beac98..4fc20d14 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
@@ -36,7 +36,7 @@
 
 <script>
 //import $ from 'jquery'
-import Vue from 'vue'
+
 import modal from '@vue-utils/bootstrap-modal.vue'
 import alert from '@vue-utils/alert.vue'
 
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index 76074a22..9070e447 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -277,7 +277,7 @@
     </div>
 </template>
 <script>
-import Vue from 'vue'
+
 import datatable from '@vue-utils/datatable.vue'
 import CommsLogs from '@common-utils/comms_logs.vue'
 import Submission from '@common-utils/submission.vue'
@@ -1055,7 +1055,7 @@ export default {
                 if (savedSpecies) {
                     newSpeciesId = savedSpecies.body.id;
                     fetch(`/api/species/${newSpeciesId}/internal_species.json`).then(async (response) => {
-                        const data = response.json();
+                        const data = await response.json();
                         let species_obj = data.species_obj;
                         //--- to add empty documents array
                         species_obj.documents = []
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
index a0631f7e..423f75ef 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
@@ -121,7 +121,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+
 import modal from '@vue-utils/bootstrap-modal.vue'
 import alert from '@vue-utils/alert.vue'
 import FileField2 from '@/components/forms/filefield.vue'
diff --git a/boranga/frontend/boranga/src/utils/vue/datatable.vue b/boranga/frontend/boranga/src/utils/vue/datatable.vue
index ed7b1f82..aa46a10c 100755
--- a/boranga/frontend/boranga/src/utils/vue/datatable.vue
+++ b/boranga/frontend/boranga/src/utils/vue/datatable.vue
@@ -14,7 +14,7 @@
 </template>
 <script>
 
-module.exports = {
+export default {
     name: 'DataTable',
     props: {
         dtHeaders: {

From df705b3aea8a1cbbe5b344878d4cf1553293454a Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 14:21:33 +0800
Subject: [PATCH 044/138] Update config.

---
 boranga/frontend/boranga/eslint.config.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/eslint.config.mjs b/boranga/frontend/boranga/eslint.config.mjs
index 2c205c8f..7e1613a1 100644
--- a/boranga/frontend/boranga/eslint.config.mjs
+++ b/boranga/frontend/boranga/eslint.config.mjs
@@ -23,7 +23,7 @@ export default [
     ...pluginVue.configs['flat/recommended'],
     eslintConfigPrettier,
     {
-        ignores: ['node_modules/', 'build/*.js', 'config/*.js'],
+        ignores: ['.venv/', '.env/', '.env', 'node_modules/'],
     },
     {
         files: ['**/*.{js,mjs,cjs,ts,mts,jsx,tsx}'],
@@ -51,6 +51,8 @@ export default [
         },
         rules: {
             'prettier/prettier': 'error',
+            'no-redeclare': 'warn',
+            'no-unused-vars': 'warn',
         },
     },
 ];

From 411e8f1705035d3b67533bc240d0657ed9a9c48c Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 14:21:55 +0800
Subject: [PATCH 045/138] Add script for linting.

---
 boranga/frontend/boranga/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index b6159c74..e265b4a7 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -6,6 +6,7 @@
     "private": true,
     "type": "module",
     "scripts": {
+        "lint": "eslint -c eslint.config.mjs . --debug",
         "dev": "vite",
         "build": "vite build",
         "serve": "vite preview"

From 21b9f66d1c71b3c976d4a89c2b61d5714d9a0e70 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 14:22:20 +0800
Subject: [PATCH 046/138] Lint js and vue files.

---
 .../src/components/common/SelectFilter.vue    |    8 +-
 .../src/components/common/add_comm_log.vue    |  285 +-
 .../src/components/common/add_contact.vue     |  217 +-
 .../src/components/common/add_document.vue    |  484 +++-
 .../src/components/common/comms_logs.vue      |  328 ++-
 .../common/communities_dashboard.vue          | 1211 +++++---
 .../conservation_status/community_status.vue  | 1797 +++++++++---
 .../conservation_status/cs_documents.vue      |  478 +--
 .../conservation_status/cs_more_referrals.vue |  344 ++-
 .../conservation_status/species_status.vue    | 1835 +++++++++---
 ...onservation_status_community_dashboard.vue | 1816 ++++++++----
 .../conservation_status_fauna_dashboard.vue   | 2197 +++++++++-----
 .../conservation_status_flora_dashboard.vue   | 2193 +++++++++-----
 .../cs_community_referrals_dashboard.vue      |  564 ++--
 .../cs_external_referrals_dashboard.vue       |  494 ++--
 .../common/cs_fauna_referrals_dashboard.vue   |  859 +++---
 .../common/cs_flora_referrals_dashboard.vue   |  893 +++---
 .../src/components/common/display_history.vue |  218 +-
 .../src/components/common/help_text.vue       |   68 +-
 .../common/invite_external_referee.vue        |  116 +-
 .../src/components/common/map_functions.js    |    4 +-
 .../boranga/src/components/common/measure.js  |   10 +-
 .../components/common/meeting_side_panel.vue  |   28 +-
 .../common/occurrence/add_contact_detail.vue  |  265 +-
 .../common/occurrence/add_observer_detail.vue |  335 ++-
 .../common/occurrence/animal_observation.vue  |  558 ++--
 .../occurrence/community_occurrence.vue       |  296 +-
 .../common/occurrence/contact_datatable.vue   |  365 ++-
 .../common/occurrence/observer_datatable.vue  |  375 ++-
 .../common/occurrence/occ_documents.vue       |  460 +--
 .../common/occurrence/occ_habitat.vue         |  834 ++++--
 .../common/occurrence/occ_locations.vue       |  329 ++-
 .../common/occurrence/occ_observation.vue     |  886 ++++--
 .../occurrence/occ_ocr_existing_threats.vue   |  226 +-
 .../occurrence/occ_related_ocr_table.vue      |  237 +-
 .../occurrence/occ_related_species_table.vue  |  260 +-
 .../common/occurrence/occ_section_modal.vue   |  119 +-
 .../common/occurrence/occ_threats.vue         |  678 +++--
 .../occurrence/occurrence_report_profile.vue  |  410 ++-
 .../common/occurrence/ocr_documents.vue       |  411 ++-
 .../common/occurrence/ocr_habitat.vue         | 1423 ++++++---
 .../common/occurrence/ocr_location.vue        |  292 +-
 .../common/occurrence/ocr_more_referrals.vue  |  319 +-
 .../common/occurrence/ocr_observation.vue     |  798 +++--
 .../occurrence/ocr_related_species_table.vue  |  271 +-
 .../common/occurrence/ocr_section_modal.vue   |  119 +-
 .../common/occurrence/ocr_threats.vue         |  579 ++--
 .../common/occurrence/plant_count.vue         |  575 ++--
 .../common/occurrence/species_occurrence.vue  |  348 ++-
 .../common/occurrence_community_dashboard.vue |  841 +++---
 .../common/occurrence_fauna_dashboard.vue     |  834 ++++--
 .../common/occurrence_flora_dashboard.vue     |  840 ++++--
 .../occurrence_report_community_dashboard.vue |  991 ++++---
 .../occurrence_report_fauna_dashboard.vue     | 1008 ++++---
 .../occurrence_report_flora_dashboard.vue     | 1008 ++++---
 .../ocr_external_referrals_dashboard.vue      |  494 ++--
 .../common/ocr_referrals_dashboard.vue        |  671 +++--
 .../src/components/common/reinstate_image.vue |  102 +-
 .../common/species_communities/add_threat.vue |  594 +++-
 .../basic_conservation_status.vue             |  170 +-
 .../community_documents.vue                   |  446 +--
 .../community_occ_threats.vue                 |  438 +--
 .../species_communities/community_profile.vue | 1514 +++++++---
 .../species_communities/community_threats.vue |  653 +++--
 .../species_communities/related_items.vue     |  182 +-
 .../species_combine/add_combine_species.vue   |  215 +-
 .../species_combine_documents.vue             |  565 ++--
 .../species_combine_profile.vue               | 1450 +++++++---
 .../species_combine_threats.vue               |  573 ++--
 .../species_communities/species_documents.vue |  451 +--
 .../species_occ_threats.vue                   |  439 +--
 .../species_communities/species_profile.vue   | 1711 +++++++----
 .../species_split/species_split_documents.vue |  107 +-
 .../species_split/species_split_profile.vue   | 1637 +++++++----
 .../species_split/species_split_threats.vue   |  565 ++--
 .../species_communities/species_threats.vue   |  650 +++--
 .../common/species_fauna_dashboard.vue        | 1604 +++++++----
 .../common/species_flora_dashboard.vue        | 1618 +++++++----
 .../src/components/common/submission.vue      |   16 +-
 .../common/submitter_information.vue          |  277 +-
 .../components/common/table_related_items.vue |  129 +-
 .../src/components/common/view_document.vue   |  130 +-
 .../boranga/src/components/external/api.js    |    2 +-
 .../conservation_status_proposal.vue          |  713 +++--
 .../conservation_status_proposal_submit.vue   |  131 +-
 .../conservation_status_proposal_table.vue    |  750 +++--
 .../conservation_status/dashboard.vue         |   56 +-
 .../external/occurrence/dashboard.vue         |   55 +-
 .../occurrence/occurrence_report_proposal.vue |  834 ++++--
 .../occurrence/occurrence_report_table.vue    |  780 +++--
 .../occurrence/ocr_proposal_submit.vue        |  131 +-
 .../species_communities/dashboard.vue         |  285 +-
 .../species_communities.vue                   |  228 +-
 .../components/form_conservation_status.vue   |  224 +-
 .../src/components/form_occurrence.vue        |  229 +-
 .../src/components/form_occurrence_report.vue |  209 +-
 .../src/components/form_species_combine.vue   |  364 +--
 .../components/form_species_communities.vue   |  281 +-
 .../src/components/form_species_split.vue     |  201 +-
 .../boranga/src/components/forms/checkbox.vue |  105 +-
 .../forms/collapsible_component.vue           |   81 +-
 .../boranga/src/components/forms/comment.vue  |   21 +-
 .../forms/comment_icon_checkbox_radio.vue     |   59 +-
 .../src/components/forms/declarations.vue     |   51 +-
 .../src/components/forms/filefield.vue        |  250 +-
 .../components/forms/filefield_immediate.vue  |   55 +-
 .../boranga/src/components/forms/group.vue    |   85 +-
 .../src/components/forms/help_text.vue        |   85 +-
 .../components/forms/help_text_display.vue    |    6 +-
 .../src/components/forms/help_text_url.vue    |   23 +-
 .../boranga/src/components/forms/iframe.vue   |   53 +-
 .../boranga/src/components/forms/label.vue    |    7 +-
 .../boranga/src/components/forms/radio.vue    |   63 +-
 .../src/components/forms/readonly_file.vue    |   11 +-
 .../src/components/forms/readonly_text.vue    |   21 +-
 .../boranga/src/components/forms/section.vue  |   88 +-
 .../src/components/forms/section_toggle.vue   |   83 +-
 .../boranga/src/components/forms/select.vue   |  289 +-
 .../boranga/src/components/forms/table.vue    |  318 +-
 .../src/components/forms/text-area.vue        |  101 +-
 .../boranga/src/components/forms/text.vue     |  104 +-
 .../src/components/forms/text_info.vue        |   15 +-
 .../boranga/src/components/internal/Home.vue  |  160 +-
 .../conservation_status/amendment_request.vue |  232 +-
 .../conservation_status/back_to_assessor.vue  |   90 +-
 .../community_conservation_status_history.vue |  182 +-
 .../conservation_status.vue                   | 2563 +++++++++++------
 .../cs_document_history.vue                   |  237 +-
 .../conservation_status/dashboard.vue         |  327 ++-
 .../internal/conservation_status/defer.vue    |  100 +-
 .../proposal_propose_delist.vue               |  413 +--
 .../proposal_proposed_decline.vue             |  341 ++-
 .../propose_for_agenda.vue                    |   92 +-
 .../conservation_status/proposed_issuance.vue |  652 +++--
 .../conservation_status/ready_for_agenda.vue  |   89 +-
 .../internal/conservation_status/referral.vue |  371 ++-
 .../species_conservation_status_history.vue   |  255 +-
 .../internal/meetings/agenda_datatable.vue    |  266 +-
 .../components/internal/meetings/cs_queue.vue |  367 ++-
 .../internal/meetings/dashboard.vue           |   32 +-
 .../components/internal/meetings/meeting.vue  |  981 ++++---
 .../internal/meetings/meeting_section.vue     |  475 ++-
 .../internal/meetings/meetings_datatable.vue  |  515 ++--
 .../components/internal/meetings/minutes.vue  |  427 +--
 .../internal/meetings/minutes_history.vue     |  211 +-
 .../internal/occurrence/add_site.vue          |  442 ++-
 .../internal/occurrence/amendment_request.vue |  220 +-
 .../internal/occurrence/back_to_assessor.vue  |   99 +-
 .../internal/occurrence/bulk_import.vue       |  992 +++++--
 .../occurrence/bulk_import_schema.vue         | 1305 ++++++---
 .../occurrence/bulk_import_schema_list.vue    |  319 +-
 .../community_occurrence_history.vue          |  151 +-
 .../community_occurrence_report_history.vue   |  170 +-
 .../internal/occurrence/dashboard.vue         |  432 ++-
 .../occ_conservation_threat_history.vue       |  183 +-
 .../occurrence/occ_contact_detail_history.vue |  186 +-
 .../occurrence/occ_document_history.vue       |  219 +-
 .../internal/occurrence/occ_site_history.vue  |  204 +-
 .../occurrence/occ_tenure_history.vue         |  203 +-
 .../internal/occurrence/occurrence.vue        |  928 +++---
 .../occurrence/occurrence_combine.vue         | 1711 +++++++----
 .../occurrence_combine_contacts.vue           |  229 +-
 .../occurrence_combine_documents.vue          |  192 +-
 .../occurrence_combine_selection.vue          |  280 +-
 .../occurrence/occurrence_combine_sites.vue   |  247 +-
 .../occurrence/occurrence_combine_tenures.vue |  235 +-
 .../occurrence/occurrence_combine_threats.vue |  295 +-
 .../internal/occurrence/occurrence_report.vue |  949 ++++--
 .../occurrence/occurrence_site_datatable.vue  |  287 +-
 .../occurrence_tenure_datatable.vue           |  120 +-
 .../occurrence/occurrence_tenure_modal.vue    |  267 +-
 .../internal/occurrence/ocr_approve.vue       |  176 +-
 .../ocr_conservation_threat_history.vue       |  183 +-
 .../internal/occurrence/ocr_decline.vue       |   97 +-
 .../occurrence/ocr_document_history.vue       |  237 +-
 .../ocr_observer_detail_history.vue           |  180 +-
 .../occurrence/ocr_propose_approve.vue        |  350 ++-
 .../occurrence/ocr_propose_decline.vue        |   95 +-
 .../internal/occurrence/referral.vue          |  382 ++-
 .../occurrence/species_occurrence_history.vue |  160 +-
 .../species_occurrence_report_history.vue     |  179 +-
 .../species_communities/amendment_request.vue |  221 +-
 .../community_document_history.vue            |  217 +-
 .../species_communities/community_history.vue |  174 +-
 .../species_communities/community_rename.vue  |  447 ++-
 .../conservation_threat_history.vue           |  180 +-
 .../species_communities/dashboard.vue         |  219 +-
 .../species_communities/make_public.vue       |  375 ++-
 .../proposal_proposed_decline.vue             |  248 +-
 .../species_communities/species_combine.vue   |  601 ++--
 .../species_communities.vue                   | 1764 ++++++++----
 .../species_document_history.vue              |  217 +-
 .../species_communities/species_history.vue   |  238 +-
 .../species_communities/species_rename.vue    |  281 +-
 .../species_communities/species_split.vue     |  668 +++--
 .../src/components/internal/users/manage.vue  | 1010 +++++--
 .../boranga/src/components/user/profile.vue   |    8 +-
 .../src/utils/responsive_datatable_helper.js  |  208 +-
 .../frontend/boranga/src/utils/vue/alert.vue  |  135 +-
 .../boranga/src/utils/vue/bootstrap-modal.vue |   99 +-
 .../boranga/src/utils/vue/datatable.vue       |  107 +-
 boranga/frontend/boranga/vite.config.js       |   26 +-
 202 files changed, 57598 insertions(+), 30712 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/SelectFilter.vue b/boranga/frontend/boranga/src/components/common/SelectFilter.vue
index 08b14ebe..22fb35f6 100644
--- a/boranga/frontend/boranga/src/components/common/SelectFilter.vue
+++ b/boranga/frontend/boranga/src/components/common/SelectFilter.vue
@@ -164,13 +164,13 @@ export default {
                     value: Object.hasOwn(option, 'key')
                         ? option.key.toString() // Casting to string to avoid potential type mismatch
                         : Object.hasOwn(option, 'id')
-                        ? option.id.toString()
-                        : option.value.toString(),
+                          ? option.id.toString()
+                          : option.value.toString(),
                     text: Object.hasOwn(option, 'key')
                         ? option.value.toString()
                         : Object.hasOwn(option, 'name')
-                        ? option.name.toString()
-                        : option.text.toString(),
+                          ? option.name.toString()
+                          : option.text.toString(),
                 };
             });
         },
diff --git a/boranga/frontend/boranga/src/components/common/add_comm_log.vue b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
index 6374ce76..5941461e 100755
--- a/boranga/frontend/boranga/src/components/common/add_comm_log.vue
+++ b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
@@ -1,39 +1,76 @@
 <template lang="html">
     <div id="AddComms">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" title="Communication Log - Add Entry" large>
+        <modal
+            transition="modal fade"
+            title="Communication Log - Add Entry"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="commsForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left" for="Name">To</label>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >To</label
+                                        >
                                     </div>
                                     <div class="col-sm-4">
-                                        <input type="text" class="form-control" ref="to" name="to" v-model="comms.to">
+                                        <input
+                                            ref="to"
+                                            v-model="comms.to"
+                                            type="text"
+                                            class="form-control"
+                                            name="to"
+                                        />
                                     </div>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left" for="Name">From</label>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >From</label
+                                        >
                                     </div>
                                     <div class="col-sm-4">
-                                        <input type="text" class="form-control" name="fromm" v-model="comms.fromm">
+                                        <input
+                                            v-model="comms.fromm"
+                                            type="text"
+                                            class="form-control"
+                                            name="fromm"
+                                        />
                                     </div>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left" for="Name">Type</label>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Type</label
+                                        >
                                     </div>
                                     <div class="col-sm-4">
-                                        <select class="form-select" name="type" v-model="comms.type">
-                                            <option value="">Select Type</option>
+                                        <select
+                                            v-model="comms.type"
+                                            class="form-select"
+                                            name="type"
+                                        >
+                                            <option value="">
+                                                Select Type
+                                            </option>
                                             <option value="email">Email</option>
                                             <option value="mail">Mail</option>
                                             <option value="phone">Phone</option>
@@ -44,57 +81,133 @@
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left" for="Name">Subject/Description</label>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Subject/Description</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" name="subject" style="width:70%;"
-                                            v-model="comms.subject">
+                                        <input
+                                            v-model="comms.subject"
+                                            type="text"
+                                            class="form-control"
+                                            name="subject"
+                                            style="width: 70%"
+                                        />
                                     </div>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left" for="Name">Text</label>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Text</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea name="text" class="form-control" style="width:70%;"
-                                            v-model="comms.text"></textarea>
+                                        <textarea
+                                            v-model="comms.text"
+                                            name="text"
+                                            class="form-control"
+                                            style="width: 70%"
+                                        ></textarea>
                                     </div>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left" for="Name">Attachments</label>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Attachments</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template v-for="(f, i) in files">
-                                            <div :class="'row top-buffer file-row-' + i">
+                                            <div
+                                                :class="
+                                                    'row top-buffer file-row-' +
+                                                    i
+                                                "
+                                            >
                                                 <div class="col-sm-3">
-                                                    <span v-if="f.file == null"
-                                                        class="btn btn-primary btn-file pull-left">
-                                                        Attach File <input type="file" :name="'file-upload-' + i"
-                                                            :class="'file-upload-' + i"
-                                                            @change="uploadFile('file-upload-' + i, f)" />
+                                                    <span
+                                                        v-if="f.file == null"
+                                                        class="btn btn-primary btn-file pull-left"
+                                                    >
+                                                        Attach File
+                                                        <input
+                                                            type="file"
+                                                            :name="
+                                                                'file-upload-' +
+                                                                i
+                                                            "
+                                                            :class="
+                                                                'file-upload-' +
+                                                                i
+                                                            "
+                                                            @change="
+                                                                uploadFile(
+                                                                    'file-upload-' +
+                                                                        i,
+                                                                    f
+                                                                )
+                                                            "
+                                                        />
                                                     </span>
-                                                    <span v-else class="btn btn-primary btn-file pull-left">
-                                                        Update File <input type="file" :name="'file-upload-' + i"
-                                                            :class="'file-upload-' + i"
-                                                            @change="uploadFile('file-upload-' + i, f)" />
+                                                    <span
+                                                        v-else
+                                                        class="btn btn-primary btn-file pull-left"
+                                                    >
+                                                        Update File
+                                                        <input
+                                                            type="file"
+                                                            :name="
+                                                                'file-upload-' +
+                                                                i
+                                                            "
+                                                            :class="
+                                                                'file-upload-' +
+                                                                i
+                                                            "
+                                                            @change="
+                                                                uploadFile(
+                                                                    'file-upload-' +
+                                                                        i,
+                                                                    f
+                                                                )
+                                                            "
+                                                        />
                                                     </span>
                                                 </div>
-                                                <div class="col-sm-6 truncate-text">
+                                                <div
+                                                    class="col-sm-6 truncate-text"
+                                                >
                                                     <span>{{ f.name }}</span>
                                                 </div>
                                                 <div class="col-sm-3">
-                                                    <a href="" @click.prevent="removeFile(i)"
-                                                        style="color: red;">Remove</a>
+                                                    <a
+                                                        href=""
+                                                        style="color: red"
+                                                        @click.prevent="
+                                                            removeFile(i)
+                                                        "
+                                                        >Remove</a
+                                                    >
                                                 </div>
                                             </div>
                                         </template>
-                                        <a href="" @click.prevent="attachAnother"><i
-                                                class="fa fa-lg fa-plus top-buffer-2x"></i></a>
+                                        <a
+                                            href=""
+                                            @click.prevent="attachAnother"
+                                            ><i
+                                                class="fa fa-lg fa-plus top-buffer-2x"
+                                            ></i
+                                        ></a>
                                     </div>
                                 </div>
                             </div>
@@ -107,20 +220,20 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers } from '@/utils/hooks.js';
 export default {
-    name: 'Add-Comms',
+    name: 'AddComms',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         url: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
     data: function () {
         let vm = this;
@@ -140,15 +253,15 @@ export default {
                 showClear: true,
                 useCurrent: false,
                 keepInvalid: true,
-                allowInputToggle: true
+                allowInputToggle: true,
             },
             files: [
                 {
-                    'file': null,
-                    'name': ''
-                }
-            ]
-        }
+                    file: null,
+                    name: '',
+                },
+            ],
+        };
     },
     computed: {
         showError: function () {
@@ -162,9 +275,13 @@ export default {
             if (val) {
                 vm.$nextTick(function () {
                     vm.$refs.to.focus();
-                })
+                });
             }
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.commsForm;
     },
     methods: {
         ok: function () {
@@ -198,12 +315,12 @@ export default {
         },
         attachAnother() {
             this.files.push({
-                'file': null,
-                'name': ''
-            })
+                file: null,
+                name: '',
+            });
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             let vm = this;
@@ -225,59 +342,59 @@ export default {
             vm.errors = false;
             let comms = new FormData(vm.form);
             vm.addingComms = true;
-            fetch(vm.url,
-                {
-                    method: 'POST',
-                    body: comms,
-                    'Content-Type': 'application/json',
+            fetch(vm.url, {
+                method: 'POST',
+                body: comms,
+                'Content-Type': 'application/json',
+            }).then(
+                (response) => {
+                    vm.addingComms = false;
+                    vm.close();
+                },
+                (error) => {
+                    vm.errors = true;
+                    vm.addingComms = false;
+                    vm.errorString = helpers.apiVueResourceError(error);
                 }
-            ).then((response) => {
-                vm.addingComms = false;
-                vm.close();
-            }, (error) => {
-                vm.errors = true;
-                vm.addingComms = false;
-                vm.errorString = helpers.apiVueResourceError(error);
-            });
+            );
         },
         addFormValidations: function () {
             let vm = this;
             vm.validation_form = $(vm.form).validate({
                 rules: {
-                    to: "required",
-                    fromm: "required",
-                    type: "required",
-                    subject: "required",
-                    text: "required",
-                },
-                messages: {
+                    to: 'required',
+                    fromm: 'required',
+                    type: 'required',
+                    subject: 'required',
+                    text: 'required',
                 },
+                messages: {},
                 showErrors: function (errorMap, errorList) {
                     $.each(this.validElements(), function (index, element) {
                         var $element = $(element);
-                        $element.attr("data-original-title", "").parents('.form-group').removeClass('has-error');
+                        $element
+                            .attr('data-original-title', '')
+                            .parents('.form-group')
+                            .removeClass('has-error');
                     });
                     // destroy tooltips on valid elements
-                    $("." + this.settings.validClass).tooltip("destroy");
+                    $('.' + this.settings.validClass).tooltip('destroy');
                     // add or update tooltips
                     for (var i = 0; i < errorList.length; i++) {
                         var error = errorList[i];
                         $(error.element)
                             .tooltip({
-                                trigger: "focus"
+                                trigger: 'focus',
                             })
-                            .attr("data-original-title", error.message)
-                            .parents('.form-group').addClass('has-error');
+                            .attr('data-original-title', error.message)
+                            .parents('.form-group')
+                            .addClass('has-error');
                     }
-                }
+                },
             });
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.commsForm;
-    }
-}
+};
 </script>
 
 <style lang="css">
@@ -286,7 +403,7 @@ export default {
     overflow: hidden;
 }
 
-.btn-file input[type=file] {
+.btn-file input[type='file'] {
     position: absolute;
     top: 0;
     right: 0;
@@ -310,7 +427,7 @@ export default {
     margin-top: 10px;
 }
 
-input[type=text],
+input[type='text'],
 select {
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
@@ -322,7 +439,7 @@ select {
     display: block;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
diff --git a/boranga/frontend/boranga/src/components/common/add_contact.vue b/boranga/frontend/boranga/src/components/common/add_contact.vue
index 1e35062c..bb44881a 100755
--- a/boranga/frontend/boranga/src/components/common/add_contact.vue
+++ b/boranga/frontend/boranga/src/components/common/add_contact.vue
@@ -1,57 +1,111 @@
 <template lang="html">
     <div id="add-contact">
-        <modal @ok="ok()" @cancel="cancel()" :title="title()" large>
+        <modal :title="title()" large @ok="ok()" @cancel="cancel()">
             <form class="form-horizontal" name="addContactForm">
                 <div class="row">
-                    <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                    <alert v-if="showError" type="danger"
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-lg-12">
                         <div class="row">
                             <div class="form-group">
-                                <label class="col-md-2 control-label pull-left" for="Name">Given Name(s): </label>
+                                <label
+                                    class="col-md-2 control-label pull-left"
+                                    for="Name"
+                                    >Given Name(s):
+                                </label>
                                 <div class="col-md-10">
-                                    <input type="text" class="form-control" name="name" v-model="contact.first_name" />
+                                    <input
+                                        v-model="contact.first_name"
+                                        type="text"
+                                        class="form-control"
+                                        name="name"
+                                    />
                                 </div>
                             </div>
                         </div>
                         <div class="row">
                             <div class="form-group">
-                                <label class="col-md-2 control-label pull-left" for="Name">Surname: </label>
+                                <label
+                                    class="col-md-2 control-label pull-left"
+                                    for="Name"
+                                    >Surname:
+                                </label>
                                 <div class="col-md-10">
-                                    <input type="text" class="form-control" name="name" v-model="contact.last_name" />
+                                    <input
+                                        v-model="contact.last_name"
+                                        type="text"
+                                        class="form-control"
+                                        name="name"
+                                    />
                                 </div>
                             </div>
                         </div>
                         <div class="row">
                             <div class="form-group">
-                                <label class="col-md-2 control-label pull-left" for="Phone">Phone: </label>
+                                <label
+                                    class="col-md-2 control-label pull-left"
+                                    for="Phone"
+                                    >Phone:
+                                </label>
                                 <div class="col-md-10">
-                                    <input type="text" class="form-control" name="phone"
-                                        v-model="contact.phone_number" />
+                                    <input
+                                        v-model="contact.phone_number"
+                                        type="text"
+                                        class="form-control"
+                                        name="phone"
+                                    />
                                 </div>
                             </div>
                         </div>
                         <div class="row">
                             <div class="form-group">
-                                <label class="col-md-2 control-label pull-left" for="Mobile">Mobile: </label>
+                                <label
+                                    class="col-md-2 control-label pull-left"
+                                    for="Mobile"
+                                    >Mobile:
+                                </label>
                                 <div class="col-md-10">
-                                    <input type="text" class="form-control" name="mobile"
-                                        v-model="contact.mobile_number" />
+                                    <input
+                                        v-model="contact.mobile_number"
+                                        type="text"
+                                        class="form-control"
+                                        name="mobile"
+                                    />
                                 </div>
                             </div>
                         </div>
                         <div class="row">
                             <div class="form-group">
-                                <label class="col-md-2 control-label pull-left" for="Fax">Fax: </label>
+                                <label
+                                    class="col-md-2 control-label pull-left"
+                                    for="Fax"
+                                    >Fax:
+                                </label>
                                 <div class="col-md-10">
-                                    <input type="text" class="form-control" name="fax" v-model="contact.fax_number" />
+                                    <input
+                                        v-model="contact.fax_number"
+                                        type="text"
+                                        class="form-control"
+                                        name="fax"
+                                    />
                                 </div>
                             </div>
                         </div>
                         <div class="row">
                             <div class="form-group">
-                                <label class="col-md-2 control-label pull-left" for="Email">Email: </label>
+                                <label
+                                    class="col-md-2 control-label pull-left"
+                                    for="Email"
+                                    >Email:
+                                </label>
                                 <div class="col-md-10">
-                                    <input type="text" class="form-control" name="email" v-model="contact.email" />
+                                    <input
+                                        v-model="contact.email"
+                                        type="text"
+                                        class="form-control"
+                                        name="email"
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -63,14 +117,14 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'Add-Organisation-Contact',
+    name: 'AddOrganisationContact',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         org_id: {
@@ -87,13 +141,18 @@ export default {
             errorString: '',
             successString: '',
             success: false,
-        }
+        };
     },
     computed: {
         showError: function () {
             var vm = this;
             return vm.errors;
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.addContactForm;
+        vm.addFormValidations();
     },
     methods: {
         ok: function () {
@@ -102,14 +161,13 @@ export default {
                 vm.sendData();
             }
         },
-        cancel: function () {
-        },
+        cancel: function () {},
         title: function () {
             let vm = this;
             if (vm.contact.id) {
-                return "Update Contact";
+                return 'Update Contact';
             }
-            return "Add Contact";
+            return 'Add Contact';
         },
         close: function () {
             this.isModalOpen = false;
@@ -119,32 +177,44 @@ export default {
         },
         fetchContact: function (id) {
             let vm = this;
-            fetch(api_endpoints.contact(id)).then(async (response) => {
-                vm.contact = await response.json();
-                vm.isModalOpen = true;
-            }, (error) => {
-                console.log(error);
-            });
+            fetch(api_endpoints.contact(id)).then(
+                async (response) => {
+                    vm.contact = await response.json();
+                    vm.isModalOpen = true;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         sendData: function () {
             let vm = this;
             vm.errors = false;
             if (vm.contact.id) {
                 let contact = vm.contact;
-                fetch(helpers.add_endpoint_json(api_endpoints.organisation_contacts, contact.id), {
-                    method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.organisation_contacts,
+                        contact.id
+                    ),
+                    {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(contact),
+                    }
+                ).then(
+                    (response) => {
+                        vm.$parent.refreshDatatable();
+                        vm.close();
                     },
-                    body: JSON.stringify(contact)
-                }).then((response) => {
-                    vm.$parent.refreshDatatable();
-                    vm.close();
-                }, (error) => {
-                    console.log(error);
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                    (error) => {
+                        console.log(error);
+                        vm.errors = true;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
             } else {
                 let contact = JSON.parse(JSON.stringify(vm.contact));
                 contact.organisation = vm.org_id;
@@ -153,65 +223,66 @@ export default {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
-                        body: JSON.stringify(contact)
+                        body: JSON.stringify(contact),
                     },
-                }).then((response) => {
+                }).then(
+                    (response) => {
                         vm.close();
                         vm.$parent.addedContact();
-                    }, (error) => {
+                    },
+                    (error) => {
                         console.log(error);
                         vm.errors = true;
                         vm.errorString = helpers.apiVueResourceError(error);
-                    });
-
+                    }
+                );
             }
         },
         addFormValidations: function () {
             let vm = this;
             $(vm.form).validate({
                 rules: {
-                    arrival: "required",
-                    departure: "required",
-                    campground: "required",
+                    arrival: 'required',
+                    departure: 'required',
+                    campground: 'required',
                     campsite: {
                         required: {
                             depends: function (el) {
                                 return vm.campsites.length > 0;
-                            }
-                        }
-                    }
+                            },
+                        },
+                    },
                 },
                 messages: {
-                    arrival: "field is required",
-                    departure: "field is required",
-                    campground: "field is required",
-                    campsite: "field is required"
+                    arrival: 'field is required',
+                    departure: 'field is required',
+                    campground: 'field is required',
+                    campsite: 'field is required',
                 },
                 showErrors: function (errorMap, errorList) {
                     $.each(this.validElements(), function (index, element) {
                         var $element = $(element);
-                        $element.attr("data-original-title", "").parents('.form-group').removeClass('has-error');
+                        $element
+                            .attr('data-original-title', '')
+                            .parents('.form-group')
+                            .removeClass('has-error');
                     });
                     // destroy tooltips on valid elements
-                    $("." + this.settings.validClass).tooltip("destroy");
+                    $('.' + this.settings.validClass).tooltip('destroy');
                     // add or update tooltips
                     for (var i = 0; i < errorList.length; i++) {
                         var error = errorList[i];
                         $(error.element)
                             .tooltip({
-                                trigger: "focus"
+                                trigger: 'focus',
                             })
-                            .attr("data-original-title", error.message)
-                            .parents('.form-group').addClass('has-error');
+                            .attr('data-original-title', error.message)
+                            .parents('.form-group')
+                            .addClass('has-error');
                     }
-                }
+                },
             });
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.addContactForm;
-        vm.addFormValidations();
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/add_document.vue b/boranga/frontend/boranga/src/components/common/add_document.vue
index 32d53d26..679f331b 100644
--- a/boranga/frontend/boranga/src/components/common/add_document.vue
+++ b/boranga/frontend/boranga/src/components/common/add_document.vue
@@ -1,56 +1,135 @@
 <template lang="html">
     <div id="document_detail">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large>
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="documentForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label for="document_category" class="control-label">Category</label>
+                                        <label
+                                            for="document_category"
+                                            class="control-label"
+                                            >Category</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template
-                                            v-if="documentCategories && documentCategories.length > 0 && !documentCategories.map((category) => category.id).includes(documentObj.document_category)">
-                                            <input type="text" v-if="documentObj.document_category_name"
+                                            v-if="
+                                                documentCategories &&
+                                                documentCategories.length > 0 &&
+                                                !documentCategories
+                                                    .map(
+                                                        (category) =>
+                                                            category.id
+                                                    )
+                                                    .includes(
+                                                        documentObj.document_category
+                                                    )
+                                            "
+                                        >
+                                            <input
+                                                v-if="
+                                                    documentObj.document_category_name
+                                                "
+                                                type="text"
                                                 class="form-control mb-3"
-                                                :value="documentObj.document_category_name + ' (Now Archived)'"
-                                                disabled />
+                                                :value="
+                                                    documentObj.document_category_name +
+                                                    ' (Now Archived)'
+                                                "
+                                                disabled
+                                            />
                                             <div class="mb-3 text-muted">
                                                 Change document category to:
                                             </div>
                                         </template>
-                                        <select id="document_category" ref="document_category" class="form-select"
-                                            v-model="documentObj.document_category" @change="filterSubCategory($event)">
-                                            <option v-for="category in documentCategories" :value="category.id"
-                                                v-bind:key="category.id">
+                                        <select
+                                            id="document_category"
+                                            ref="document_category"
+                                            v-model="
+                                                documentObj.document_category
+                                            "
+                                            class="form-select"
+                                            @change="filterSubCategory($event)"
+                                        >
+                                            <option
+                                                v-for="category in documentCategories"
+                                                :key="category.id"
+                                                :value="category.id"
+                                            >
                                                 {{ category.name }}
                                             </option>
                                         </select>
                                     </div>
                                 </div>
-                                <div v-if="documentObj.document_category" class="row mb-3">
+                                <div
+                                    v-if="documentObj.document_category"
+                                    class="row mb-3"
+                                >
                                     <div class="col-sm-3">
-                                        <label for="document_sub_category" class="control-label">Sub Category</label>
+                                        <label
+                                            for="document_sub_category"
+                                            class="control-label"
+                                            >Sub Category</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template
-                                            v-if="filteredDocumentSubCategories && filteredDocumentSubCategories.length > 0 && !filteredDocumentSubCategories.map((category) => category.id).includes(documentObj.document_sub_category)">
-                                            <input type="text" v-if="documentObj.document_sub_category_name"
+                                            v-if="
+                                                filteredDocumentSubCategories &&
+                                                filteredDocumentSubCategories.length >
+                                                    0 &&
+                                                !filteredDocumentSubCategories
+                                                    .map(
+                                                        (category) =>
+                                                            category.id
+                                                    )
+                                                    .includes(
+                                                        documentObj.document_sub_category
+                                                    )
+                                            "
+                                        >
+                                            <input
+                                                v-if="
+                                                    documentObj.document_sub_category_name
+                                                "
+                                                type="text"
                                                 class="form-control mb-3"
-                                                :value="documentObj.document_sub_category_name + ' (Now Archived)'"
-                                                disabled />
+                                                :value="
+                                                    documentObj.document_sub_category_name +
+                                                    ' (Now Archived)'
+                                                "
+                                                disabled
+                                            />
                                             <div class="mb-3 text-muted">
                                                 Change document sub category to:
                                             </div>
                                         </template>
-                                        <select id="document_sub_category" ref="document_sub_category"
-                                            class="form-select" v-model="documentObj.document_sub_category"
-                                            @change="focusDescription">
-                                            <option v-for="sub_category in filteredDocumentSubCategories"
-                                                :value="sub_category.id" v-bind:key="sub_category.id">
+                                        <select
+                                            id="document_sub_category"
+                                            ref="document_sub_category"
+                                            v-model="
+                                                documentObj.document_sub_category
+                                            "
+                                            class="form-select"
+                                            @change="focusDescription"
+                                        >
+                                            <option
+                                                v-for="sub_category in filteredDocumentSubCategories"
+                                                :key="sub_category.id"
+                                                :value="sub_category.id"
+                                            >
                                                 {{ sub_category.name }}
                                             </option>
                                         </select>
@@ -58,50 +137,114 @@
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label for="description" class="control-label">Description</label>
+                                        <label
+                                            for="description"
+                                            class="control-label"
+                                            >Description</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea id="description" ref="description" class="form-control"
-                                            v-model="documentObj.description">
-        </textarea>
+                                        <textarea
+                                            id="description"
+                                            ref="description"
+                                            v-model="documentObj.description"
+                                            class="form-control"
+                                        >
+                                        </textarea>
                                     </div>
                                 </div>
-                                <div v-if="documentObj.uploaded_date" class="row mb-3">
+                                <div
+                                    v-if="documentObj.uploaded_date"
+                                    class="row mb-3"
+                                >
                                     <div class="col-sm-3">
-                                        <label for="uploaded_date" class="control-label">Date/Time</label>
+                                        <label
+                                            for="uploaded_date"
+                                            class="control-label"
+                                            >Date/Time</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input disabled type="datetime-local" class="form-control" id="uploaded_date"
-                                            name="uploaded_date" ref="uploaded_date"
-                                            v-model="documentObj.uploaded_date" />
+                                        <input
+                                            id="uploaded_date"
+                                            ref="uploaded_date"
+                                            v-model="documentObj.uploaded_date"
+                                            disabled
+                                            type="datetime-local"
+                                            class="form-control"
+                                            name="uploaded_date"
+                                        />
                                     </div>
                                 </div>
-                                <div v-if="showSubmitterCanAccess" class="row mb-3">
+                                <div
+                                    v-if="showSubmitterCanAccess"
+                                    class="row mb-3"
+                                >
                                     <div class="col-sm-3">
-                                        <label for="can_submitter_access" class="control-label">Submitter Can Access?
+                                        <label
+                                            for="can_submitter_access"
+                                            class="control-label"
+                                            >Submitter Can Access?
                                         </label>
                                     </div>
                                     <div class="col-sm-9">
-                                        <div class="form-check form-check-inline">
-                                            <label for="can_submitter_access_no" class="form-check-label">No</label>
-                                            <input type="radio" class="form-check-input" id="can_submitter_access_no"
-                                                name="can_submitter_access" ref="can_submitter_access_no"
-                                                v-model="documentObj.can_submitter_access" :value="false" />
+                                        <div
+                                            class="form-check form-check-inline"
+                                        >
+                                            <label
+                                                for="can_submitter_access_no"
+                                                class="form-check-label"
+                                                >No</label
+                                            >
+                                            <input
+                                                id="can_submitter_access_no"
+                                                ref="can_submitter_access_no"
+                                                v-model="
+                                                    documentObj.can_submitter_access
+                                                "
+                                                type="radio"
+                                                class="form-check-input"
+                                                name="can_submitter_access"
+                                                :value="false"
+                                            />
                                         </div>
-                                        <div class="form-check form-check-inline">
-                                            <label for="can_submitter_access_yes" class="form-check-label">Yes</label>
-                                            <input type="radio" class="form-check-input" id="can_submitter_access_yes"
-                                                name="can_submitter_access" ref="can_submitter_access_yes"
-                                                v-model="documentObj.can_submitter_access" :value="true" />
+                                        <div
+                                            class="form-check form-check-inline"
+                                        >
+                                            <label
+                                                for="can_submitter_access_yes"
+                                                class="form-check-label"
+                                                >Yes</label
+                                            >
+                                            <input
+                                                id="can_submitter_access_yes"
+                                                ref="can_submitter_access_yes"
+                                                v-model="
+                                                    documentObj.can_submitter_access
+                                                "
+                                                type="radio"
+                                                class="form-check-input"
+                                                name="can_submitter_access"
+                                                :value="true"
+                                            />
                                         </div>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
-                                    <label for="documents_file" class="mb-3">Document</label>
+                                    <label for="documents_file" class="mb-3"
+                                        >Document</label
+                                    >
                                     <div class="col">
-                                        <FileField2 ref="filefield" :proposal_id="document_id"
-                                            :uploaded_documents="uploaded_document" :isRepeatable="false"
-                                            id="documents_file" name="documents_file" />
+                                        <FileField2
+                                            id="documents_file"
+                                            ref="filefield"
+                                            :proposal_id="document_id"
+                                            :uploaded_documents="
+                                                uploaded_document
+                                            "
+                                            :is-repeatable="false"
+                                            name="documents_file"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -109,45 +252,91 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <template v-if="document_id">
-                    <button type="button" v-if="updatingDocument" disabled class="btn btn-primary" @click="ok">
-                        Updating <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
-                    <button type="button" v-else class="btn btn-primary" @click="ok">Update</button>
-                </template>
-                <template v-else>
-                    <button type="button" v-if="addingDocument" disabled class="btn btn-primary" @click="ok">Adding
-                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
-                    <button type="button" v-else class="btn btn-primary" @click="ok">Add Document</button>
-                </template>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <template v-if="document_id">
+                        <button
+                            v-if="updatingDocument"
+                            type="button"
+                            disabled
+                            class="btn btn-primary"
+                            @click="ok"
+                        >
+                            Updating
+                            <span
+                                class="spinner-border spinner-border-sm"
+                                role="status"
+                                aria-hidden="true"
+                            ></span>
+                            <span class="visually-hidden">Loading...</span>
+                        </button>
+                        <button
+                            v-else
+                            type="button"
+                            class="btn btn-primary"
+                            @click="ok"
+                        >
+                            Update
+                        </button>
+                    </template>
+                    <template v-else>
+                        <button
+                            v-if="addingDocument"
+                            type="button"
+                            disabled
+                            class="btn btn-primary"
+                            @click="ok"
+                        >
+                            Adding
+                            <span
+                                class="spinner-border spinner-border-sm"
+                                role="status"
+                                aria-hidden="true"
+                            ></span>
+                            <span class="visually-hidden">Loading...</span>
+                        </button>
+                        <button
+                            v-else
+                            type="button"
+                            class="btn btn-primary"
+                            @click="ok"
+                        >
+                            Add Document
+                        </button>
+                    </template>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import FileField2 from '@/components/forms/filefield.vue'
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import FileField2 from '@/components/forms/filefield.vue';
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'Document-Detail',
+    name: 'DocumentDetail',
     components: {
         FileField2,
         modal,
-        alert
+        alert,
     },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -172,7 +361,19 @@ export default {
             success: false,
             validDate: false,
             title: null,
-        }
+        };
+    },
+    computed: {
+        showError: function () {
+            var vm = this;
+            return vm.errors;
+        },
+        showSubmitterCanAccess: function () {
+            return (
+                this.is_internal &&
+                Object.hasOwn(this.documentObj, 'can_submitter_access')
+            );
+        },
     },
     watch: {
         isModalOpen: function (val) {
@@ -183,14 +384,32 @@ export default {
             }
         },
     },
-    computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-        showSubmitterCanAccess: function () {
-            return this.is_internal && Object.hasOwn(this.documentObj, 'can_submitter_access');
-        }
+    created: async function () {
+        fetch(api_endpoints.document_categories_dict).then(
+            async (response) => {
+                let document_dict = await response.json();
+                this.documentCategories = document_dict.document_category_list;
+                // blank entry allows user to clear selection
+                this.documentCategories.splice(0, 0, {
+                    id: '',
+                    name: '',
+                });
+                // documentSubCategories
+                this.documentSubCategories =
+                    document_dict.document_sub_category_list;
+                this.filterSubCategory();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.documentForm;
+        this.$nextTick(() => {
+            vm.eventListeners();
+        });
     },
     methods: {
         focusDescription: function () {
@@ -204,14 +423,19 @@ export default {
                     this.documentObj.document_sub_category = null; //-----to remove the previous selection
                 }
                 this.filteredDocumentSubCategories = [];
-                this.filteredDocumentSubCategories = [{
-                    id: null,
-                    name: "",
-                    category_id: null,
-                }];
+                this.filteredDocumentSubCategories = [
+                    {
+                        id: null,
+                        name: '',
+                        category_id: null,
+                    },
+                ];
                 //---filter sub categories as per category selected
                 for (let choice of this.documentSubCategories) {
-                    if (choice.category_id === this.documentObj.document_category) {
+                    if (
+                        choice.category_id ===
+                        this.documentObj.document_category
+                    ) {
                         this.filteredDocumentSubCategories.push(choice);
                     }
                 }
@@ -223,11 +447,13 @@ export default {
         fetchSubCategory: function (category_id) {
             this.$nextTick(() => {
                 this.filteredDocumentSubCategories = [];
-                this.filteredDocumentSubCategories = [{
-                    id: null,
-                    name: "",
-                    category_id: null,
-                }];
+                this.filteredDocumentSubCategories = [
+                    {
+                        id: null,
+                        name: '',
+                        category_id: null,
+                    },
+                ];
                 //---filter sub categories as per category selected
                 for (let choice of this.documentSubCategories) {
                     if (choice.category_id === category_id) {
@@ -244,7 +470,7 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
             this.$refs.filefield.reset_files();
         },
         close: function () {
@@ -259,7 +485,7 @@ export default {
             let vm = this;
             vm.errors = false;
             let documentObj = JSON.parse(JSON.stringify(vm.documentObj));
-            let formData = new FormData()
+            let formData = new FormData();
 
             // Add files to formData
             var files = vm.$refs.filefield.files;
@@ -279,16 +505,19 @@ export default {
                     headers: {
                         'Content-Type': 'multipart/form-data',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.updatingDocument = false;
-                    vm.$parent.updatedDocuments();
-                    vm.close();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.updatingDocument = false;
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    (response) => {
+                        vm.updatingDocument = false;
+                        vm.$parent.updatedDocuments();
+                        vm.close();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                        vm.updatingDocument = false;
+                    }
+                );
             } else {
                 vm.addingDocument = true;
                 formData.append('data', JSON.stringify(documentObj));
@@ -296,46 +525,25 @@ export default {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
-                        body: JSON.stringify(formData)
+                        body: JSON.stringify(formData),
                     },
-                }).then((response) => {
-                    vm.addingDocument = false;
-                    vm.close();
-                    vm.$parent.updatedDocuments();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.addingDocument = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                }).then(
+                    (response) => {
+                        vm.addingDocument = false;
+                        vm.close();
+                        vm.$parent.updatedDocuments();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.addingDocument = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
             }
         },
         eventListeners: function () {
             let vm = this;
-        }
-    },
-    created: async function () {
-        fetch(api_endpoints.document_categories_dict).then(async (response) => {
-            let document_dict = await response.json();
-            this.documentCategories = document_dict.document_category_list;
-            // blank entry allows user to clear selection
-            this.documentCategories.splice(0, 0,
-                {
-                    id: "",
-                    name: "",
-                });
-            // documentSubCategories
-            this.documentSubCategories = document_dict.document_sub_category_list;
-            this.filterSubCategory();
-        }, (error) => {
-            console.log(error);
-        })
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.documentForm;
-        this.$nextTick(() => {
-            vm.eventListeners();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/comms_logs.vue b/boranga/frontend/boranga/src/components/common/comms_logs.vue
index 1ae9f22a..5478ee6b 100755
--- a/boranga/frontend/boranga/src/components/common/comms_logs.vue
+++ b/boranga/frontend/boranga/src/components/common/comms_logs.vue
@@ -1,27 +1,35 @@
 <template id="comms_logs">
     <div class="">
-
         <div class="card mb-3">
             <div class="card-header">Logs</div>
             <div class="card-body border-bottom">
-                <label for="assigned-to" class="form-label">Communication Logs</label>
+                <label for="assigned-to" class="form-label"
+                    >Communication Logs</label
+                >
                 <div class="rounded border py-2">
-                    <span class="ps-3 pe-2"><i class="bi bi-card-list"></i> </span>
-                    <a href="#" class="pe-5" ref="showCommsBtn" @click.prevent>View</a>
+                    <span class="ps-3 pe-2"
+                        ><i class="bi bi-card-list"></i>
+                    </span>
+                    <a ref="showCommsBtn" href="#" class="pe-5" @click.prevent
+                        >View</a
+                    >
                     <template v-if="!disable_add_entry">
                         <span class="pe-2">
                             <i class="bi bi-plus-circle"></i>
                         </span>
-                        <a href="#" ref="addCommsBtn" @click.prevent="addComm()">Add
-                            Entry</a>
+                        <a ref="addCommsBtn" href="#" @click.prevent="addComm()"
+                            >Add Entry</a
+                        >
                     </template>
                 </div>
             </div>
             <div class="card-body">
                 <label for="assigned-to" class="form-label">Action Logs</label>
                 <div class="rounded border py-2">
-                    <span class="ps-3 pe-2"><i class="bi bi-card-list"></i> </span>
-                    <a href="#" ref="showActionBtn" @click.prevent>View</a>
+                    <span class="ps-3 pe-2"
+                        ><i class="bi bi-card-list"></i>
+                    </span>
+                    <a ref="showActionBtn" href="#" @click.prevent>View</a>
                 </div>
             </div>
         </div>
@@ -30,30 +38,31 @@
 </template>
 
 <script>
-import AddCommLog from './add_comm_log.vue'
-import {
-    constants,
-} from '@/utils/hooks'
+import AddCommLog from './add_comm_log.vue';
+import { constants } from '@/utils/hooks';
 import { v4 as uuid } from 'uuid';
 export default {
     name: 'CommsLogSection',
+    components: {
+        AddCommLog,
+    },
     props: {
         comms_url: {
             type: String,
-            required: true
+            required: true,
         },
         logs_url: {
             type: String,
-            required: true
+            required: true,
         },
         comms_add_url: {
             type: String,
-            required: true
+            required: true,
         },
         disable_add_entry: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
     data() {
         let vm = this;
@@ -64,7 +73,7 @@ export default {
             popoversInitialised: false,
             actionsDtOptions: {
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 deferRender: true,
@@ -76,39 +85,39 @@ export default {
                     "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                 processing: true,
                 ajax: {
-                    "url": vm.logs_url,
-                    "dataSrc": '',
+                    url: vm.logs_url,
+                    dataSrc: '',
                 },
                 order: [],
                 columns: [
                     {
                         title: 'Who',
-                        data: "who",
-                        orderable: false
+                        data: 'who',
+                        orderable: false,
                     },
                     {
                         title: 'What',
-                        data: "what",
-                        orderable: false
+                        data: 'what',
+                        orderable: false,
                     },
                     {
                         title: 'When',
-                        data: "when",
+                        data: 'when',
                         orderable: false,
                         mRender: function (data, type, full) {
                             return moment(data).format(vm.dateFormat);
-                        }
+                        },
                     },
                     {
                         title: 'Created',
                         data: 'when',
-                        visible: false
-                    }
-                ]
+                        visible: false,
+                    },
+                ],
             },
             commsDtOptions: {
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 deferRender: true,
@@ -120,8 +129,8 @@ export default {
                     "<'row'<'col-sm-12'tr>>" +
                     "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                 ajax: {
-                    "url": vm.comms_url,
-                    "dataSrc": '',
+                    url: vm.comms_url,
+                    dataSrc: '',
                 },
                 columns: [
                     {
@@ -129,34 +138,36 @@ export default {
                         data: 'created',
                         render: function (date) {
                             return moment(date).format(vm.dateFormat);
-                        }
+                        },
                     },
                     {
                         title: 'Type',
-                        data: 'type'
+                        data: 'type',
                     },
                     {
                         title: 'To',
                         data: 'to',
-                        'render': function (value) {
+                        render: function (value) {
                             var ellipsis = '...',
                                 truncated = _.truncate(value, {
                                     length: 25,
                                     omission: ellipsis,
-                                    separator: ' '
+                                    separator: ' ',
                                 }),
                                 result = '<span>' + truncated + '</span>',
-                                popTemplate = _.template('<a href="javascript://" ' +
-                                    'role="button" ' +
-                                    'data-bs-toggle="popover" ' +
-                                    'data-trigger="click" ' +
-                                    'data-placement="top auto"' +
-                                    'data-html="true" ' +
-                                    'data-bs-content="<%= text %>" ' +
-                                    '>more</a>');
+                                popTemplate = _.template(
+                                    '<a href="javascript://" ' +
+                                        'role="button" ' +
+                                        'data-bs-toggle="popover" ' +
+                                        'data-trigger="click" ' +
+                                        'data-placement="top auto"' +
+                                        'data-html="true" ' +
+                                        'data-bs-content="<%= text %>" ' +
+                                        '>more</a>'
+                                );
                             if (_.endsWith(truncated, ellipsis)) {
                                 result += popTemplate({
-                                    text: value
+                                    text: value,
                                 });
                             }
                             return result;
@@ -165,25 +176,27 @@ export default {
                     {
                         title: 'CC',
                         data: 'cc',
-                        'render': function (value) {
+                        render: function (value) {
                             var ellipsis = '...',
                                 truncated = _.truncate(value, {
                                     length: 25,
                                     omission: ellipsis,
-                                    separator: ' '
+                                    separator: ' ',
                                 }),
                                 result = '<span>' + truncated + '</span>',
-                                popTemplate = _.template('<a href="javascript://" ' +
-                                    'role="button" ' +
-                                    'data-bs-toggle="popover" ' +
-                                    'data-trigger="click" ' +
-                                    'data-placement="top auto"' +
-                                    'data-html="true" ' +
-                                    'data-bs-content="<%= text %>" ' +
-                                    '>more</a>');
+                                popTemplate = _.template(
+                                    '<a href="javascript://" ' +
+                                        'role="button" ' +
+                                        'data-bs-toggle="popover" ' +
+                                        'data-trigger="click" ' +
+                                        'data-placement="top auto"' +
+                                        'data-html="true" ' +
+                                        'data-bs-content="<%= text %>" ' +
+                                        '>more</a>'
+                                );
                             if (_.endsWith(truncated, ellipsis)) {
                                 result += popTemplate({
-                                    text: value
+                                    text: value,
                                 });
                             }
                             return result;
@@ -192,30 +205,32 @@ export default {
                     {
                         title: 'From',
                         data: 'fromm',
-                        render: vm.commaToNewline
+                        render: vm.commaToNewline,
                     },
                     {
                         title: 'Subject/Desc.',
                         data: 'subject',
-                        'render': function (value) {
+                        render: function (value) {
                             var ellipsis = '...',
                                 truncated = _.truncate(value, {
                                     length: 25,
                                     omission: ellipsis,
-                                    separator: ' '
+                                    separator: ' ',
                                 }),
                                 result = '<span>' + truncated + '</span>',
-                                popTemplate = _.template('<a href="javascript://" ' +
-                                    'role="button" ' +
-                                    'data-bs-toggle="popover" ' +
-                                    'data-trigger="click" ' +
-                                    'data-placement="top auto"' +
-                                    'data-html="true" ' +
-                                    'data-bs-content="<%= text %>" ' +
-                                    '>more</a>');
+                                popTemplate = _.template(
+                                    '<a href="javascript://" ' +
+                                        'role="button" ' +
+                                        'data-bs-toggle="popover" ' +
+                                        'data-trigger="click" ' +
+                                        'data-placement="top auto"' +
+                                        'data-html="true" ' +
+                                        'data-bs-content="<%= text %>" ' +
+                                        '>more</a>'
+                                );
                             if (_.endsWith(truncated, ellipsis)) {
                                 result += popTemplate({
-                                    text: value
+                                    text: value,
                                 });
                             }
                             return result;
@@ -224,25 +239,27 @@ export default {
                     {
                         title: 'Text',
                         data: 'text',
-                        'render': function (value) {
+                        render: function (value) {
                             var ellipsis = '...',
                                 truncated = _.truncate(value, {
                                     length: 100,
                                     omission: ellipsis,
-                                    separator: ' '
+                                    separator: ' ',
                                 }),
                                 result = '<span>' + truncated + '</span>',
-                                popTemplate = _.template('<a href="javascript://" ' +
-                                    'role="button" ' +
-                                    'data-bs-toggle="popover" ' +
-                                    'data-trigger="click" ' +
-                                    'data-placement="top auto"' +
-                                    'data-html="true" ' +
-                                    'data-bs-content="<%= text %>" ' +
-                                    '>more</a>');
+                                popTemplate = _.template(
+                                    '<a href="javascript://" ' +
+                                        'role="button" ' +
+                                        'data-bs-toggle="popover" ' +
+                                        'data-trigger="click" ' +
+                                        'data-placement="top auto"' +
+                                        'data-html="true" ' +
+                                        'data-bs-content="<%= text %>" ' +
+                                        '>more</a>'
+                                );
                             if (_.endsWith(truncated, ellipsis)) {
                                 result += popTemplate({
-                                    text: value
+                                    text: value,
                                 });
                             }
                             return result;
@@ -251,7 +268,7 @@ export default {
                     {
                         title: 'Documents',
                         data: 'documents',
-                        'render': function (values) {
+                        render: function (values) {
                             var result = '';
                             _.forEach(values, function (value) {
                                 // We expect an array [docName, url]
@@ -269,38 +286,52 @@ export default {
                                     docName = _.truncate(docName, {
                                         length: 18,
                                         omission: '...',
-                                        separator: ' '
+                                        separator: ' ',
                                     });
                                 }
-                                result += '<a href="' + url + '" target="_blank"><p>' + docName + '</p></a><br>';
+                                result +=
+                                    '<a href="' +
+                                    url +
+                                    '" target="_blank"><p>' +
+                                    docName +
+                                    '</p></a><br>';
                             });
                             return result;
-                        }
+                        },
                     },
                     {
                         title: 'Created',
                         data: 'created',
-                        visible: false
-                    }
-                ]
+                        visible: false,
+                    },
+                ],
             },
             commsTable: null,
-        }
+        };
     },
-    components: {
-        AddCommLog
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.initialisePopovers();
+        });
     },
     methods: {
         initialiseCommLogs: function () {
             // To allow table elements (ref: https://getbootstrap.com/docs/5.1/getting-started/javascript/#sanitizer)
-            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
-            myDefaultAllowList.table = []
+            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList;
+            myDefaultAllowList.table = [];
             let vm = this;
             let commsLogId = 'comms-log-table' + vm.uuid;
             let popover_name = 'popover-' + vm.uuid + '-comms';
-            let popover_elem = $(vm.$refs.showCommsBtn)[0]
-            let my_content = '<table id="' + commsLogId + '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0"></table>'
-            let my_template = '<div class="popover ' + popover_name + '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+            let popover_elem = $(vm.$refs.showCommsBtn)[0];
+            let my_content =
+                '<table id="' +
+                commsLogId +
+                '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0"></table>';
+            let my_template =
+                '<div class="popover ' +
+                popover_name +
+                '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';
             new bootstrap.Popover(popover_elem, {
                 sanitize: false,
                 html: true,
@@ -309,38 +340,57 @@ export default {
                 title: 'Communication logs',
                 container: 'body',
                 placement: 'auto',
-                trigger: "click",
-            })
+                trigger: 'click',
+            });
             popover_elem.addEventListener('inserted.bs.popover', () => {
                 // when the popover template has been added to the DOM
-                vm.commsTable = $('#' + commsLogId).DataTable(vm.commsDtOptions);
-                vm.commsTable.on('draw', function () { // Draw event - fired once the table has completed a draw.
-                    var popoverTriggerList = [].slice.call(document.querySelectorAll('#' + commsLogId + ' [data-bs-toggle="popover"]'))
-                    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-                        return new bootstrap.Popover(popoverTriggerEl)
-                    })
-                })
-            })
+                vm.commsTable = $('#' + commsLogId).DataTable(
+                    vm.commsDtOptions
+                );
+                vm.commsTable.on('draw', function () {
+                    // Draw event - fired once the table has completed a draw.
+                    var popoverTriggerList = [].slice.call(
+                        document.querySelectorAll(
+                            '#' + commsLogId + ' [data-bs-toggle="popover"]'
+                        )
+                    );
+                    var popoverList = popoverTriggerList.map(
+                        function (popoverTriggerEl) {
+                            return new bootstrap.Popover(popoverTriggerEl);
+                        }
+                    );
+                });
+            });
             popover_elem.addEventListener('shown.bs.popover', () => {
                 // when the popover has been made visible to the user
-                let el = vm.$refs.showCommsBtn
-                var popover_bounding_top = parseInt($('.' + popover_name)[0].getBoundingClientRect().top);
-                var el_bounding_top = parseInt($(el)[0].getBoundingClientRect().top);
+                let el = vm.$refs.showCommsBtn;
+                var popover_bounding_top = parseInt(
+                    $('.' + popover_name)[0].getBoundingClientRect().top
+                );
+                var el_bounding_top = parseInt(
+                    $(el)[0].getBoundingClientRect().top
+                );
                 var diff = el_bounding_top - popover_bounding_top;
                 var x = diff + 5;
                 // $('.' + popover_name).children('.arrow').css('top', x + 'px');
-            })
+            });
         },
         initialiseActionLogs: function () {
             // To allow table elements (ref: https://getbootstrap.com/docs/5.1/getting-started/javascript/#sanitizer)
-            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
-            myDefaultAllowList.table = []
+            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList;
+            myDefaultAllowList.table = [];
             let vm = this;
             let actionLogId = 'actions-log-table' + vm.uuid;
             let popover_name = 'popover-' + vm.uuid + '-logs';
-            let popover_elem = $(vm.$refs.showActionBtn)[0]
-            let my_content = '<table id="' + actionLogId + '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0" width="100%"></table>'
-            let my_template = '<div class="popover ' + popover_name + '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+            let popover_elem = $(vm.$refs.showActionBtn)[0];
+            let my_content =
+                '<table id="' +
+                actionLogId +
+                '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0" width="100%"></table>';
+            let my_template =
+                '<div class="popover ' +
+                popover_name +
+                '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';
             new bootstrap.Popover(popover_elem, {
                 html: true,
                 content: my_content,
@@ -348,27 +398,41 @@ export default {
                 title: 'Action logs',
                 container: 'body',
                 placement: 'auto',
-                trigger: "click",
-            })
+                trigger: 'click',
+            });
             popover_elem.addEventListener('inserted.bs.popover', () => {
                 // when the popover template has been added to the DOM
-                vm.actionsTable = $('#' + actionLogId).DataTable(this.actionsDtOptions);
+                vm.actionsTable = $('#' + actionLogId).DataTable(
+                    this.actionsDtOptions
+                );
                 vm.actionsTable.on('draw', function () {
-                    var popoverTriggerList = [].slice.call(document.querySelectorAll('#' + actionLogId + ' [data-bs-toggle="popover"]'))
-                    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-                        return new bootstrap.Popover(popoverTriggerEl)
-                    })
-                })
-            })
+                    var popoverTriggerList = [].slice.call(
+                        document.querySelectorAll(
+                            '#' + actionLogId + ' [data-bs-toggle="popover"]'
+                        )
+                    );
+                    var popoverList = popoverTriggerList.map(
+                        function (popoverTriggerEl) {
+                            return new bootstrap.Popover(popoverTriggerEl);
+                        }
+                    );
+                });
+            });
             popover_elem.addEventListener('shown.bs.popover', () => {
                 // when the popover has been made visible to the user
-                let el = vm.$refs.showActionBtn
-                var popover_bounding_top = parseInt($('.' + popover_name)[0].getBoundingClientRect().top);
-                var el_bounding_top = parseInt($(el)[0].getBoundingClientRect().top);
+                let el = vm.$refs.showActionBtn;
+                var popover_bounding_top = parseInt(
+                    $('.' + popover_name)[0].getBoundingClientRect().top
+                );
+                var el_bounding_top = parseInt(
+                    $(el)[0].getBoundingClientRect().top
+                );
                 var diff = el_bounding_top - popover_bounding_top;
                 var x = diff + 5;
-                $('.' + popover_name).children('.arrow').css('top', x + 'px');
-            })
+                $('.' + popover_name)
+                    .children('.arrow')
+                    .css('top', x + 'px');
+            });
         },
         initialisePopovers: function () {
             if (!this.popoversInitialised) {
@@ -379,13 +443,7 @@ export default {
         },
         addComm() {
             this.$refs.add_comm.isModalOpen = true;
-        }
+        },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.initialisePopovers();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
index 7cddf6d6..b20492c6 100644
--- a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
@@ -1,140 +1,250 @@
 <template id="communities_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="community_id_lookup">Community ID:</label>
-                        <select id="community_id_lookup" name="community_id_lookup" ref="community_id_lookup"
-                            class="form-control" />
+                        <select
+                            id="community_id_lookup"
+                            ref="community_id_lookup"
+                            name="community_id_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="community_name_lookup">Community Name:</label>
-                        <select id="community_name_lookup" name="community_name_lookup" ref="community_name_lookup"
-                            class="form-control" />
+                        <label for="community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="community_name_lookup"
+                            ref="community_name_lookup"
+                            name="community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div v-if="is_internal" class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCommunityApplicationStatus">
+                        <select
+                            v-model="filterCommunityApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in community_status" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in community_status"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Region:</label>
-                        <select class="form-select" v-model="filterCommunityRegion" @change="filterDistrict($event)">
+                        <select
+                            v-model="filterCommunityRegion"
+                            class="form-select"
+                            @change="filterDistrict($event)"
+                        >
                             <option value="all">All</option>
-                            <option v-for="region in region_list" :value="region.id" v-bind:key="region.id">
-                                {{ region.name }}</option>
+                            <option
+                                v-for="region in region_list"
+                                :key="region.id"
+                                :value="region.id"
+                            >
+                                {{ region.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">District:</label>
-                        <select class="form-select" v-model="filterCommunityDistrict">
+                        <select
+                            v-model="filterCommunityDistrict"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="district in filtered_district_list" :value="district.id">{{ district.name }}
+                            <option
+                                v-for="district in filtered_district_list"
+                                :value="district.id"
+                            >
+                                {{ district.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-list">WA Legislative List:</label>
-                        <select id="wa-legislative-list" class="form-select" v-model="filterCommunityWALegislativeList">
+                        <label for="wa-legislative-list"
+                            >WA Legislative List:</label
+                        >
+                        <select
+                            id="wa-legislative-list"
+                            v-model="filterCommunityWALegislativeList"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_lists" :value="list.id">{{ list.code }}</option>
+                            <option
+                                v-for="list in wa_legislative_lists"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-category">WA Legislative Category:</label>
-                        <select id="wa-legislative-category" class="form-select"
-                            v-model="filterCommunityWALegislativeCategory">
+                        <label for="wa-legislative-category"
+                            >WA Legislative Category:</label
+                        >
+                        <select
+                            id="wa-legislative-category"
+                            v-model="filterCommunityWALegislativeCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_legislative_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-priority-category">WA Priority Category:</label>
-                        <select id="wa-priority-category" class="form-select"
-                            v-model="filterCommunityWAPriorityCategory">
+                        <label for="wa-priority-category"
+                            >WA Priority Category:</label
+                        >
+                        <select
+                            id="wa-priority-category"
+                            v-model="filterCommunityWAPriorityCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_priority_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_priority_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="commonwealth-relevance">Commonwealth Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="commonwealth-relevance"
+                            >Commonwealth Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="commonwealth-relevance"
-                                v-model="filterCommunityCommonwealthRelevance" true-value="true" false-value="false">
+                            <input
+                                id="commonwealth-relevance"
+                                v-model="filterCommunityCommonwealthRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="international-relevance">International Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="international-relevance"
+                            >International Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="international-relevance"
-                                v-model="filterCommunityInternationalRelevance" true-value="true" false-value="false">
+                            <input
+                                id="international-relevance"
+                                v-model="filterCommunityInternationalRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="conservation-criteria">Conservation Criteria</label>
-                        <input class="form-control" type="input" id="conservation-criteria"
-                            v-model="filterCommunityConsevationCriteria" placeholder="Enter text to search for">
+                        <label
+                            class="form-check-label"
+                            for="conservation-criteria"
+                            >Conservation Criteria</label
+                        >
+                        <input
+                            id="conservation-criteria"
+                            v-model="filterCommunityConsevationCriteria"
+                            class="form-control"
+                            type="input"
+                            placeholder="Enter text to search for"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
         <div v-if="newCommunityVisibility" class="col-md-12">
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createCommunity"><i
-                        class="fa-solid fa-circle-plus"></i> New Community </button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createCommunity"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> New Community
+                </button>
             </div>
         </div>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="communities_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="communities_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
         <div v-if="communityHistoryId">
-            <CommunityHistory ref="community_history" :key="communityHistoryId" :community-id="communityHistoryId" />
+            <CommunityHistory
+                ref="community_history"
+                :key="communityHistoryId"
+                :community-id="communityHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import CommunityHistory from '../internal/species_communities/community_history.vue';
 
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'CommunitiesTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        CommunityHistory,
+    },
     props: {
         level: {
             type: String,
@@ -142,24 +252,24 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         filterCommunityMigratedId_cache: {
             type: String,
@@ -223,39 +333,85 @@ export default {
             datatable_id: 'communities-datatable-' + vm._uid,
             communityHistoryId: null,
             // selected values for filtering
-            filterCommunityMigratedId: sessionStorage.getItem(this.filterCommunityMigratedId_cache) ?
-                sessionStorage.getItem(this.filterCommunityMigratedId_cache) : 'all',
+            filterCommunityMigratedId: sessionStorage.getItem(
+                this.filterCommunityMigratedId_cache
+            )
+                ? sessionStorage.getItem(this.filterCommunityMigratedId_cache)
+                : 'all',
 
-            filterCommunityName: sessionStorage.getItem(this.filterCommunityName_cache) ?
-                sessionStorage.getItem(this.filterCommunityName_cache) : 'all',
+            filterCommunityName: sessionStorage.getItem(
+                this.filterCommunityName_cache
+            )
+                ? sessionStorage.getItem(this.filterCommunityName_cache)
+                : 'all',
 
-            filterCommunityApplicationStatus: sessionStorage.getItem(this.filterCommunityApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCommunityApplicationStatus_cache) : 'all',
+            filterCommunityApplicationStatus: sessionStorage.getItem(
+                this.filterCommunityApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCommunityApplicationStatus_cache
+                  )
+                : 'all',
 
-            filterCommunityRegion: sessionStorage.getItem(this.filterCommunityRegion_cache) ?
-                sessionStorage.getItem(this.filterCommunityRegion_cache) : 'all',
+            filterCommunityRegion: sessionStorage.getItem(
+                this.filterCommunityRegion_cache
+            )
+                ? sessionStorage.getItem(this.filterCommunityRegion_cache)
+                : 'all',
 
-            filterCommunityDistrict: sessionStorage.getItem(this.filterCommunityDistrict_cache) ?
-                sessionStorage.getItem(this.filterCommunityDistrict_cache) : 'all',
+            filterCommunityDistrict: sessionStorage.getItem(
+                this.filterCommunityDistrict_cache
+            )
+                ? sessionStorage.getItem(this.filterCommunityDistrict_cache)
+                : 'all',
 
-            filterCommunityWALegislativeList: sessionStorage.getItem(this.filterCommunityWALegislativeList_cache) ?
-                sessionStorage.getItem(this.filterCommunityWALegislativeList_cache) : 'all',
+            filterCommunityWALegislativeList: sessionStorage.getItem(
+                this.filterCommunityWALegislativeList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCommunityWALegislativeList_cache
+                  )
+                : 'all',
 
-            filterCommunityWALegislativeCategory: sessionStorage.getItem(this.filterCommunityWALegislativeCategory_cache) ?
-                sessionStorage.getItem(this.filterCommunityWALegislativeCategory_cache) : 'all',
+            filterCommunityWALegislativeCategory: sessionStorage.getItem(
+                this.filterCommunityWALegislativeCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCommunityWALegislativeCategory_cache
+                  )
+                : 'all',
 
-            filterCommunityWAPriorityCategory: sessionStorage.getItem(this.filterCommunityWAPriorityCategory_cache) ?
-                sessionStorage.getItem(this.filterCommunityWAPriorityCategory_cache) : 'all',
+            filterCommunityWAPriorityCategory: sessionStorage.getItem(
+                this.filterCommunityWAPriorityCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCommunityWAPriorityCategory_cache
+                  )
+                : 'all',
 
-            filterCommunityCommonwealthRelevance: sessionStorage.getItem(this.filterCommunityCommonwealthRelevance_cache) ?
-                sessionStorage.getItem(this.filterCommunityCommonwealthRelevance_cache) : "false",
+            filterCommunityCommonwealthRelevance: sessionStorage.getItem(
+                this.filterCommunityCommonwealthRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCommunityCommonwealthRelevance_cache
+                  )
+                : 'false',
 
-            filterCommunityInternationalRelevance: sessionStorage.getItem(this.filterCommunityInternationalRelevance_cache) ?
-                sessionStorage.getItem(this.filterCommunityInternationalRelevance_cache) : "false",
-
-            filterCommunityConsevationCriteria: sessionStorage.getItem(this.filterCommunityConsevationCriteria_cache) ?
-                sessionStorage.getItem(this.filterCommunityConsevationCriteria_cache) : "",
+            filterCommunityInternationalRelevance: sessionStorage.getItem(
+                this.filterCommunityInternationalRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCommunityInternationalRelevance_cache
+                  )
+                : 'false',
 
+            filterCommunityConsevationCriteria: sessionStorage.getItem(
+                this.filterCommunityConsevationCriteria_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCommunityConsevationCriteria_cache
+                  )
+                : '',
 
             //Filter list for Community select box
             filterListsCommunities: {},
@@ -283,80 +439,12 @@ export default {
                 { value: 'historical', name: 'Historical' },
             ],
             community_status: [],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        CommunityHistory,
-    },
-    watch: {
-        filterCommunityMigratedId: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityMigratedId_cache, vm.filterCommunityMigratedId);
-        },
-        filterCommunityName: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityName_cache, vm.filterCommunityName);
-        },
-        filterCommunityApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityApplicationStatus_cache, vm.filterCommunityApplicationStatus);
-        },
-        filterCommunityRegion: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityRegion_cache, vm.filterCommunityRegion);
-        },
-        filterCommunityDistrict: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityDistrict_cache, vm.filterCommunityDistrict);
-        },
-        filterCommunityWALegislativeList: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityWALegislativeList_cache, vm.filterCommunityWALegislativeList);
-        },
-        filterCommunityWALegislativeCategory: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityWALegislativeCategory_cache, vm.filterCommunityWALegislativeCategory);
-        },
-        filterCommunityWAPriorityCategory: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityWAPriorityCategory_cache, vm.filterCommunityWAPriorityCategory);
-        },
-        filterCommunityCommonwealthRelevance: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityCommonwealthRelevance_cache, vm.filterCommunityCommonwealthRelevance);
-        },
-        filterCommunityInternationalRelevance: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityInternationalRelevance_cache, vm.filterCommunityInternationalRelevance);
-        },
-        filterCommunityConsevationCriteria: function () {
-            let vm = this;
-            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCommunityConsevationCriteria_cache, vm.filterCommunityConsevationCriteria);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterCommunityMigratedId === 'all' &&
+            if (
+                this.filterCommunityMigratedId === 'all' &&
                 this.filterCommunityName === 'all' &&
                 this.filterCommunityApplicationStatus === 'all' &&
                 this.filterCommunityRegion === 'all' &&
@@ -366,197 +454,234 @@ export default {
                 this.filterCommunityWAPriorityCategory === 'all' &&
                 this.filterCommunityCommonwealthRelevance === 'false' &&
                 this.filterCommunityInternationalRelevance === 'false' &&
-                this.filterCommunityConsevationCriteria === '') {
-                return false
+                this.filterCommunityConsevationCriteria === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_external: function () {
             return this.level == 'external';
         },
         is_internal: function () {
-            return this.level == 'internal'
+            return this.level == 'internal';
         },
         is_referral: function () {
             return this.level == 'referral';
         },
         newCommunityVisibility: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS)
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS
+                )
+            );
         },
         datatable_headers: function () {
             if (this.is_external) {
-                return ['Id', 'Number', 'Community Id', 'Community Name', 'Regions', 'Districts',
-                    'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category',
-                    'International Conservation', 'Conservation Criteria', 'Action']
+                return [
+                    'Id',
+                    'Number',
+                    'Community Id',
+                    'Community Name',
+                    'Regions',
+                    'Districts',
+                    'WA Priority Category',
+                    'WA Legislative List',
+                    'WA Legislative Category',
+                    'Commonwealth Conservation Category',
+                    'International Conservation',
+                    'Conservation Criteria',
+                    'Action',
+                ];
             }
             if (this.is_internal) {
-                return ['Id', 'Number', 'Community Id', 'Community Name', 'Regions', 'Districts',
-                    'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category',
-                    'International Conservation', 'Conservation Criteria', 'Status', 'Action']
+                return [
+                    'Id',
+                    'Number',
+                    'Community Id',
+                    'Community Name',
+                    'Regions',
+                    'Districts',
+                    'WA Priority Category',
+                    'WA Legislative List',
+                    'WA Legislative Category',
+                    'Commonwealth Conservation Category',
+                    'International Conservation',
+                    'Conservation Criteria',
+                    'Status',
+                    'Action',
+                ];
             }
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             return {
-                data: "community_number",
+                data: 'community_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.community_number
+                render: function (data, type, full) {
+                    return full.community_number;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_community_id: function () {
             return {
-                data: "community_migrated_id",
+                data: 'community_migrated_id',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__community_migrated_id",
-            }
+                name: 'taxonomy__community_migrated_id',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__community_name",
-            }
+                name: 'taxonomy__community_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.processing_status) {
-                        if (full.processing_status === "Active" && full.publishing_status) {
-                            return full.processing_status + " - " + full.publishing_status.public_status;
+                        if (
+                            full.processing_status === 'Active' &&
+                            full.publishing_status
+                        ) {
+                            return (
+                                full.processing_status +
+                                ' - ' +
+                                full.publishing_status.public_status
+                            );
                         }
                         return full.processing_status;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_region: function () {
             return {
-                data: "regions",
-                data: "regions",
+                data: 'regions',
+                data: 'regions',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.regions) {
                         return full.regions;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "regions__name",
-            }
+                name: 'regions__name',
+            };
         },
         column_district: function () {
             return {
-                data: "districts",
+                data: 'districts',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.districts) {
-                        return full.districts
+                        return full.districts;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "districts__name",
-            }
+                name: 'districts__name',
+            };
         },
         column_wa_legislative_list: function () {
             return {
-                data: "wa_legislative_list",
+                data: 'wa_legislative_list',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_wa_legislative_category: function () {
             return {
-                data: "wa_legislative_category",
+                data: 'wa_legislative_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_wa_priority_category: function () {
             return {
-                data: "wa_priority_category",
+                data: 'wa_priority_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_commonwealth_conservation_category: function () {
             return {
-                data: "commonwealth_conservation_category",
+                data: 'commonwealth_conservation_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
+        },
+        column_other_conservation_assessment: function () {
+            return {
+                data: 'other_conservation_assessment',
+                orderable: false,
+                searchable: false,
+                visible: true,
+            };
         },
-        column_other_conservation_assessment:
-            function () {
-                return {
-                    data: "other_conservation_assessment",
-                    orderable: false,
-                    searchable: false,
-                    visible: true,
-                }
-            },
         column_conservation_criteria: function () {
             return {
-                data: "conservation_criteria",
+                data: 'conservation_criteria',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
                 // 9. Action
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (!vm.is_external) {
                         if (full.can_user_edit) {
                             if (full.processing_status == 'Discarded') {
@@ -566,10 +691,8 @@ export default {
                                 links += `<a href='#${full.id}' data-discard-community-proposal='${full.id}'>Discard</a><br/>`;
                                 links += `<a href='#' data-history-community='${full.id}'>History</a><br>`;
                             }
-                        }
-                        else {
+                        } else {
                             if (full.user_process) {
-
                                 links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
                             }
                             links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
@@ -579,14 +702,14 @@ export default {
                         links += `<a href='/external/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -595,7 +718,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -604,9 +727,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             if (vm.is_external) {
                 columns = [
                     vm.column_id,
@@ -622,8 +745,8 @@ export default {
                     vm.column_other_conservation_assessment,
                     vm.column_conservation_criteria,
                     vm.column_action,
-                ]
-                search = false
+                ];
+                search = false;
             }
             if (vm.is_internal) {
                 columns = [
@@ -641,50 +764,64 @@ export default {
                     vm.column_conservation_criteria,
                     vm.column_status,
                     vm.column_action,
-                ]
-                search = true
+                ];
+                search = true;
             }
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "Action" column always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
 
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
-                        d.filter_community_migrated_id = vm.filterCommunityMigratedId;
+                    data: function (d) {
+                        d.filter_community_migrated_id =
+                            vm.filterCommunityMigratedId;
                         d.filter_community_name = vm.filterCommunityName;
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_application_status = vm.filterCommunityApplicationStatus;
+                        d.filter_application_status =
+                            vm.filterCommunityApplicationStatus;
                         d.filter_region = vm.filterCommunityRegion;
                         d.filter_district = vm.filterCommunityDistrict;
-                        d.filter_wa_legislative_list = vm.filterCommunityWALegislativeList;
-                        d.filter_wa_legislative_category = vm.filterCommunityWALegislativeCategory;
-                        d.filter_wa_priority_category = vm.filterCommunityWAPriorityCategory;
-                        d.filter_commonwealth_relevance = vm.filterCommunityCommonwealthRelevance;
-                        d.filter_international_relevance = vm.filterCommunityInternationalRelevance;
-                        d.filter_conservation_criteria = vm.filterCommunityConsevationCriteria;
+                        d.filter_wa_legislative_list =
+                            vm.filterCommunityWALegislativeList;
+                        d.filter_wa_legislative_category =
+                            vm.filterCommunityWALegislativeCategory;
+                        d.filter_wa_priority_category =
+                            vm.filterCommunityWAPriorityCategory;
+                        d.filter_commonwealth_relevance =
+                            vm.filterCommunityCommonwealthRelevance;
+                        d.filter_international_relevance =
+                            vm.filterCommunityInternationalRelevance;
+                        d.filter_conservation_criteria =
+                            vm.filterCommunityConsevationCriteria;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -696,8 +833,183 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCommunityMigratedId: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityMigratedId_cache,
+                vm.filterCommunityMigratedId
+            );
+        },
+        filterCommunityName: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityName_cache,
+                vm.filterCommunityName
+            );
+        },
+        filterCommunityApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityApplicationStatus_cache,
+                vm.filterCommunityApplicationStatus
+            );
+        },
+        filterCommunityRegion: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityRegion_cache,
+                vm.filterCommunityRegion
+            );
+        },
+        filterCommunityDistrict: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityDistrict_cache,
+                vm.filterCommunityDistrict
+            );
+        },
+        filterCommunityWALegislativeList: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityWALegislativeList_cache,
+                vm.filterCommunityWALegislativeList
+            );
+        },
+        filterCommunityWALegislativeCategory: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityWALegislativeCategory_cache,
+                vm.filterCommunityWALegislativeCategory
+            );
+        },
+        filterCommunityWAPriorityCategory: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityWAPriorityCategory_cache,
+                vm.filterCommunityWAPriorityCategory
+            );
+        },
+        filterCommunityCommonwealthRelevance: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityCommonwealthRelevance_cache,
+                vm.filterCommunityCommonwealthRelevance
+            );
+        },
+        filterCommunityInternationalRelevance: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityInternationalRelevance_cache,
+                vm.filterCommunityInternationalRelevance
+            );
+        },
+        filterCommunityConsevationCriteria: function () {
+            let vm = this;
+            vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCommunityConsevationCriteria_cache,
+                vm.filterCommunityConsevationCriteria
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
+            }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseCommunityNameLookup();
+            vm.initialiseCommunityIdLookup();
+            vm.addEventListeners();
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterCommunityName') != 'all' &&
+                sessionStorage.getItem('filterCommunityName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCommunityNameText'),
+                    vm.filterCommunityName,
+                    false,
+                    true
+                );
+                $('#community_name_lookup').append(newOption);
             }
-        }
+            if (
+                sessionStorage.getItem('filterCommunityMigratedId') != 'all' &&
+                sessionStorage.getItem('filterCommunityMigratedId') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCommunityMigratedIdText'),
+                    vm.filterCommunityMigratedId,
+                    false,
+                    true
+                );
+                $('#community_id_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -708,101 +1020,130 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.community_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCommunityName = data;
-                    sessionStorage.setItem("filterCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCommunityName = 'all';
-                    sessionStorage.setItem("filterCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-community_name_lookup-results"]')
+                    sessionStorage.setItem('filterCommunityNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-community_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommunityIdLookup: function () {
             let vm = this;
-            $(vm.$refs.community_id_lookup).select2({
-                minimumInputLength: 1,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community ID",
-                ajax: {
-                    url: api_endpoints.community_id_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.community_id_lookup)
+                .select2({
+                    minimumInputLength: 1,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community ID',
+                    ajax: {
+                        url: api_endpoints.community_id_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCommunityMigratedId = data;
-                    sessionStorage.setItem("filterCommunityMigratedIdText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCommunityMigratedIdText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCommunityMigratedId = 'all';
-                    sessionStorage.setItem("filterCommunityMigratedIdText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-community_id_lookup-results"]')
+                    sessionStorage.setItem('filterCommunityMigratedIdText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-community_id_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
-            fetch(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsCommunities = await response.json();
-                vm.filterDistrict();
-                vm.community_status = vm.internal_status.slice().sort((a, b) => {
-                    return a.name.trim().localeCompare(b.name.trim());
-                });
-                vm.wa_legislative_lists = vm.filterListsCommunities.wa_legislative_lists;
-                vm.wa_legislative_categories = vm.filterListsCommunities.wa_legislative_categories;
-                vm.wa_priority_categories = vm.filterListsCommunities.wa_priority_categories;
-            }, (error) => {
-                console.log(error);
-            })
-            fetch(api_endpoints.region_district_filter_dict).then(async (response) => {
-                vm.filterRegionDistrict = await response.json();
-                vm.region_list = vm.filterRegionDistrict.region_list;
-                vm.district_list = vm.filterRegionDistrict.district_list;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.community_filter_dict +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsCommunities = await response.json();
+                    vm.filterDistrict();
+                    vm.community_status = vm.internal_status
+                        .slice()
+                        .sort((a, b) => {
+                            return a.name.trim().localeCompare(b.name.trim());
+                        });
+                    vm.wa_legislative_lists =
+                        vm.filterListsCommunities.wa_legislative_lists;
+                    vm.wa_legislative_categories =
+                        vm.filterListsCommunities.wa_legislative_categories;
+                    vm.wa_priority_categories =
+                        vm.filterListsCommunities.wa_priority_categories;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
+            fetch(api_endpoints.region_district_filter_dict).then(
+                async (response) => {
+                    vm.filterRegionDistrict = await response.json();
+                    vm.region_list = vm.filterRegionDistrict.region_list;
+                    vm.district_list = vm.filterRegionDistrict.district_list;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         //-------filter district dropdown dependent on region selected
         filterDistrict: function (event) {
@@ -813,18 +1154,20 @@ export default {
                 this.filtered_district_list = [];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
-                    if (choice.region_id.toString() === this.filterCommunityRegion.toString()) {
+                    if (
+                        choice.region_id.toString() ===
+                        this.filterCommunityRegion.toString()
+                    ) {
                         this.filtered_district_list.push(choice);
                     }
-
                 }
             });
         },
         createCommunity: async function () {
             swal.fire({
                 title: `Add Community`,
-                text: "Are you sure you want to add a new community?",
-                icon: "question",
+                text: 'Are you sure you want to add a new community?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Community',
                 reverseButtons: true,
@@ -834,22 +1177,21 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newCommunityId = null
+                    let newCommunityId = null;
                     try {
-                        const createUrl = api_endpoints.community + "/";
+                        const createUrl = api_endpoints.community + '/';
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
+                        payload.group_type_id = this.group_type_id;
                         let response = await fetch(createUrl, {
                             method: 'POST',
-                            headers: { 'Content-Type': 'application/json', },
+                            headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(payload),
                         });
                         const data = await response.json();
                         if (data) {
                             newCommunityId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                         if (this.is_internal) {
                             return err;
@@ -866,9 +1208,9 @@ export default {
         discardCommunityProposal: function (species_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Proposal",
-                text: "Are you sure you want to discard this proposal?",
-                icon: "question",
+                title: 'Discard Proposal',
+                text: 'Are you sure you want to discard this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Proposal',
                 customClass: {
@@ -876,36 +1218,49 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_community_proposal(species_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your proposal has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_community_proposal(
+                                species_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your proposal has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateCommunityProposal: function (species_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Proposal",
-                text: "Are you sure you want to reinstate this proposal?",
-                icon: "question",
+                title: 'Reinstate Proposal',
+                text: 'Are you sure you want to reinstate this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Proposal',
                 customClass: {
@@ -913,78 +1268,80 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.reinstate_community_proposal(species_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your proposal has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_community_proposal(
+                                species_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your proposal has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.communities_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // External Discard listener
-            vm.$refs.communities_datatable.vmDataTable.on('click', 'a[data-discard-community-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-community-proposal');
-                vm.discardCommunityProposal(id);
-            });
-            vm.$refs.communities_datatable.vmDataTable.on('click', 'a[data-reinstate-community-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-community-proposal');
-                vm.reinstateCommunityProposal(id);
-            });
-            vm.$refs.communities_datatable.vmDataTable.on('click', 'a[data-history-community]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-community');
-                vm.historyDocument(id);
-            });
-            vm.$refs.communities_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.communities_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-community-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-community-proposal');
+                    vm.discardCommunityProposal(id);
+                }
+            );
+            vm.$refs.communities_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-community-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-community-proposal');
+                    vm.reinstateCommunityProposal(id);
+                }
+            );
+            vm.$refs.communities_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-community]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-community');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.communities_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseCommunityNameLookup();
-            vm.initialiseCommunityIdLookup();
-            vm.addEventListeners();
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterCommunityName") != 'all' && sessionStorage.getItem("filterCommunityName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCommunityNameText"), vm.filterCommunityName, false, true);
-                $('#community_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCommunityMigratedId") != 'all' && sessionStorage.getItem("filterCommunityMigratedId") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCommunityMigratedIdText"), vm.filterCommunityMigratedId, false, true);
-                $('#community_id_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
index 3a6e587f..92544306 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
@@ -1,580 +1,1375 @@
 <template lang="html">
     <div id="communityStatus">
-        <FormSection :formCollapse="false" label="Conservation Status" Index="conservation_status" class="pb-0">
-            <form @change="saveConservationStatus($event)" class="pb-0">
+        <FormSection
+            :form-collapse="false"
+            label="Conservation Status"
+            Index="conservation_status"
+            class="pb-0"
+        >
+            <form class="pb-0" @change="saveConservationStatus($event)">
                 <div class="row mb-3">
-                    <label for="" class="col-sm-4 control-label fw-bold">Community Name <span
-                            class="text-danger">*</span></label>
-                    <div class="col-sm-8" :id="select_community_name">
+                    <label for="" class="col-sm-4 control-label fw-bold"
+                        >Community Name
+                        <span class="text-danger">*</span></label
+                    >
+                    <div :id="select_community_name" class="col-sm-8">
                         <select
-                            :disabled="conservation_status_obj.readonly || 'Unlocked' == conservation_status_obj.processing_status"
-                            :id="community_name_lookup" :name="community_name_lookup" :ref="community_name_lookup"
-                            class="form-control" />
+                            :id="community_name_lookup"
+                            :ref="community_name_lookup"
+                            :disabled="
+                                conservation_status_obj.readonly ||
+                                'Unlocked' ==
+                                    conservation_status_obj.processing_status
+                            "
+                            :name="community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="row mb-3">
                     <label for="" class="col-sm-4 control-label"></label>
                     <div class="col-sm-8">
-                        <textarea disabled class="form-control" rows="3" id="community_display"
-                            v-model="community_display" />
+                        <textarea
+                            id="community_display"
+                            v-model="community_display"
+                            disabled
+                            class="form-control"
+                            rows="3"
+                        />
                     </div>
                 </div>
                 <template v-if="show_administrative_information">
                     <div class="row mb-3 border-top pt-3">
-                        <h5 class="text-muted mb-4">Administrative Information</h5>
-                        <label for="change_code" class="col-sm-4 col-form-label fw-bold">Change Type <span
-                                class="text-danger">*</span></label>
+                        <h5 class="text-muted mb-4">
+                            Administrative Information
+                        </h5>
+                        <label
+                            for="change_code"
+                            class="col-sm-4 col-form-label fw-bold"
+                            >Change Type
+                            <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-8">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="change_codes && change_codes.length > 0 && conservation_status_obj.change_code_id && !change_codes.map((d) => d.id).includes(conservation_status_obj.change_code_id)">
-                                    <input type="text" v-if="conservation_status_obj.change_code"
+                                    v-if="
+                                        change_codes &&
+                                        change_codes.length > 0 &&
+                                        conservation_status_obj.change_code_id &&
+                                        !change_codes
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.change_code_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.change_code
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.change_code + ' (Now Archived)'" disabled />
+                                        :value="
+                                            conservation_status_obj.change_code +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change change type to:
                                     </div>
                                 </template>
-                                <select class="form-select" v-model="conservation_status_obj.change_code_id">
-                                    <option :value="null">Select Appropriate Change Type</option>
-                                    <option v-for="change_code in change_codes" :value="change_code.id"
-                                        v-bind:key="change_code.id">
+                                <select
+                                    v-model="
+                                        conservation_status_obj.change_code_id
+                                    "
+                                    class="form-select"
+                                >
+                                    <option :value="null">
+                                        Select Appropriate Change Type
+                                    </option>
+                                    <option
+                                        v-for="change_code in change_codes"
+                                        :key="change_code.id"
+                                        :value="change_code.id"
+                                    >
                                         {{ change_code.code }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" disabled
-                                    :value="conservation_status_obj.change_code ? conservation_status_obj.change_code : 'Select Appropriate Change Type'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    disabled
+                                    :value="
+                                        conservation_status_obj.change_code
+                                            ? conservation_status_obj.change_code
+                                            : 'Select Appropriate Change Type'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="approval_level" class="col-sm-4 col-form-label fw-bold">Applicable Workflow <span
-                                class="text-danger">*</span></label>
+                        <label
+                            for="approval_level"
+                            class="col-sm-4 col-form-label fw-bold"
+                            >Applicable Workflow
+                            <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-8">
-                            <select id="approval_level" v-model="conservation_status_obj.approval_level"
-                                class="form-select" :disabled="approval_level_disabled" @change="approvalLevelChanged">
-                                <option :value="null">Select Appropriate Workflow</option>
+                            <select
+                                id="approval_level"
+                                v-model="conservation_status_obj.approval_level"
+                                class="form-select"
+                                :disabled="approval_level_disabled"
+                                @change="approvalLevelChanged"
+                            >
+                                <option :value="null">
+                                    Select Appropriate Workflow
+                                </option>
                                 <option :value="'immediate'">Immediate</option>
                                 <option :value="'minister'">Ministerial</option>
                             </select>
                         </div>
                     </div>
-                    <template v-if="conservation_status_obj.approval_level == 'minister'">
+                    <template
+                        v-if="
+                            conservation_status_obj.approval_level == 'minister'
+                        "
+                    >
                         <div class="row mb-3 border-top pt-3">
-                            <label for="listing_date" class="col-sm-3 col-form-label">Public Consultation:</label>
+                            <label
+                                for="listing_date"
+                                class="col-sm-3 col-form-label"
+                                >Public Consultation:</label
+                            >
                             <div class="col-sm-9 d-flex align-items-center">
                                 <div class="form-check form-check-inline">
-                                    Yes <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                        id="public_consultation_yes" class="form-check-input" name="public_consultation"
-                                        v-model="conservation_status_obj.public_consultation" :value="true" />
+                                    Yes
+                                    <input
+                                        id="public_consultation_yes"
+                                        v-model="
+                                            conservation_status_obj.public_consultation
+                                        "
+                                        :disabled="
+                                            listing_and_review_due_date_disabled
+                                        "
+                                        type="radio"
+                                        class="form-check-input"
+                                        name="public_consultation"
+                                        :value="true"
+                                    />
                                 </div>
                                 <div class="form-check form-check-inline">
-                                    No <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                        id="public_consultation_no" class="form-check-input" name="public_consultation"
-                                        v-model="conservation_status_obj.public_consultation" :value="false" />
+                                    No
+                                    <input
+                                        id="public_consultation_no"
+                                        v-model="
+                                            conservation_status_obj.public_consultation
+                                        "
+                                        :disabled="
+                                            listing_and_review_due_date_disabled
+                                        "
+                                        type="radio"
+                                        class="form-check-input"
+                                        name="public_consultation"
+                                        :value="false"
+                                    />
                                 </div>
                             </div>
                         </div>
-                        <div v-if="conservation_status_obj.public_consultation" class="row mb-3 pt-1">
-                            <label for="review_due_date" class="col-sm-3 col-form-label">Start Date:</label>
+                        <div
+                            v-if="conservation_status_obj.public_consultation"
+                            class="row mb-3 pt-1"
+                        >
+                            <label
+                                for="review_due_date"
+                                class="col-sm-3 col-form-label"
+                                >Start Date:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control"
+                                <input
                                     id="public_consultation_start_date"
-                                    v-model="conservation_status_obj.public_consultation_start_date"
-                                    :disabled="listing_and_review_due_date_disabled" />
+                                    v-model="
+                                        conservation_status_obj.public_consultation_start_date
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                />
                             </div>
-                            <template v-if="conservation_status_obj.public_consultation_start_date">
-                                <label for="review_due_date" class="col-sm-3 col-form-label">End Date:</label>
+                            <template
+                                v-if="
+                                    conservation_status_obj.public_consultation_start_date
+                                "
+                            >
+                                <label
+                                    for="review_due_date"
+                                    class="col-sm-3 col-form-label"
+                                    >End Date:</label
+                                >
                                 <div class="col-sm-3">
-                                    <input type="date" placeholder="DD/MM/YYYY" class="form-control"
+                                    <input
                                         id="public_consultation_end_date"
-                                        v-model="conservation_status_obj.public_consultation_end_date"
-                                        :disabled="listing_and_review_due_date_disabled"
-                                        :min="conservation_status_obj.public_consultation_start_date ? new Date(conservation_status_obj.public_consultation_start_date).toISOString().split('T')[0] : null" />
+                                        v-model="
+                                            conservation_status_obj.public_consultation_end_date
+                                        "
+                                        type="date"
+                                        placeholder="DD/MM/YYYY"
+                                        class="form-control"
+                                        :disabled="
+                                            listing_and_review_due_date_disabled
+                                        "
+                                        :min="
+                                            conservation_status_obj.public_consultation_start_date
+                                                ? new Date(
+                                                      conservation_status_obj.public_consultation_start_date
+                                                  )
+                                                      .toISOString()
+                                                      .split('T')[0]
+                                                : null
+                                        "
+                                    />
                                 </div>
                             </template>
                         </div>
                     </template>
-                    <div v-if="conservation_status_obj.effective_from || conservation_status_obj.effective_to"
-                        class="row mb-3 border-top pt-3">
+                    <div
+                        v-if="
+                            conservation_status_obj.effective_from ||
+                            conservation_status_obj.effective_to
+                        "
+                        class="row mb-3 border-top pt-3"
+                    >
                         <template v-if="conservation_status_obj.effective_from">
-                            <label for="effective_from" class="col-sm-3 col-form-label">Effective From:</label>
+                            <label
+                                for="effective_from"
+                                class="col-sm-3 col-form-label"
+                                >Effective From:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="effective_from"
-                                    v-model="conservation_status_obj.effective_from" :disabled="isReadOnly" />
+                                <input
+                                    id="effective_from"
+                                    v-model="
+                                        conservation_status_obj.effective_from
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="isReadOnly"
+                                />
                             </div>
                         </template>
                         <template v-if="conservation_status_obj.effective_to">
-                            <label for="effective_to" class="col-sm-3 col-form-label">Effective to:</label>
+                            <label
+                                for="effective_to"
+                                class="col-sm-3 col-form-label"
+                                >Effective to:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="effective_to"
-                                    v-model="conservation_status_obj.effective_to" :disabled="isReadOnly" />
+                                <input
+                                    id="effective_to"
+                                    v-model="
+                                        conservation_status_obj.effective_to
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="isReadOnly"
+                                />
                             </div>
                         </template>
                     </div>
-                    <div v-if="show_listing_and_review_due_date" class="row mb-3"
-                        :class="conservation_status_obj.effective_from || conservation_status_obj.effective_to ? '' : 'border-top pt-3'">
-                        <label for="listing_date" class="col-sm-3 col-form-label">Date First Listed:</label>
+                    <div
+                        v-if="show_listing_and_review_due_date"
+                        class="row mb-3"
+                        :class="
+                            conservation_status_obj.effective_from ||
+                            conservation_status_obj.effective_to
+                                ? ''
+                                : 'border-top pt-3'
+                        "
+                    >
+                        <label
+                            for="listing_date"
+                            class="col-sm-3 col-form-label"
+                            >Date First Listed:</label
+                        >
                         <div class="col-sm-3">
-                            <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="listing_date"
+                            <input
+                                id="listing_date"
                                 v-model="conservation_status_obj.listing_date"
-                                :disabled="listing_and_review_due_date_disabled" />
+                                type="date"
+                                placeholder="DD/MM/YYYY"
+                                class="form-control"
+                                :disabled="listing_and_review_due_date_disabled"
+                            />
                         </div>
-                        <label for="review_due_date" class="col-sm-3 col-form-label">Review Due Date:</label>
+                        <label
+                            for="review_due_date"
+                            class="col-sm-3 col-form-label"
+                            >Review Due Date:</label
+                        >
                         <div class="col-sm-3">
-                            <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="review_due_date"
-                                v-model="conservation_status_obj.review_due_date"
-                                :disabled="listing_and_review_due_date_disabled" />
+                            <input
+                                id="review_due_date"
+                                v-model="
+                                    conservation_status_obj.review_due_date
+                                "
+                                type="date"
+                                placeholder="DD/MM/YYYY"
+                                class="form-control"
+                                :disabled="listing_and_review_due_date_disabled"
+                            />
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.approval_level == 'minister'" class="row mb-3 border-top pt-3">
-                        <label for="listing_date" class="col-sm-3 col-form-label">CAM MOU:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.approval_level == 'minister'
+                        "
+                        class="row mb-3 border-top pt-3"
+                    >
+                        <label
+                            for="listing_date"
+                            class="col-sm-3 col-form-label"
+                            >CAM MOU:</label
+                        >
                         <div class="col-sm-3 d-flex align-items-center">
                             <div class="form-check form-check-inline">
-                                Yes <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                    id="cam_mou_yes" class="form-check-input" name="cam_mou"
-                                    v-model="conservation_status_obj.cam_mou" :value="true" />
+                                Yes
+                                <input
+                                    id="cam_mou_yes"
+                                    v-model="conservation_status_obj.cam_mou"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="cam_mou"
+                                    :value="true"
+                                />
                             </div>
                             <div class="form-check form-check-inline">
-                                No <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                    id="conservation_status_under_review_no" class="form-check-input" name="cam_mou"
-                                    v-model="conservation_status_obj.cam_mou" :value="false" />
+                                No
+                                <input
+                                    id="conservation_status_under_review_no"
+                                    v-model="conservation_status_obj.cam_mou"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="cam_mou"
+                                    :value="false"
+                                />
                             </div>
                             <div class="form-check form-check-inline">
-                                N/A <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                    id="conservation_status_under_review_no" class="form-check-input" name="cam_mou"
-                                    v-model="conservation_status_obj.cam_mou" :value="null" />
+                                N/A
+                                <input
+                                    id="conservation_status_under_review_no"
+                                    v-model="conservation_status_obj.cam_mou"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="cam_mou"
+                                    :value="null"
+                                />
                             </div>
                         </div>
                         <template v-if="conservation_status_obj.cam_mou">
-                            <label for="review_due_date" class="col-sm-3 col-form-label">Date Sent:</label>
+                            <label
+                                for="review_due_date"
+                                class="col-sm-3 col-form-label"
+                                >Date Sent:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="cam_mou_date_sent"
-                                    v-model="conservation_status_obj.cam_mou_date_sent"
-                                    :disabled="listing_and_review_due_date_disabled"
-                                    :max="new Date().toISOString().split('T')[0]" />
+                                <input
+                                    id="cam_mou_date_sent"
+                                    v-model="
+                                        conservation_status_obj.cam_mou_date_sent
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    :max="
+                                        new Date().toISOString().split('T')[0]
+                                    "
+                                />
                             </div>
                         </template>
                     </div>
                 </template>
                 <template v-if="show_proposed_conservation_status">
                     <div class="row mb-3 border-top pt-3">
-                        <h5 class="text-muted mb-4"><template v-if="conservation_list_proposed">Proposed
-                            </template>Conservation
-                            Status</h5>
-                        <label for="proposed_wa_legislative_list" class="col-sm-5 col-form-label fw-bold">WA Legislative
-                            List <span class="text-warning">*</span></label>
+                        <h5 class="text-muted mb-4">
+                            <template v-if="conservation_list_proposed"
+                                >Proposed </template
+                            >Conservation Status
+                        </h5>
+                        <label
+                            for="proposed_wa_legislative_list"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >WA Legislative List
+                            <span class="text-warning">*</span></label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_legislative_lists && wa_legislative_lists.length > 0 && conservation_status_obj.wa_legislative_list_id && !wa_legislative_lists.map((d) => d.id).includes(conservation_status_obj.wa_legislative_list_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_legislative_list"
+                                    v-if="
+                                        wa_legislative_lists &&
+                                        wa_legislative_lists.length > 0 &&
+                                        conservation_status_obj.wa_legislative_list_id &&
+                                        !wa_legislative_lists
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_legislative_list_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_legislative_list
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_legislative_list + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_legislative_list +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa legislative list to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_legislative_list_id"
-                                    id="proposed_wa_legislative_list" @change="filterWALegislativeCategories($event)">
-                                    <option :value="null" disabled>Select the appropriate WA Legislative List</option>
-                                    <option v-for="option in wa_legislative_lists" :value="option.id"
-                                        v-bind:key="option.id">
+                                <select
+                                    id="proposed_wa_legislative_list"
+                                    v-model="
+                                        conservation_status_obj.wa_legislative_list_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                    @change="
+                                        filterWALegislativeCategories($event)
+                                    "
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Legislative
+                                        List
+                                    </option>
+                                    <option
+                                        v-for="option in wa_legislative_lists"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_legislative_list ? conservation_status_obj.wa_legislative_list : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_legislative_list
+                                            ? conservation_status_obj.wa_legislative_list
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.wa_legislative_list_id" class="row mb-3">
-                        <label for="proposed_wa_legislative_category" class="col-sm-5 col-form-label">WA Legislative
-                            Category:</label>
+                    <div
+                        v-if="conservation_status_obj.wa_legislative_list_id"
+                        class="row mb-3"
+                    >
+                        <label
+                            for="proposed_wa_legislative_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Legislative Category:</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_legislative_categories && wa_legislative_categories.length > 0 && conservation_status_obj.wa_legislative_category_id && !wa_legislative_categories.map((d) => d.id).includes(conservation_status_obj.wa_legislative_category_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_legislative_category"
+                                    v-if="
+                                        wa_legislative_categories &&
+                                        wa_legislative_categories.length > 0 &&
+                                        conservation_status_obj.wa_legislative_category_id &&
+                                        !wa_legislative_categories
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_legislative_category_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_legislative_category
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_legislative_category + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_legislative_category +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa legislative category to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_legislative_category_id"
-                                    id="proposed_wa_legislative_category">
-                                    <option :value="null" disabled>Select the appropriate WA Legislative Category
+                                <select
+                                    id="proposed_wa_legislative_category"
+                                    v-model="
+                                        conservation_status_obj.wa_legislative_category_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Legislative
+                                        Category
                                     </option>
-                                    <option v-for="option in wa_legislative_categories" :value="option.id"
-                                        v-bind:key="option.id">
+                                    <option
+                                        v-for="option in wa_legislative_categories"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_legislative_category ? conservation_status_obj.wa_legislative_category : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_legislative_category
+                                            ? conservation_status_obj.wa_legislative_category
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_iucnversion" class="col-sm-5 col-form-label">IUCN Version</label>
+                        <label
+                            for="proposed_iucnversion"
+                            class="col-sm-5 col-form-label"
+                            >IUCN Version</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="iucn_versions && iucn_versions.length > 0 && conservation_status_obj.iucn_version_id && !iucn_versions.map((d) => d.id).includes(conservation_status_obj.iucn_version_id)">
-                                    <input type="text" v-if="conservation_status_obj.iucn_version"
+                                    v-if="
+                                        iucn_versions &&
+                                        iucn_versions.length > 0 &&
+                                        conservation_status_obj.iucn_version_id &&
+                                        !iucn_versions
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.iucn_version_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.iucn_version
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.iucn_version + ' (Now Archived)'" disabled />
+                                        :value="
+                                            conservation_status_obj.iucn_version +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change iucn version to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.iucn_version_id" id="proposed_iucnversion">
-                                    <option :value="null" disabled>Select the appropriate IUCN Version</option>
-                                    <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
+                                <select
+                                    id="proposed_iucnversion"
+                                    v-model="
+                                        conservation_status_obj.iucn_version_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate IUCN Version
+                                    </option>
+                                    <option
+                                        v-for="option in iucn_versions"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.iucn_version ? conservation_status_obj.iucn_version : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.iucn_version
+                                            ? conservation_status_obj.iucn_version
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_wa_priority_list" class="col-sm-5 col-form-label fw-bold">WA Priority
-                            List <span class="text-warning">*</span></label>
+                        <label
+                            for="proposed_wa_priority_list"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >WA Priority List
+                            <span class="text-warning">*</span></label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_priority_lists && wa_priority_lists.length > 0 && conservation_status_obj.wa_priority_list_id && !wa_priority_lists.map((d) => d.id).includes(conservation_status_obj.wa_priority_list_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_priority_list"
+                                    v-if="
+                                        wa_priority_lists &&
+                                        wa_priority_lists.length > 0 &&
+                                        conservation_status_obj.wa_priority_list_id &&
+                                        !wa_priority_lists
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_priority_list_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_priority_list
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_priority_list + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_priority_list +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa priority list to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_priority_list_id" id="proposed_wa_priority_list"
-                                    @change="filterWAPriorityCategories($event)">
-                                    <option :value="null" disabled>Select the appropriate WA Priority List</option>
-                                    <option v-for="option in wa_priority_lists" :value="option.id"
-                                        v-bind:key="option.id">
+                                <select
+                                    id="proposed_wa_priority_list"
+                                    v-model="
+                                        conservation_status_obj.wa_priority_list_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                    @change="filterWAPriorityCategories($event)"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Priority List
+                                    </option>
+                                    <option
+                                        v-for="option in wa_priority_lists"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_priority_list ? conservation_status_obj.wa_priority_list : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_priority_list
+                                            ? conservation_status_obj.wa_priority_list
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.wa_priority_list_id" class="row mb-3">
-                        <label for="proposed_wa_priority_category" class="col-sm-5 col-form-label">WA Priority
-                            Category:</label>
+                    <div
+                        v-if="conservation_status_obj.wa_priority_list_id"
+                        class="row mb-3"
+                    >
+                        <label
+                            for="proposed_wa_priority_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Priority Category:</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_priority_categories && wa_priority_categories.length > 0 && conservation_status_obj.wa_priority_category_id && !wa_priority_categories.map((d) => d.id).includes(conservation_status_obj.wa_priority_category_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_priority_category"
+                                    v-if="
+                                        wa_priority_categories &&
+                                        wa_priority_categories.length > 0 &&
+                                        conservation_status_obj.wa_priority_category_id &&
+                                        !wa_priority_categories
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_priority_category_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_priority_category
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_priority_category + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_priority_category +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa priority category to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_priority_category_id"
-                                    id="proposed_wa_priority_category">
-                                    <option :value="null" disabled>Select the appropriate WA Priority Category</option>
-                                    <option v-for="option in wa_priority_categories" :value="option.id"
-                                        v-bind:key="option.id">
+                                <select
+                                    id="proposed_wa_priority_category"
+                                    v-model="
+                                        conservation_status_obj.wa_priority_category_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Priority
+                                        Category
+                                    </option>
+                                    <option
+                                        v-for="option in wa_priority_categories"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_priority_category ? conservation_status_obj.wa_priority_category : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_priority_category
+                                            ? conservation_status_obj.wa_priority_category
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_commonwealth_conservation_category"
-                            class="col-sm-5 col-form-label">Commonwealth
-                            Conservation
-                            Category:</label>
+                        <label
+                            for="proposed_commonwealth_conservation_category"
+                            class="col-sm-5 col-form-label"
+                            >Commonwealth Conservation Category:</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="commonwealth_conservation_categories && commonwealth_conservation_categories.length > 0 && conservation_status_obj.commonwealth_conservation_category_id && !commonwealth_conservation_categories.map((d) => d.id).includes(conservation_status_obj.commonwealth_conservation_category_id)">
-                                    <input type="text" v-if="conservation_status_obj.commonwealth_conservation_category"
+                                    v-if="
+                                        commonwealth_conservation_categories &&
+                                        commonwealth_conservation_categories.length >
+                                            0 &&
+                                        conservation_status_obj.commonwealth_conservation_category_id &&
+                                        !commonwealth_conservation_categories
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.commonwealth_conservation_category_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.commonwealth_conservation_category
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.commonwealth_conservation_category + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.commonwealth_conservation_category +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
-                                        Change commonwealth conservation list to:
+                                        Change commonwealth conservation list
+                                        to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.commonwealth_conservation_category_id"
-                                    id="proposed_commonwealth_conservation_category">
-                                    <option :value="null" disabled>Select the appropriate Commonwealth Conservation
-                                        Category
+                                <select
+                                    id="proposed_commonwealth_conservation_category"
+                                    v-model="
+                                        conservation_status_obj.commonwealth_conservation_category_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate Commonwealth
+                                        Conservation Category
                                     </option>
-                                    <option v-for="option in commonwealth_conservation_categories" :value="option.id"
-                                        v-bind:key="option.id">
+                                    <option
+                                        v-for="option in commonwealth_conservation_categories"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.commonwealth_conservation_category ? conservation_status_obj.commonwealth_conservation_category : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.commonwealth_conservation_category
+                                            ? conservation_status_obj.commonwealth_conservation_category
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_other_conservation_assessment" class="col-sm-5 col-form-label">Other
-                            Conservation Assessment:</label>
+                        <label
+                            for="proposed_other_conservation_assessment"
+                            class="col-sm-5 col-form-label"
+                            >Other Conservation Assessment:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="isReadOnly" type="text" class="form-control"
+                            <input
                                 id="proposed_other_conservation_assessment"
-                                :placeholder="isReadOnly ? 'N/A' : 'Enter Other Conservation Assessment Details if Applicable'"
-                                v-model="conservation_status_obj.other_conservation_assessment" />
+                                v-model="
+                                    conservation_status_obj.other_conservation_assessment
+                                "
+                                :disabled="isReadOnly"
+                                type="text"
+                                class="form-control"
+                                :placeholder="
+                                    isReadOnly
+                                        ? 'N/A'
+                                        : 'Enter Other Conservation Assessment Details if Applicable'
+                                "
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_conservation_criteria" class="col-sm-5 col-form-label">Conservation
-                            Criteria:</label>
+                        <label
+                            for="proposed_conservation_criteria"
+                            class="col-sm-5 col-form-label"
+                            >Conservation Criteria:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="isReadOnly" type="text" class="form-control"
+                            <input
                                 id="proposed_conservation_criteria"
-                                :placeholder="isReadOnly ? 'N/A' : 'Enter Conservation Criteria if Applicable'"
-                                v-model="conservation_status_obj.conservation_criteria" />
+                                v-model="
+                                    conservation_status_obj.conservation_criteria
+                                "
+                                :disabled="isReadOnly"
+                                type="text"
+                                class="form-control"
+                                :placeholder="
+                                    isReadOnly
+                                        ? 'N/A'
+                                        : 'Enter Conservation Criteria if Applicable'
+                                "
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="comment" class="col-sm-5 col-form-label fw-bold">Comments <span
-                                class="text-danger">*</span></label>
+                        <label
+                            for="comment"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >Comments <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-7">
-                            <textarea :disabled="isReadOnly" class="form-control" rows="3" id="comment" placeholder=""
-                                v-model="conservation_status_obj.comment" />
+                            <textarea
+                                id="comment"
+                                v-model="conservation_status_obj.comment"
+                                :disabled="isReadOnly"
+                                class="form-control"
+                                rows="3"
+                                placeholder=""
+                            />
                         </div>
                     </div>
                     <div v-if="!is_external" class="row mb-3">
-                        <label for="conservation_status_under_review" class="col-sm-6 col-form-label">Is there a
-                            Conservation Status
-                            proposal under review?</label>
+                        <label
+                            for="conservation_status_under_review"
+                            class="col-sm-6 col-form-label"
+                            >Is there a Conservation Status proposal under
+                            review?</label
+                        >
                         <div class="col-sm-6 d-flex align-items-center">
                             <div class="form-check form-check-inline">
-                                Yes <input disabled type="radio" id="conservation_status_under_review_yes"
-                                    class="form-check-input" name="conservation_status_under_review"
-                                    v-model="isConservationStatusUnderReview" :value="true" />
+                                Yes
+                                <input
+                                    id="conservation_status_under_review_yes"
+                                    v-model="isConservationStatusUnderReview"
+                                    disabled
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="conservation_status_under_review"
+                                    :value="true"
+                                />
                             </div>
                             <div class="form-check form-check-inline">
-                                No <input disabled type="radio" id="conservation_status_under_review_no"
-                                    class="form-check-input" name="conservation_status_under_review"
-                                    v-model="isConservationStatusUnderReview" :value="false" />
+                                No
+                                <input
+                                    id="conservation_status_under_review_no"
+                                    v-model="isConservationStatusUnderReview"
+                                    disabled
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="conservation_status_under_review"
+                                    :value="false"
+                                />
                             </div>
                             <div
-                                v-if="conservation_status_obj.conservation_status_under_review &&
-                                    conservation_status_obj.id != conservation_status_obj.conservation_status_under_review.id">
+                                v-if="
+                                    conservation_status_obj.conservation_status_under_review &&
+                                    conservation_status_obj.id !=
+                                        conservation_status_obj
+                                            .conservation_status_under_review.id
+                                "
+                            >
                                 <div>
-                                    <a :href="`/internal/conservation-status/${conservation_status_obj.conservation_status_under_review.id}`"
-                                        target="_blank" class="btn btn-primary">{{
-                                            conservation_status_obj.conservation_status_under_review.conservation_status_number
-                                        }}<i class="bi bi-box-arrow-up-right ps-2"></i></a>
+                                    <a
+                                        :href="`/internal/conservation-status/${conservation_status_obj.conservation_status_under_review.id}`"
+                                        target="_blank"
+                                        class="btn btn-primary"
+                                        >{{
+                                            conservation_status_obj
+                                                .conservation_status_under_review
+                                                .conservation_status_number
+                                        }}<i
+                                            class="bi bi-box-arrow-up-right ps-2"
+                                        ></i
+                                    ></a>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </template>
-                <template v-if="canViewCurrentList && conservation_status_obj.current_conservation_status">
+                <template
+                    v-if="
+                        canViewCurrentList &&
+                        conservation_status_obj.current_conservation_status
+                    "
+                >
                     <div class="row border-top pt-3">
-                        <h5 class="text-muted mb-4">Current Conservation
-                            Status</h5>
+                        <h5 class="text-muted mb-4">
+                            Current Conservation Status
+                        </h5>
                     </div>
                     <div class="row mb-3">
-                        <label for="conservation_status_number" class="col-sm-5 col-form-label">Conservation Status
-                            Number:</label>
+                        <label
+                            for="conservation_status_number"
+                            class="col-sm-5 col-form-label"
+                            >Conservation Status Number:</label
+                        >
                         <div class="col-sm-7">
-                            <a :href="`/internal/conservation-status/${conservation_status_obj.current_conservation_status.id}`"
-                                target="_blank" class="btn btn-primary">{{
-                                    conservation_status_obj.current_conservation_status.conservation_status_number }}<i
-                                    class="bi bi-box-arrow-up-right ps-2"></i></a>
+                            <a
+                                :href="`/internal/conservation-status/${conservation_status_obj.current_conservation_status.id}`"
+                                target="_blank"
+                                class="btn btn-primary"
+                                >{{
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .conservation_status_number
+                                }}<i class="bi bi-box-arrow-up-right ps-2"></i
+                            ></a>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_legislative_list_id"
-                        class="row mb-3">
-                        <label for="current_wa_legislative_list" class="col-sm-5 col-form-label">WA Legislative
-                            List:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_legislative_list_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_legislative_list"
+                            class="col-sm-5 col-form-label"
+                            >WA Legislative List:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_legislative_list_id"
-                                id="current_wa_legislative_list" @change="filterWALegislativeCategories($event)">
-                                <option v-for="option in wa_legislative_lists" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_wa_legislative_list"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_legislative_list_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                                @change="filterWALegislativeCategories($event)"
+                            >
+                                <option
+                                    v-for="option in wa_legislative_lists"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_legislative_category_id"
-                        class="row mb-3">
-                        <label for="current_wa_legislative_category" class="col-sm-5 col-form-label">WA Legislative
-                            Category:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_legislative_category_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_legislative_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Legislative Category:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_legislative_category_id"
-                                id="current_wa_legislative_category">
-                                <option v-for="option in wa_legislative_categories" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_wa_legislative_category"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_legislative_category_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in wa_legislative_categories"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.iucn_version_id" class="row mb-3">
-                        <label for="current_iucn_version" class="col-sm-5 col-form-label">IUCN Version:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .iucn_version_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_iucn_version"
+                            class="col-sm-5 col-form-label"
+                            >IUCN Version:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.iucn_version_id"
-                                id="current_iucn_version">
-                                <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
+                            <select
+                                id="current_iucn_version"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .iucn_version_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in iucn_versions"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_priority_list_id"
-                        class="row mb-3">
-                        <label for="current_wa_priority_list" class="col-sm-5 col-form-label">WA Priority List:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_priority_list_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_priority_list"
+                            class="col-sm-5 col-form-label"
+                            >WA Priority List:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_priority_list_id"
-                                id="current_wa_priority_list" @change="filterWAPriorityCategories($event)">
-                                <option v-for="option in wa_priority_lists" :value="option.id" v-bind:key="option.id">
+                            <select
+                                id="current_wa_priority_list"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_priority_list_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                                @change="filterWAPriorityCategories($event)"
+                            >
+                                <option
+                                    v-for="option in wa_priority_lists"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_priority_category_id"
-                        class="row mb-3">
-                        <label for="current_wa_priority_category" class="col-sm-5 col-form-label">WA Priority
-                            Category:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_priority_category_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_priority_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Priority Category:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_priority_category_id"
-                                id="current_wa_priority_category">
-                                <option v-for="option in wa_priority_categories" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_wa_priority_category"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_priority_category_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in wa_priority_categories"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.commonwealth_conservation_category_id"
-                        class="row mb-3">
-                        <label for="current_commonwealth_conservation_category"
-                            class="col-sm-5 col-form-label">Commonwealth
-                            Conservation Category:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .commonwealth_conservation_category_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_commonwealth_conservation_category"
+                            class="col-sm-5 col-form-label"
+                            >Commonwealth Conservation Category:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.commonwealth_conservation_category_id"
-                                id="current_commonwealth_conservation_category">
-                                <option v-for="option in commonwealth_conservation_categories" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_commonwealth_conservation_category"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .commonwealth_conservation_category_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in commonwealth_conservation_categories"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.other_conservation_assessment"
-                        class="row mb-3">
-                        <label for="current_other_conservation_assessment" class="col-sm-5 col-form-label">Other
-                            Conservation Assessment:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .other_conservation_assessment
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_other_conservation_assessment"
+                            class="col-sm-5 col-form-label"
+                            >Other Conservation Assessment:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="true" type="text" class="form-control"
+                            <input
                                 id="current_other_conservation_assessment"
-                                v-model="conservation_status_obj.current_conservation_status.other_conservation_assessment" />
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .other_conservation_assessment
+                                "
+                                :disabled="true"
+                                type="text"
+                                class="form-control"
+                            />
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.conservation_criteria"
-                        class="row mb-3">
-                        <label for="current_conservation_criteria" class="col-sm-5 col-form-label">Conservation
-                            Criteria:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .conservation_criteria
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_conservation_criteria"
+                            class="col-sm-5 col-form-label"
+                            >Conservation Criteria:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="true" type="text" class="form-control" id="current_conservation_criteria"
-                                v-model="conservation_status_obj.current_conservation_status.conservation_criteria" />
+                            <input
+                                id="current_conservation_criteria"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .conservation_criteria
+                                "
+                                :disabled="true"
+                                type="text"
+                                class="form-control"
+                            />
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.comment" class="row mb-3">
-                        <label for="comment" class="col-sm-5 col-form-label fw-bold">Comments</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .comment
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="comment"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >Comments</label
+                        >
                         <div class="col-sm-7">
-                            <textarea :disabled="true" class="form-control" rows="3" id="current_comment"
-                                v-model="conservation_status_obj.current_conservation_status.comment" />
+                            <textarea
+                                id="current_comment"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status.comment
+                                "
+                                :disabled="true"
+                                class="form-control"
+                                rows="3"
+                            />
                         </div>
                     </div>
                 </template>
                 <template v-if="!is_external && isStatusApproved">
                     <div class="row border-top pt-3 pb-3">
-                        <label for="" class="col-sm-5 col-form-label">Approval Document:</label>
+                        <label for="" class="col-sm-5 col-form-label"
+                            >Approval Document:</label
+                        >
                         <div class="col-sm-8">
                             <p class="col-form-label">
-                                <template v-if="conservation_status_obj.conservation_status_approval_document">
-                                    <strong><a :href="conservation_status_obj.conservation_status_approval_document[1]"
-                                            target="_blank">{{
-                                                conservation_status_obj.conservation_status_approval_document[0]
-                                            }}</a></strong>
+                                <template
+                                    v-if="
+                                        conservation_status_obj.conservation_status_approval_document
+                                    "
+                                >
+                                    <strong
+                                        ><a
+                                            :href="
+                                                conservation_status_obj
+                                                    .conservation_status_approval_document[1]
+                                            "
+                                            target="_blank"
+                                            >{{
+                                                conservation_status_obj
+                                                    .conservation_status_approval_document[0]
+                                            }}</a
+                                        ></strong
+                                    >
                                 </template>
-                                <template v-else>No approval document uploaded</template>
+                                <template v-else
+                                    >No approval document uploaded</template
+                                >
                             </p>
                         </div>
                     </div>
                 </template>
             </form>
-            <template v-if="!is_external && !conservation_status_obj.can_user_edit">
+            <template
+                v-if="!is_external && !conservation_status_obj.can_user_edit"
+            >
                 <div class="row border-top pt-3 pb-0 mb-0">
-                    <CollapsibleComponent component_title="Assessment Comments" ref="assessment_comments"
-                        :collapsed="true">
+                    <CollapsibleComponent
+                        ref="assessment_comments"
+                        component_title="Assessment Comments"
+                        :collapsed="true"
+                    >
                         <div class="row pb-0 mb-0">
                             <div class="col rounded">
-                                <div class="row" v-if="deficiencyVisibility">
+                                <div v-if="deficiencyVisibility" class="row">
                                     <div class="col">
                                         <div class="form-floating m-3">
-                                            <textarea :disabled="deficiency_readonly" class="form-control"
-                                                id="assessor_deficiencies" placeholder="Deficiency Comments"
-                                                v-model="conservation_status_obj.deficiency_data" />
-                                            <label for="assessor_deficiencies" class="form-label">Deficiency
-                                                Comments</label>
+                                            <textarea
+                                                id="assessor_deficiencies"
+                                                v-model="
+                                                    conservation_status_obj.deficiency_data
+                                                "
+                                                :disabled="deficiency_readonly"
+                                                class="form-control"
+                                                placeholder="Deficiency Comments"
+                                            />
+                                            <label
+                                                for="assessor_deficiencies"
+                                                class="form-label"
+                                                >Deficiency Comments</label
+                                            >
                                         </div>
                                     </div>
                                 </div>
-                                <div class="row" v-if="assessorCommentVisibility">
+                                <div
+                                    v-if="assessorCommentVisibility"
+                                    class="row"
+                                >
                                     <div class="col">
                                         <div class="form-floating m-3 mt-1">
-                                            <textarea :disabled="assessor_comment_readonly" class="form-control"
-                                                rows="3" id="assessor_comment" placeholder="Assessor Comments"
-                                                v-model="conservation_status_obj.assessor_data" />
-                                            <label for="" class="col-sm-4 col-form-label">Assessor Comments</label>
+                                            <textarea
+                                                id="assessor_comment"
+                                                v-model="
+                                                    conservation_status_obj.assessor_data
+                                                "
+                                                :disabled="
+                                                    assessor_comment_readonly
+                                                "
+                                                class="form-control"
+                                                rows="3"
+                                                placeholder="Assessor Comments"
+                                            />
+                                            <label
+                                                for=""
+                                                class="col-sm-4 col-form-label"
+                                                >Assessor Comments</label
+                                            >
                                         </div>
                                     </div>
                                 </div>
@@ -582,22 +1377,52 @@
                                     <div>
                                         <div class="row mt-2">
                                             <div class="col ms-3">
-                                                <h6 class="text-muted">Referral Comments</h6>
+                                                <h6 class="text-muted">
+                                                    Referral Comments
+                                                </h6>
                                             </div>
                                         </div>
                                         <template v-if="ref.box_view">
-                                            <div v-for="ref in referral_comments_boxes" class="row mb-3">
+                                            <div
+                                                v-for="ref in referral_comments_boxes"
+                                                class="row mb-3"
+                                            >
                                                 <div class="col">
-                                                    <div class="form-floating m-3 mt-1">
-                                                        <textarea v-if='!ref.readonly' :disabled="true" :id="ref.name"
-                                                            :name="ref.name" class="form-control"
-                                                            :placeholder="ref.label"
-                                                            v-model="referral.referral_comment" />
-                                                        <textarea v-else :disabled="true" :name="ref.name"
-                                                            :value="ref.value || ''" class="form-control"
-                                                            :placeholder="ref.label" />
-                                                        <label :for="ref.name" class="form-label">{{ ref.label
-                                                            }}</label>
+                                                    <div
+                                                        class="form-floating m-3 mt-1"
+                                                    >
+                                                        <textarea
+                                                            v-if="!ref.readonly"
+                                                            :id="ref.name"
+                                                            v-model="
+                                                                referral.referral_comment
+                                                            "
+                                                            :disabled="true"
+                                                            :name="ref.name"
+                                                            class="form-control"
+                                                            :placeholder="
+                                                                ref.label
+                                                            "
+                                                        />
+                                                        <textarea
+                                                            v-else
+                                                            :disabled="true"
+                                                            :name="ref.name"
+                                                            :value="
+                                                                ref.value || ''
+                                                            "
+                                                            class="form-control"
+                                                            :placeholder="
+                                                                ref.label
+                                                            "
+                                                        />
+                                                        <label
+                                                            :for="ref.name"
+                                                            class="form-label"
+                                                            >{{
+                                                                ref.label
+                                                            }}</label
+                                                        >
                                                     </div>
                                                 </div>
                                             </div>
@@ -615,37 +1440,39 @@
 
 <script>
 import FormSection from '@/components/forms/section_toggle.vue';
-import CollapsibleComponent from '@/components/forms/collapsible_component.vue'
-import {
-    api_endpoints,
-}
-    from '@/utils/hooks'
+import CollapsibleComponent from '@/components/forms/collapsible_component.vue';
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
     name: 'CommunityStatus',
+    components: {
+        CollapsibleComponent,
+        FormSection,
+    },
     props: {
         conservation_status_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         referral: {
             type: Object,
-            required: false
+            required: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         canEditStatus: {
             type: Boolean,
-            default: true
+            default: true,
         },
     },
+    emits: ['saveConservationStatus'],
     data: function () {
         let vm = this;
         return {
             community_name_lookup: 'community_name_lookup' + vm._uid,
-            select_community_name: "select_community_name" + vm._uid,
+            select_community_name: 'select_community_name' + vm._uid,
             isShowComment: false,
             cs_profile_dict: {},
             wa_legislative_lists: [],
@@ -659,32 +1486,42 @@ export default {
             filtered_wa_priority_categories: [],
             referral_comments_boxes: [],
             community_display: '',
-        }
-    },
-    emits: ['saveConservationStatus'],
-    components: {
-        CollapsibleComponent,
-        FormSection,
+        };
     },
     computed: {
         show_administrative_information: function () {
-            return !this.is_external &&
+            return (
+                !this.is_external &&
                 this.conservation_status_obj.community_id &&
-                this.conservation_status_obj.processing_status != 'Draft';
+                this.conservation_status_obj.processing_status != 'Draft'
+            );
         },
         show_proposed_conservation_status: function () {
             return this.conservation_status_obj.community_id;
         },
         show_listing_and_review_due_date: function () {
-            return this.conservation_status_obj.listing_date ||
+            return (
+                this.conservation_status_obj.listing_date ||
                 this.conservation_status_obj.review_due_date ||
-                this.conservation_status_obj.processing_status == 'With Assessor';
+                this.conservation_status_obj.processing_status ==
+                    'With Assessor'
+            );
         },
         listing_and_review_due_date_disabled: function () {
-            return this.isReadOnly || !['With Assessor', 'Deferred', 'Unlocked'].includes(this.conservation_status_obj.processing_status)
+            return (
+                this.isReadOnly ||
+                !['With Assessor', 'Deferred', 'Unlocked'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            );
         },
         approval_level_disabled: function () {
-            return this.isReadOnly || !['With Assessor', 'With Referral'].includes(this.conservation_status_obj.processing_status);
+            return (
+                this.isReadOnly ||
+                !['With Assessor', 'With Referral'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            );
         },
         deficiencyVisibility: function () {
             return this.conservation_status_obj.assessor_mode.assessor_box_view;
@@ -696,7 +1533,11 @@ export default {
             let has_value = false;
             for (var i = 0; i < this.referral_comments_boxes.length; i++) {
                 if (this.referral_comments_boxes[i].hasOwnProperty('value')) {
-                    if (this.referral_comments_boxes[i].value != null && this.referral_comments_boxes[i].value != undefined && this.referral_comments_boxes[i].value != '') {
+                    if (
+                        this.referral_comments_boxes[i].value != null &&
+                        this.referral_comments_boxes[i].value != undefined &&
+                        this.referral_comments_boxes[i].value != ''
+                    ) {
                         has_value = true;
                     }
                 }
@@ -704,16 +1545,28 @@ export default {
             return has_value;
         },
         isStatusApproved: function () {
-            return this.conservation_status_obj.processing_status == 'Approved' ? true : false;
+            return this.conservation_status_obj.processing_status == 'Approved'
+                ? true
+                : false;
         },
         isAssignedOfficer: function () {
-            if (['With Assessor', 'With Referral', 'Deferred'].includes(this.conservation_status_obj.processing_status)) {
-                return Boolean(this.conservation_status_obj.assigned_officer) &&
-                    this.conservation_status_obj.assigned_officer == this.conservation_status_obj.current_assessor.id;
+            if (
+                ['With Assessor', 'With Referral', 'Deferred'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            ) {
+                return (
+                    Boolean(this.conservation_status_obj.assigned_officer) &&
+                    this.conservation_status_obj.assigned_officer ==
+                        this.conservation_status_obj.current_assessor.id
+                );
             }
             if (this.conservation_status_obj.processing_status != 'Draft') {
-                return Boolean(this.conservation_status_obj.assigned_approver) &&
-                    this.conservation_status_obj.assigned_approver == this.conservation_status_obj.current_assessor.id;
+                return (
+                    Boolean(this.conservation_status_obj.assigned_approver) &&
+                    this.conservation_status_obj.assigned_approver ==
+                        this.conservation_status_obj.current_assessor.id
+                );
             }
             return false;
         },
@@ -721,19 +1574,29 @@ export default {
             if (this.is_external) {
                 return !this.conservation_status_obj.can_user_edit;
             } else if (
-                this.conservation_status_obj.processing_status == 'With Referral' &&
+                this.conservation_status_obj.processing_status ==
+                    'With Referral' &&
                 this.referral
             ) {
                 return true;
             } else {
-                if (['Ready For Agenda', 'Approved', 'Closed', 'DeListed', 'Discarded'].includes(this.conservation_status_obj.processing_status)) {
+                if (
+                    [
+                        'Ready For Agenda',
+                        'Approved',
+                        'Closed',
+                        'DeListed',
+                        'Discarded',
+                    ].includes(this.conservation_status_obj.processing_status)
+                ) {
                     return true;
                 }
                 if (
-                    (
-                        this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                        this.isAssignedOfficer)
-                    || this.conservation_status_obj.internal_user_edit) {
+                    (this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess &&
+                        this.isAssignedOfficer) ||
+                    this.conservation_status_obj.internal_user_edit
+                ) {
                     return false;
                 }
             }
@@ -741,81 +1604,155 @@ export default {
             return true;
         },
         conservation_criteria_label: function () {
-            if (this.conservation_status_obj.processing_status == 'Approved' || this.conservation_status_obj.processing_status == 'DeListed') {
+            if (
+                this.conservation_status_obj.processing_status == 'Approved' ||
+                this.conservation_status_obj.processing_status == 'DeListed'
+            ) {
                 return 'Conservation Criteria';
-            }
-            else {
+            } else {
                 if (this.conservation_status_obj.processing_status == 'Draft') {
                     return 'Propose Conservation Criteria';
-                }
-                else {
+                } else {
                     return 'Proposed Conservation Criteria';
                 }
             }
         },
         conservation_list_proposed: function () {
-            return !(['Approved', 'DeListed', 'Declined', 'Closed', 'Unlocked'].includes(this.conservation_status_obj.processing_status))
+            return ![
+                'Approved',
+                'DeListed',
+                'Declined',
+                'Closed',
+                'Unlocked',
+            ].includes(this.conservation_status_obj.processing_status);
         },
         canViewCurrentList: function () {
-            return (this.conservation_status_obj.processing_status == 'Approved' || this.conservation_status_obj.processing_status == 'DeListed') ? false : true;
+            return this.conservation_status_obj.processing_status ==
+                'Approved' ||
+                this.conservation_status_obj.processing_status == 'DeListed'
+                ? false
+                : true;
         },
         isConservationStatusUnderReview: function () {
-            return Boolean(this.conservation_status_obj.conservation_status_under_review);
+            return Boolean(
+                this.conservation_status_obj.conservation_status_under_review
+            );
         },
         deficiency_readonly: function () {
             return !this.is_external &&
                 !this.conservation_status_obj.can_user_edit &&
-                this.conservation_status_obj.assessor_mode.assessor_level == 'assessor' &&
+                this.conservation_status_obj.assessor_mode.assessor_level ==
+                    'assessor' &&
                 this.conservation_status_obj.assessor_mode.has_assessor_mode &&
-                !this.conservation_status_obj.assessor_mode.status_without_assessor ? false : true;
+                !this.conservation_status_obj.assessor_mode
+                    .status_without_assessor
+                ? false
+                : true;
         },
         assessor_comment_readonly: function () {
             return !this.is_external &&
                 !this.conservation_status_obj.can_user_edit &&
-                this.conservation_status_obj.assessor_mode.assessor_level == 'assessor' &&
+                this.conservation_status_obj.assessor_mode.assessor_level ==
+                    'assessor' &&
                 this.conservation_status_obj.assessor_mode.has_assessor_mode &&
-                !this.conservation_status_obj.assessor_mode.status_without_assessor ? false : true
+                !this.conservation_status_obj.assessor_mode
+                    .status_without_assessor
+                ? false
+                : true;
         },
     },
+    created: async function () {
+        let vm = this;
+        let action = this.$route.query.action;
+        let dict_url =
+            action == 'view'
+                ? api_endpoints.cs_profile_dict +
+                  '?group_type=' +
+                  vm.conservation_status_obj.group_type +
+                  '&action=' +
+                  action
+                : api_endpoints.cs_profile_dict +
+                  '?group_type=' +
+                  vm.conservation_status_obj.group_type;
+        fetch(dict_url).then(
+            async (response) => {
+                vm.cs_profile_dict = await response.json();
+                vm.wa_legislative_lists =
+                    vm.cs_profile_dict.wa_legislative_lists;
+                vm.wa_legislative_categories =
+                    vm.cs_profile_dict.wa_legislative_categories;
+                vm.iucn_versions = vm.cs_profile_dict.iucn_versions;
+                vm.wa_priority_lists = vm.cs_profile_dict.wa_priority_lists;
+                vm.wa_priority_categories =
+                    vm.cs_profile_dict.wa_priority_categories;
+                vm.commonwealth_conservation_categories =
+                    vm.cs_profile_dict.commonwealth_conservation_categories;
+                vm.change_codes = vm.cs_profile_dict.active_change_codes;
+                this.getCommunityDisplay();
+                this.filterWALegislativeCategories();
+                this.filterWAPriorityCategories();
+                if (!vm.is_external) {
+                    this.generateReferralCommentBoxes();
+                }
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    },
+    mounted: function () {
+        let vm = this;
+        if (!this.is_external && vm.$refs.assessment_comments) {
+            vm.$refs.assessment_comments.show_warning_icon(false);
+        }
+        this.$nextTick(() => {
+            vm.initialiseCommunityNameLookup();
+        });
+    },
     methods: {
         approvalLevelChanged: function () {
             this.conservation_status_obj.effective_from = null;
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.community_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $('#' + vm.select_community_name),
-                'theme': 'bootstrap-5',
-                allowClear: true,
-                placeholder: 'Select Community Name',
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            cs_community: true,
-                        }
-                        return query;
+            $(vm.$refs[vm.community_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_community_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                cs_community: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on('select2:select', function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
-                    vm.conservation_status_obj.community_id = data
+                    vm.conservation_status_obj.community_id = data;
                     vm.community_display = e.params.data.text;
                     vm.$emit('saveConservationStatus');
-                }).
-                on('select2:unselect', function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.conservation_status_obj.community_id = null
+                    vm.conservation_status_obj.community_id = null;
                     vm.community_display = '';
-                }).
-                on('select2:open', function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.community_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.community_name_lookup +
+                            '-results"]'
+                    );
                     searchField[0].focus();
                 });
 
@@ -826,25 +1763,31 @@ export default {
         getCommunityDisplay: function () {
             let vm = this;
             if (vm.conservation_status_obj?.community_id) {
-                let community_display_url = api_endpoints.community_display +
-                    '?community_id=' + vm.conservation_status_obj.community_id
+                let community_display_url =
+                    api_endpoints.community_display +
+                    '?community_id=' +
+                    vm.conservation_status_obj.community_id;
                 fetch(community_display_url).then(async (response) => {
-                        const data = await response.json();
-                        var newOption = new Option(data.name, data.id, false, true);
-                        $('#' + vm.community_name_lookup).append(newOption);
-                        vm.community_display = data.name
-                    })
+                    const data = await response.json();
+                    var newOption = new Option(data.name, data.id, false, true);
+                    $('#' + vm.community_name_lookup).append(newOption);
+                    vm.community_display = data.name;
+                });
             }
         },
         filterWALegislativeCategories: function (event) {
             this.$nextTick(() => {
                 if (event) {
-                    this.conservation_status_obj.wa_legislative_category_id = null;
+                    this.conservation_status_obj.wa_legislative_category_id =
+                        null;
                 }
 
-                this.filtered_wa_legislative_categories = this.wa_legislative_categories.filter((choice) => {
-                    return choice.list_ids.includes(this.conservation_status_obj.wa_legislative_list_id);
-                });
+                this.filtered_wa_legislative_categories =
+                    this.wa_legislative_categories.filter((choice) => {
+                        return choice.list_ids.includes(
+                            this.conservation_status_obj.wa_legislative_list_id
+                        );
+                    });
             });
         },
         filterWAPriorityCategories: function (event) {
@@ -853,30 +1796,39 @@ export default {
                     this.conservation_status_obj.wa_priority_category_id = null;
                 }
 
-                this.filtered_wa_priority_categories = this.wa_priority_categories.filter((choice) => {
-                    return choice.list_ids.includes(this.conservation_status_obj.wa_priority_list_id);
-                });
+                this.filtered_wa_priority_categories =
+                    this.wa_priority_categories.filter((choice) => {
+                        return choice.list_ids.includes(
+                            this.conservation_status_obj.wa_priority_list_id
+                        );
+                    });
             });
         },
         generateReferralCommentBoxes: function () {
-            var box_visibility = this.conservation_status_obj.assessor_mode.assessor_box_view
-            var assessor_mode = this.conservation_status_obj.assessor_mode.assessor_level
+            var box_visibility =
+                this.conservation_status_obj.assessor_mode.assessor_box_view;
+            var assessor_mode =
+                this.conservation_status_obj.assessor_mode.assessor_level;
             if (!this.conservation_status_obj.can_user_edit) {
                 var current_referral_present = false;
                 $.each(this.conservation_status_obj.referrals, (i, v) => {
                     var referral_name = `comment-field-Referral-${v.referral.email}`;
-                    var referral_visibility = assessor_mode == 'referral' && this.conservation_status_obj.assessor_mode.assessor_can_assess && this.referral.referral == v.referral.id ? false : true;
+                    var referral_visibility =
+                        assessor_mode == 'referral' &&
+                        this.conservation_status_obj.assessor_mode
+                            .assessor_can_assess &&
+                        this.referral.referral == v.referral.id
+                            ? false
+                            : true;
                     var referral_label = `${v.referral.fullname}`;
                     var referral_comment_val = `${v.referral_comment}`;
-                    this.referral_comments_boxes.push(
-                        {
-                            'box_view': box_visibility,
-                            'name': referral_name,
-                            'label': referral_label,
-                            'readonly': referral_visibility,
-                            'value': referral_comment_val,
-                        }
-                    )
+                    this.referral_comments_boxes.push({
+                        box_view: box_visibility,
+                        name: referral_name,
+                        label: referral_label,
+                        readonly: referral_visibility,
+                        value: referral_comment_val,
+                    });
                 });
             }
         },
@@ -894,40 +1846,7 @@ export default {
             this.$emit('saveConservationStatus');
         },
     },
-    created: async function () {
-        let vm = this;
-        let action = this.$route.query.action;
-        let dict_url = action == 'view' ? api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type + '&action=' + action :
-            api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type
-        fetch(dict_url).then(async (response) => {
-            vm.cs_profile_dict = await response.json();
-            vm.wa_legislative_lists = vm.cs_profile_dict.wa_legislative_lists;
-            vm.wa_legislative_categories = vm.cs_profile_dict.wa_legislative_categories;
-            vm.iucn_versions = vm.cs_profile_dict.iucn_versions;
-            vm.wa_priority_lists = vm.cs_profile_dict.wa_priority_lists;
-            vm.wa_priority_categories = vm.cs_profile_dict.wa_priority_categories;
-            vm.commonwealth_conservation_categories = vm.cs_profile_dict.commonwealth_conservation_categories;
-            vm.change_codes = vm.cs_profile_dict.active_change_codes;
-            this.getCommunityDisplay();
-            this.filterWALegislativeCategories();
-            this.filterWAPriorityCategories();
-            if (!vm.is_external) {
-                this.generateReferralCommentBoxes();
-            }
-        }, (error) => {
-            console.log(error);
-        })
-    },
-    mounted: function () {
-        let vm = this;
-        if (!this.is_external && vm.$refs.assessment_comments) {
-            vm.$refs.assessment_comments.show_warning_icon(false);
-        }
-        this.$nextTick(() => {
-            vm.initialiseCommunityNameLookup();
-        });
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -947,7 +1866,7 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
index 87f29e74..2883d00a 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
@@ -1,58 +1,81 @@
 <template lang="html">
     <div id="cs_documents">
-        <FormSection :formCollapse="false" label="Documents" Index="documents">
-            <alert type="warning"><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload Management or Recovery Plans here</alert>
+        <FormSection :form-collapse="false" label="Documents" Index="documents">
+            <alert type="warning"
+                ><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload
+                Management or Recovery Plans here</alert
+            >
             <form class="form-horizontal" action="index.html" method="post">
                 <div v-if="show_document_actions" class="col-sm-12">
                     <div class="text-end">
-                        <button type="button" class="btn btn-primary mb-2 " @click.prevent="newDocument">
+                        <button
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newDocument"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Document
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                        :dtHeaders="documents_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="documents_datatable"
+                        :dt-options="documents_options"
+                        :dt-headers="documents_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <DocumentDetail ref="document_detail" @refreshFromResponse="refreshFromResponse" :url="cs_document_url"
-            :is_internal="is_internal">
+        <DocumentDetail
+            ref="document_detail"
+            :url="cs_document_url"
+            :is_internal="is_internal"
+            @refresh-from-response="refreshFromResponse"
+        >
         </DocumentDetail>
-        <ViewDocument ref="view_document" :is_internal="is_internal"></ViewDocument>
+        <ViewDocument
+            ref="view_document"
+            :is_internal="is_internal"
+        ></ViewDocument>
         <div v-if="conservationStatusDocumentHistoryId">
-            <ConservationStatusDocumentHistory ref="cs_document_history" :key="conservationStatusDocumentHistoryId"
+            <ConservationStatusDocumentHistory
+                ref="cs_document_history"
+                :key="conservationStatusDocumentHistoryId"
                 :document-id="conservationStatusDocumentHistoryId"
-                :conservation-status-id="conservation_status_obj.id" />
+                :conservation-status-id="conservation_status_obj.id"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
-import ViewDocument from '@/components/common/view_document.vue'
-import DocumentDetail from '@/components/common/add_document.vue'
+import ViewDocument from '@/components/common/view_document.vue';
+import DocumentDetail from '@/components/common/add_document.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import ConservationStatusDocumentHistory from '../../internal/conservation_status/cs_document_history.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'ConservationStatusDocuments',
+    components: {
+        alert,
+        FormSection,
+        datatable,
+        DocumentDetail,
+        ConservationStatusDocumentHistory,
+        ViewDocument,
+    },
     props: {
         conservation_status_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -60,16 +83,24 @@ export default {
         return {
             uuid: 0,
             conservationStatusDocumentHistoryId: null,
-            documentBody: "documentBody" + vm._uid,
-            panelBody: "conservation-status-documents-" + vm._uid,
-            panelBody: "cs-documents-" + vm._uid,
+            documentBody: 'documentBody' + vm._uid,
+            panelBody: 'conservation-status-documents-' + vm._uid,
+            panelBody: 'cs-documents-' + vm._uid,
             values: null,
             cs_document_url: api_endpoints.conservation_status_documents,
-            documents_headers: ['Number', 'Category', 'Sub Category', 'Document', 'Description', 'Date/Time', 'Action'],
+            documents_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
             documents_options: {
                 autowidth: true,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -79,11 +110,15 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/documents'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_obj.id + '/documents'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -93,8 +128,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -102,96 +137,124 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "document_number",
+                        data: 'document_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_number;
-                            }
-                            else {
-                                return '<s>' + full.document_number + '</s>'
+                            } else {
+                                return '<s>' + full.document_number + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "document_category_name",
+                        data: 'document_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "document_sub_category_name",
+                        data: 'document_sub_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_sub_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_sub_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "name",
+                        data: 'name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.active) {
                                 let value = full.name;
-                                let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                links += '<span><a href="' + full._file + '" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
                             } else {
                                 let value = full.name;
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                links += type == 'export' ? value : '<s>' + result + '</s>';
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
                             }
                             return links;
                         },
-
                     },
                     {
-                        data: "description",
+                        data: 'description',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.active) {
                                 return type == 'export' ? value : result;
                             } else {
-                                return type == 'export' ? value : '<s>' + result + '</s>';
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "uploaded_date",
+                        data: 'uploaded_date',
                         mRender: function (data, type, full) {
                             if (full.active) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
                             } else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY HH:mm') + '</s>' : '';
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             links += `<a href='#' data-view-document='${full.id}'>View</a><br>`;
@@ -199,8 +262,7 @@ export default {
                                 if (full.active) {
                                     links += `<a href='#${full.id}' data-edit-document='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-document='${full.id}'>Discard</a><br>`;
-                                }
-                                else {
+                                } else {
                                     links += `<a href='#' data-reinstate-document='${full.id}'>Reinstate</a><br>`;
                                 }
                                 if (vm.is_internal) {
@@ -208,7 +270,7 @@ export default {
                                 }
                             }
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -223,26 +285,27 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        alert,
-        FormSection,
-        datatable,
-        DocumentDetail,
-        ConservationStatusDocumentHistory,
-        ViewDocument,
+            },
+        };
     },
     computed: {
         show_document_actions: function () {
-            return this.conservation_status_obj.can_user_edit || (
-                this.is_internal &&
-                this.conservation_status_obj.assessor_mode &&
-                this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                this.conservation_status_obj.assessor_mode.assessor_level == 'assessor'
+            return (
+                this.conservation_status_obj.can_user_edit ||
+                (this.is_internal &&
+                    this.conservation_status_obj.assessor_mode &&
+                    this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess &&
+                    this.conservation_status_obj.assessor_mode.assessor_level ==
+                        'assessor')
             );
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         newDocument: function () {
@@ -256,7 +319,7 @@ export default {
                 document_sub_category: '',
                 uploaded_date: null,
                 can_submitter_access: false,
-            }
+            };
             this.$refs.document_detail.documentObj = new_document_another;
             this.$refs.document_detail.uploaded_document = [];
             this.$refs.document_detail.document_action = 'add';
@@ -271,18 +334,33 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.document_detail.documentObj = data;
-                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [data];
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.conservation_status_documents,
+                    id
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.document_detail.documentObj = data;
+                    this.$refs.document_detail.documentObj.uploaded_date =
+                        data.uploaded_date != null &&
+                        data.uploaded_date != undefined
+                            ? moment(data.uploaded_date).format(
+                                  'yyyy-MM-DDTHH:mm'
+                              )
+                            : '';
+                    this.$refs.document_detail.uploaded_document = [data];
 
-                //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(data.document_category);
-            },
-                err => {
+                    //-----this method is called as it wasn't fetching subcategory
+                    this.$refs.document_detail.fetchSubCategory(
+                        data.document_category
+                    );
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.document_detail.isModalOpen = true;
         },
         historyDocument: function (id) {
@@ -295,9 +373,9 @@ export default {
         discardDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Document",
-                text: "Are you sure you want to discard this Document?",
-                icon: "question",
+                title: 'Discard Document',
+                text: 'Are you sure you want to discard this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Document',
                 customClass: {
@@ -305,36 +383,45 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The document has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.conservation_status_documents,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The document has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Document",
-                text: "Are you sure you want to Reinstate this Document?",
-                icon: "question",
+                title: 'Reinstate Document',
+                text: 'Are you sure you want to Reinstate this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Document',
                 customClass: {
@@ -342,79 +429,110 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status_documents, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your document has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.conservation_status_documents,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your document has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         updatedDocuments() {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-view-document]', function (e) {
-                e.preventDefault();
-                var document = vm.$refs.documents_datatable.vmDataTable.row($(this).parent()).data();
-                vm.viewDocument(document);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-edit-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-document');
-                vm.editDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-history-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-document');
-                vm.historyDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-document]',
+                function (e) {
+                    e.preventDefault();
+                    var document = vm.$refs.documents_datatable.vmDataTable
+                        .row($(this).parent())
+                        .data();
+                    vm.viewDocument(document);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-document');
+                    vm.editDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-document');
+                    vm.historyDocument(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-discard-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-document');
-                vm.discardDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-document');
+                    vm.discardDocument(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-reinstate-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-document');
-                vm.reinstateDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-document');
+                    vm.reinstateDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.documents_datatable !== undefined) { this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    },
-
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
index 2612dbf3..bf67e1ac 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
@@ -1,32 +1,38 @@
 <template id="cs_more-referrals">
     <div>
-        <a v-if="!isFinalised" ref="showRef" @click.prevent="" role="button" class="mt-2 float-end">Show All
-            Referrals</a>
+        <a
+            v-if="!isFinalised"
+            ref="showRef"
+            role="button"
+            class="mt-2 float-end"
+            @click.prevent=""
+            >Show All Referrals</a
+        >
     </div>
 </template>
 
 <script>
-import { constants, api_endpoints, helpers } from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'ConservationStatusMoreReferrals',
     props: {
         isFinalised: {
             type: Boolean,
-            required: true
+            required: true,
         },
         canAction: {
             type: Boolean,
-            required: true
+            required: true,
         },
         conservation_status_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         referral_url: {
             type: String,
-            default: null
-        }
+            default: null,
+        },
     },
     data() {
         let vm = this;
@@ -36,15 +42,15 @@ export default {
             datatable_url: '',
             datatable_options: {
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 deferRender: true,
                 autowidth: true,
                 processing: true,
                 ajax: {
-                    "url": this.referral_url,
-                    "dataSrc": '',
+                    url: this.referral_url,
+                    dataSrc: '',
                 },
                 columns: [
                     {
@@ -52,18 +58,18 @@ export default {
                         data: 'lodged_on',
                         render: function (date) {
                             return moment(date).format(vm.dateFormat);
-                        }
+                        },
                     },
                     {
                         title: 'Referral',
                         data: 'referral',
                         render: function (data, type, full) {
                             return `<span>${data.first_name} ${data.last_name}</span>`;
-                        }
+                        },
                     },
                     {
                         title: 'Status',
-                        data: 'processing_status'
+                        data: 'processing_status',
                     },
                     {
                         title: 'Action',
@@ -73,152 +79,193 @@ export default {
                             if (!vm.canAction) {
                                 return result;
                             }
-                            var user = full.referral.first_name + ' ' + full.referral.last_name;
+                            var user =
+                                full.referral.first_name +
+                                ' ' +
+                                full.referral.last_name;
                             if (full.processing_status == 'Awaiting') {
                                 result = `<a href="" data-id="${data}" data-user="${user}" class="remindRef">Remind</a>/<a href="" data-id="${data}" data-user="${user}" class="recallRef">Recall</a>`;
-                            }
-                            else {
+                            } else {
                                 result = `<a href="" data-id="${data}" data-user="${user}" class="resendRef">Resend</a>`;
                             }
                             return result;
-                        }
+                        },
                     },
                     {
                         title: 'Referral Comments',
                         data: 'referral_comment',
-                        'render': function (value) {
+                        render: function (value) {
                             var ellipsis = '...',
                                 truncated = _.truncate(value, {
                                     length: 20,
                                     omission: ellipsis,
-                                    separator: ' '
+                                    separator: ' ',
                                 }),
                                 result = '<span>' + truncated + '</span>',
-                                popTemplate = _.template('<a href="#" ' +
-                                    'role="button" ' +
-                                    'data-bs-toggle="popover" ' +
-                                    'data-bs-trigger="click" ' +
-                                    'data-bs-placement="top auto"' +
-                                    'data-bs-html="true" ' +
-                                    'data-bs-content="<%= text %>" ' +
-                                    '>more</a>');
+                                popTemplate = _.template(
+                                    '<a href="#" ' +
+                                        'role="button" ' +
+                                        'data-bs-toggle="popover" ' +
+                                        'data-bs-trigger="click" ' +
+                                        'data-bs-placement="top auto"' +
+                                        'data-bs-html="true" ' +
+                                        'data-bs-content="<%= text %>" ' +
+                                        '>more</a>'
+                                );
                             if (_.endsWith(truncated, ellipsis)) {
                                 result += popTemplate({
-                                    text: value
+                                    text: value,
                                 });
                             }
 
                             return result;
                         },
-                    }
-                ]
+                    },
+                ],
             },
-        }
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            let vm = this;
+            // if loop given below to avoid error when referral completes his task
+            if (!vm.isFinalised) {
+                this.initialiseTable();
+            }
+        });
     },
     methods: {
         remindReferral: function (_id, user) {
             let vm = this;
 
-            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/remind')).then(async (response) => {
-                const data = await response.json();
-                vm.$emit('refreshFromResponse', data);
-                vm.table.ajax.reload();
-                swal.fire({
-                    title: 'Referral Reminder',
-                    text: 'A reminder has been sent to ' + user,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.cs_referrals,
+                    _id + '/remind'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.$emit('refreshFromResponse', data);
+                    vm.table.ajax.reload();
+                    swal.fire({
+                        title: 'Referral Reminder',
+                        text: 'A reminder has been sent to ' + user,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Remind Referral Error',
                         text: helpers.apiVueResourceError(error),
                         icon: 'error',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
+                            confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         resendReferral: function (_id, user) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/resend')).then(async (response) => {
-                const data = await response.json();
-                vm.$emit('refreshFromResponse', data);
-                vm.table.ajax.reload();
-                swal.fire({
-                    title: 'Referral Resent',
-                    text: 'The referral has been resent to ' + user,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.cs_referrals,
+                    _id + '/resend'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.$emit('refreshFromResponse', data);
+                    vm.table.ajax.reload();
+                    swal.fire({
+                        title: 'Referral Resent',
+                        text: 'The referral has been resent to ' + user,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Resend Referral Error',
                         text: helpers.apiVueResourceError(error),
                         icon: 'error',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
+                            confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         recallReferral: function (_id, user) {
             let vm = this;
             swal.fire({
-                title: "Loading...",
+                title: 'Loading...',
                 allowOutsideClick: false,
                 allowEscapeKey: false,
                 onOpen: () => {
-                    swal.showLoading()
+                    swal.showLoading();
+                },
+            });
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.cs_referrals,
+                    _id + '/recall'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
                 }
-            })
-            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, _id + '/recall'), {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json', }
-            }).then(async (response) => {
-                const data = await response.json();
-                swal.hideLoading();
-                swal.close();
-                vm.$emit('refreshFromResponse', data);
-                vm.table.ajax.reload();
-                swal.fire({
-                    title: 'Referral Recall',
-                    text: 'The referral has been recalled from ' + user,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-            },
-                error => {
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    swal.hideLoading();
+                    swal.close();
+                    vm.$emit('refreshFromResponse', data);
+                    vm.table.ajax.reload();
+                    swal.fire({
+                        title: 'Referral Recall',
+                        text: 'The referral has been recalled from ' + user,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Referral Recall Error',
                         text: helpers.apiVueResourceError(error),
                         icon: 'error',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
+                            confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         initialiseTable: function () {
             // To allow table elements (ref: https://getbootstrap.com/docs/5.1/getting-started/javascript/#sanitizer)
-            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
-            myDefaultAllowList.table = []
+            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList;
+            myDefaultAllowList.table = [];
 
             let vm = this;
             let table_id = 'cs-more-referrals-table' + vm._uid;
             let popover_name = 'popover-' + vm._uid;
-            let my_content = '<table id="' + table_id + '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0" width="100%"></table>'
-            let my_template = '<div class="popover ' + popover_name + '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
-            let popover_elem = $(vm.$refs.showRef)[0]
+            let my_content =
+                '<table id="' +
+                table_id +
+                '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0" width="100%"></table>';
+            let my_template =
+                '<div class="popover ' +
+                popover_name +
+                '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';
+            let popover_elem = $(vm.$refs.showRef)[0];
 
             new bootstrap.Popover(popover_elem, {
                 html: true,
@@ -227,57 +274,71 @@ export default {
                 title: 'Referrals',
                 container: 'body',
                 placement: 'right',
-                trigger: "click focus",
-            })
+                trigger: 'click focus',
+            });
             popover_elem.addEventListener('inserted.bs.popover', function () {
-                console.log('in inserted.bs.popover')
+                console.log('in inserted.bs.popover');
 
                 vm.table = $('#' + table_id).DataTable(vm.datatable_options);
 
                 // activate popover when table is drawn.
-                vm.table.on('draw.dt', function () {
-                    var tablePopover = $(this).find('[data-bs-toggle="popover"]');
-                    if (tablePopover.length > 0) {
-                        new bootstrap.Popover(tablePopover, {
-                            html: true,
-                            trigger: 'hover',
-                            placement: 'bottom',
-                            container: 'body',
-                        });
-                        // the next line prevents from scrolling up to the top after clicking on the popover.
-                        $(tablePopover).on('click', function (e) {
-                            e.preventDefault();
-                            return true;
-                        });
-                    }
-                }).on('click', '.resendRef', function (e) {
-                    e.preventDefault();
-                    var _id = $(this).data('id');
-                    var user = $(this).data('user');
-                    vm.resendReferral(_id, user);
-                }).on('click', '.recallRef', function (e) {
-                    e.preventDefault();
-                    var _id = $(this).data('id');
-                    var user = $(this).data('user');
-                    vm.recallReferral(_id, user);
-                }).on('click', '.remindRef', function (e) {
-                    e.preventDefault();
-                    var _id = $(this).data('id');
-                    var user = $(this).data('user');
-                    vm.remindReferral(_id, user);
-                });
-            })
+                vm.table
+                    .on('draw.dt', function () {
+                        var tablePopover = $(this).find(
+                            '[data-bs-toggle="popover"]'
+                        );
+                        if (tablePopover.length > 0) {
+                            new bootstrap.Popover(tablePopover, {
+                                html: true,
+                                trigger: 'hover',
+                                placement: 'bottom',
+                                container: 'body',
+                            });
+                            // the next line prevents from scrolling up to the top after clicking on the popover.
+                            $(tablePopover).on('click', function (e) {
+                                e.preventDefault();
+                                return true;
+                            });
+                        }
+                    })
+                    .on('click', '.resendRef', function (e) {
+                        e.preventDefault();
+                        var _id = $(this).data('id');
+                        var user = $(this).data('user');
+                        vm.resendReferral(_id, user);
+                    })
+                    .on('click', '.recallRef', function (e) {
+                        e.preventDefault();
+                        var _id = $(this).data('id');
+                        var user = $(this).data('user');
+                        vm.recallReferral(_id, user);
+                    })
+                    .on('click', '.remindRef', function (e) {
+                        e.preventDefault();
+                        var _id = $(this).data('id');
+                        var user = $(this).data('user');
+                        vm.remindReferral(_id, user);
+                    });
+            });
             popover_elem.addEventListener('shown.bs.popover', function () {
-                console.log('in shown.bs.popover')
+                console.log('in shown.bs.popover');
 
                 var el = vm.$refs.showRef;
                 var popoverheight = parseInt($('.' + popover_name).height());
 
-                var popover_bounding_top = parseInt($('.' + popover_name)[0].getBoundingClientRect().top);
-                var popover_bounding_bottom = parseInt($('.' + popover_name)[0].getBoundingClientRect().bottom);
+                var popover_bounding_top = parseInt(
+                    $('.' + popover_name)[0].getBoundingClientRect().top
+                );
+                var popover_bounding_bottom = parseInt(
+                    $('.' + popover_name)[0].getBoundingClientRect().bottom
+                );
 
-                var el_bounding_top = parseInt($(el)[0].getBoundingClientRect().top);
-                var el_bounding_bottom = parseInt($(el)[0].getBoundingClientRect().top);
+                var el_bounding_top = parseInt(
+                    $(el)[0].getBoundingClientRect().top
+                );
+                var el_bounding_bottom = parseInt(
+                    $(el)[0].getBoundingClientRect().top
+                );
 
                 var diff = el_bounding_top - popover_bounding_top;
 
@@ -285,18 +346,11 @@ export default {
                 var pos2 = parseInt($(el).position().top) - 5;
 
                 var x = diff + 5;
-                $('.' + popover_name).children('.arrow').css('top', x + 'px');
-            })
+                $('.' + popover_name)
+                    .children('.arrow')
+                    .css('top', x + 'px');
+            });
         },
     },
-    mounted() {
-        this.$nextTick(() => {
-            let vm = this;
-            // if loop given below to avoid error when referral completes his task
-            if (!vm.isFinalised) {
-                this.initialiseTable();
-            }
-        })
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
index 7396b6c4..d48e2fad 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
@@ -1,610 +1,1463 @@
 <template lang="html">
     <div id="speciesStatus">
-        <FormSection :formCollapse="false" label="Conservation Status" Index="conservation_status">
+        <FormSection
+            :form-collapse="false"
+            label="Conservation Status"
+            Index="conservation_status"
+        >
             <form @change="saveConservationStatus($event)">
                 <div class="row mb-3">
-                    <label :for="scientific_name_lookup" class="col-sm-4 col-form-label fw-bold">Scientific Name: <span
-                            class="text-danger">*</span></label>
-                    <div class="col-sm-8" :id="select_scientific_name">
-                        <select :disabled="isReadOnly || 'Unlocked' == conservation_status_obj.processing_status"
-                            :id="scientific_name_lookup" :name="scientific_name_lookup" :ref="scientific_name_lookup"
-                            class="form-control" />
+                    <label
+                        :for="scientific_name_lookup"
+                        class="col-sm-4 col-form-label fw-bold"
+                        >Scientific Name:
+                        <span class="text-danger">*</span></label
+                    >
+                    <div :id="select_scientific_name" class="col-sm-8">
+                        <select
+                            :id="scientific_name_lookup"
+                            :ref="scientific_name_lookup"
+                            :disabled="
+                                isReadOnly ||
+                                'Unlocked' ==
+                                    conservation_status_obj.processing_status
+                            "
+                            :name="scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div v-if="species_display" class="row mb-3">
-                    <label for="species_display" class="col-sm-4 col-form-label"></label>
+                    <label
+                        for="species_display"
+                        class="col-sm-4 col-form-label"
+                    ></label>
                     <div class="col-sm-8">
-                        <textarea disabled class="form-control" rows="3" id="species_display"
-                            v-model="species_display" />
+                        <textarea
+                            id="species_display"
+                            v-model="species_display"
+                            disabled
+                            class="form-control"
+                            rows="3"
+                        />
                     </div>
                 </div>
                 <div v-if="taxon_previous_name" class="row mb-3">
-                    <label for="previous_name" class="col-sm-4 col-form-label">Previous Name:</label>
+                    <label for="previous_name" class="col-sm-4 col-form-label"
+                        >Previous Name:</label
+                    >
                     <div class="col-sm-8">
-                        <input readonly type="text" class="form-control" id="previous_name" placeholder=""
-                            v-model="taxon_previous_name" />
+                        <input
+                            id="previous_name"
+                            v-model="taxon_previous_name"
+                            readonly
+                            type="text"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                 </div>
                 <template v-if="show_administrative_information">
                     <div class="row mb-3 border-top pt-3">
-                        <h5 class="text-muted mb-4">Administrative Information</h5>
-                        <label for="change_code" class="col-sm-4 col-form-label fw-bold">Change Type <span
-                                class="text-danger">*</span></label>
+                        <h5 class="text-muted mb-4">
+                            Administrative Information
+                        </h5>
+                        <label
+                            for="change_code"
+                            class="col-sm-4 col-form-label fw-bold"
+                            >Change Type
+                            <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-8">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="change_codes && change_codes.length > 0 && conservation_status_obj.change_code_id && !change_codes.map((d) => d.id).includes(conservation_status_obj.change_code_id)">
-                                    <input type="text" v-if="conservation_status_obj.change_code"
+                                    v-if="
+                                        change_codes &&
+                                        change_codes.length > 0 &&
+                                        conservation_status_obj.change_code_id &&
+                                        !change_codes
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.change_code_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.change_code
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.change_code + ' (Now Archived)'" disabled />
+                                        :value="
+                                            conservation_status_obj.change_code +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change change type to:
                                     </div>
                                 </template>
-                                <select class="form-select" v-model="conservation_status_obj.change_code_id">
-                                    <option :value="null">Select Appropriate Change Type</option>
-                                    <option v-for="change_code in change_codes" :value="change_code.id"
-                                        v-bind:key="change_code.id">
+                                <select
+                                    v-model="
+                                        conservation_status_obj.change_code_id
+                                    "
+                                    class="form-select"
+                                >
+                                    <option :value="null">
+                                        Select Appropriate Change Type
+                                    </option>
+                                    <option
+                                        v-for="change_code in change_codes"
+                                        :key="change_code.id"
+                                        :value="change_code.id"
+                                    >
                                         {{ change_code.code }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" disabled
-                                    :value="conservation_status_obj.change_code ? conservation_status_obj.change_code : 'Select Appropriate Change Type'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    disabled
+                                    :value="
+                                        conservation_status_obj.change_code
+                                            ? conservation_status_obj.change_code
+                                            : 'Select Appropriate Change Type'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="approval_level" class="col-sm-4 col-form-label fw-bold">Applicable Workflow <span
-                                class="text-danger">*</span></label>
+                        <label
+                            for="approval_level"
+                            class="col-sm-4 col-form-label fw-bold"
+                            >Applicable Workflow
+                            <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-8">
-                            <select id="approval_level" v-model="conservation_status_obj.approval_level"
-                                class="form-select" :disabled="approval_level_disabled" @change="approvalLevelChanged">
-                                <option :value="null">Select Appropriate Workflow</option>
+                            <select
+                                id="approval_level"
+                                v-model="conservation_status_obj.approval_level"
+                                class="form-select"
+                                :disabled="approval_level_disabled"
+                                @change="approvalLevelChanged"
+                            >
+                                <option :value="null">
+                                    Select Appropriate Workflow
+                                </option>
                                 <option :value="'immediate'">Immediate</option>
                                 <option :value="'minister'">Ministerial</option>
                             </select>
                         </div>
                     </div>
-                    <template v-if="conservation_status_obj.approval_level == 'minister'">
+                    <template
+                        v-if="
+                            conservation_status_obj.approval_level == 'minister'
+                        "
+                    >
                         <div class="row mb-3 border-top pt-3">
-                            <label for="listing_date" class="col-sm-3 col-form-label">Public Consultation:</label>
+                            <label
+                                for="listing_date"
+                                class="col-sm-3 col-form-label"
+                                >Public Consultation:</label
+                            >
                             <div class="col-sm-9 d-flex align-items-center">
                                 <div class="form-check form-check-inline">
-                                    Yes <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                        id="public_consultation_yes" class="form-check-input" name="public_consultation"
-                                        v-model="conservation_status_obj.public_consultation" :value="true" />
+                                    Yes
+                                    <input
+                                        id="public_consultation_yes"
+                                        v-model="
+                                            conservation_status_obj.public_consultation
+                                        "
+                                        :disabled="
+                                            listing_and_review_due_date_disabled
+                                        "
+                                        type="radio"
+                                        class="form-check-input"
+                                        name="public_consultation"
+                                        :value="true"
+                                    />
                                 </div>
                                 <div class="form-check form-check-inline">
-                                    No <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                        id="public_consultation_no" class="form-check-input" name="public_consultation"
-                                        v-model="conservation_status_obj.public_consultation" :value="false" />
+                                    No
+                                    <input
+                                        id="public_consultation_no"
+                                        v-model="
+                                            conservation_status_obj.public_consultation
+                                        "
+                                        :disabled="
+                                            listing_and_review_due_date_disabled
+                                        "
+                                        type="radio"
+                                        class="form-check-input"
+                                        name="public_consultation"
+                                        :value="false"
+                                    />
                                 </div>
                             </div>
                         </div>
-                        <div v-if="conservation_status_obj.public_consultation" class="row mb-3 pt-1">
-                            <label for="review_due_date" class="col-sm-3 col-form-label">Start Date:</label>
+                        <div
+                            v-if="conservation_status_obj.public_consultation"
+                            class="row mb-3 pt-1"
+                        >
+                            <label
+                                for="review_due_date"
+                                class="col-sm-3 col-form-label"
+                                >Start Date:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control"
+                                <input
                                     id="public_consultation_start_date"
-                                    v-model="conservation_status_obj.public_consultation_start_date"
-                                    :disabled="listing_and_review_due_date_disabled" />
+                                    v-model="
+                                        conservation_status_obj.public_consultation_start_date
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                />
                             </div>
-                            <template v-if="conservation_status_obj.public_consultation_start_date">
-                                <label for="review_due_date" class="col-sm-3 col-form-label">End Date:</label>
+                            <template
+                                v-if="
+                                    conservation_status_obj.public_consultation_start_date
+                                "
+                            >
+                                <label
+                                    for="review_due_date"
+                                    class="col-sm-3 col-form-label"
+                                    >End Date:</label
+                                >
                                 <div class="col-sm-3">
-                                    <input type="date" placeholder="DD/MM/YYYY" class="form-control"
+                                    <input
                                         id="public_consultation_end_date"
-                                        v-model="conservation_status_obj.public_consultation_end_date"
-                                        :disabled="listing_and_review_due_date_disabled"
-                                        :min="conservation_status_obj.public_consultation_start_date ? new Date(conservation_status_obj.public_consultation_start_date).toISOString().split('T')[0] : null" />
+                                        v-model="
+                                            conservation_status_obj.public_consultation_end_date
+                                        "
+                                        type="date"
+                                        placeholder="DD/MM/YYYY"
+                                        class="form-control"
+                                        :disabled="
+                                            listing_and_review_due_date_disabled
+                                        "
+                                        :min="
+                                            conservation_status_obj.public_consultation_start_date
+                                                ? new Date(
+                                                      conservation_status_obj.public_consultation_start_date
+                                                  )
+                                                      .toISOString()
+                                                      .split('T')[0]
+                                                : null
+                                        "
+                                    />
                                 </div>
                             </template>
                         </div>
                     </template>
-                    <div v-if="conservation_status_obj.effective_from || conservation_status_obj.effective_to"
-                        class="row mb-3 border-top pt-3">
+                    <div
+                        v-if="
+                            conservation_status_obj.effective_from ||
+                            conservation_status_obj.effective_to
+                        "
+                        class="row mb-3 border-top pt-3"
+                    >
                         <template v-if="conservation_status_obj.effective_from">
-                            <label for="effective_from" class="col-sm-3 col-form-label">Effective From:</label>
+                            <label
+                                for="effective_from"
+                                class="col-sm-3 col-form-label"
+                                >Effective From:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="effective_from"
-                                    v-model="conservation_status_obj.effective_from" :disabled="isReadOnly" />
+                                <input
+                                    id="effective_from"
+                                    v-model="
+                                        conservation_status_obj.effective_from
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="isReadOnly"
+                                />
                             </div>
                         </template>
                         <template v-if="conservation_status_obj.effective_to">
-                            <label for="effective_to" class="col-sm-3 col-form-label">Effective to:</label>
+                            <label
+                                for="effective_to"
+                                class="col-sm-3 col-form-label"
+                                >Effective to:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="effective_to"
-                                    v-model="conservation_status_obj.effective_to" :disabled="isReadOnly" />
+                                <input
+                                    id="effective_to"
+                                    v-model="
+                                        conservation_status_obj.effective_to
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="isReadOnly"
+                                />
                             </div>
                         </template>
                     </div>
-                    <div v-if="show_listing_and_review_due_date" class="row mb-3"
-                        :class="conservation_status_obj.effective_from || conservation_status_obj.effective_to ? '' : 'border-top pt-3'">
-                        <label for="listing_date" class="col-sm-3 col-form-label">Date First Listed:</label>
+                    <div
+                        v-if="show_listing_and_review_due_date"
+                        class="row mb-3"
+                        :class="
+                            conservation_status_obj.effective_from ||
+                            conservation_status_obj.effective_to
+                                ? ''
+                                : 'border-top pt-3'
+                        "
+                    >
+                        <label
+                            for="listing_date"
+                            class="col-sm-3 col-form-label"
+                            >Date First Listed:</label
+                        >
                         <div class="col-sm-3">
-                            <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="listing_date"
+                            <input
+                                id="listing_date"
                                 v-model="conservation_status_obj.listing_date"
-                                :disabled="listing_and_review_due_date_disabled" />
+                                type="date"
+                                placeholder="DD/MM/YYYY"
+                                class="form-control"
+                                :disabled="listing_and_review_due_date_disabled"
+                            />
                         </div>
-                        <label for="review_due_date" class="col-sm-3 col-form-label">Review Due Date:</label>
+                        <label
+                            for="review_due_date"
+                            class="col-sm-3 col-form-label"
+                            >Review Due Date:</label
+                        >
                         <div class="col-sm-3">
-                            <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="review_due_date"
-                                v-model="conservation_status_obj.review_due_date"
-                                :disabled="listing_and_review_due_date_disabled" />
+                            <input
+                                id="review_due_date"
+                                v-model="
+                                    conservation_status_obj.review_due_date
+                                "
+                                type="date"
+                                placeholder="DD/MM/YYYY"
+                                class="form-control"
+                                :disabled="listing_and_review_due_date_disabled"
+                            />
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.approval_level == 'minister'" class="row mb-3 border-top pt-3">
-                        <label for="listing_date" class="col-sm-3 col-form-label">CAM MOU:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.approval_level == 'minister'
+                        "
+                        class="row mb-3 border-top pt-3"
+                    >
+                        <label
+                            for="listing_date"
+                            class="col-sm-3 col-form-label"
+                            >CAM MOU:</label
+                        >
                         <div class="col-sm-3 d-flex align-items-center">
                             <div class="form-check form-check-inline">
-                                Yes <input :disabled="listing_and_review_due_date_disabled" type="radio"
-                                    id="cam_mou_yes" class="form-check-input" name="cam_mou"
-                                    v-model="conservation_status_obj.cam_mou" :value="true" />
+                                Yes
+                                <input
+                                    id="cam_mou_yes"
+                                    v-model="conservation_status_obj.cam_mou"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="cam_mou"
+                                    :value="true"
+                                />
                             </div>
                             <div class="form-check form-check-inline">
-                                No <input :disabled="listing_and_review_due_date_disabled" type="radio" id="cam_mou_no"
-                                    class="form-check-input" name="cam_mou" v-model="conservation_status_obj.cam_mou"
-                                    :value="false" />
+                                No
+                                <input
+                                    id="cam_mou_no"
+                                    v-model="conservation_status_obj.cam_mou"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="cam_mou"
+                                    :value="false"
+                                />
                             </div>
                             <div class="form-check form-check-inline">
-                                N/A <input :disabled="listing_and_review_due_date_disabled" type="radio" id="cam_mou_na"
-                                    class="form-check-input" name="cam_mou" v-model="conservation_status_obj.cam_mou"
-                                    :value="null" />
+                                N/A
+                                <input
+                                    id="cam_mou_na"
+                                    v-model="conservation_status_obj.cam_mou"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="cam_mou"
+                                    :value="null"
+                                />
                             </div>
                         </div>
                         <template v-if="conservation_status_obj.cam_mou">
-                            <label for="review_due_date" class="col-sm-3 col-form-label">Date Sent:</label>
+                            <label
+                                for="review_due_date"
+                                class="col-sm-3 col-form-label"
+                                >Date Sent:</label
+                            >
                             <div class="col-sm-3">
-                                <input type="date" placeholder="DD/MM/YYYY" class="form-control" id="cam_mou_date_sent"
-                                    v-model="conservation_status_obj.cam_mou_date_sent"
-                                    :disabled="listing_and_review_due_date_disabled"
-                                    :max="new Date().toISOString().split('T')[0]" />
+                                <input
+                                    id="cam_mou_date_sent"
+                                    v-model="
+                                        conservation_status_obj.cam_mou_date_sent
+                                    "
+                                    type="date"
+                                    placeholder="DD/MM/YYYY"
+                                    class="form-control"
+                                    :disabled="
+                                        listing_and_review_due_date_disabled
+                                    "
+                                    :max="
+                                        new Date().toISOString().split('T')[0]
+                                    "
+                                />
                             </div>
                         </template>
                     </div>
                 </template>
                 <template v-if="show_proposed_conservation_status">
                     <div class="row mb-3 border-top pt-3">
-                        <h5 class="text-muted mb-4"><template v-if="conservation_list_proposed">Proposed
-                            </template>Conservation
-                            Status</h5>
-                        <label for="proposed_wa_legislative_list" class="col-sm-5 col-form-label fw-bold">WA Legislative
-                            List <span class="text-warning">*</span></label>
+                        <h5 class="text-muted mb-4">
+                            <template v-if="conservation_list_proposed"
+                                >Proposed </template
+                            >Conservation Status
+                        </h5>
+                        <label
+                            for="proposed_wa_legislative_list"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >WA Legislative List
+                            <span class="text-warning">*</span></label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_legislative_lists && wa_legislative_lists.length > 0 && conservation_status_obj.wa_legislative_list_id && !wa_legislative_lists.map((d) => d.id).includes(conservation_status_obj.wa_legislative_list_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_legislative_list"
+                                    v-if="
+                                        wa_legislative_lists &&
+                                        wa_legislative_lists.length > 0 &&
+                                        conservation_status_obj.wa_legislative_list_id &&
+                                        !wa_legislative_lists
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_legislative_list_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_legislative_list
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_legislative_list + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_legislative_list +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa legislative list to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_legislative_list_id"
-                                    id="proposed_wa_legislative_list" @change="filterWALegislativeCategories($event)">
-                                    <option :value="null" disabled>Select the appropriate WA Legislative List</option>
-                                    <option v-for="option in wa_legislative_lists" :value="option.id"
-                                        v-bind:key="option.id">
+                                <select
+                                    id="proposed_wa_legislative_list"
+                                    v-model="
+                                        conservation_status_obj.wa_legislative_list_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                    @change="
+                                        filterWALegislativeCategories($event)
+                                    "
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Legislative
+                                        List
+                                    </option>
+                                    <option
+                                        v-for="option in wa_legislative_lists"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_legislative_list ? conservation_status_obj.wa_legislative_list : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_legislative_list
+                                            ? conservation_status_obj.wa_legislative_list
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.wa_legislative_list_id" class="row mb-3">
-                        <label for="proposed_wa_legislative_category" class="col-sm-5 col-form-label">WA Legislative
-                            Category:</label>
+                    <div
+                        v-if="conservation_status_obj.wa_legislative_list_id"
+                        class="row mb-3"
+                    >
+                        <label
+                            for="proposed_wa_legislative_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Legislative Category:</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_legislative_categories && wa_legislative_categories.length > 0 && conservation_status_obj.wa_legislative_category_id && !wa_legislative_categories.map((d) => d.id).includes(conservation_status_obj.wa_legislative_category_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_legislative_category"
+                                    v-if="
+                                        wa_legislative_categories &&
+                                        wa_legislative_categories.length > 0 &&
+                                        conservation_status_obj.wa_legislative_category_id &&
+                                        !wa_legislative_categories
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_legislative_category_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_legislative_category
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_legislative_category + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_legislative_category +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa legislative category to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_legislative_category_id"
-                                    id="proposed_wa_legislative_category">
-                                    <option :value="null" disabled>Select the appropriate WA Legislative Category
+                                <select
+                                    id="proposed_wa_legislative_category"
+                                    v-model="
+                                        conservation_status_obj.wa_legislative_category_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Legislative
+                                        Category
                                     </option>
-                                    <option v-for="option in wa_legislative_categories" :value="option.id"
-                                        v-bind:key="option.id">
+                                    <option
+                                        v-for="option in wa_legislative_categories"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_legislative_category ? conservation_status_obj.wa_legislative_category : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_legislative_category
+                                            ? conservation_status_obj.wa_legislative_category
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_iucnversion" class="col-sm-5 col-form-label">IUCN Version</label>
+                        <label
+                            for="proposed_iucnversion"
+                            class="col-sm-5 col-form-label"
+                            >IUCN Version</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="iucn_versions && iucn_versions.length > 0 && conservation_status_obj.iucn_version_id && !iucn_versions.map((d) => d.id).includes(conservation_status_obj.iucn_version_id)">
-                                    <input type="text" v-if="conservation_status_obj.iucn_version"
+                                    v-if="
+                                        iucn_versions &&
+                                        iucn_versions.length > 0 &&
+                                        conservation_status_obj.iucn_version_id &&
+                                        !iucn_versions
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.iucn_version_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.iucn_version
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.iucn_version + ' (Now Archived)'" disabled />
+                                        :value="
+                                            conservation_status_obj.iucn_version +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change iucn version to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.iucn_version_id" id="proposed_iucnversion">
-                                    <option :value="null" disabled>Select the appropriate IUCN Version</option>
-                                    <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
+                                <select
+                                    id="proposed_iucnversion"
+                                    v-model="
+                                        conservation_status_obj.iucn_version_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate IUCN Version
+                                    </option>
+                                    <option
+                                        v-for="option in iucn_versions"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.iucn_version ? conservation_status_obj.iucn_version : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.iucn_version
+                                            ? conservation_status_obj.iucn_version
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_wa_priority_list" class="col-sm-5 col-form-label fw-bold">WA Priority
-                            List <span class="text-warning">*</span></label>
+                        <label
+                            for="proposed_wa_priority_list"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >WA Priority List
+                            <span class="text-warning">*</span></label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_priority_lists && wa_priority_lists.length > 0 && conservation_status_obj.wa_priority_list_id && !wa_priority_lists.map((d) => d.id).includes(conservation_status_obj.wa_priority_list_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_priority_list"
+                                    v-if="
+                                        wa_priority_lists &&
+                                        wa_priority_lists.length > 0 &&
+                                        conservation_status_obj.wa_priority_list_id &&
+                                        !wa_priority_lists
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_priority_list_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_priority_list
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_priority_list + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_priority_list +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa priority list to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_priority_list_id" id="proposed_wa_priority_list"
-                                    @change="filterWAPriorityCategories($event)">
-                                    <option :value="null" disabled>Select the appropriate WA Priority List</option>
-                                    <option v-for="option in wa_priority_lists" :value="option.id"
-                                        v-bind:key="option.id">
+                                <select
+                                    id="proposed_wa_priority_list"
+                                    v-model="
+                                        conservation_status_obj.wa_priority_list_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                    @change="filterWAPriorityCategories($event)"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Priority List
+                                    </option>
+                                    <option
+                                        v-for="option in wa_priority_lists"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_priority_list ? conservation_status_obj.wa_priority_list : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_priority_list
+                                            ? conservation_status_obj.wa_priority_list
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.wa_priority_list_id" class="row mb-3">
-                        <label for="proposed_wa_priority_category" class="col-sm-5 col-form-label">WA Priority
-                            Category:</label>
+                    <div
+                        v-if="conservation_status_obj.wa_priority_list_id"
+                        class="row mb-3"
+                    >
+                        <label
+                            for="proposed_wa_priority_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Priority Category:</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="wa_priority_categories && wa_priority_categories.length > 0 && conservation_status_obj.wa_priority_category_id && !wa_priority_categories.map((d) => d.id).includes(conservation_status_obj.wa_priority_category_id)">
-                                    <input type="text" v-if="conservation_status_obj.wa_priority_category"
+                                    v-if="
+                                        wa_priority_categories &&
+                                        wa_priority_categories.length > 0 &&
+                                        conservation_status_obj.wa_priority_category_id &&
+                                        !wa_priority_categories
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.wa_priority_category_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.wa_priority_category
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.wa_priority_category + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.wa_priority_category +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change wa priority category to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.wa_priority_category_id"
-                                    id="proposed_wa_priority_category">
-                                    <option :value="null" disabled>Select the appropriate WA Priority Category</option>
-                                    <option v-for="option in wa_priority_categories" :value="option.id"
-                                        v-bind:key="option.id">
+                                <select
+                                    id="proposed_wa_priority_category"
+                                    v-model="
+                                        conservation_status_obj.wa_priority_category_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate WA Priority
+                                        Category
+                                    </option>
+                                    <option
+                                        v-for="option in wa_priority_categories"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.wa_priority_category ? conservation_status_obj.wa_priority_category : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.wa_priority_category
+                                            ? conservation_status_obj.wa_priority_category
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_commonwealth_conservation_category"
-                            class="col-sm-5 col-form-label">Commonwealth
-                            Conservation
-                            Category:</label>
+                        <label
+                            for="proposed_commonwealth_conservation_category"
+                            class="col-sm-5 col-form-label"
+                            >Commonwealth Conservation Category:</label
+                        >
                         <div class="col-sm-7">
                             <template v-if="!isReadOnly">
                                 <template
-                                    v-if="commonwealth_conservation_categories && commonwealth_conservation_categories.length > 0 && conservation_status_obj.commonwealth_conservation_category_id && !commonwealth_conservation_categories.map((d) => d.id).includes(conservation_status_obj.commonwealth_conservation_category_id)">
-                                    <input type="text" v-if="conservation_status_obj.commonwealth_conservation_category"
+                                    v-if="
+                                        commonwealth_conservation_categories &&
+                                        commonwealth_conservation_categories.length >
+                                            0 &&
+                                        conservation_status_obj.commonwealth_conservation_category_id &&
+                                        !commonwealth_conservation_categories
+                                            .map((d) => d.id)
+                                            .includes(
+                                                conservation_status_obj.commonwealth_conservation_category_id
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            conservation_status_obj.commonwealth_conservation_category
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="conservation_status_obj.commonwealth_conservation_category + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            conservation_status_obj.commonwealth_conservation_category +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
-                                        Change commonwealth conservation list to:
+                                        Change commonwealth conservation list
+                                        to:
                                     </div>
                                 </template>
-                                <select :disabled="isReadOnly" class="form-select"
-                                    v-model="conservation_status_obj.commonwealth_conservation_category_id"
-                                    id="proposed_commonwealth_conservation_category">
-                                    <option :value="null" disabled>Select the appropriate Commonwealth Conservation
-                                        Category
+                                <select
+                                    id="proposed_commonwealth_conservation_category"
+                                    v-model="
+                                        conservation_status_obj.commonwealth_conservation_category_id
+                                    "
+                                    :disabled="isReadOnly"
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Select the appropriate Commonwealth
+                                        Conservation Category
                                     </option>
-                                    <option v-for="option in commonwealth_conservation_categories" :value="option.id"
-                                        v-bind:key="option.id">
+                                    <option
+                                        v-for="option in commonwealth_conservation_categories"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
                                         {{ option.code }} - {{ option.label }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="true"
-                                    :value="conservation_status_obj.commonwealth_conservation_category ? conservation_status_obj.commonwealth_conservation_category : 'N/A'" />
+                                <input
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="true"
+                                    :value="
+                                        conservation_status_obj.commonwealth_conservation_category
+                                            ? conservation_status_obj.commonwealth_conservation_category
+                                            : 'N/A'
+                                    "
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_other_conservation_assessment" class="col-sm-5 col-form-label">Other
-                            Conservation Assessment:</label>
+                        <label
+                            for="proposed_other_conservation_assessment"
+                            class="col-sm-5 col-form-label"
+                            >Other Conservation Assessment:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="isReadOnly" type="text" class="form-control"
+                            <input
                                 id="proposed_other_conservation_assessment"
-                                :placeholder="isReadOnly ? 'N/A' : 'Enter Other Conservation Assessment Details if Applicable'"
-                                v-model="conservation_status_obj.other_conservation_assessment" />
+                                v-model="
+                                    conservation_status_obj.other_conservation_assessment
+                                "
+                                :disabled="isReadOnly"
+                                type="text"
+                                class="form-control"
+                                :placeholder="
+                                    isReadOnly
+                                        ? 'N/A'
+                                        : 'Enter Other Conservation Assessment Details if Applicable'
+                                "
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="proposed_conservation_criteria" class="col-sm-5 col-form-label">Conservation
-                            Criteria:</label>
+                        <label
+                            for="proposed_conservation_criteria"
+                            class="col-sm-5 col-form-label"
+                            >Conservation Criteria:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="isReadOnly" type="text" class="form-control"
+                            <input
                                 id="proposed_conservation_criteria"
-                                :placeholder="isReadOnly ? 'N/A' : 'Enter Conservation Criteria if Applicable'"
-                                v-model="conservation_status_obj.conservation_criteria" />
+                                v-model="
+                                    conservation_status_obj.conservation_criteria
+                                "
+                                :disabled="isReadOnly"
+                                type="text"
+                                class="form-control"
+                                :placeholder="
+                                    isReadOnly
+                                        ? 'N/A'
+                                        : 'Enter Conservation Criteria if Applicable'
+                                "
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="comment" class="col-sm-5 col-form-label fw-bold">Comments <span
-                                class="text-danger">*</span></label>
+                        <label
+                            for="comment"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >Comments <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-7">
-                            <textarea :disabled="isReadOnly" class="form-control" rows="3" id="comment" placeholder=""
-                                v-model="conservation_status_obj.comment" />
+                            <textarea
+                                id="comment"
+                                v-model="conservation_status_obj.comment"
+                                :disabled="isReadOnly"
+                                class="form-control"
+                                rows="3"
+                                placeholder=""
+                            />
                         </div>
                     </div>
                     <div v-if="!is_external" class="row mb-3">
-                        <label for="conservation_status_under_review" class="col-sm-6 col-form-label">Is there a
-                            Conservation Status
-                            proposal under review?</label>
+                        <label
+                            for="conservation_status_under_review"
+                            class="col-sm-6 col-form-label"
+                            >Is there a Conservation Status proposal under
+                            review?</label
+                        >
                         <div class="col-sm-6 d-flex align-items-center">
                             <div class="form-check form-check-inline">
-                                Yes <input disabled type="radio" id="conservation_status_under_review_yes"
-                                    class="form-check-input" name="conservation_status_under_review"
-                                    v-model="isConservationStatusUnderReview" :value="true" />
+                                Yes
+                                <input
+                                    id="conservation_status_under_review_yes"
+                                    v-model="isConservationStatusUnderReview"
+                                    disabled
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="conservation_status_under_review"
+                                    :value="true"
+                                />
                             </div>
                             <div class="form-check form-check-inline">
-                                No <input disabled type="radio" id="conservation_status_under_review_no"
-                                    class="form-check-input" name="conservation_status_under_review"
-                                    v-model="isConservationStatusUnderReview" :value="false" />
+                                No
+                                <input
+                                    id="conservation_status_under_review_no"
+                                    v-model="isConservationStatusUnderReview"
+                                    disabled
+                                    type="radio"
+                                    class="form-check-input"
+                                    name="conservation_status_under_review"
+                                    :value="false"
+                                />
                             </div>
                             <div
-                                v-if="conservation_status_obj.conservation_status_under_review && conservation_status_obj.id != conservation_status_obj.conservation_status_under_review.id">
+                                v-if="
+                                    conservation_status_obj.conservation_status_under_review &&
+                                    conservation_status_obj.id !=
+                                        conservation_status_obj
+                                            .conservation_status_under_review.id
+                                "
+                            >
                                 <div>
-                                    <a :href="`/internal/conservation-status/${conservation_status_obj.conservation_status_under_review.id}`"
-                                        target="_blank" class="btn btn-primary">{{
-                                            conservation_status_obj.conservation_status_under_review.conservation_status_number
-                                        }}<i class="bi bi-box-arrow-up-right ps-2"></i></a>
+                                    <a
+                                        :href="`/internal/conservation-status/${conservation_status_obj.conservation_status_under_review.id}`"
+                                        target="_blank"
+                                        class="btn btn-primary"
+                                        >{{
+                                            conservation_status_obj
+                                                .conservation_status_under_review
+                                                .conservation_status_number
+                                        }}<i
+                                            class="bi bi-box-arrow-up-right ps-2"
+                                        ></i
+                                    ></a>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </template>
-                <template v-if="canViewCurrentList && conservation_status_obj.current_conservation_status">
+                <template
+                    v-if="
+                        canViewCurrentList &&
+                        conservation_status_obj.current_conservation_status
+                    "
+                >
                     <div class="row border-top pt-3">
-                        <h5 class="text-muted mb-4">Current Conservation
-                            Status</h5>
+                        <h5 class="text-muted mb-4">
+                            Current Conservation Status
+                        </h5>
                     </div>
                     <div class="row mb-3">
-                        <label for="conservation_status_number" class="col-sm-5 col-form-label">Conservation Status
-                            Number:</label>
+                        <label
+                            for="conservation_status_number"
+                            class="col-sm-5 col-form-label"
+                            >Conservation Status Number:</label
+                        >
                         <div class="col-sm-7">
-                            <a :href="`/internal/conservation-status/${conservation_status_obj.current_conservation_status.id}`"
-                                target="_blank" class="btn btn-primary">{{
-                                    conservation_status_obj.current_conservation_status.conservation_status_number }}<i
-                                    class="bi bi-box-arrow-up-right ps-2"></i></a>
+                            <a
+                                :href="`/internal/conservation-status/${conservation_status_obj.current_conservation_status.id}`"
+                                target="_blank"
+                                class="btn btn-primary"
+                                >{{
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .conservation_status_number
+                                }}<i class="bi bi-box-arrow-up-right ps-2"></i
+                            ></a>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_legislative_list_id"
-                        class="row mb-3">
-                        <label for="current_wa_legislative_list" class="col-sm-5 col-form-label">WA Legislative
-                            List:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_legislative_list_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_legislative_list"
+                            class="col-sm-5 col-form-label"
+                            >WA Legislative List:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_legislative_list_id"
-                                id="current_wa_legislative_list" @change="filterWALegislativeCategories($event)">
-                                <option v-for="option in wa_legislative_lists" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_wa_legislative_list"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_legislative_list_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                                @change="filterWALegislativeCategories($event)"
+                            >
+                                <option
+                                    v-for="option in wa_legislative_lists"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_legislative_category_id"
-                        class="row mb-3">
-                        <label for="current_wa_legislative_category" class="col-sm-5 col-form-label">WA Legislative
-                            Category:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_legislative_category_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_legislative_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Legislative Category:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_legislative_category_id"
-                                id="current_wa_legislative_category">
-                                <option v-for="option in wa_legislative_categories" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_wa_legislative_category"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_legislative_category_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in wa_legislative_categories"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.iucn_version_id" class="row mb-3">
-                        <label for="current_iucn_version" class="col-sm-5 col-form-label">IUCN Version:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .iucn_version_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_iucn_version"
+                            class="col-sm-5 col-form-label"
+                            >IUCN Version:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.iucn_version_id"
-                                id="current_iucn_version">
-                                <option v-for="option in iucn_versions" :value="option.id" v-bind:key="option.id">
+                            <select
+                                id="current_iucn_version"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .iucn_version_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in iucn_versions"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_priority_list_id"
-                        class="row mb-3">
-                        <label for="current_wa_priority_list" class="col-sm-5 col-form-label">WA Priority List:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_priority_list_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_priority_list"
+                            class="col-sm-5 col-form-label"
+                            >WA Priority List:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_priority_list_id"
-                                id="current_wa_priority_list" @change="filterWAPriorityCategories($event)">
-                                <option v-for="option in wa_priority_lists" :value="option.id" v-bind:key="option.id">
+                            <select
+                                id="current_wa_priority_list"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_priority_list_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                                @change="filterWAPriorityCategories($event)"
+                            >
+                                <option
+                                    v-for="option in wa_priority_lists"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.wa_priority_category_id"
-                        class="row mb-3">
-                        <label for="current_wa_priority_category" class="col-sm-5 col-form-label">WA Priority
-                            Category:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .wa_priority_category_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_wa_priority_category"
+                            class="col-sm-5 col-form-label"
+                            >WA Priority Category:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.wa_priority_category_id"
-                                id="current_wa_priority_category">
-                                <option v-for="option in wa_priority_categories" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_wa_priority_category"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .wa_priority_category_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in wa_priority_categories"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.commonwealth_conservation_category_id"
-                        class="row mb-3">
-                        <label for="current_commonwealth_conservation_category"
-                            class="col-sm-5 col-form-label">Commonwealth
-                            Conservation List:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .commonwealth_conservation_category_id
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_commonwealth_conservation_category"
+                            class="col-sm-5 col-form-label"
+                            >Commonwealth Conservation List:</label
+                        >
                         <div class="col-sm-7">
-                            <select :disabled="true" class="form-select"
-                                v-model="conservation_status_obj.current_conservation_status.commonwealth_conservation_category_id"
-                                id="current_commonwealth_conservation_category">
-                                <option v-for="option in commonwealth_conservation_categories" :value="option.id"
-                                    v-bind:key="option.id">
+                            <select
+                                id="current_commonwealth_conservation_category"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .commonwealth_conservation_category_id
+                                "
+                                :disabled="true"
+                                class="form-select"
+                            >
+                                <option
+                                    v-for="option in commonwealth_conservation_categories"
+                                    :key="option.id"
+                                    :value="option.id"
+                                >
                                     {{ option.code }}
                                 </option>
                             </select>
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.other_conservation_assessment"
-                        class="row mb-3">
-                        <label for="current_other_conservation_assessment" class="col-sm-5 col-form-label">Other
-                            Conservation Assessment:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .other_conservation_assessment
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_other_conservation_assessment"
+                            class="col-sm-5 col-form-label"
+                            >Other Conservation Assessment:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="true" type="text" class="form-control"
+                            <input
                                 id="current_other_conservation_assessment"
-                                v-model="conservation_status_obj.current_conservation_status.other_conservation_assessment" />
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .other_conservation_assessment
+                                "
+                                :disabled="true"
+                                type="text"
+                                class="form-control"
+                            />
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.conservation_criteria"
-                        class="row mb-3">
-                        <label for="current_conservation_criteria" class="col-sm-5 col-form-label">Conservation
-                            Criteria:</label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .conservation_criteria
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="current_conservation_criteria"
+                            class="col-sm-5 col-form-label"
+                            >Conservation Criteria:</label
+                        >
                         <div class="col-sm-7">
-                            <input :disabled="true" type="text" class="form-control" id="current_conservation_criteria"
-                                v-model="conservation_status_obj.current_conservation_status.conservation_criteria" />
+                            <input
+                                id="current_conservation_criteria"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status
+                                        .conservation_criteria
+                                "
+                                :disabled="true"
+                                type="text"
+                                class="form-control"
+                            />
                         </div>
                     </div>
-                    <div v-if="conservation_status_obj.current_conservation_status.comment" class="row mb-3">
-                        <label for="comment" class="col-sm-5 col-form-label fw-bold">Comments <span
-                                class="text-danger">*</span></label>
+                    <div
+                        v-if="
+                            conservation_status_obj.current_conservation_status
+                                .comment
+                        "
+                        class="row mb-3"
+                    >
+                        <label
+                            for="comment"
+                            class="col-sm-5 col-form-label fw-bold"
+                            >Comments <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-7">
-                            <textarea :disabled="true" class="form-control" rows="3" id="current_comment"
-                                v-model="conservation_status_obj.current_conservation_status.comment" />
+                            <textarea
+                                id="current_comment"
+                                v-model="
+                                    conservation_status_obj
+                                        .current_conservation_status.comment
+                                "
+                                :disabled="true"
+                                class="form-control"
+                                rows="3"
+                            />
                         </div>
                     </div>
                 </template>
                 <template v-if="!is_external && isStatusApproved">
                     <div class="row border-top pt-3 pb-3">
-                        <label for="" class="col-sm-5 col-form-label">Approval Document:</label>
+                        <label for="" class="col-sm-5 col-form-label"
+                            >Approval Document:</label
+                        >
                         <div class="col-sm-7">
                             <p class="col-form-label">
-                                <template v-if="conservation_status_obj.conservation_status_approval_document">
-                                    <strong><a :href="conservation_status_obj.conservation_status_approval_document[1]"
-                                            target="_blank">{{
-                                                conservation_status_obj.conservation_status_approval_document[0]
-                                            }}</a></strong>
+                                <template
+                                    v-if="
+                                        conservation_status_obj.conservation_status_approval_document
+                                    "
+                                >
+                                    <strong
+                                        ><a
+                                            :href="
+                                                conservation_status_obj
+                                                    .conservation_status_approval_document[1]
+                                            "
+                                            target="_blank"
+                                            >{{
+                                                conservation_status_obj
+                                                    .conservation_status_approval_document[0]
+                                            }}</a
+                                        ></strong
+                                    >
                                 </template>
-                                <template v-else>No approval document uploaded</template>
+                                <template v-else
+                                    >No approval document uploaded</template
+                                >
                             </p>
                         </div>
                     </div>
                 </template>
-                <template v-if="!is_external && !conservation_status_obj.can_user_edit">
+                <template
+                    v-if="
+                        !is_external && !conservation_status_obj.can_user_edit
+                    "
+                >
                     <div class="row border-top pt-3 pb-0 mb-0">
-                        <CollapsibleComponent component_title="Assessment Comments" ref="assessment_comments"
-                            :collapsed="true" style="margin-bottom: 0">
+                        <CollapsibleComponent
+                            ref="assessment_comments"
+                            component_title="Assessment Comments"
+                            :collapsed="true"
+                            style="margin-bottom: 0"
+                        >
                             <div class="row mb-0 pb-0">
                                 <div class="col rounded">
-                                    <div class="row" v-if="deficiencyVisibility">
+                                    <div
+                                        v-if="deficiencyVisibility"
+                                        class="row"
+                                    >
                                         <div class="col">
                                             <div class="form-floating m-3">
-                                                <textarea :disabled="deficiency_readonly" class="form-control"
-                                                    id="assessor_deficiencies" placeholder="Deficiency Comments"
-                                                    v-model="conservation_status_obj.deficiency_data" />
-                                                <label for="assessor_deficiencies" class="form-label">Deficiency
-                                                    Comments</label>
+                                                <textarea
+                                                    id="assessor_deficiencies"
+                                                    v-model="
+                                                        conservation_status_obj.deficiency_data
+                                                    "
+                                                    :disabled="
+                                                        deficiency_readonly
+                                                    "
+                                                    class="form-control"
+                                                    placeholder="Deficiency Comments"
+                                                />
+                                                <label
+                                                    for="assessor_deficiencies"
+                                                    class="form-label"
+                                                    >Deficiency Comments</label
+                                                >
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="row" v-if="assessorCommentVisibility">
+                                    <div
+                                        v-if="assessorCommentVisibility"
+                                        class="row"
+                                    >
                                         <div class="col">
                                             <div class="form-floating m-3 mt-1">
-                                                <textarea :disabled="assessor_comment_readonly" class="form-control"
-                                                    rows="3" id="assessor_comment" placeholder="Assessor Comments"
-                                                    v-model="conservation_status_obj.assessor_data" />
-                                                <label for="" class="col-sm-4 col-form-label">Assessor Comments</label>
+                                                <textarea
+                                                    id="assessor_comment"
+                                                    v-model="
+                                                        conservation_status_obj.assessor_data
+                                                    "
+                                                    :disabled="
+                                                        assessor_comment_readonly
+                                                    "
+                                                    class="form-control"
+                                                    rows="3"
+                                                    placeholder="Assessor Comments"
+                                                />
+                                                <label
+                                                    for=""
+                                                    class="col-sm-4 col-form-label"
+                                                    >Assessor Comments</label
+                                                >
                                             </div>
                                         </div>
                                     </div>
-                                    <div v-if="referral_comments_boxes.length > 0">
+                                    <div
+                                        v-if="
+                                            referral_comments_boxes.length > 0
+                                        "
+                                    >
                                         <div>
                                             <div class="row mt-2">
                                                 <div class="col ms-3">
-                                                    <h6 class="text-muted">Referral Comments</h6>
+                                                    <h6 class="text-muted">
+                                                        Referral Comments
+                                                    </h6>
                                                 </div>
                                             </div>
                                             <template v-if="ref.box_view">
-                                                <div v-for="ref in referral_comments_boxes" class="row mb-3">
+                                                <div
+                                                    v-for="ref in referral_comments_boxes"
+                                                    class="row mb-3"
+                                                >
                                                     <div class="col">
-                                                        <div class="form-floating m-3 mt-1">
-                                                            <textarea v-if='!ref.readonly' :disabled="true"
-                                                                :id="ref.name" :name="ref.name"
+                                                        <div
+                                                            class="form-floating m-3 mt-1"
+                                                        >
+                                                            <textarea
+                                                                v-if="
+                                                                    !ref.readonly
+                                                                "
+                                                                :id="ref.name"
+                                                                v-model="
+                                                                    referral.referral_comment
+                                                                "
+                                                                :disabled="true"
+                                                                :name="ref.name"
                                                                 class="form-control referral-comment-box"
-                                                                :placeholder="ref.label"
-                                                                v-model="referral.referral_comment" />
-                                                            <textarea v-else :disabled="ref.readonly" :name="ref.name"
-                                                                :value="ref.value || ''"
+                                                                :placeholder="
+                                                                    ref.label
+                                                                "
+                                                            />
+                                                            <textarea
+                                                                v-else
+                                                                :disabled="
+                                                                    ref.readonly
+                                                                "
+                                                                :name="ref.name"
+                                                                :value="
+                                                                    ref.value ||
+                                                                    ''
+                                                                "
                                                                 class="form-control referral-comment-box"
-                                                                :placeholder="ref.label" />
-                                                            <label :for="ref.name" class="form-label">{{ ref.label
-                                                                }}</label>
+                                                                :placeholder="
+                                                                    ref.label
+                                                                "
+                                                            />
+                                                            <label
+                                                                :for="ref.name"
+                                                                class="form-label"
+                                                                >{{
+                                                                    ref.label
+                                                                }}</label
+                                                            >
                                                         </div>
                                                     </div>
                                                 </div>
@@ -623,40 +1476,46 @@
 
 <script>
 import FormSection from '@/components/forms/section_toggle.vue';
-import CollapsibleComponent from '@/components/forms/collapsible_component.vue'
-import {
-    api_endpoints,
-}
-    from '@/utils/hooks'
+import CollapsibleComponent from '@/components/forms/collapsible_component.vue';
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
     name: 'SpeciesStatus',
+    components: {
+        FormSection,
+        CollapsibleComponent,
+    },
     props: {
         conservation_status_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         referral: {
             type: Object,
-            required: false
+            required: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         canEditStatus: {
             type: Boolean,
-            default: true
+            default: true,
         },
     },
     emits: ['saveConservationStatus'],
     data: function () {
         let vm = this;
         return {
-            scientific_name_lookup: 'scientific_name_lookup' + vm.conservation_status_obj.id,
-            select_scientific_name: 'select_scientific_name' + vm.conservation_status_obj.id,
+            scientific_name_lookup:
+                'scientific_name_lookup' + vm.conservation_status_obj.id,
+            select_scientific_name:
+                'select_scientific_name' + vm.conservation_status_obj.id,
             isShowComment: false,
-            isFauna: vm.conservation_status_obj.group_type === 'fauna' ? true : false,
+            isFauna:
+                vm.conservation_status_obj.group_type === 'fauna'
+                    ? true
+                    : false,
             cs_profile_dict: {},
             wa_legislative_lists: [],
             wa_legislative_categories: [],
@@ -670,31 +1529,42 @@ export default {
             referral_comments_boxes: [],
             species_display: '',
             taxon_previous_name: '',
-        }
-    },
-    components: {
-        FormSection,
-        CollapsibleComponent
+        };
     },
     computed: {
         show_administrative_information: function () {
-            return !this.is_external &&
+            return (
+                !this.is_external &&
                 this.conservation_status_obj.species_taxonomy_id &&
-                this.conservation_status_obj.processing_status != 'Draft';
+                this.conservation_status_obj.processing_status != 'Draft'
+            );
         },
         show_proposed_conservation_status: function () {
             return this.conservation_status_obj.species_taxonomy_id;
         },
         show_listing_and_review_due_date: function () {
-            return this.conservation_status_obj.listing_date ||
+            return (
+                this.conservation_status_obj.listing_date ||
                 this.conservation_status_obj.review_due_date ||
-                this.conservation_status_obj.processing_status == 'With Assessor';
+                this.conservation_status_obj.processing_status ==
+                    'With Assessor'
+            );
         },
         listing_and_review_due_date_disabled: function () {
-            return this.isReadOnly || !['With Assessor', 'Deferred', 'Unlocked'].includes(this.conservation_status_obj.processing_status)
+            return (
+                this.isReadOnly ||
+                !['With Assessor', 'Deferred', 'Unlocked'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            );
         },
         approval_level_disabled: function () {
-            return this.isReadOnly || !['With Assessor', 'With Referral'].includes(this.conservation_status_obj.processing_status);
+            return (
+                this.isReadOnly ||
+                !['With Assessor', 'With Referral'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            );
         },
         deficiencyVisibility: function () {
             return this.conservation_status_obj.assessor_mode.assessor_box_view;
@@ -706,7 +1576,11 @@ export default {
             let has_value = false;
             for (var i = 0; i < this.referral_comments_boxes.length; i++) {
                 if (this.referral_comments_boxes[i].hasOwnProperty('value')) {
-                    if (this.referral_comments_boxes[i].value != null && this.referral_comments_boxes[i].value != undefined && this.referral_comments_boxes[i].value != '') {
+                    if (
+                        this.referral_comments_boxes[i].value != null &&
+                        this.referral_comments_boxes[i].value != undefined &&
+                        this.referral_comments_boxes[i].value != ''
+                    ) {
                         has_value = true;
                     }
                 }
@@ -714,16 +1588,28 @@ export default {
             return has_value;
         },
         isStatusApproved: function () {
-            return this.conservation_status_obj.processing_status == 'Approved' ? true : false;
+            return this.conservation_status_obj.processing_status == 'Approved'
+                ? true
+                : false;
         },
         isAssignedOfficer: function () {
-            if (['With Assessor', 'With Referral', 'Deferred'].includes(this.conservation_status_obj.processing_status)) {
-                return Boolean(this.conservation_status_obj.assigned_officer) &&
-                    this.conservation_status_obj.assigned_officer == this.conservation_status_obj.current_assessor.id;
+            if (
+                ['With Assessor', 'With Referral', 'Deferred'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            ) {
+                return (
+                    Boolean(this.conservation_status_obj.assigned_officer) &&
+                    this.conservation_status_obj.assigned_officer ==
+                        this.conservation_status_obj.current_assessor.id
+                );
             }
             if (this.conservation_status_obj.processing_status != 'Draft') {
-                return Boolean(this.conservation_status_obj.assigned_approver) &&
-                    this.conservation_status_obj.assigned_approver == this.conservation_status_obj.current_assessor.id;
+                return (
+                    Boolean(this.conservation_status_obj.assigned_approver) &&
+                    this.conservation_status_obj.assigned_approver ==
+                        this.conservation_status_obj.current_assessor.id
+                );
             }
             return false;
         },
@@ -731,18 +1617,29 @@ export default {
             if (this.is_external) {
                 return !this.conservation_status_obj.can_user_edit;
             } else if (
-                this.conservation_status_obj.processing_status == 'With Referral' &&
+                this.conservation_status_obj.processing_status ==
+                    'With Referral' &&
                 this.referral
             ) {
                 return true;
             } else {
-                if (['Ready For Agenda', 'Approved', 'Closed', 'DeListed', 'Discarded'].includes(this.conservation_status_obj.processing_status)) {
+                if (
+                    [
+                        'Ready For Agenda',
+                        'Approved',
+                        'Closed',
+                        'DeListed',
+                        'Discarded',
+                    ].includes(this.conservation_status_obj.processing_status)
+                ) {
                     return true;
                 }
                 if (
-                    (
-                        this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                        this.isAssignedOfficer) || this.conservation_status_obj.internal_user_edit) {
+                    (this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess &&
+                        this.isAssignedOfficer) ||
+                    this.conservation_status_obj.internal_user_edit
+                ) {
                     return false;
                 }
             }
@@ -750,69 +1647,144 @@ export default {
             return true;
         },
         conservation_list_proposed: function () {
-            return !(['Approved', 'DeListed', 'Declined', 'Closed', 'Unlocked'].includes(this.conservation_status_obj.processing_status))
+            return ![
+                'Approved',
+                'DeListed',
+                'Declined',
+                'Closed',
+                'Unlocked',
+            ].includes(this.conservation_status_obj.processing_status);
         },
         canViewCurrentList: function () {
-            return (this.conservation_status_obj.processing_status == 'Approved' || this.conservation_status_obj.processing_status == 'DeListed') ? false : true;
+            return this.conservation_status_obj.processing_status ==
+                'Approved' ||
+                this.conservation_status_obj.processing_status == 'DeListed'
+                ? false
+                : true;
         },
         isConservationStatusUnderReview: function () {
-            return Boolean(this.conservation_status_obj.conservation_status_under_review);
+            return Boolean(
+                this.conservation_status_obj.conservation_status_under_review
+            );
         },
         deficiency_readonly: function () {
             return !this.is_external &&
                 !this.conservation_status_obj.can_user_edit &&
-                this.conservation_status_obj.assessor_mode.assessor_level == 'assessor' &&
+                this.conservation_status_obj.assessor_mode.assessor_level ==
+                    'assessor' &&
                 this.conservation_status_obj.assessor_mode.has_assessor_mode &&
-                !this.conservation_status_obj.assessor_mode.status_without_assessor ? false : true;
+                !this.conservation_status_obj.assessor_mode
+                    .status_without_assessor
+                ? false
+                : true;
         },
         assessor_comment_readonly: function () {
             return !this.is_external &&
                 !this.conservation_status_obj.can_user_edit &&
-                this.conservation_status_obj.assessor_mode.assessor_level == 'assessor' &&
+                this.conservation_status_obj.assessor_mode.assessor_level ==
+                    'assessor' &&
                 this.conservation_status_obj.assessor_mode.has_assessor_mode &&
-                !this.conservation_status_obj.assessor_mode.status_without_assessor ? false : true
+                !this.conservation_status_obj.assessor_mode
+                    .status_without_assessor
+                ? false
+                : true;
         },
     },
+    created: async function () {
+        let vm = this;
+        let action = this.$route.query.action;
+        let dict_url =
+            action == 'view'
+                ? api_endpoints.cs_profile_dict +
+                  '?group_type=' +
+                  vm.conservation_status_obj.group_type +
+                  '&action=' +
+                  action
+                : api_endpoints.cs_profile_dict +
+                  '?group_type=' +
+                  vm.conservation_status_obj.group_type;
+        fetch(dict_url).then(
+            async (response) => {
+                vm.cs_profile_dict = await response.json();
+                vm.wa_legislative_lists =
+                    vm.cs_profile_dict.wa_legislative_lists;
+                vm.wa_legislative_categories =
+                    vm.cs_profile_dict.wa_legislative_categories;
+                vm.iucn_versions = vm.cs_profile_dict.iucn_versions;
+                vm.wa_priority_lists = vm.cs_profile_dict.wa_priority_lists;
+                vm.wa_priority_categories =
+                    vm.cs_profile_dict.wa_priority_categories;
+                vm.commonwealth_conservation_categories =
+                    vm.cs_profile_dict.commonwealth_conservation_categories;
+                vm.change_codes = vm.cs_profile_dict.active_change_codes;
+                this.getSpeciesDisplay();
+                this.filterWALegislativeCategories();
+                this.filterWAPriorityCategories();
+                if (!vm.is_external) {
+                    this.generateReferralCommentBoxes();
+                }
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    },
+    mounted: function () {
+        let vm = this;
+        if (!this.is_external && vm.$refs.assessment_comments) {
+            vm.$refs.assessment_comments.show_warning_icon(false);
+        }
+        vm.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+        });
+    },
     methods: {
         approvalLevelChanged: function () {
             this.conservation_status_obj.effective_from = null;
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $('#' + vm.select_scientific_name),
-                'theme': 'bootstrap-5',
-                allowClear: true,
-                placeholder: 'Search for the Scientific Name of the Species',
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.conservation_status_obj.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder:
+                        'Search for the Scientific Name of the Species',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id:
+                                    vm.conservation_status_obj.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on('select2:select', function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data;
-                    vm.conservation_status_obj.species_taxonomy_id = data.id
+                    vm.conservation_status_obj.species_taxonomy_id = data.id;
                     vm.species_display = data.text;
                     vm.taxon_previous_name = data.taxon_previous_name;
                     vm.$emit('saveConservationStatus');
-                }).
-                on('select2:unselect', function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.conservation_status_obj.species_taxonomy_id = null
+                    vm.conservation_status_obj.species_taxonomy_id = null;
                     vm.species_display = '';
                     vm.taxon_previous_name = '';
-                }).
-                on('select2:open', function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
@@ -825,25 +1797,32 @@ export default {
         getSpeciesDisplay: function () {
             let vm = this;
             if (vm.conservation_status_obj.species_taxonomy_id != null) {
-                let species_display_url = api_endpoints.species_display + '?taxon_id=' + vm.conservation_status_obj.species_taxonomy_id
+                let species_display_url =
+                    api_endpoints.species_display +
+                    '?taxon_id=' +
+                    vm.conservation_status_obj.species_taxonomy_id;
                 fetch(species_display_url).then(async (response) => {
-                        const data = await response.json();
-                        var newOption = new Option(data.name, data.id, false, true);
-                        $('#' + vm.scientific_name_lookup).append(newOption);
-                        vm.species_display = data.name
-                        vm.taxon_previous_name = data.taxon_previous_name
-                    })
+                    const data = await response.json();
+                    var newOption = new Option(data.name, data.id, false, true);
+                    $('#' + vm.scientific_name_lookup).append(newOption);
+                    vm.species_display = data.name;
+                    vm.taxon_previous_name = data.taxon_previous_name;
+                });
             }
         },
         filterWALegislativeCategories: function (event) {
             this.$nextTick(() => {
                 if (event) {
-                    this.conservation_status_obj.wa_legislative_category_id = null;
+                    this.conservation_status_obj.wa_legislative_category_id =
+                        null;
                 }
 
-                this.filtered_wa_legislative_categories = this.wa_legislative_categories.filter((choice) => {
-                    return choice.list_ids.includes(this.conservation_status_obj.wa_legislative_list_id);
-                });
+                this.filtered_wa_legislative_categories =
+                    this.wa_legislative_categories.filter((choice) => {
+                        return choice.list_ids.includes(
+                            this.conservation_status_obj.wa_legislative_list_id
+                        );
+                    });
             });
         },
         filterWAPriorityCategories: function (event) {
@@ -852,32 +1831,39 @@ export default {
                     this.conservation_status_obj.wa_priority_category_id = null;
                 }
 
-                this.filtered_wa_priority_categories = this.wa_priority_categories.filter((choice) => {
-                    return choice.list_ids.includes(this.conservation_status_obj.wa_priority_list_id);
-                });
+                this.filtered_wa_priority_categories =
+                    this.wa_priority_categories.filter((choice) => {
+                        return choice.list_ids.includes(
+                            this.conservation_status_obj.wa_priority_list_id
+                        );
+                    });
             });
         },
         generateReferralCommentBoxes: function () {
-            var box_visibility = this.conservation_status_obj.assessor_mode.assessor_box_view
-            var assessor_mode = this.conservation_status_obj.assessor_mode.assessor_level
+            var box_visibility =
+                this.conservation_status_obj.assessor_mode.assessor_box_view;
+            var assessor_mode =
+                this.conservation_status_obj.assessor_mode.assessor_level;
             if (!this.conservation_status_obj.can_user_edit) {
                 var current_referral_present = false;
                 $.each(this.conservation_status_obj.referrals, (i, v) => {
                     var referral_name = `comment-field-Referral-${v.referral.email}`;
-                    var referral_visibility = assessor_mode == 'referral' &&
-                        this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                        this.referral.referral == v.referral.id ? false : true;
+                    var referral_visibility =
+                        assessor_mode == 'referral' &&
+                        this.conservation_status_obj.assessor_mode
+                            .assessor_can_assess &&
+                        this.referral.referral == v.referral.id
+                            ? false
+                            : true;
                     var referral_label = `${v.referral.fullname}`;
                     var referral_comment_val = `${v.referral_comment}`;
-                    this.referral_comments_boxes.push(
-                        {
-                            'box_view': box_visibility,
-                            'name': referral_name,
-                            'label': referral_label,
-                            'readonly': referral_visibility,
-                            'value': referral_comment_val,
-                        }
-                    )
+                    this.referral_comments_boxes.push({
+                        box_view: box_visibility,
+                        name: referral_name,
+                        label: referral_label,
+                        readonly: referral_visibility,
+                        value: referral_comment_val,
+                    });
                 });
             }
         },
@@ -895,40 +1881,7 @@ export default {
             this.$emit('saveConservationStatus');
         },
     },
-    created: async function () {
-        let vm = this;
-        let action = this.$route.query.action;
-        let dict_url = action == 'view' ? api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type + '&action=' + action :
-            api_endpoints.cs_profile_dict + '?group_type=' + vm.conservation_status_obj.group_type
-        fetch(dict_url).then(async (response) => {
-            vm.cs_profile_dict = await response.json();
-            vm.wa_legislative_lists = vm.cs_profile_dict.wa_legislative_lists;
-            vm.wa_legislative_categories = vm.cs_profile_dict.wa_legislative_categories;
-            vm.iucn_versions = vm.cs_profile_dict.iucn_versions;
-            vm.wa_priority_lists = vm.cs_profile_dict.wa_priority_lists;
-            vm.wa_priority_categories = vm.cs_profile_dict.wa_priority_categories;
-            vm.commonwealth_conservation_categories = vm.cs_profile_dict.commonwealth_conservation_categories;
-            vm.change_codes = vm.cs_profile_dict.active_change_codes;
-            this.getSpeciesDisplay();
-            this.filterWALegislativeCategories();
-            this.filterWAPriorityCategories();
-            if (!vm.is_external) {
-                this.generateReferralCommentBoxes();
-            }
-        }, (error) => {
-            console.log(error);
-        })
-    },
-    mounted: function () {
-        let vm = this;
-        if (!this.is_external && vm.$refs.assessment_comments) {
-            vm.$refs.assessment_comments.show_warning_icon(false);
-        }
-        vm.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-        });
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -948,13 +1901,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
index 88053378..e4f89102 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
@@ -1,192 +1,346 @@
 <template id="cs_communities_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
-                    <div class="form-group" id="select_community_id">
-                        <label for="cs_community_id_lookup">Community ID:</label>
-                        <select id="cs_community_id_lookup" name="cs_community_id_lookup" ref="cs_community_id_lookup"
-                            class="form-control" />
+                    <div id="select_community_id" class="form-group">
+                        <label for="cs_community_id_lookup"
+                            >Community ID:</label
+                        >
+                        <select
+                            id="cs_community_id_lookup"
+                            ref="cs_community_id_lookup"
+                            name="cs_community_id_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_community_name">
-                        <label for="cs_community_name_lookup">Community Name:</label>
-                        <select id="cs_community_name_lookup" name="cs_community_name_lookup"
-                            ref="cs_community_name_lookup" class="form-control" />
+                    <div id="select_community_name" class="form-group">
+                        <label for="cs_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="cs_community_name_lookup"
+                            ref="cs_community_name_lookup"
+                            name="cs_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="change-type">Change Type:</label>
 
-                        <select id="change-type" class="form-select" v-model="filterCSCommunityChangeCode">
+                        <select
+                            id="change-type"
+                            v-model="filterCSCommunityChangeCode"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="change_code in change_codes" :value="change_code.id">{{ change_code.code }}
+                            <option
+                                v-for="change_code in change_codes"
+                                :value="change_code.id"
+                            >
+                                {{ change_code.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-list">WA Legislative List:</label>
-                        <select id="wa-legislative-list" class="form-select"
-                            v-model="filterCSCommunityWALegislativeList">
+                        <label for="wa-legislative-list"
+                            >WA Legislative List:</label
+                        >
+                        <select
+                            id="wa-legislative-list"
+                            v-model="filterCSCommunityWALegislativeList"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_lists" :value="list.id">{{ list.code }}</option>
+                            <option
+                                v-for="list in wa_legislative_lists"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-category">WA Legislative Category:</label>
-                        <select id="wa-legislative-category" class="form-select"
-                            v-model="filterCSCommunityWALegislativeCategory">
+                        <label for="wa-legislative-category"
+                            >WA Legislative Category:</label
+                        >
+                        <select
+                            id="wa-legislative-category"
+                            v-model="filterCSCommunityWALegislativeCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_legislative_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-priority-category">WA Priority Category:</label>
-                        <select id="wa-priority-category" class="form-select"
-                            v-model="filterCSCommunityWAPriorityCategory">
+                        <label for="wa-priority-category"
+                            >WA Priority Category:</label
+                        >
+                        <select
+                            id="wa-priority-category"
+                            v-model="filterCSCommunityWAPriorityCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_priority_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_priority_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="commonwealth-relevance">Commonwealth Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="commonwealth-relevance"
+                            >Commonwealth Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="commonwealth-relevance"
-                                v-model="filterCSCommunityCommonwealthRelevance" true-value="true" false-value="false">
+                            <input
+                                id="commonwealth-relevance"
+                                v-model="filterCSCommunityCommonwealthRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="international-relevance">International Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="international-relevance"
+                            >International Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="international-relevance"
-                                v-model="filterCSCommunityInternationalRelevance" true-value="true" false-value="false">
+                            <input
+                                id="international-relevance"
+                                v-model="
+                                    filterCSCommunityInternationalRelevance
+                                "
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
-                <div class="col-md-3" v-show="!is_for_agenda">
+                <div v-show="!is_for_agenda" class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSCommunityApplicationStatus">
+                        <select
+                            v-model="filterCSCommunityApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value" :class="status.className"><template v-if="status.className == 'optionChild'">&nbsp;&nbsp;</template>{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                                :class="status.className"
+                            >
+                                <template
+                                    v-if="status.className == 'optionChild'"
+                                    >&nbsp;&nbsp;</template
+                                >{{ status.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_assessor">
+                    <div id="select_assessor" class="form-group">
                         <label for="cs_assessor_lookup">Assessor:</label>
-                        <select id="cs_assessor_lookup" name="cs_assessor_lookup" ref="cs_assessor_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_assessor_lookup"
+                            ref="cs_assessor_lookup"
+                            name="cs_assessor_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_submitter">
+                    <div id="select_submitter" class="form-group">
                         <label for="cs_submitter_lookup">Submitter:</label>
-                        <select id="cs_submitter_lookup" name="cs_submitter_lookup" ref="cs_submitter_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_submitter_lookup"
+                            ref="cs_submitter_lookup"
+                            name="cs_submitter_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="submitter-category">Submitter Category:</label>
-                        <select id="submitter-category" class="form-select"
-                            v-model="filterCSCommunitySubmitterCategory">
+                        <label for="submitter-category"
+                            >Submitter Category:</label
+                        >
+                        <select
+                            id="submitter-category"
+                            v-model="filterCSCommunitySubmitterCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="submitter_category in submitter_categories" :value="submitter_category.id">{{
-                                submitter_category.name }}
+                            <option
+                                v-for="submitter_category in submitter_categories"
+                                :value="submitter_category.id"
+                            >
+                                {{ submitter_category.name }}
                             </option>
                         </select>
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="" class="form-label px-2">Effective From Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="" class="form-label px-2"
+                        >Effective From Date Range:</label
+                    >
                     <div class="input-group px-2 mb-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_effective_from_date"
-                            v-model="filterCSFromCommunityEffectiveFromDate">
+                        <input
+                            id="from_effective_from_date"
+                            v-model="filterCSFromCommunityEffectiveFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_effective_from_date"
-                            v-model="filterCSToCommunityEffectiveFromDate">
+                        <input
+                            id="to_effective_from_date"
+                            v-model="filterCSToCommunityEffectiveFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="" class="form-label px-2">Effective To Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="" class="form-label px-2"
+                        >Effective To Date Range:</label
+                    >
                     <div class="input-group px-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_effective_to_date"
-                            v-model="filterCSFromCommunityEffectiveToDate">
+                        <input
+                            id="from_effective_to_date"
+                            v-model="filterCSFromCommunityEffectiveToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_effective_to_date"
-                            v-model="filterCSToCommunityEffectiveToDate">
+                        <input
+                            id="to_effective_to_date"
+                            v-model="filterCSToCommunityEffectiveToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="from_review_due_date" class="form-label px-2">Review Due Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="from_review_due_date" class="form-label px-2"
+                        >Review Due Date Range:</label
+                    >
                     <div class="input-group px-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_review_due_date"
-                            v-model="filterCSFromCommunityReviewDueDate">
+                        <input
+                            id="from_review_due_date"
+                            v-model="filterCSFromCommunityReviewDueDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_review_due_date"
-                            v-model="filterCSToCommunityReviewDueDate">
+                        <input
+                            id="to_review_due_date"
+                            v-model="filterCSToCommunityReviewDueDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
 
-        <div v-if="addCommunityCSVisibility && is_for_agenda == false" class="col-md-12">
+        <div
+            v-if="addCommunityCSVisibility && is_for_agenda == false"
+            class="col-md-12"
+        >
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 "
-                    @click.prevent="createCommunityConservationStatus"><i class="fa-solid fa-circle-plus"></i> Propose
-                    Conservation Status</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createCommunityConservationStatus"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Propose Conservation
+                    Status
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="cs_communities_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="cs_communities_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
             <div v-if="communityConservationStatusHistoryId">
-                <CommunityConservationStatusHistory ref="community_conservation_status_history"
+                <CommunityConservationStatusHistory
+                    ref="community_conservation_status_history"
                     :key="communityConservationStatusHistoryId"
-                    :conservation-status-id="communityConservationStatusHistoryId" :community-id="communityHistoryId"
-                    :conservation-list-id="listHistoryId" />
+                    :conservation-status-id="
+                        communityConservationStatusHistoryId
+                    "
+                    :community-id="communityHistoryId"
+                    :conservation-list-id="listHistoryId"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import CommunityConservationStatusHistory from '../internal/conservation_status/community_conservation_status_history.vue';
 
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'ConservationStatusCommunityTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        CommunityConservationStatusHistory,
+    },
     props: {
         level: {
             type: String,
@@ -194,34 +348,34 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         // when the datable need to be shown for agenda_items in meeting check this variable is true
         is_for_agenda: {
             type: Boolean,
-            default: false
+            default: false,
         },
         // for adding agendaitems for the meeting_obj.id
         meeting_obj: {
             type: Object,
-            required: false
+            required: false,
         },
         filterCSCommunityMigratedId_cache: {
             type: String,
@@ -323,58 +477,140 @@ export default {
             listHistoryId: null,
 
             // selected values for filtering
-            filterCSCommunityMigratedId: sessionStorage.getItem(this.filterCSCommunityMigratedId_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityMigratedId_cache) : 'all',
+            filterCSCommunityMigratedId: sessionStorage.getItem(
+                this.filterCSCommunityMigratedId_cache
+            )
+                ? sessionStorage.getItem(this.filterCSCommunityMigratedId_cache)
+                : 'all',
 
-            filterCSCommunityName: sessionStorage.getItem(this.filterCSCommunityName_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityName_cache) : 'all',
+            filterCSCommunityName: sessionStorage.getItem(
+                this.filterCSCommunityName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSCommunityName_cache)
+                : 'all',
 
-            filterCSCommunityChangeCode: sessionStorage.getItem(this.filterCSCommunityChangeCode_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityChangeCode_cache) : 'all',
+            filterCSCommunityChangeCode: sessionStorage.getItem(
+                this.filterCSCommunityChangeCode_cache
+            )
+                ? sessionStorage.getItem(this.filterCSCommunityChangeCode_cache)
+                : 'all',
 
-            filterCSCommunityWALegislativeList: sessionStorage.getItem(this.filterCSCommunityWALegislativeList_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityWALegislativeList_cache) : 'all',
+            filterCSCommunityWALegislativeList: sessionStorage.getItem(
+                this.filterCSCommunityWALegislativeList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSCommunityWALegislativeList_cache
+                  )
+                : 'all',
 
-            filterCSCommunityWALegislativeCategory: sessionStorage.getItem(this.filterCSCommunityWALegislativeCategory_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityWALegislativeCategory_cache) : 'all',
+            filterCSCommunityWALegislativeCategory: sessionStorage.getItem(
+                this.filterCSCommunityWALegislativeCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSCommunityWALegislativeCategory_cache
+                  )
+                : 'all',
 
-            filterCSCommunityWAPriorityCategory: sessionStorage.getItem(this.filterCSCommunityWAPriorityCategory_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityWAPriorityCategory_cache) : 'all',
+            filterCSCommunityWAPriorityCategory: sessionStorage.getItem(
+                this.filterCSCommunityWAPriorityCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSCommunityWAPriorityCategory_cache
+                  )
+                : 'all',
 
-            filterCSCommunityCommonwealthRelevance: sessionStorage.getItem(this.filterCSCommunityCommonwealthRelevance_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityCommonwealthRelevance_cache) : "false",
+            filterCSCommunityCommonwealthRelevance: sessionStorage.getItem(
+                this.filterCSCommunityCommonwealthRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSCommunityCommonwealthRelevance_cache
+                  )
+                : 'false',
 
-            filterCSCommunityInternationalRelevance: sessionStorage.getItem(this.filterCSCommunityInternationalRelevance_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityInternationalRelevance_cache) : "false",
+            filterCSCommunityInternationalRelevance: sessionStorage.getItem(
+                this.filterCSCommunityInternationalRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSCommunityInternationalRelevance_cache
+                  )
+                : 'false',
 
             // filterCSCommunityApplicationStatus: sessionStorage.getItem(this.filterCSCommunityApplicationStatus_cache) ?
             //     sessionStorage.getItem(this.filterCSCommunityApplicationStatus_cache) : 'approved',
-            filterCSCommunityApplicationStatus: sessionStorage.getItem(this.filterCSCommunityApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityApplicationStatus_cache) : (this.is_for_agenda ? 'ready_for_agenda' : 'approved'),
+            filterCSCommunityApplicationStatus: sessionStorage.getItem(
+                this.filterCSCommunityApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSCommunityApplicationStatus_cache
+                  )
+                : this.is_for_agenda
+                  ? 'ready_for_agenda'
+                  : 'approved',
 
-            filterCSCommunityAssessor: sessionStorage.getItem(this.filterCSCommunityAssessor_cache) ?
-                sessionStorage.getItem(this.filterCSCommunityAssessor_cache) : 'all',
+            filterCSCommunityAssessor: sessionStorage.getItem(
+                this.filterCSCommunityAssessor_cache
+            )
+                ? sessionStorage.getItem(this.filterCSCommunityAssessor_cache)
+                : 'all',
 
-            filterCSCommunitySubmitter: sessionStorage.getItem(this.filterCSCommunitySubmitter_cache) ?
-                sessionStorage.getItem(this.filterCSCommunitySubmitter_cache) : 'all',
+            filterCSCommunitySubmitter: sessionStorage.getItem(
+                this.filterCSCommunitySubmitter_cache
+            )
+                ? sessionStorage.getItem(this.filterCSCommunitySubmitter_cache)
+                : 'all',
 
-            filterCSCommunitySubmitterCategory: sessionStorage.getItem(this.filterCSCommunitySubmitterCategory_cache) ?
-                sessionStorage.getItem(this.filterCSCommunitySubmitterCategory_cache) : 'all',
+            filterCSCommunitySubmitterCategory: sessionStorage.getItem(
+                this.filterCSCommunitySubmitterCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSCommunitySubmitterCategory_cache
+                  )
+                : 'all',
 
-            filterCSFromCommunityEffectiveFromDate: sessionStorage.getItem(this.filterCSFromCommunityEffectiveFromDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromCommunityEffectiveFromDate_cache) : '',
-            filterCSToCommunityEffectiveFromDate: sessionStorage.getItem(this.filterCSToCommunityEffectiveFromDate_cache) ?
-                sessionStorage.getItem(this.filterCSToCommunityEffectiveFromDate_cache) : '',
+            filterCSFromCommunityEffectiveFromDate: sessionStorage.getItem(
+                this.filterCSFromCommunityEffectiveFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromCommunityEffectiveFromDate_cache
+                  )
+                : '',
+            filterCSToCommunityEffectiveFromDate: sessionStorage.getItem(
+                this.filterCSToCommunityEffectiveFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToCommunityEffectiveFromDate_cache
+                  )
+                : '',
 
-            filterCSFromCommunityEffectiveToDate: sessionStorage.getItem(this.filterCSFromCommunityEffectiveToDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromCommunityEffectiveToDate_cache) : '',
-            filterCSToCommunityEffectiveToDate: sessionStorage.getItem(this.filterCSToCommunityEffectiveToDate_cache) ?
-                sessionStorage.getItem(this.filterCSToCommunityEffectiveToDate_cache) : '',
+            filterCSFromCommunityEffectiveToDate: sessionStorage.getItem(
+                this.filterCSFromCommunityEffectiveToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromCommunityEffectiveToDate_cache
+                  )
+                : '',
+            filterCSToCommunityEffectiveToDate: sessionStorage.getItem(
+                this.filterCSToCommunityEffectiveToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToCommunityEffectiveToDate_cache
+                  )
+                : '',
 
-            filterCSFromCommunityReviewDueDate: sessionStorage.getItem(this.filterCSFromCommunityReviewDueDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromCommunityReviewDueDate_cache) : '',
-            filterCSToCommunityReviewDueDate: sessionStorage.getItem(this.filterCSToCommunityReviewDueDate_cache) ?
-                sessionStorage.getItem(this.filterCSToCommunityReviewDueDate_cache) : '',
+            filterCSFromCommunityReviewDueDate: sessionStorage.getItem(
+                this.filterCSFromCommunityReviewDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromCommunityReviewDueDate_cache
+                  )
+                : '',
+            filterCSToCommunityReviewDueDate: sessionStorage.getItem(
+                this.filterCSToCommunityReviewDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToCommunityReviewDueDate_cache
+                  )
+                : '',
 
             //Filter list for Community select box
             filterListsCommunities: {},
@@ -386,136 +622,80 @@ export default {
             wa_priority_categories: [],
 
             processing_statuses: [
-            { value: 'draft', name: 'Draft', className: '' },
+                { value: 'draft', name: 'Draft', className: '' },
                 { value: 'discarded', name: 'Discarded', className: '' },
-                { value: 'awaiting_assessor_action', name: 'Awaiting Assessor Action', className: 'optionGroup' },
-                { value: 'with_assessor', name: 'With Assessor', className: 'optionChild' },
-                { value: 'with_referral', name: 'With Referral', className: 'optionChild' },
-                { value: 'deferred', name: 'Deferred', className: 'optionChild' },
-                { value: 'awaiting_approver_action', name: 'Awaiting Approver Action', className: 'optionGroup' },
-                { value: 'proposed_for_agenda', name: 'Proposed For Agenda', className: 'optionChild' },
-                { value: 'ready_for_agenda', name: 'Ready For Agenda', className: 'optionChild' },
-                { value: 'on_agenda', name: 'On Agenda', className: 'optionChild' },
-                { value: 'with_approver', name: 'Proposed DeListed', className: 'optionChild' },
-                { value: 'inactive', name: 'Inactive', className: 'optionGroup' },
-                { value: 'declined', name: 'Declined', className: 'optionChild' },
+                {
+                    value: 'awaiting_assessor_action',
+                    name: 'Awaiting Assessor Action',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'with_assessor',
+                    name: 'With Assessor',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'with_referral',
+                    name: 'With Referral',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'deferred',
+                    name: 'Deferred',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'awaiting_approver_action',
+                    name: 'Awaiting Approver Action',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'proposed_for_agenda',
+                    name: 'Proposed For Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'ready_for_agenda',
+                    name: 'Ready For Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'on_agenda',
+                    name: 'On Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'with_approver',
+                    name: 'Proposed DeListed',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'inactive',
+                    name: 'Inactive',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'declined',
+                    name: 'Declined',
+                    className: 'optionChild',
+                },
                 { value: 'closed', name: 'Closed', className: 'optionChild' },
-                { value: 'delisted', name: 'DeListed', className: 'optionChild' },
+                {
+                    value: 'delisted',
+                    name: 'DeListed',
+                    className: 'optionChild',
+                },
                 { value: 'approved', name: 'Approved', className: '' },
-
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        CommunityConservationStatusHistory,
-    },
-    watch: {
-        filterCSCommunityMigratedId: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityMigratedId_cache, vm.filterCSCommunityMigratedId);
-        },
-        filterCSCommunityName: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityName_cache, vm.filterCSCommunityName);
-        },
-        filterCSFromCommunityEffectiveFromDate: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromCommunityEffectiveFromDate_cache, vm.filterCSFromCommunityEffectiveFromDate);
-        },
-        filterCSToCommunityEffectiveFromDate: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToCommunityEffectiveFromDate_cache, vm.filterCSToCommunityEffectiveFromDate);
-        },
-        filterCSFromCommunityEffectiveToDate: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromCommunityEffectiveToDate_cache, vm.filterCSFromCommunityEffectiveToDate);
-        },
-        filterCSToCommunityEffectiveToDate: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToCommunityEffectiveToDate_cache, vm.filterCSToCommunityEffectiveToDate);
-        },
-        filterCSFromCommunityReviewDueDate: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromCommunityReviewDueDate_cache, vm.filterCSFromCommunityReviewDueDate);
-        },
-        filterCSToCommunityReviewDueDate: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToCommunityReviewDueDate_cache, vm.filterCSToCommunityReviewDueDate);
-        },
-        filterCSCommunityApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityApplicationStatus_cache, vm.filterCSCommunityApplicationStatus);
-        },
-        filterCSCommunityChangeCode: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityChangeCode_cache, vm.filterCSCommunityChangeCode);
-        },
-        filterCSCommunityWALegislativeList: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityWALegislativeList_cache, vm.filterCSCommunityWALegislativeList);
-        },
-        filterCSCommunityWALegislativeCategory: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityWALegislativeCategory_cache, vm.filterCSCommunityWALegislativeCategory);
-        },
-        filterCSCommunityWAPriorityCategory: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityWAPriorityCategory_cache, vm.filterCSCommunityWAPriorityCategory);
-        },
-        filterCSCommunityCommonwealthRelevance: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityCommonwealthRelevance_cache, vm.filterCSCommunityCommonwealthRelevance);
-        },
-        filterCSCommunityInternationalRelevance: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityInternationalRelevance_cache, vm.filterCSCommunityInternationalRelevance);
-        },
-        filterCSCommunityAssessor: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunityAssessor_cache, vm.filterCSCommunityAssessor);
-        },
-        filterCSCommunitySubmitter: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunitySubmitter_cache, vm.filterCSCommunitySubmitter);
-        },
-        filterCSCommunitySubmitterCategory: function () {
-            let vm = this;
-            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSCommunitySubmitterCategory_cache, vm.filterCSCommunitySubmitterCategory);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         defaultApplicationStatus: function () {
             return this.is_for_agenda ? 'ready_for_agenda' : 'approved';
         },
         filterApplied: function () {
-            if (this.filterCSCommunityMigratedId === 'all' &&
+            if (
+                this.filterCSCommunityMigratedId === 'all' &&
                 this.filterCSCommunityName === 'all' &&
                 this.filterCSCommunityChangeCode === 'all' &&
                 this.filterCSCommunityWALegislativeList === 'all' &&
@@ -526,295 +706,316 @@ export default {
                 this.filterCSCommunityAssessor === 'all' &&
                 this.filterCSCommunitySubmitter === 'all' &&
                 this.filterCSCommunitySubmitterCategory === 'all' &&
-                this.filterCSCommunityApplicationStatus === this.defaultApplicationStatus &&
+                this.filterCSCommunityApplicationStatus ===
+                    this.defaultApplicationStatus &&
                 this.filterCSFromCommunityEffectiveFromDate === '' &&
                 this.filterCSToCommunityEffectiveFromDate === '' &&
                 this.filterCSFromCommunityEffectiveToDate === '' &&
                 this.filterCSToCommunityEffectiveToDate === '' &&
                 this.filterCSFromCommunityReviewDueDate === '' &&
-                this.filterCSToCommunityReviewDueDate === '') {
-                return false
+                this.filterCSToCommunityReviewDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_referral: function () {
             return this.level == 'referral';
         },
         addCommunityCSVisibility: function () {
-            return this.profile && this.profile.groups.find(
-                (i) => [
-                    constants.GROUPS.INTERNAL_CONTRIBUTORS
-                ].includes(i)
+            return (
+                this.profile &&
+                this.profile.groups.find((i) =>
+                    [constants.GROUPS.INTERNAL_CONTRIBUTORS].includes(i)
+                )
             );
         },
         datatable_headers: function () {
-            return ['Number', 'Community', 'Community Id', 'Community Name', 'Change Type', 'WA Priority List',
-                'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category', 'International Conservation',
+            return [
+                'Number',
+                'Community',
+                'Community Id',
+                'Community Name',
+                'Change Type',
+                'WA Priority List',
+                'WA Priority Category',
+                'WA Legislative List',
+                'WA Legislative Category',
+                'Commonwealth Conservation Category',
+                'International Conservation',
                 'Conservation Criteria',
-                'Submitter Name', 'Submitter Category', 'Submitter Organisation', 'Assessor Name', 'Effective From Date', 'Effective To Date', 'Review Due Date',
-                'Status', 'Action']
+                'Submitter Name',
+                'Submitter Category',
+                'Submitter Organisation',
+                'Assessor Name',
+                'Effective From Date',
+                'Effective To Date',
+                'Review Due Date',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             let vm = this;
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    let value = full.conservation_status_number
+                render: function (data, type, full) {
+                    let value = full.conservation_status_number;
                     if (full.is_new_contributor) {
-                        value += ' <span class="badge bg-warning">New Contributor</span>'
+                        value +=
+                            ' <span class="badge bg-warning">New Contributor</span>';
                     }
-                    return value
+                    return value;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_community_number: function () {
             return {
-                data: "community_number",
+                data: 'community_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.community_number
+                render: function (data, type, full) {
+                    return full.community_number;
                 },
-                name: "community__community_number",
-            }
+                name: 'community__community_number',
+            };
         },
         column_community_id: function () {
             return {
-                data: "community_migrated_id",
+                data: 'community_migrated_id',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "community__taxonomy__community_migrated_id",
-            }
+                name: 'community__taxonomy__community_migrated_id',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
                 //'createdCell': helpers.dtPopoverCellFn,
-                name: "community__taxonomy__community_name",
-            }
+                name: 'community__taxonomy__community_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.processing_status) {
                         return full.processing_status;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_region: function () {
             return {
-                data: "regions",
+                data: 'regions',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.regions) {
                         return full.regions;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "community__regions__name",
-            }
+                name: 'community__regions__name',
+            };
         },
         column_district: function () {
             return {
-                data: "districts",
+                data: 'districts',
                 orderable: true,
                 searchable: false, // handles by filter_queryset override method - class ProposalFilterBackend
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.districts) {
-                        return full.districts
+                        return full.districts;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "community__districts__name",
-            }
+                name: 'community__districts__name',
+            };
         },
         column_change_code: function () {
             return {
-                data: "change_code",
+                data: 'change_code',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "change_code__code",
-            }
+                name: 'change_code__code',
+            };
         },
         column_wa_priority_list: function () {
             return {
-                data: "wa_priority_list",
+                data: 'wa_priority_list',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_priority_list__code",
-            }
+                name: 'wa_priority_list__code',
+            };
         },
         column_wa_priority_category: function () {
             return {
-                data: "wa_priority_category",
+                data: 'wa_priority_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_priority_category__code",
-            }
+                name: 'wa_priority_category__code',
+            };
         },
         column_wa_legislative_list: function () {
             return {
-                data: "wa_legislative_list",
+                data: 'wa_legislative_list',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_legislative_list__code",
-            }
+                name: 'wa_legislative_list__code',
+            };
         },
         column_wa_legislative_category: function () {
             return {
-                data: "wa_legislative_category",
+                data: 'wa_legislative_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_legislative_category__code",
-            }
+                name: 'wa_legislative_category__code',
+            };
         },
         column_commonwealth_conservation_category: function () {
             return {
-                data: "commonwealth_conservation_category",
+                data: 'commonwealth_conservation_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "commonwealth_conservation_category",
-            }
+                name: 'commonwealth_conservation_category',
+            };
+        },
+        column_other_conservation_assessment: function () {
+            return {
+                data: 'other_conservation_assessment',
+                orderable: true,
+                searchable: true,
+                visible: true,
+                name: 'other_conservation_assessment',
+            };
         },
-        column_other_conservation_assessment:
-            function () {
-                return {
-                    data: "other_conservation_assessment",
-                    orderable: true,
-                    searchable: true,
-                    visible: true,
-                    name: "other_conservation_assessment",
-                }
-            },
         column_conservation_criteria: function () {
             return {
-                data: "conservation_criteria",
+                data: 'conservation_criteria',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "conservation_criteria",
-            }
+                name: 'conservation_criteria',
+            };
         },
         column_submitter_name: function () {
             return {
-                data: "submitter_name",
+                data: 'submitter_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "submitter_information__name",
-            }
+                name: 'submitter_information__name',
+            };
         },
         column_submitter_category: function () {
             return {
-                data: "submitter_category",
+                data: 'submitter_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "submitter_information__submitter_category__name",
-            }
+                name: 'submitter_information__submitter_category__name',
+            };
         },
         column_submitter_organisation: function () {
             return {
-                data: "submitter_organisation",
+                data: 'submitter_organisation',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "submitter_information__organisation",
-            }
+                name: 'submitter_information__organisation',
+            };
         },
         column_assessor_name: function () {
             return {
-                data: "assessor_name",
+                data: 'assessor_name',
                 orderable: true,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_effective_from: function () {
             return {
-                data: "effective_from",
+                data: 'effective_from',
                 orderable: true,
                 searchable: true, // handles by filter_queryset override method
                 visible: true,
-                name: "effective_from",
-            }
+                name: 'effective_from',
+            };
         },
         column_effective_to: function () {
             return {
-                data: "effective_to",
+                data: 'effective_to',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "effective_to",
-            }
+                name: 'effective_to',
+            };
         },
         column_review_due_date: function () {
             return {
-                data: "review_due_date",
+                data: 'review_due_date',
                 orderable: true,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
                 // 9. Action
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (vm.is_for_agenda == false) {
                         if (full.internal_user_edit) {
                             links += `<a href='/internal/conservation-status/${full.id}'>Continue</a><br/>`;
@@ -822,16 +1023,20 @@ export default {
                             links += `<a href='#' data-history-conservation-status-community='${full.id}'
                             data-history-community='${full.community_number}'
                             data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
-                        }
-                        else {
-                            if (full.assessor_process || full.approver_process) {
+                        } else {
+                            if (
+                                full.assessor_process ||
+                                full.approver_process
+                            ) {
                                 links += `<a href='/internal/conservation-status/${full.id}'>Process</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-community='${full.id}'
                                     data-history-community='${full.community_number}'
                                     data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
-                            }
-                            else {
-                                if (full.processing_status == constants.PROPOSAL_STATUS.DISCARDED.TEXT) {
+                            } else {
+                                if (
+                                    full.processing_status ==
+                                    constants.PROPOSAL_STATUS.DISCARDED.TEXT
+                                ) {
                                     links += `<a href='#' data-reinstate-conservation-status-community='${full.id}'>Reinstate</a><br/>`;
                                 }
                                 links += `<a href='/internal/conservation-status/${full.id}?action=view'>View</a><br/>`;
@@ -840,24 +1045,22 @@ export default {
                                 data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
                             }
                         }
-                    }
-                    else {
+                    } else {
                         if (vm.meeting_obj.agenda_items_arr.includes(full.id)) {
                             links += `<a>Added</a><br/>`;
-                        }
-                        else {
+                        } else {
                             links += `<a href='#${full.id}' data-add-to-agenda='${full.id}'>Add</a><br/>`;
                         }
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -866,7 +1069,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -875,9 +1078,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
 
             columns = [
                 vm.column_number,
@@ -901,59 +1104,79 @@ export default {
                 vm.column_review_due_date,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = true
+            ];
+            search = true;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
                     // adding extra params for Custom filtering
-                    "data": function (d) {
-                        d.filter_community_migrated_id = vm.filterCSCommunityMigratedId;
+                    data: function (d) {
+                        d.filter_community_migrated_id =
+                            vm.filterCSCommunityMigratedId;
                         d.filter_community_name = vm.filterCSCommunityName;
                         d.filter_group_type = vm.group_type_name;
                         d.filter_change_code = vm.filterCSCommunityChangeCode;
-                        d.filter_wa_legislative_list = vm.filterCSCommunityWALegislativeList;
-                        d.filter_wa_legislative_category = vm.filterCSCommunityWALegislativeCategory;
-                        d.filter_wa_priority_category = vm.filterCSCommunityWAPriorityCategory;
-                        d.filter_commonwealth_relevance = vm.filterCSCommunityCommonwealthRelevance;
-                        d.filter_international_relevance = vm.filterCSCommunityInternationalRelevance;
+                        d.filter_wa_legislative_list =
+                            vm.filterCSCommunityWALegislativeList;
+                        d.filter_wa_legislative_category =
+                            vm.filterCSCommunityWALegislativeCategory;
+                        d.filter_wa_priority_category =
+                            vm.filterCSCommunityWAPriorityCategory;
+                        d.filter_commonwealth_relevance =
+                            vm.filterCSCommunityCommonwealthRelevance;
+                        d.filter_international_relevance =
+                            vm.filterCSCommunityInternationalRelevance;
                         d.filter_assessor = vm.filterCSCommunityAssessor;
                         d.filter_submitter = vm.filterCSCommunitySubmitter;
-                        d.filter_submitter_category = vm.filterCSCommunitySubmitterCategory;
-                        d.filter_application_status = vm.filterCSCommunityApplicationStatus;
-                        d.filter_from_effective_from_date = vm.filterCSFromCommunityEffectiveFromDate;
-                        d.filter_to_effective_from_date = vm.filterCSToCommunityEffectiveFromDate;
-                        d.filter_from_effective_to_date = vm.filterCSFromCommunityEffectiveToDate;
-                        d.filter_to_effective_to_date = vm.filterCSToCommunityEffectiveToDate;
-                        d.filter_from_review_due_date = vm.filterCSFromCommunityReviewDueDate;
-                        d.filter_to_review_due_date = vm.filterCSToCommunityReviewDueDate;
-                    }
+                        d.filter_submitter_category =
+                            vm.filterCSCommunitySubmitterCategory;
+                        d.filter_application_status =
+                            vm.filterCSCommunityApplicationStatus;
+                        d.filter_from_effective_from_date =
+                            vm.filterCSFromCommunityEffectiveFromDate;
+                        d.filter_to_effective_from_date =
+                            vm.filterCSToCommunityEffectiveFromDate;
+                        d.filter_from_effective_to_date =
+                            vm.filterCSFromCommunityEffectiveToDate;
+                        d.filter_to_effective_to_date =
+                            vm.filterCSToCommunityEffectiveToDate;
+                        d.filter_from_review_due_date =
+                            vm.filterCSFromCommunityReviewDueDate;
+                        d.filter_to_review_due_date =
+                            vm.filterCSToCommunityReviewDueDate;
+                    },
                 },
                 //dom: 'lBfrtip',
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -966,182 +1189,494 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSCommunityMigratedId: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityMigratedId_cache,
+                vm.filterCSCommunityMigratedId
+            );
+        },
+        filterCSCommunityName: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityName_cache,
+                vm.filterCSCommunityName
+            );
+        },
+        filterCSFromCommunityEffectiveFromDate: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromCommunityEffectiveFromDate_cache,
+                vm.filterCSFromCommunityEffectiveFromDate
+            );
+        },
+        filterCSToCommunityEffectiveFromDate: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToCommunityEffectiveFromDate_cache,
+                vm.filterCSToCommunityEffectiveFromDate
+            );
+        },
+        filterCSFromCommunityEffectiveToDate: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromCommunityEffectiveToDate_cache,
+                vm.filterCSFromCommunityEffectiveToDate
+            );
+        },
+        filterCSToCommunityEffectiveToDate: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToCommunityEffectiveToDate_cache,
+                vm.filterCSToCommunityEffectiveToDate
+            );
+        },
+        filterCSFromCommunityReviewDueDate: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromCommunityReviewDueDate_cache,
+                vm.filterCSFromCommunityReviewDueDate
+            );
+        },
+        filterCSToCommunityReviewDueDate: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToCommunityReviewDueDate_cache,
+                vm.filterCSToCommunityReviewDueDate
+            );
+        },
+        filterCSCommunityApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityApplicationStatus_cache,
+                vm.filterCSCommunityApplicationStatus
+            );
+        },
+        filterCSCommunityChangeCode: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityChangeCode_cache,
+                vm.filterCSCommunityChangeCode
+            );
+        },
+        filterCSCommunityWALegislativeList: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityWALegislativeList_cache,
+                vm.filterCSCommunityWALegislativeList
+            );
+        },
+        filterCSCommunityWALegislativeCategory: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityWALegislativeCategory_cache,
+                vm.filterCSCommunityWALegislativeCategory
+            );
+        },
+        filterCSCommunityWAPriorityCategory: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityWAPriorityCategory_cache,
+                vm.filterCSCommunityWAPriorityCategory
+            );
+        },
+        filterCSCommunityCommonwealthRelevance: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityCommonwealthRelevance_cache,
+                vm.filterCSCommunityCommonwealthRelevance
+            );
+        },
+        filterCSCommunityInternationalRelevance: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityInternationalRelevance_cache,
+                vm.filterCSCommunityInternationalRelevance
+            );
+        },
+        filterCSCommunityAssessor: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunityAssessor_cache,
+                vm.filterCSCommunityAssessor
+            );
+        },
+        filterCSCommunitySubmitter: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunitySubmitter_cache,
+                vm.filterCSCommunitySubmitter
+            );
+        },
+        filterCSCommunitySubmitterCategory: function () {
+            let vm = this;
+            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSCommunitySubmitterCategory_cache,
+                vm.filterCSCommunitySubmitterCategory
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        if (
+            vm.profile &&
+            vm.profile.groups &&
+            vm.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS)
+        ) {
+            vm.processing_statuses.push({
+                value: 'discarded_by_me',
+                name: 'Discarded By Me',
+            });
         }
+        vm.fetchFilterLists();
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseCommunityNameLookup();
+            vm.initialiseCommunityIdLookup();
+            vm.initialiseAssessorLookup();
+            vm.initialiseSubmitterLookup();
+            vm.addEventListeners();
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterCSCommunityName') != 'all' &&
+                sessionStorage.getItem('filterCSCommunityName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSCommunityNameText'),
+                    vm.filterCSCommunityName,
+                    false,
+                    true
+                );
+                $('#cs_community_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSCommunityMigratedId') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSCommunityMigratedId') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSCommunityMigratedIdText'),
+                    vm.filterCSCommunityMigratedId,
+                    false,
+                    true
+                );
+                $('#cs_community_id_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id, list, community) {
             this.communityConservationStatusHistoryId = parseInt(id);
-            this.listHistoryId = list ? list : "List not specified";
-            this.communityHistoryId = community ? community : "not specified";
+            this.listHistoryId = list ? list : 'List not specified';
+            this.communityHistoryId = community ? community : 'not specified';
             this.uuid++;
             this.$nextTick(() => {
                 this.$refs.community_conservation_status_history.isModalOpen = true;
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_community_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_community_name"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.cs_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_community_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSCommunityName = data;
-                    sessionStorage.setItem("filterCSCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSCommunityName = 'all';
-                    sessionStorage.setItem("filterCSCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_community_name_lookup-results"]')
+                    sessionStorage.setItem('filterCSCommunityNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_community_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommunityIdLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_community_id_lookup).select2({
-                minimumInputLength: 1,
-                dropdownParent: $("#select_community_id"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community ID",
-                ajax: {
-                    url: api_endpoints.community_id_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.cs_community_id_lookup)
+                .select2({
+                    minimumInputLength: 1,
+                    dropdownParent: $('#select_community_id'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community ID',
+                    ajax: {
+                        url: api_endpoints.community_id_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSCommunityMigratedId = data;
-                    sessionStorage.setItem("filterCSCommunityMigratedIdText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSCommunityMigratedIdText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSCommunityMigratedId = 'all';
-                    sessionStorage.setItem("filterCSCommunityMigratedIdText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_community_id_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSCommunityMigratedIdText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_community_id_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseAssessorLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_assessor_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Search for Assessor",
-                ajax: {
-                    url: api_endpoints.users_api + '/get_department_users_ledger_id/',
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                        }
-                        return query;
+            $(vm.$refs.cs_assessor_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search for Assessor',
+                    ajax: {
+                        url:
+                            api_endpoints.users_api +
+                            '/get_department_users_ledger_id/',
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                            };
+                            return query;
+                        },
                     },
-                },
-            })
-                .on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.filterCSCommunityAssessor = data;
-                    sessionStorage.setItem("filterCSCommunityAssessorText", e.params.data.text);
+                    sessionStorage.setItem(
+                        'filterCSCommunityAssessorText',
+                        e.params.data.text
+                    );
                 })
-                .on("select2:unselect", function (e) {
+                .on('select2:unselect', function (e) {
                     vm.filterCSCommunityAssessor = 'all';
-                    sessionStorage.setItem("filterCSCommunityAssessorText", '');
+                    sessionStorage.setItem('filterCSCommunityAssessorText', '');
                 })
-                .on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_assessor_lookup-results"]')
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_assessor_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseSubmitterLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_submitter_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Search for Submitter",
-                ajax: {
-                    url: api_endpoints.users_api + '/get_users_ledger_id/',
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                        }
-                        return query;
+            $(vm.$refs.cs_submitter_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search for Submitter',
+                    ajax: {
+                        url: api_endpoints.users_api + '/get_users_ledger_id/',
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                            };
+                            return query;
+                        },
                     },
-                },
-            })
-                .on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.filterCSCommunitySubmitter = data;
-                    sessionStorage.setItem("filterCSCommunitySubmitterText", e.params.data.text);
+                    sessionStorage.setItem(
+                        'filterCSCommunitySubmitterText',
+                        e.params.data.text
+                    );
                 })
-                .on("select2:unselect", function (e) {
+                .on('select2:unselect', function (e) {
                     vm.selected_referral = null;
                     vm.filterCSCommunitySubmitter = 'all';
-                    sessionStorage.setItem("filterCSCommunitySubmitterText", '');
+                    sessionStorage.setItem(
+                        'filterCSCommunitySubmitterText',
+                        ''
+                    );
                 })
-                .on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_submitter_lookup-results"]')
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_submitter_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
 
-            fetch(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsCommunities = await response.json();
-                vm.communities_data_list = vm.filterListsCommunities.community_data_list;
-                vm.wa_legislative_lists = vm.filterListsCommunities.wa_legislative_lists;
-                vm.wa_legislative_categories = vm.filterListsCommunities.wa_legislative_categories;
-                vm.wa_priority_lists = vm.filterListsCommunities.wa_priority_lists;
-                vm.wa_priority_categories = vm.filterListsCommunities.wa_priority_categories;
-                vm.change_codes = vm.filterListsCommunities.change_codes;
-                vm.submitter_categories = vm.filterListsCommunities.submitter_categories;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.community_filter_dict +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsCommunities = await response.json();
+                    vm.communities_data_list =
+                        vm.filterListsCommunities.community_data_list;
+                    vm.wa_legislative_lists =
+                        vm.filterListsCommunities.wa_legislative_lists;
+                    vm.wa_legislative_categories =
+                        vm.filterListsCommunities.wa_legislative_categories;
+                    vm.wa_priority_lists =
+                        vm.filterListsCommunities.wa_priority_lists;
+                    vm.wa_priority_categories =
+                        vm.filterListsCommunities.wa_priority_categories;
+                    vm.change_codes = vm.filterListsCommunities.change_codes;
+                    vm.submitter_categories =
+                        vm.filterListsCommunities.submitter_categories;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createCommunityConservationStatus: async function () {
             swal.fire({
                 title: `Propose New Community Conservation Status`,
-                text: "Are you sure you want to propose a new community conservation status?",
-                icon: "question",
+                text: 'Are you sure you want to propose a new community conservation status?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Propose New Conservation Status',
                 reverseButtons: true,
@@ -1151,23 +1686,23 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newCommunityCSId = null
+                    let newCommunityCSId = null;
                     try {
-                        const createUrl = api_endpoints.conservation_status + "/";
+                        const createUrl =
+                            api_endpoints.conservation_status + '/';
                         let payload = new Object();
-                        payload.application_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.application_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
-                            headers: { 'Content-Type': 'application/json', },
+                            headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(payload),
                         });
                         const data = await response.json();
                         if (data) {
                             newCommunityCSId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -1180,9 +1715,9 @@ export default {
         discardCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Conservation Status Proposal",
-                text: "Are you sure you want to discard this proposal?",
-                icon: "question",
+                title: 'Discard Conservation Status Proposal',
+                text: 'Are you sure you want to discard this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Proposal',
                 customClass: {
@@ -1190,36 +1725,49 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your proposal has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_cs_proposal(
+                                conservation_status_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your proposal has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Conservation Status Proposal",
-                text: "Are you sure you want to reinstate this proposal?",
-                icon: "question",
+                title: 'Reinstate Conservation Status Proposal',
+                text: 'Are you sure you want to reinstate this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Proposal',
                 customClass: {
@@ -1227,29 +1775,42 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your proposal has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_cs_proposal(
+                                conservation_status_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your proposal has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addToMeetingAgenda: function (conservation_status_id) {
             let vm = this;
@@ -1257,79 +1818,76 @@ export default {
             payload.conservation_status_id = conservation_status_id;
             fetch(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json', },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                vm.meeting_obj.agenda_items_arr = await response.json();
-                vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                this.$emit('updateAgendaItems');
-            },
-                err => {
+            }).then(
+                async (response) => {
+                    vm.meeting_obj.agenda_items_arr = await response.json();
+                    vm.$refs.cs_communities_datatable.vmDataTable.ajax.reload(
+                        helpers.enablePopovers,
+                        false
+                    );
+                    this.$emit('updateAgendaItems');
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.cs_communities_datatable.vmDataTable.on('click', 'a[data-discard-cs-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-cs-proposal');
-                vm.discardCSProposal(id);
-            });
-            vm.$refs.cs_communities_datatable.vmDataTable.on('click', 'a[data-reinstate-conservation-status-community]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-conservation-status-community');
-                vm.reinstateCSProposal(id);
-            });
-            vm.$refs.cs_communities_datatable.vmDataTable.on('click', 'a[data-add-to-agenda]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-add-to-agenda');
-                vm.addToMeetingAgenda(id);
-            });
-            vm.$refs.cs_communities_datatable.vmDataTable.on('click', 'a[data-history-conservation-status-community]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-conservation-status-community');
-                var list = $(this).attr('data-history-conservation-list');
-                var community = $(this).attr('data-history-community');
-                vm.historyDocument(id, list, community);
-            });
-            vm.$refs.cs_communities_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.cs_communities_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-cs-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-cs-proposal');
+                    vm.discardCSProposal(id);
+                }
+            );
+            vm.$refs.cs_communities_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-conservation-status-community]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr(
+                        'data-reinstate-conservation-status-community'
+                    );
+                    vm.reinstateCSProposal(id);
+                }
+            );
+            vm.$refs.cs_communities_datatable.vmDataTable.on(
+                'click',
+                'a[data-add-to-agenda]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-add-to-agenda');
+                    vm.addToMeetingAgenda(id);
+                }
+            );
+            vm.$refs.cs_communities_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-conservation-status-community]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr(
+                        'data-history-conservation-status-community'
+                    );
+                    var list = $(this).attr('data-history-conservation-list');
+                    var community = $(this).attr('data-history-community');
+                    vm.historyDocument(id, list, community);
+                }
+            );
+            vm.$refs.cs_communities_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        if (vm.profile && vm.profile.groups && vm.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS)) {
-            vm.processing_statuses.push({ value: 'discarded_by_me', name: 'Discarded By Me' },);
-        }
-        vm.fetchFilterLists();
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseCommunityNameLookup();
-            vm.initialiseCommunityIdLookup();
-            vm.initialiseAssessorLookup();
-            vm.initialiseSubmitterLookup();
-            vm.addEventListeners();
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterCSCommunityName") != 'all' && sessionStorage.getItem("filterCSCommunityName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCSCommunityNameText"), vm.filterCSCommunityName, false, true);
-                $('#cs_community_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSCommunityMigratedId") != 'all' && sessionStorage.getItem("filterCSCommunityMigratedId") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCSCommunityMigratedIdText"), vm.filterCSCommunityMigratedId, false, true);
-                $('#cs_community_id_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
index b16e065d..a36704e1 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
@@ -1,208 +1,372 @@
 <template id="species_fauna_cs_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
-                    <div class="form-group" id="select_scientific_name">
-                        <label for="cs_scientific_name_lookup">Scientific Name:</label>
-                        <select id="cs_scientific_name_lookup" name="cs_scientific_name_lookup"
-                            ref="cs_scientific_name_lookup" class="form-control" />
+                    <div id="select_scientific_name" class="form-group">
+                        <label for="cs_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="cs_scientific_name_lookup"
+                            ref="cs_scientific_name_lookup"
+                            name="cs_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_common_name">
+                    <div id="select_common_name" class="form-group">
                         <label for="cs_common_name_lookup">Common Name:</label>
-                        <select id="cs_common_name_lookup" name="cs_common_name_lookup" ref="cs_common_name_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_common_name_lookup"
+                            ref="cs_common_name_lookup"
+                            name="cs_common_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_phylo_group">
+                    <div id="select_phylo_group" class="form-group">
                         <label for="cs_phylo_group_lookup">Phylo Group:</label>
-                        <select id="cs_phylo_group_lookup" name="cs_phylo_group_lookup" ref="cs_phylo_group_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_phylo_group_lookup"
+                            ref="cs_phylo_group_lookup"
+                            name="cs_phylo_group_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_family">
+                    <div id="select_family" class="form-group">
                         <label for="cs_family_lookup">Family:</label>
-                        <select id="cs_family_lookup" name="cs_family_lookup" ref="cs_family_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_family_lookup"
+                            ref="cs_family_lookup"
+                            name="cs_family_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_genera">
+                    <div id="select_genera" class="form-group">
                         <label for="cs_genera_lookup">Genera:</label>
-                        <select id="cs_genera_lookup" name="cs_genera_lookup" ref="cs_genera_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_genera_lookup"
+                            ref="cs_genera_lookup"
+                            name="cs_genera_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="change-type">Change Type:</label>
-                        <select id="change-type" class="form-select" v-model="filterCSFaunaChangeCode">
+                        <select
+                            id="change-type"
+                            v-model="filterCSFaunaChangeCode"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="change_code in change_codes" :value="change_code.id">{{ change_code.code }}
+                            <option
+                                v-for="change_code in change_codes"
+                                :value="change_code.id"
+                            >
+                                {{ change_code.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-list">WA Legislative List:</label>
-                        <select id="wa-legislative-list" class="form-select" v-model="filterCSFaunaWALegislativeList">
+                        <label for="wa-legislative-list"
+                            >WA Legislative List:</label
+                        >
+                        <select
+                            id="wa-legislative-list"
+                            v-model="filterCSFaunaWALegislativeList"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_lists" :value="list.id">{{ list.code }}</option>
+                            <option
+                                v-for="list in wa_legislative_lists"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-category">WA Legislative Category:</label>
-                        <select id="wa-legislative-category" class="form-select"
-                            v-model="filterCSFaunaWALegislativeCategory">
+                        <label for="wa-legislative-category"
+                            >WA Legislative Category:</label
+                        >
+                        <select
+                            id="wa-legislative-category"
+                            v-model="filterCSFaunaWALegislativeCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_legislative_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-priority-category">WA Priority Category:</label>
-                        <select id="wa-priority-category" class="form-select" v-model="filterCSFaunaWAPriorityCategory">
+                        <label for="wa-priority-category"
+                            >WA Priority Category:</label
+                        >
+                        <select
+                            id="wa-priority-category"
+                            v-model="filterCSFaunaWAPriorityCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_priority_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_priority_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="commonwealth-relevance">Commonwealth Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="commonwealth-relevance"
+                            >Commonwealth Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="commonwealth-relevance"
-                                v-model="filterCSFaunaCommonwealthRelevance" true-value="true" false-value="false">
+                            <input
+                                id="commonwealth-relevance"
+                                v-model="filterCSFaunaCommonwealthRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="international-relevance">International Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="international-relevance"
+                            >International Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="international-relevance"
-                                v-model="filterCSFaunaInternationalRelevance" true-value="true" false-value="false">
+                            <input
+                                id="international-relevance"
+                                v-model="filterCSFaunaInternationalRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
-                <div class="col-md-3" v-show="!is_for_agenda">
+                <div v-show="!is_for_agenda" class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSFaunaApplicationStatus">
+                        <select
+                            v-model="filterCSFaunaApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value" :class="status.className"><template v-if="status.className == 'optionChild'">&nbsp;&nbsp;</template>{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                                :class="status.className"
+                            >
+                                <template
+                                    v-if="status.className == 'optionChild'"
+                                    >&nbsp;&nbsp;</template
+                                >{{ status.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_assessor">
+                    <div id="select_assessor" class="form-group">
                         <label for="cs_assessor_lookup">Assessor:</label>
-                        <select id="cs_assessor_lookup" name="cs_assessor_lookup" ref="cs_assessor_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_assessor_lookup"
+                            ref="cs_assessor_lookup"
+                            name="cs_assessor_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_submitter">
+                    <div id="select_submitter" class="form-group">
                         <label for="cs_submitter_lookup">Submitter:</label>
-                        <select id="cs_submitter_lookup" name="cs_submitter_lookup" ref="cs_submitter_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_submitter_lookup"
+                            ref="cs_submitter_lookup"
+                            name="cs_submitter_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="submitter-category">Submitter Category:</label>
-                        <select id="submitter-category" class="form-select" v-model="filterCSFaunaSubmitterCategory">
+                        <label for="submitter-category"
+                            >Submitter Category:</label
+                        >
+                        <select
+                            id="submitter-category"
+                            v-model="filterCSFaunaSubmitterCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="submitter_category in submitter_categories" :value="submitter_category.id">{{
-                                submitter_category.name }}
+                            <option
+                                v-for="submitter_category in submitter_categories"
+                                :value="submitter_category.id"
+                            >
+                                {{ submitter_category.name }}
                             </option>
                         </select>
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="" class="form-label px-2">Effective From Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="" class="form-label px-2"
+                        >Effective From Date Range:</label
+                    >
                     <div class="input-group px-2 mb-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_effective_from_date"
-                            v-model="filterCSFromFaunaEffectiveFromDate">
+                        <input
+                            id="from_effective_from_date"
+                            v-model="filterCSFromFaunaEffectiveFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_effective_from_date"
-                            v-model="filterCSToFaunaEffectiveFromDate">
+                        <input
+                            id="to_effective_from_date"
+                            v-model="filterCSToFaunaEffectiveFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="" class="form-label px-2">Effective To Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="" class="form-label px-2"
+                        >Effective To Date Range:</label
+                    >
                     <div class="input-group px-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_effective_to_date"
-                            v-model="filterCSFromFaunaEffectiveToDate">
+                        <input
+                            id="from_effective_to_date"
+                            v-model="filterCSFromFaunaEffectiveToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_effective_to_date"
-                            v-model="filterCSToFaunaEffectiveToDate">
+                        <input
+                            id="to_effective_to_date"
+                            v-model="filterCSToFaunaEffectiveToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="from_review_due_date" class="form-label px-2">Review Due Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="from_review_due_date" class="form-label px-2"
+                        >Review Due Date Range:</label
+                    >
                     <div class="input-group px-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_review_due_date"
-                            v-model="filterCSFromFaunaReviewDueDate">
+                        <input
+                            id="from_review_due_date"
+                            v-model="filterCSFromFaunaReviewDueDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_review_due_date"
-                            v-model="filterCSToFaunaReviewDueDate">
+                        <input
+                            id="to_review_due_date"
+                            v-model="filterCSToFaunaReviewDueDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
 
-        <div v-if="addFaunaCSVisibility && is_for_agenda == false" class="col-md-12">
+        <div
+            v-if="addFaunaCSVisibility && is_for_agenda == false"
+            class="col-md-12"
+        >
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFaunaConservationStatus"><i
-                        class="fa-solid fa-circle-plus"></i> Propose Conservation Status</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFaunaConservationStatus"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Propose Conservation
+                    Status
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="fauna_cs_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="fauna_cs_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
             <div v-if="speciesConservationStatusHistoryId">
-                <SpeciesConservationStatusHistory ref="species_conservation_status_history"
+                <SpeciesConservationStatusHistory
+                    ref="species_conservation_status_history"
                     :key="speciesConservationStatusHistoryId"
-                    :conservation-status-id="speciesConservationStatusHistoryId" :species-id="speciesHistoryId"
-                    :conservation-list-id="listHistoryId" />
+                    :conservation-status-id="speciesConservationStatusHistoryId"
+                    :species-id="speciesHistoryId"
+                    :conservation-list-id="listHistoryId"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import SpeciesConservationStatusHistory from '../internal/conservation_status/species_conservation_status_history.vue';
 
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'ConservationStatusFaunaTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        SpeciesConservationStatusHistory,
+    },
     props: {
         level: {
             type: String,
@@ -210,34 +374,34 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         // when the datable need to be shown for agenda_items in meeting check this variable is true
         is_for_agenda: {
             type: Boolean,
-            default: false
+            default: false,
         },
         // for adding agendaitems for the meeting_obj.id
         meeting_obj: {
             type: Object,
-            required: false
+            required: false,
         },
         filterCSFaunaScientificName_cache: {
             type: String,
@@ -354,67 +518,160 @@ export default {
             listHistoryId: null,
 
             // selected values for filtering
-            filterCSFaunaScientificName: sessionStorage.getItem(this.filterCSFaunaScientificName_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaScientificName_cache) : 'all',
+            filterCSFaunaScientificName: sessionStorage.getItem(
+                this.filterCSFaunaScientificName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFaunaScientificName_cache)
+                : 'all',
 
-            filterCSFaunaCommonName: sessionStorage.getItem(this.filterCSFaunaCommonName_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaCommonName_cache) : 'all',
+            filterCSFaunaCommonName: sessionStorage.getItem(
+                this.filterCSFaunaCommonName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFaunaCommonName_cache)
+                : 'all',
 
-            filterCSFaunaPhylogeneticGroup: sessionStorage.getItem(this.filterCSFaunaPhylogeneticGroup_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaPhylogeneticGroup_cache) : 'all',
+            filterCSFaunaPhylogeneticGroup: sessionStorage.getItem(
+                this.filterCSFaunaPhylogeneticGroup_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaPhylogeneticGroup_cache
+                  )
+                : 'all',
 
-            filterCSFaunaFamily: sessionStorage.getItem(this.filterCSFaunaFamily_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaFamily_cache) : 'all',
+            filterCSFaunaFamily: sessionStorage.getItem(
+                this.filterCSFaunaFamily_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFaunaFamily_cache)
+                : 'all',
 
-            filterCSFaunaGenus: sessionStorage.getItem(this.filterCSFaunaGenus_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaGenus_cache) : 'all',
+            filterCSFaunaGenus: sessionStorage.getItem(
+                this.filterCSFaunaGenus_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFaunaGenus_cache)
+                : 'all',
 
-            filterCSFaunaChangeCode: sessionStorage.getItem(this.filterCSFaunaChangeCode_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaChangeCode_cache) : 'all',
+            filterCSFaunaChangeCode: sessionStorage.getItem(
+                this.filterCSFaunaChangeCode_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFaunaChangeCode_cache)
+                : 'all',
 
-            filterCSFaunaWALegislativeList: sessionStorage.getItem(this.filterCSFaunaWALegislativeList_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaWALegislativeList_cache) : 'all',
+            filterCSFaunaWALegislativeList: sessionStorage.getItem(
+                this.filterCSFaunaWALegislativeList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaWALegislativeList_cache
+                  )
+                : 'all',
 
-            filterCSFaunaWALegislativeCategory: sessionStorage.getItem(this.filterCSFaunaWALegislativeCategory_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaWALegislativeCategory_cache) : 'all',
+            filterCSFaunaWALegislativeCategory: sessionStorage.getItem(
+                this.filterCSFaunaWALegislativeCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaWALegislativeCategory_cache
+                  )
+                : 'all',
 
-            filterCSFaunaWAPriorityCategory: sessionStorage.getItem(this.filterCSFaunaWAPriorityCategory_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaWAPriorityCategory_cache) : 'all',
+            filterCSFaunaWAPriorityCategory: sessionStorage.getItem(
+                this.filterCSFaunaWAPriorityCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaWAPriorityCategory_cache
+                  )
+                : 'all',
 
-            filterCSFaunaCommonwealthRelevance: sessionStorage.getItem(this.filterCSFaunaCommonwealthRelevance_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaCommonwealthRelevance_cache) : "false",
+            filterCSFaunaCommonwealthRelevance: sessionStorage.getItem(
+                this.filterCSFaunaCommonwealthRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaCommonwealthRelevance_cache
+                  )
+                : 'false',
 
-            filterCSFaunaInternationalRelevance: sessionStorage.getItem(this.filterCSFaunaInternationalRelevance_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaInternationalRelevance_cache) : "false",
+            filterCSFaunaInternationalRelevance: sessionStorage.getItem(
+                this.filterCSFaunaInternationalRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaInternationalRelevance_cache
+                  )
+                : 'false',
 
-            filterCSFaunaAssessor: sessionStorage.getItem(this.filterCSFaunaAssessor_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaAssessor_cache) : 'all',
+            filterCSFaunaAssessor: sessionStorage.getItem(
+                this.filterCSFaunaAssessor_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFaunaAssessor_cache)
+                : 'all',
 
-            filterCSFaunaSubmitter: sessionStorage.getItem(this.filterCSFaunaSubmitter_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaSubmitter_cache) : 'all',
+            filterCSFaunaSubmitter: sessionStorage.getItem(
+                this.filterCSFaunaSubmitter_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFaunaSubmitter_cache)
+                : 'all',
 
-            filterCSFaunaSubmitterCategory: sessionStorage.getItem(this.filterCSFaunaSubmitterCategory_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaSubmitterCategory_cache) : 'all',
+            filterCSFaunaSubmitterCategory: sessionStorage.getItem(
+                this.filterCSFaunaSubmitterCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaSubmitterCategory_cache
+                  )
+                : 'all',
 
             //filterCSFaunaApplicationStatus: sessionStorage.getItem(this.filterCSFaunaApplicationStatus_cache) ?
             //    sessionStorage.getItem(this.filterCSFaunaApplicationStatus_cache) : 'approved',
-            filterCSFaunaApplicationStatus: sessionStorage.getItem(this.filterCSFaunaApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSFaunaApplicationStatus_cache) : (this.is_for_agenda ? 'ready_for_agenda' : 'approved'),
+            filterCSFaunaApplicationStatus: sessionStorage.getItem(
+                this.filterCSFaunaApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFaunaApplicationStatus_cache
+                  )
+                : this.is_for_agenda
+                  ? 'ready_for_agenda'
+                  : 'approved',
 
-            filterCSFromFaunaEffectiveFromDate: sessionStorage.getItem(this.filterCSFromFaunaEffectiveFromDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromFaunaEffectiveFromDate_cache) : '',
-            filterCSToFaunaEffectiveFromDate: sessionStorage.getItem(this.filterCSToFaunaEffectiveFromDate_cache) ?
-                sessionStorage.getItem(this.filterCSToFaunaEffectiveFromDate_cache) : '',
+            filterCSFromFaunaEffectiveFromDate: sessionStorage.getItem(
+                this.filterCSFromFaunaEffectiveFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromFaunaEffectiveFromDate_cache
+                  )
+                : '',
+            filterCSToFaunaEffectiveFromDate: sessionStorage.getItem(
+                this.filterCSToFaunaEffectiveFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToFaunaEffectiveFromDate_cache
+                  )
+                : '',
 
-            filterCSFromFaunaEffectiveToDate: sessionStorage.getItem(this.filterCSFromFaunaEffectiveToDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromFaunaEffectiveToDate_cache) : '',
-            filterCSToFaunaEffectiveToDate: sessionStorage.getItem(this.filterCSToFaunaEffectiveToDate_cache) ?
-                sessionStorage.getItem(this.filterCSToFaunaEffectiveToDate_cache) : '',
+            filterCSFromFaunaEffectiveToDate: sessionStorage.getItem(
+                this.filterCSFromFaunaEffectiveToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromFaunaEffectiveToDate_cache
+                  )
+                : '',
+            filterCSToFaunaEffectiveToDate: sessionStorage.getItem(
+                this.filterCSToFaunaEffectiveToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToFaunaEffectiveToDate_cache
+                  )
+                : '',
 
-            filterCSFromFaunaReviewDueDate: sessionStorage.getItem(this.filterCSFromFaunaReviewDueDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromFaunaReviewDueDate_cache) : '',
-            filterCSToFaunaReviewDueDate: sessionStorage.getItem(this.filterCSToFaunaReviewDueDate_cache) ?
-                sessionStorage.getItem(this.filterCSToFaunaReviewDueDate_cache) : '',
+            filterCSFromFaunaReviewDueDate: sessionStorage.getItem(
+                this.filterCSFromFaunaReviewDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromFaunaReviewDueDate_cache
+                  )
+                : '',
+            filterCSToFaunaReviewDueDate: sessionStorage.getItem(
+                this.filterCSToFaunaReviewDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToFaunaReviewDueDate_cache
+                  )
+                : '',
 
             //Filter list for scientific name and common name
             filterListsSpecies: {},
@@ -439,148 +696,78 @@ export default {
             processing_statuses: [
                 { value: 'draft', name: 'Draft', className: '' },
                 { value: 'discarded', name: 'Discarded', className: '' },
-                { value: 'awaiting_assessor_action', name: 'Awaiting Assessor Action', className: 'optionGroup' },
-                { value: 'with_assessor', name: 'With Assessor', className: 'optionChild' },
-                { value: 'with_referral', name: 'With Referral', className: 'optionChild' },
-                { value: 'deferred', name: 'Deferred', className: 'optionChild' },
-                { value: 'awaiting_approver_action', name: 'Awaiting Approver Action', className: 'optionGroup' },
-                { value: 'proposed_for_agenda', name: 'Proposed For Agenda', className: 'optionChild' },
-                { value: 'ready_for_agenda', name: 'Ready For Agenda', className: 'optionChild' },
-                { value: 'on_agenda', name: 'On Agenda', className: 'optionChild' },
-                { value: 'with_approver', name: 'Proposed DeListed', className: 'optionChild' },
-                { value: 'inactive', name: 'Inactive', className: 'optionGroup' },
-                { value: 'declined', name: 'Declined', className: 'optionChild' },
+                {
+                    value: 'awaiting_assessor_action',
+                    name: 'Awaiting Assessor Action',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'with_assessor',
+                    name: 'With Assessor',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'with_referral',
+                    name: 'With Referral',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'deferred',
+                    name: 'Deferred',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'awaiting_approver_action',
+                    name: 'Awaiting Approver Action',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'proposed_for_agenda',
+                    name: 'Proposed For Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'ready_for_agenda',
+                    name: 'Ready For Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'on_agenda',
+                    name: 'On Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'with_approver',
+                    name: 'Proposed DeListed',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'inactive',
+                    name: 'Inactive',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'declined',
+                    name: 'Declined',
+                    className: 'optionChild',
+                },
                 { value: 'closed', name: 'Closed', className: 'optionChild' },
-                { value: 'delisted', name: 'DeListed', className: 'optionChild' },
+                {
+                    value: 'delisted',
+                    name: 'DeListed',
+                    className: 'optionChild',
+                },
                 { value: 'approved', name: 'Approved', className: '' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        SpeciesConservationStatusHistory,
-    },
-    watch: {
-        filterCSFaunaScientificName: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaScientificName_cache, vm.filterCSFaunaScientificName);
-        },
-        filterCSFaunaCommonName: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaCommonName_cache, vm.filterCSFaunaCommonName);
-        },
-        filterCSFaunaPhylogeneticGroup: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaPhylogeneticGroup_cache, vm.filterCSFaunaPhylogeneticGroup);
-        },
-        filterCSFaunaFamily: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaFamily_cache, vm.filterCSFaunaFamily);
-        },
-        filterCSFaunaGenus: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaGenus_cache, vm.filterCSFaunaGenus);
-        },
-        filterCSFaunaChangeCode: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaChangeCode_cache, vm.filterCSFaunaChangeCode);
-        },
-        filterCSFaunaWALegislativeList: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaWALegislativeList_cache, vm.filterCSFaunaWALegislativeList);
-        },
-        filterCSFaunaWALegislativeCategory: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaWALegislativeCategory_cache, vm.filterCSFaunaWALegislativeCategory);
-        },
-        filterCSFaunaWAPriorityCategory: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaWAPriorityCategory_cache, vm.filterCSFaunaWAPriorityCategory);
-        },
-        filterCSFaunaCommonwealthRelevance: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaCommonwealthRelevance_cache, vm.filterCSFaunaCommonwealthRelevance);
-        },
-        filterCSFaunaInternationalRelevance: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaInternationalRelevance_cache, vm.filterCSFaunaInternationalRelevance);
-        },
-        filterCSFaunaAssessor: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaAssessor_cache, vm.filterCSFaunaAssessor);
-        },
-        filterCSFaunaSubmitter: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaSubmitter_cache, vm.filterCSFaunaSubmitter);
-        },
-        filterCSFaunaSubmitterCategory: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaSubmitterCategory_cache, vm.filterCSFaunaSubmitterCategory);
-        },
-        filterCSFromFaunaEffectiveFromDate: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromFaunaEffectiveFromDate_cache, vm.filterCSFromFaunaEffectiveFromDate);
-        },
-        filterCSToFaunaEffectiveFromDate: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToFaunaEffectiveFromDate_cache, vm.filterCSToFaunaEffectiveFromDate);
-        },
-        filterCSFromFaunaEffectiveToDate: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromFaunaEffectiveToDate_cache, vm.filterCSFromFaunaEffectiveToDate);
-        },
-        filterCSToFaunaEffectiveToDate: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToFaunaEffectiveToDate_cache, vm.filterCSToFaunaEffectiveToDate);
-        },
-        filterCSFromFaunaReviewDueDate: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromFaunaReviewDueDate_cache, vm.filterCSFromFaunaReviewDueDate);
-        },
-        filterCSToFaunaReviewDueDate: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToFaunaReviewDueDate_cache, vm.filterCSToFaunaReviewDueDate);
-        },
-        filterCSFaunaApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFaunaApplicationStatus_cache, vm.filterCSFaunaApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         defaultApplicationStatus: function () {
             return this.is_for_agenda ? 'ready_for_agenda' : 'approved';
         },
         filterApplied: function () {
-            if (this.filterCSFaunaScientificName === 'all' &&
+            if (
+                this.filterCSFaunaScientificName === 'all' &&
                 this.filterCSFaunaCommonName === 'all' &&
                 this.filterCSFaunaPhylogeneticGroup === 'all' &&
                 this.filterCSFaunaFamily === 'all' &&
@@ -594,307 +781,334 @@ export default {
                 this.filterCSFaunaAssessor === 'all' &&
                 this.filterCSFaunaSubmitter === 'all' &&
                 this.filterCSFaunaSubmitterCategory === 'all' &&
-                this.filterCSFaunaApplicationStatus === this.defaultApplicationStatus &&
+                this.filterCSFaunaApplicationStatus ===
+                    this.defaultApplicationStatus &&
                 this.filterCSFromFaunaEffectiveFromDate === '' &&
                 this.filterCSToFaunaEffectiveFromDate === '' &&
                 this.filterCSFromFaunaEffectiveToDate === '' &&
                 this.filterCSToFaunaEffectiveToDate === '' &&
                 this.filterCSFromFaunaReviewDueDate === '' &&
-                this.filterCSToFaunaReviewDueDate === '') {
-
-                return false
+                this.filterCSToFaunaReviewDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_referral: function () {
             return this.level == 'referral';
         },
         addFaunaCSVisibility: function () {
-            return this.profile && this.profile.groups.find(
-                (i) => [
-                    constants.GROUPS.INTERNAL_CONTRIBUTORS
-                ].includes(i)
+            return (
+                this.profile &&
+                this.profile.groups.find((i) =>
+                    [constants.GROUPS.INTERNAL_CONTRIBUTORS].includes(i)
+                )
             );
         },
         datatable_headers: function () {
-            return ['Number', 'Species', 'Scientific Name', 'Common Name', 'Family', 'Genera', 'Phylo Group(s)', 'Change Type', 'WA Priority List',
-                'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category', 'International Conservation',
+            return [
+                'Number',
+                'Species',
+                'Scientific Name',
+                'Common Name',
+                'Family',
+                'Genera',
+                'Phylo Group(s)',
+                'Change Type',
+                'WA Priority List',
+                'WA Priority Category',
+                'WA Legislative List',
+                'WA Legislative Category',
+                'Commonwealth Conservation Category',
+                'International Conservation',
                 'Conservation Criteria',
-                'Submitter Name', 'Submitter Category', 'Submitter Organisation', 'Assessor Name', 'Effective From Date', 'Effective To Date', 'Review Due Date',
-                'Status', 'Action']
+                'Submitter Name',
+                'Submitter Category',
+                'Submitter Organisation',
+                'Assessor Name',
+                'Effective From Date',
+                'Effective To Date',
+                'Review Due Date',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             let vm = this;
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    let value = full.conservation_status_number
+                render: function (data, type, full) {
+                    let value = full.conservation_status_number;
                     if (full.is_new_contributor) {
-                        value += ' <span class="badge bg-warning">New Contributor</span>'
+                        value +=
+                            ' <span class="badge bg-warning">New Contributor</span>';
                     }
-                    return value
+                    return value;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_species_number: function () {
             return {
-                data: "species_number",
+                data: 'species_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.species_number
+                render: function (data, type, full) {
+                    return full.species_number;
                 },
-                name: "species__species_number",
-            }
+                name: 'species__species_number',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species__taxonomy__scientific_name",
-            }
+                name: 'species__taxonomy__scientific_name',
+            };
         },
         column_common_name: function () {
             return {
-                data: "common_name",
+                data: 'common_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species__taxonomy__vernaculars__vernacular_name",
-            }
+                name: 'species__taxonomy__vernaculars__vernacular_name',
+            };
         },
         column_family: function () {
             return {
-                data: "family",
+                data: 'family',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species__taxonomy__family_name",
-            }
+                name: 'species__taxonomy__family_name',
+            };
         },
         column_genera: function () {
             return {
-                data: "genus",
+                data: 'genus',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species__taxonomy__genera_name",
-            }
+                name: 'species__taxonomy__genera_name',
+            };
         },
         column_phylo_group: function () {
             return {
-                data: "phylogenetic_group",
+                data: 'phylogenetic_group',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "species_taxonomy__phylogenetic_group",
+                name: 'species_taxonomy__phylogenetic_group',
                 render: function (data, type, full) {
                     let html = '';
                     if (full.phylogenetic_group) {
-                        for (let i = 0; i < full.phylogenetic_group.length; i++) {
-                            html += `<span class="badge bg-primary">${full.phylogenetic_group[i]}</span>`
+                        for (
+                            let i = 0;
+                            i < full.phylogenetic_group.length;
+                            i++
+                        ) {
+                            html += `<span class="badge bg-primary">${full.phylogenetic_group[i]}</span>`;
                         }
                     }
-                    return html
-                }
-            }
+                    return html;
+                },
+            };
         },
         column_change_code: function () {
             return {
-                data: "change_code",
+                data: 'change_code',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "change_code__code",
-            }
+                name: 'change_code__code',
+            };
         },
         column_wa_priority_list: function () {
             return {
-                data: "wa_priority_list",
+                data: 'wa_priority_list',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_priority_list__code",
-            }
+                name: 'wa_priority_list__code',
+            };
         },
         column_wa_priority_category: function () {
             return {
-                data: "wa_priority_category",
+                data: 'wa_priority_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_priority_category__code",
-            }
+                name: 'wa_priority_category__code',
+            };
         },
         column_wa_legislative_list: function () {
             return {
-                data: "wa_legislative_list",
+                data: 'wa_legislative_list',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_legislative_list__code",
-            }
+                name: 'wa_legislative_list__code',
+            };
         },
         column_wa_legislative_category: function () {
             return {
-                data: "wa_legislative_category",
+                data: 'wa_legislative_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_legislative_category__code",
-            }
+                name: 'wa_legislative_category__code',
+            };
         },
         column_commonwealth_conservation_category: function () {
             return {
-                data: "commonwealth_conservation_category",
+                data: 'commonwealth_conservation_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "commonwealth_conservation_category",
-            }
+                name: 'commonwealth_conservation_category',
+            };
+        },
+        column_other_conservation_assessment: function () {
+            return {
+                data: 'other_conservation_assessment',
+                orderable: true,
+                searchable: true,
+                visible: true,
+                name: 'other_conservation_assessment',
+            };
         },
-        column_other_conservation_assessment:
-            function () {
-                return {
-                    data: "other_conservation_assessment",
-                    orderable: true,
-                    searchable: true,
-                    visible: true,
-                    name: "other_conservation_assessment",
-                }
-            },
         column_conservation_criteria: function () {
             return {
-                data: "conservation_criteria",
+                data: 'conservation_criteria',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "conservation_criteria",
-            }
+                name: 'conservation_criteria',
+            };
         },
         column_submitter_name: function () {
             return {
-                data: "submitter_name",
+                data: 'submitter_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "submitter_information__name",
-            }
+                name: 'submitter_information__name',
+            };
         },
         column_submitter_category: function () {
             return {
-                data: "submitter_category",
+                data: 'submitter_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "submitter_information__submitter_category__name",
-            }
+                name: 'submitter_information__submitter_category__name',
+            };
         },
         column_submitter_organisation: function () {
             return {
-                data: "submitter_organisation",
+                data: 'submitter_organisation',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "submitter_information__organisation",
-            }
+                name: 'submitter_information__organisation',
+            };
         },
         column_assessor_name: function () {
             return {
-                data: "assessor_name",
+                data: 'assessor_name',
                 orderable: true,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_status: function () {
             return {
                 // 9. Workflow Status
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.processing_status) {
                         return full.processing_status;
                     }
-                    return ''
+                    return '';
                 },
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_effective_from: function () {
             return {
-                data: "effective_from",
+                data: 'effective_from',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "effective_from",
-            }
+                name: 'effective_from',
+            };
         },
         column_effective_to: function () {
             return {
-                data: "effective_to",
+                data: 'effective_to',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "effective_to",
-            }
+                name: 'effective_to',
+            };
         },
         column_review_due_date: function () {
             return {
-                data: "review_due_date",
+                data: 'review_due_date',
                 orderable: true,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
                 // 10. Action
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (vm.is_for_agenda == false) {
                         if (full.internal_user_edit) {
                             links += `<a href='/internal/conservation-status/${full.id}'>Continue</a><br/>`;
@@ -902,16 +1116,17 @@ export default {
                             links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                 data-history-species='${full.species_number}'
                                 data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
-                        }
-                        else {
+                        } else {
                             if (full.assessor_process) {
                                 links += `<a href='/internal/conservation-status/${full.id}'>Process</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                         data-history-species='${full.species_number}'
                                         data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
-                            }
-                            else {
-                                if (full.processing_status == constants.PROPOSAL_STATUS.DISCARDED.TEXT) {
+                            } else {
+                                if (
+                                    full.processing_status ==
+                                    constants.PROPOSAL_STATUS.DISCARDED.TEXT
+                                ) {
                                     links += `<a href='#' data-reinstate-conservation-status-species='${full.id}'>Reinstate</a><br/>`;
                                 }
                                 links += `<a href='/internal/conservation-status/${full.id}?action=view'>View</a><br/>`;
@@ -920,24 +1135,22 @@ export default {
                                     data-history-conservation-list='${full.conservation_list}'>History</a><br>`;
                             }
                         }
-                    }
-                    else {
+                    } else {
                         if (vm.meeting_obj.agenda_items_arr.includes(full.id)) {
                             links += `<a>Added</a><br/>`;
-                        }
-                        else {
+                        } else {
                             links += `<a href='#${full.id}' data-add-to-agenda='${full.id}'>Add</a><br/>`;
                         }
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -946,7 +1159,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -955,9 +1168,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
 
             columns = [
                 vm.column_number,
@@ -984,61 +1197,82 @@ export default {
                 vm.column_review_due_date,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = true
+            ];
+            search = true;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_scientific_name = vm.filterCSFaunaScientificName;
+                        d.filter_scientific_name =
+                            vm.filterCSFaunaScientificName;
                         d.filter_common_name = vm.filterCSFaunaCommonName;
-                        d.filter_phylogenetic_group = vm.filterCSFaunaPhylogeneticGroup;
+                        d.filter_phylogenetic_group =
+                            vm.filterCSFaunaPhylogeneticGroup;
                         d.filter_family = vm.filterCSFaunaFamily;
                         d.filter_genus = vm.filterCSFaunaGenus;
                         d.filter_change_code = vm.filterCSFaunaChangeCode;
-                        d.filter_wa_legislative_list = vm.filterCSFaunaWALegislativeList;
-                        d.filter_wa_legislative_category = vm.filterCSFaunaWALegislativeCategory;
-                        d.filter_wa_priority_category = vm.filterCSFaunaWAPriorityCategory;
-                        d.filter_commonwealth_relevance = vm.filterCSFaunaCommonwealthRelevance;
-                        d.filter_international_relevance = vm.filterCSFaunaInternationalRelevance;
+                        d.filter_wa_legislative_list =
+                            vm.filterCSFaunaWALegislativeList;
+                        d.filter_wa_legislative_category =
+                            vm.filterCSFaunaWALegislativeCategory;
+                        d.filter_wa_priority_category =
+                            vm.filterCSFaunaWAPriorityCategory;
+                        d.filter_commonwealth_relevance =
+                            vm.filterCSFaunaCommonwealthRelevance;
+                        d.filter_international_relevance =
+                            vm.filterCSFaunaInternationalRelevance;
                         d.filter_assessor = vm.filterCSFaunaAssessor;
                         d.filter_submitter = vm.filterCSFaunaSubmitter;
-                        d.filter_submitter_category = vm.filterCSFaunaSubmitterCategory;
-                        d.filter_application_status = vm.filterCSFaunaApplicationStatus;
-                        d.filter_from_effective_from_date = vm.filterCSFromFaunaEffectiveFromDate;
-                        d.filter_to_effective_from_date = vm.filterCSToFaunaEffectiveFromDate;
-                        d.filter_from_effective_to_date = vm.filterCSFromFaunaEffectiveToDate;
-                        d.filter_to_effective_to_date = vm.filterCSToFaunaEffectiveToDate;
-                        d.filter_from_review_due_date = vm.filterCSFromFaunaReviewDueDate;
-                        d.filter_to_review_due_date = vm.filterCSToFaunaReviewDueDate;
-                    }
+                        d.filter_submitter_category =
+                            vm.filterCSFaunaSubmitterCategory;
+                        d.filter_application_status =
+                            vm.filterCSFaunaApplicationStatus;
+                        d.filter_from_effective_from_date =
+                            vm.filterCSFromFaunaEffectiveFromDate;
+                        d.filter_to_effective_from_date =
+                            vm.filterCSToFaunaEffectiveFromDate;
+                        d.filter_from_effective_to_date =
+                            vm.filterCSFromFaunaEffectiveToDate;
+                        d.filter_to_effective_to_date =
+                            vm.filterCSToFaunaEffectiveToDate;
+                        d.filter_from_review_due_date =
+                            vm.filterCSFromFaunaReviewDueDate;
+                        d.filter_to_review_due_date =
+                            vm.filterCSToFaunaReviewDueDate;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -1051,301 +1285,729 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSFaunaScientificName: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaScientificName_cache,
+                vm.filterCSFaunaScientificName
+            );
+        },
+        filterCSFaunaCommonName: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaCommonName_cache,
+                vm.filterCSFaunaCommonName
+            );
+        },
+        filterCSFaunaPhylogeneticGroup: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaPhylogeneticGroup_cache,
+                vm.filterCSFaunaPhylogeneticGroup
+            );
+        },
+        filterCSFaunaFamily: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaFamily_cache,
+                vm.filterCSFaunaFamily
+            );
+        },
+        filterCSFaunaGenus: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaGenus_cache,
+                vm.filterCSFaunaGenus
+            );
+        },
+        filterCSFaunaChangeCode: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaChangeCode_cache,
+                vm.filterCSFaunaChangeCode
+            );
+        },
+        filterCSFaunaWALegislativeList: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaWALegislativeList_cache,
+                vm.filterCSFaunaWALegislativeList
+            );
+        },
+        filterCSFaunaWALegislativeCategory: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaWALegislativeCategory_cache,
+                vm.filterCSFaunaWALegislativeCategory
+            );
+        },
+        filterCSFaunaWAPriorityCategory: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaWAPriorityCategory_cache,
+                vm.filterCSFaunaWAPriorityCategory
+            );
+        },
+        filterCSFaunaCommonwealthRelevance: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaCommonwealthRelevance_cache,
+                vm.filterCSFaunaCommonwealthRelevance
+            );
+        },
+        filterCSFaunaInternationalRelevance: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaInternationalRelevance_cache,
+                vm.filterCSFaunaInternationalRelevance
+            );
+        },
+        filterCSFaunaAssessor: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaAssessor_cache,
+                vm.filterCSFaunaAssessor
+            );
+        },
+        filterCSFaunaSubmitter: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaSubmitter_cache,
+                vm.filterCSFaunaSubmitter
+            );
+        },
+        filterCSFaunaSubmitterCategory: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaSubmitterCategory_cache,
+                vm.filterCSFaunaSubmitterCategory
+            );
+        },
+        filterCSFromFaunaEffectiveFromDate: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromFaunaEffectiveFromDate_cache,
+                vm.filterCSFromFaunaEffectiveFromDate
+            );
+        },
+        filterCSToFaunaEffectiveFromDate: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToFaunaEffectiveFromDate_cache,
+                vm.filterCSToFaunaEffectiveFromDate
+            );
+        },
+        filterCSFromFaunaEffectiveToDate: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromFaunaEffectiveToDate_cache,
+                vm.filterCSFromFaunaEffectiveToDate
+            );
+        },
+        filterCSToFaunaEffectiveToDate: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToFaunaEffectiveToDate_cache,
+                vm.filterCSToFaunaEffectiveToDate
+            );
+        },
+        filterCSFromFaunaReviewDueDate: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromFaunaReviewDueDate_cache,
+                vm.filterCSFromFaunaReviewDueDate
+            );
+        },
+        filterCSToFaunaReviewDueDate: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToFaunaReviewDueDate_cache,
+                vm.filterCSToFaunaReviewDueDate
+            );
+        },
+        filterCSFaunaApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFaunaApplicationStatus_cache,
+                vm.filterCSFaunaApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        if (
+            vm.profile &&
+            vm.profile.groups &&
+            vm.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS)
+        ) {
+            vm.processing_statuses.push({
+                value: 'discarded_by_me',
+                name: 'Discarded By Me',
+            });
         }
+        vm.fetchFilterLists();
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommonNameLookup();
+            vm.initialisePhyloGroupLookup();
+            vm.initialiseFamilyLookup();
+            vm.initialiseGeneraLookup();
+            vm.initialiseAssessorLookup();
+            vm.initialiseSubmitterLookup();
+            vm.addEventListeners();
+
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterCSFaunaScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSFaunaScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFaunaScientificNameText'),
+                    vm.filterCSFaunaScientificName,
+                    false,
+                    true
+                );
+                $('#cs_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFaunaCommonName') != 'all' &&
+                sessionStorage.getItem('filterCSFaunaCommonName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFaunaCommonNameText'),
+                    vm.filterCSFaunaCommonName,
+                    false,
+                    true
+                );
+                $('#cs_common_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFaunaPhylogeneticGroup') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSFaunaPhylogeneticGroup') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSFaunaPhylogeneticGroupText'
+                    ),
+                    vm.filterCSFaunaPhylogeneticGroup,
+                    false,
+                    true
+                );
+                $('#cs_phylo_group_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFaunaFamily') != 'all' &&
+                sessionStorage.getItem('filterCSFaunaFamily') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFaunaFamilyText'),
+                    vm.filterCSFaunaFamily,
+                    false,
+                    true
+                );
+                $('#cs_family_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFaunaGenus') != 'all' &&
+                sessionStorage.getItem('filterCSFaunaGenus') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFaunaGenusText'),
+                    vm.filterCSFaunaGenus,
+                    false,
+                    true
+                );
+                $('#cs_genera_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFaunaAssessor') != 'all' &&
+                sessionStorage.getItem('filterCSFaunaAssessor') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFaunaAssessorText'),
+                    vm.filterCSFaunaAssessor,
+                    false,
+                    true
+                );
+                $('#cs_assessor_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFaunaSubmitter') != 'all' &&
+                sessionStorage.getItem('filterCSFaunaSubmitter') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFaunaSubmitterText'),
+                    vm.filterCSFaunaSubmitter,
+                    false,
+                    true
+                );
+                $('#cs_submitter_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id, list, species) {
             this.speciesConservationStatusHistoryId = parseInt(id);
-            this.listHistoryId = list ? list : "List not specified";
-            this.speciesHistoryId = species ? species : "not specified";
+            this.listHistoryId = list ? list : 'List not specified';
+            this.speciesHistoryId = species ? species : 'not specified';
             this.uuid++;
             this.$nextTick(() => {
                 this.$refs.species_conservation_status_history.isModalOpen = true;
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_scientific_name"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_scientific_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaScientificName = data; // this is id session
-                    sessionStorage.setItem("filterCSFaunaScientificNameText", e.params.data.text); // this is name session
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFaunaScientificNameText',
+                        e.params.data.text
+                    ); // this is name session
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFaunaScientificName = 'all';
-                    sessionStorage.setItem("filterCSFaunaScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_scientific_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSFaunaScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommonNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_common_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_common_name"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Common Name",
-                ajax: {
-                    url: api_endpoints.common_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_common_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_common_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Common Name',
+                    ajax: {
+                        url: api_endpoints.common_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaCommonName = data;
-                    sessionStorage.setItem("filterCSFaunaCommonNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFaunaCommonNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFaunaCommonName = 'all';
-                    sessionStorage.setItem("filterCSFaunaCommonNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_common_name_lookup-results"]')
+                    sessionStorage.setItem('filterCSFaunaCommonNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_common_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialisePhyloGroupLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_phylo_group_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_phylo_group"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Phylo Group",
-                ajax: {
-                    url: api_endpoints.phylo_group_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_phylo_group_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_phylo_group'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Phylo Group',
+                    ajax: {
+                        url: api_endpoints.phylo_group_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaPhylogeneticGroup = data;
-                    sessionStorage.setItem("filterCSFaunaPhylogeneticGroupText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFaunaPhylogeneticGroupText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFaunaPhylogeneticGroup = 'all';
-                    sessionStorage.setItem("filterCSFaunaPhylogeneticGroupText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_phylo_group_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSFaunaPhylogeneticGroupText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_phylo_group_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseFamilyLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_family_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_family"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Family",
-                ajax: {
-                    url: api_endpoints.family_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_family_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_family'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Family',
+                    ajax: {
+                        url: api_endpoints.family_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaFamily = data;
-                    sessionStorage.setItem("filterCSFaunaFamilyText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFaunaFamilyText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFaunaFamily = 'all';
-                    sessionStorage.setItem("filterCSFaunaFamilyText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_family_lookup-results"]')
+                    sessionStorage.setItem('filterCSFaunaFamilyText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_family_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseGeneraLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_genera_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_genera"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Genera",
-                ajax: {
-                    url: api_endpoints.genera_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_genera_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_genera'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Genera',
+                    ajax: {
+                        url: api_endpoints.genera_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaGenus = data;
-                    sessionStorage.setItem("filterCSFaunaGenusText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFaunaGenusText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFaunaGenus = 'all';
-                    sessionStorage.setItem("filterCSFaunaGenusText", '');
-                }).
-                on("select2:open", function (e) {
+                    sessionStorage.setItem('filterCSFaunaGenusText', '');
+                })
+                .on('select2:open', function (e) {
                     //const searchField = $(".select2-search__field")
-                    const searchField = $('[aria-controls="select2-cs_genera_lookup-results"]')
+                    const searchField = $(
+                        '[aria-controls="select2-cs_genera_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseAssessorLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_assessor_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Search for Assessor",
-                ajax: {
-                    url: api_endpoints.users_api + '/get_department_users_ledger_id/',
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                        }
-                        return query;
+            $(vm.$refs.cs_assessor_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search for Assessor',
+                    ajax: {
+                        url:
+                            api_endpoints.users_api +
+                            '/get_department_users_ledger_id/',
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                            };
+                            return query;
+                        },
                     },
-                },
-            })
-                .on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.filterCSFaunaAssessor = data;
-                    sessionStorage.setItem("filterCSFaunaAssessorText", e.params.data.text);
+                    sessionStorage.setItem(
+                        'filterCSFaunaAssessorText',
+                        e.params.data.text
+                    );
                 })
-                .on("select2:unselect", function (e) {
+                .on('select2:unselect', function (e) {
                     vm.filterCSFaunaAssessor = 'all';
-                    sessionStorage.setItem("filterCSFaunaAssessorText", '');
+                    sessionStorage.setItem('filterCSFaunaAssessorText', '');
                 })
-                .on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_assessor_lookup-results"]')
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_assessor_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseSubmitterLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_submitter_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Search for Submitter",
-                ajax: {
-                    url: api_endpoints.users_api + '/get_users_ledger_id/',
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                        }
-                        return query;
+            $(vm.$refs.cs_submitter_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search for Submitter',
+                    ajax: {
+                        url: api_endpoints.users_api + '/get_users_ledger_id/',
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                            };
+                            return query;
+                        },
                     },
-                },
-            })
-                .on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.filterCSFaunaSubmitter = data;
-                    sessionStorage.setItem("filterCSFaunaSubmitterText", e.params.data.text);
+                    sessionStorage.setItem(
+                        'filterCSFaunaSubmitterText',
+                        e.params.data.text
+                    );
                 })
-                .on("select2:unselect", function (e) {
+                .on('select2:unselect', function (e) {
                     vm.selected_referral = null;
                     vm.filterCSFaunaSubmitter = 'all';
-                    sessionStorage.setItem("filterCSFaunaSubmitterText", '');
+                    sessionStorage.setItem('filterCSFaunaSubmitterText', '');
                 })
-                .on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_submitter_lookup-results"]')
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_submitter_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.common_name_list = vm.filterListsSpecies.common_name_list;
-                vm.family_list = vm.filterListsSpecies.family_list;
-                vm.wa_legislative_lists = vm.filterListsSpecies.wa_legislative_lists;
-                vm.wa_legislative_categories = vm.filterListsSpecies.wa_legislative_categories;
-                vm.wa_priority_lists = vm.filterListsSpecies.wa_priority_lists;
-                vm.wa_priority_categories = vm.filterListsSpecies.wa_priority_categories;
-                vm.processing_statuses = vm.processing_statuses;
-                vm.change_codes = vm.filterListsSpecies.change_codes;
-                vm.submitter_categories = vm.filterListsSpecies.submitter_categories;
-
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.common_name_list =
+                        vm.filterListsSpecies.common_name_list;
+                    vm.family_list = vm.filterListsSpecies.family_list;
+                    vm.wa_legislative_lists =
+                        vm.filterListsSpecies.wa_legislative_lists;
+                    vm.wa_legislative_categories =
+                        vm.filterListsSpecies.wa_legislative_categories;
+                    vm.wa_priority_lists =
+                        vm.filterListsSpecies.wa_priority_lists;
+                    vm.wa_priority_categories =
+                        vm.filterListsSpecies.wa_priority_categories;
+                    vm.processing_statuses = vm.processing_statuses;
+                    vm.change_codes = vm.filterListsSpecies.change_codes;
+                    vm.submitter_categories =
+                        vm.filterListsSpecies.submitter_categories;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createFaunaConservationStatus: async function () {
             swal.fire({
                 title: `Propose New Fauna Conservation Status`,
-                text: "Are you sure you want to propose a new fauna conservation status?",
-                icon: "question",
+                text: 'Are you sure you want to propose a new fauna conservation status?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Propose New Conservation Status',
                 reverseButtons: true,
@@ -1355,23 +2017,23 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFaunaCSId = null
+                    let newFaunaCSId = null;
                     try {
-                        const createUrl = api_endpoints.conservation_status + "/";
+                        const createUrl =
+                            api_endpoints.conservation_status + '/';
                         let payload = new Object();
-                        payload.application_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.application_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
-                            headers: { 'Content-Type': 'application/json', },
+                            headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(payload),
                         });
                         const data = await response.json();
                         if (data) {
                             newFaunaCSId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -1384,9 +2046,9 @@ export default {
         discardCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Conservation Status Proposal",
-                text: "Are you sure you want to discard this proposal?",
-                icon: "question",
+                title: 'Discard Conservation Status Proposal',
+                text: 'Are you sure you want to discard this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Proposal',
                 customClass: {
@@ -1394,36 +2056,49 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your proposal has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_cs_proposal(
+                                conservation_status_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your proposal has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Conservation Status Proposal",
-                text: "Are you sure you want to reinstate this proposal?",
-                icon: "question",
+                title: 'Reinstate Conservation Status Proposal',
+                text: 'Are you sure you want to reinstate this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Proposal',
                 customClass: {
@@ -1431,29 +2106,42 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your proposal has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_cs_proposal(
+                                conservation_status_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your proposal has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addToMeetingAgenda: function (conservation_status_id) {
             let vm = this;
@@ -1461,101 +2149,76 @@ export default {
             payload.conservation_status_id = conservation_status_id;
             fetch(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json', },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                vm.meeting_obj.agenda_items_arr = await response.json();
-                vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                this.$emit('updateAgendaItems');
-            },
-                err => {
+            }).then(
+                async (response) => {
+                    vm.meeting_obj.agenda_items_arr = await response.json();
+                    vm.$refs.fauna_cs_datatable.vmDataTable.ajax.reload(
+                        helpers.enablePopovers,
+                        false
+                    );
+                    this.$emit('updateAgendaItems');
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // External Discard listener
-            vm.$refs.fauna_cs_datatable.vmDataTable.on('click', 'a[data-discard-cs-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-cs-proposal');
-                vm.discardCSProposal(id);
-            });
-            vm.$refs.fauna_cs_datatable.vmDataTable.on('click', 'a[data-reinstate-conservation-status-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-conservation-status-species');
-                vm.reinstateCSProposal(id);
-            });
-            vm.$refs.fauna_cs_datatable.vmDataTable.on('click', 'a[data-add-to-agenda]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-add-to-agenda');
-                vm.addToMeetingAgenda(id);
-            });
-            vm.$refs.fauna_cs_datatable.vmDataTable.on('click', 'a[data-history-conservation-status-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-conservation-status-species');
-                var list = $(this).attr('data-history-conservation-list');
-                var species = $(this).attr('data-history-species');
-                vm.historyDocument(id, list, species);
-            });
-            vm.$refs.fauna_cs_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.fauna_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-cs-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-cs-proposal');
+                    vm.discardCSProposal(id);
+                }
+            );
+            vm.$refs.fauna_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-conservation-status-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr(
+                        'data-reinstate-conservation-status-species'
+                    );
+                    vm.reinstateCSProposal(id);
+                }
+            );
+            vm.$refs.fauna_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-add-to-agenda]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-add-to-agenda');
+                    vm.addToMeetingAgenda(id);
+                }
+            );
+            vm.$refs.fauna_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-conservation-status-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr(
+                        'data-history-conservation-status-species'
+                    );
+                    var list = $(this).attr('data-history-conservation-list');
+                    var species = $(this).attr('data-history-species');
+                    vm.historyDocument(id, list, species);
+                }
+            );
+            vm.$refs.fauna_cs_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        if (vm.profile && vm.profile.groups && vm.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS)) {
-            vm.processing_statuses.push({ value: 'discarded_by_me', name: 'Discarded By Me' },);
-        }
-        vm.fetchFilterLists();
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommonNameLookup();
-            vm.initialisePhyloGroupLookup();
-            vm.initialiseFamilyLookup();
-            vm.initialiseGeneraLookup();
-            vm.initialiseAssessorLookup();
-            vm.initialiseSubmitterLookup();
-            vm.addEventListeners();
-
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterCSFaunaScientificName") != 'all' && sessionStorage.getItem("filterCSFaunaScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFaunaScientificNameText"), vm.filterCSFaunaScientificName, false, true);
-                $('#cs_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFaunaCommonName") != 'all' && sessionStorage.getItem("filterCSFaunaCommonName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFaunaCommonNameText"), vm.filterCSFaunaCommonName, false, true);
-                $('#cs_common_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFaunaPhylogeneticGroup") != 'all' && sessionStorage.getItem("filterCSFaunaPhylogeneticGroup") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFaunaPhylogeneticGroupText"), vm.filterCSFaunaPhylogeneticGroup, false, true);
-                $('#cs_phylo_group_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFaunaFamily") != 'all' && sessionStorage.getItem("filterCSFaunaFamily") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFaunaFamilyText"), vm.filterCSFaunaFamily, false, true);
-                $('#cs_family_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFaunaGenus") != 'all' && sessionStorage.getItem("filterCSFaunaGenus") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFaunaGenusText"), vm.filterCSFaunaGenus, false, true);
-                $('#cs_genera_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFaunaAssessor") != 'all' && sessionStorage.getItem("filterCSFaunaAssessor") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFaunaAssessorText"), vm.filterCSFaunaAssessor, false, true);
-                $('#cs_assessor_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFaunaSubmitter") != 'all' && sessionStorage.getItem("filterCSFaunaSubmitter") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFaunaSubmitterText"), vm.filterCSFaunaSubmitter, false, true);
-                $('#cs_submitter_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -1583,7 +2246,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -1608,7 +2273,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
index 434ec0f7..fcdfdb4e 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
@@ -1,208 +1,371 @@
 <template id="species_flora_cs_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
-                    <div class="form-group" id="select_scientific_name">
-                        <label for="cs_scientific_name_lookup">Scientific Name:</label>
-                        <select id="cs_scientific_name_lookup" name="cs_scientific_name_lookup"
-                            ref="cs_scientific_name_lookup" class="form-control" />
+                    <div id="select_scientific_name" class="form-group">
+                        <label for="cs_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="cs_scientific_name_lookup"
+                            ref="cs_scientific_name_lookup"
+                            name="cs_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_common_name">
+                    <div id="select_common_name" class="form-group">
                         <label for="cs_common_name_lookup">Common Name:</label>
-                        <select id="cs_common_name_lookup" name="cs_common_name_lookup" ref="cs_common_name_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_common_name_lookup"
+                            ref="cs_common_name_lookup"
+                            name="cs_common_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_phylo_group">
+                    <div id="select_phylo_group" class="form-group">
                         <label for="cs_phylo_group_lookup">Phylo Group:</label>
-                        <select id="cs_phylo_group_lookup" name="cs_phylo_group_lookup" ref="cs_phylo_group_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_phylo_group_lookup"
+                            ref="cs_phylo_group_lookup"
+                            name="cs_phylo_group_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_family">
+                    <div id="select_family" class="form-group">
                         <label for="cs_family_lookup">Family:</label>
-                        <select id="cs_family_lookup" name="cs_family_lookup" ref="cs_family_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_family_lookup"
+                            ref="cs_family_lookup"
+                            name="cs_family_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_genera">
+                    <div id="select_genera" class="form-group">
                         <label for="cs_genera_lookup">Genera:</label>
-                        <select id="cs_genera_lookup" name="cs_genera_lookup" ref="cs_genera_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_genera_lookup"
+                            ref="cs_genera_lookup"
+                            name="cs_genera_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="change-type">Change Type:</label>
-                        <select id="change-type" class="form-select" v-model="filterCSFloraChangeCode">
+                        <select
+                            id="change-type"
+                            v-model="filterCSFloraChangeCode"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="change_code in change_codes" :value="change_code.id">{{ change_code.code }}
+                            <option
+                                v-for="change_code in change_codes"
+                                :value="change_code.id"
+                            >
+                                {{ change_code.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-list">WA Legislative List:</label>
-                        <select id="wa-legislative-list" class="form-select" v-model="filterCSFloraWALegislativeList">
+                        <label for="wa-legislative-list"
+                            >WA Legislative List:</label
+                        >
+                        <select
+                            id="wa-legislative-list"
+                            v-model="filterCSFloraWALegislativeList"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_lists" :value="list.id">{{ list.code }}</option>
+                            <option
+                                v-for="list in wa_legislative_lists"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-category">WA Legislative Category:</label>
-                        <select id="wa-legislative-category" class="form-select"
-                            v-model="filterCSFloraWALegislativeCategory">
+                        <label for="wa-legislative-category"
+                            >WA Legislative Category:</label
+                        >
+                        <select
+                            id="wa-legislative-category"
+                            v-model="filterCSFloraWALegislativeCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_legislative_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-priority-category">WA Priority Category:</label>
-                        <select id="wa-priority-category" class="form-select" v-model="filterCSFloraWAPriorityCategory">
+                        <label for="wa-priority-category"
+                            >WA Priority Category:</label
+                        >
+                        <select
+                            id="wa-priority-category"
+                            v-model="filterCSFloraWAPriorityCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_priority_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_priority_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="commonwealth-relevance">Commonwealth Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="commonwealth-relevance"
+                            >Commonwealth Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="commonwealth-relevance"
-                                v-model="filterCSFloraCommonwealthRelevance" true-value="true" false-value="false">
+                            <input
+                                id="commonwealth-relevance"
+                                v-model="filterCSFloraCommonwealthRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="international-relevance">International Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="international-relevance"
+                            >International Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="international-relevance"
-                                v-model="filterCSFloraInternationalRelevance" true-value="true" false-value="false">
+                            <input
+                                id="international-relevance"
+                                v-model="filterCSFloraInternationalRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
-                <div class="col-md-3" v-show="!is_for_agenda">
+                <div v-show="!is_for_agenda" class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSFloraApplicationStatus">
+                        <select
+                            v-model="filterCSFloraApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value" :class="status.className"><template v-if="status.className == 'optionChild'">&nbsp;&nbsp;</template>{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                                :class="status.className"
+                            >
+                                <template
+                                    v-if="status.className == 'optionChild'"
+                                    >&nbsp;&nbsp;</template
+                                >{{ status.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_assessor">
+                    <div id="select_assessor" class="form-group">
                         <label for="cs_assessor_lookup">Assessor:</label>
-                        <select id="cs_assessor_lookup" name="cs_assessor_lookup" ref="cs_assessor_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_assessor_lookup"
+                            ref="cs_assessor_lookup"
+                            name="cs_assessor_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
-                    <div class="form-group" id="select_submitter">
+                    <div id="select_submitter" class="form-group">
                         <label for="cs_submitter_lookup">Submitter:</label>
-                        <select id="cs_submitter_lookup" name="cs_submitter_lookup" ref="cs_submitter_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_submitter_lookup"
+                            ref="cs_submitter_lookup"
+                            name="cs_submitter_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="submitter-category">Submitter Category:</label>
-                        <select id="submitter-category" class="form-select" v-model="filterCSFloraSubmitterCategory">
+                        <label for="submitter-category"
+                            >Submitter Category:</label
+                        >
+                        <select
+                            id="submitter-category"
+                            v-model="filterCSFloraSubmitterCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="submitter_category in submitter_categories" :value="submitter_category.id">{{
-                                submitter_category.name }}
+                            <option
+                                v-for="submitter_category in submitter_categories"
+                                :value="submitter_category.id"
+                            >
+                                {{ submitter_category.name }}
                             </option>
                         </select>
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="" class="form-label px-2">Effective From Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="" class="form-label px-2"
+                        >Effective From Date Range:</label
+                    >
                     <div class="input-group px-2 mb-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_effective_from_date"
-                            v-model="filterCSFromFloraEffectiveFromDate">
+                        <input
+                            id="from_effective_from_date"
+                            v-model="filterCSFromFloraEffectiveFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_effective_from_date"
-                            v-model="filterCSToFloraEffectiveFromDate">
+                        <input
+                            id="to_effective_from_date"
+                            v-model="filterCSToFloraEffectiveFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="" class="form-label px-2">Effective To Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="" class="form-label px-2"
+                        >Effective To Date Range:</label
+                    >
                     <div class="input-group px-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_effective_to_date"
-                            v-model="filterCSFromFloraEffectiveToDate">
+                        <input
+                            id="from_effective_to_date"
+                            v-model="filterCSFromFloraEffectiveToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_effective_to_date"
-                            v-model="filterCSToFloraEffectiveToDate">
+                        <input
+                            id="to_effective_to_date"
+                            v-model="filterCSToFloraEffectiveToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
-                <div class="col-md-6" v-show="!is_for_agenda">
-                    <label for="from_review_due_date" class="form-label px-2">Review Due Date Range:</label>
+                <div v-show="!is_for_agenda" class="col-md-6">
+                    <label for="from_review_due_date" class="form-label px-2"
+                        >Review Due Date Range:</label
+                    >
                     <div class="input-group px-2">
                         <span class="input-group-text">From </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="from_review_due_date"
-                            v-model="filterCSFromFloraReviewDueDate">
+                        <input
+                            id="from_review_due_date"
+                            v-model="filterCSFromFloraReviewDueDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                         <span class="input-group-text"> to </span>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="to_review_due_date"
-                            v-model="filterCSToFloraReviewDueDate">
+                        <input
+                            id="to_review_due_date"
+                            v-model="filterCSToFloraReviewDueDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
 
-        <div v-if="addFloraCSVisibility && is_for_agenda == false" class="col-md-12">
+        <div
+            v-if="addFloraCSVisibility && is_for_agenda == false"
+            class="col-md-12"
+        >
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFloraConservationStatus"><i
-                        class="fa-solid fa-circle-plus"></i> Propose Conservation Status</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFloraConservationStatus"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Propose Conservation
+                    Status
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_cs_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_cs_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
             <div v-if="speciesConservationStatusHistoryId">
-                <SpeciesConservationStatusHistory ref="species_conservation_status_history"
+                <SpeciesConservationStatusHistory
+                    ref="species_conservation_status_history"
                     :key="speciesConservationStatusHistoryId"
-                    :conservation-status-id="speciesConservationStatusHistoryId" :species-id="speciesHistoryId" />
+                    :conservation-status-id="speciesConservationStatusHistoryId"
+                    :species-id="speciesHistoryId"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import SpeciesConservationStatusHistory from '../internal/conservation_status/species_conservation_status_history.vue';
 
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'ConservationStatusFloraTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        SpeciesConservationStatusHistory,
+    },
     props: {
         level: {
             type: String,
@@ -210,34 +373,34 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         // when the datable need to be shown for agenda_items in meeting check this variable is true
         is_for_agenda: {
             type: Boolean,
-            default: false
+            default: false,
         },
         // for adding agendaitems for the meeting_obj.id
         meeting_obj: {
             type: Object,
-            required: false
+            required: false,
         },
         //-----------------------------
         filterCSFloraScientificName_cache: {
@@ -355,67 +518,160 @@ export default {
             listHistoryId: null,
 
             // selected values for filtering
-            filterCSFloraScientificName: sessionStorage.getItem(this.filterCSFloraScientificName_cache) ?
-                sessionStorage.getItem(this.filterCSFloraScientificName_cache) : 'all',
+            filterCSFloraScientificName: sessionStorage.getItem(
+                this.filterCSFloraScientificName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFloraScientificName_cache)
+                : 'all',
 
-            filterCSFloraCommonName: sessionStorage.getItem(this.filterCSFloraCommonName_cache) ?
-                sessionStorage.getItem(this.filterCSFloraCommonName_cache) : 'all',
+            filterCSFloraCommonName: sessionStorage.getItem(
+                this.filterCSFloraCommonName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFloraCommonName_cache)
+                : 'all',
 
-            filterCSFloraPhylogeneticGroup: sessionStorage.getItem(this.filterCSFloraPhylogeneticGroup_cache) ?
-                sessionStorage.getItem(this.filterCSFloraPhylogeneticGroup_cache) : 'all',
+            filterCSFloraPhylogeneticGroup: sessionStorage.getItem(
+                this.filterCSFloraPhylogeneticGroup_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraPhylogeneticGroup_cache
+                  )
+                : 'all',
 
-            filterCSFloraFamily: sessionStorage.getItem(this.filterCSFloraFamily_cache) ?
-                sessionStorage.getItem(this.filterCSFloraFamily_cache) : 'all',
+            filterCSFloraFamily: sessionStorage.getItem(
+                this.filterCSFloraFamily_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFloraFamily_cache)
+                : 'all',
 
-            filterCSFloraGenus: sessionStorage.getItem(this.filterCSFloraGenus_cache) ?
-                sessionStorage.getItem(this.filterCSFloraGenus_cache) : 'all',
+            filterCSFloraGenus: sessionStorage.getItem(
+                this.filterCSFloraGenus_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFloraGenus_cache)
+                : 'all',
 
-            filterCSFloraChangeCode: sessionStorage.getItem(this.filterCSFloraChangeCode_cache) ?
-                sessionStorage.getItem(this.filterCSFloraChangeCode_cache) : 'all',
+            filterCSFloraChangeCode: sessionStorage.getItem(
+                this.filterCSFloraChangeCode_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFloraChangeCode_cache)
+                : 'all',
 
-            filterCSFloraWALegislativeList: sessionStorage.getItem(this.filterCSFloraWALegislativeList_cache) ?
-                sessionStorage.getItem(this.filterCSFloraWALegislativeList_cache) : 'all',
+            filterCSFloraWALegislativeList: sessionStorage.getItem(
+                this.filterCSFloraWALegislativeList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraWALegislativeList_cache
+                  )
+                : 'all',
 
-            filterCSFloraWALegislativeCategory: sessionStorage.getItem(this.filterCSFloraWALegislativeCategory_cache) ?
-                sessionStorage.getItem(this.filterCSFloraWALegislativeCategory_cache) : 'all',
+            filterCSFloraWALegislativeCategory: sessionStorage.getItem(
+                this.filterCSFloraWALegislativeCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraWALegislativeCategory_cache
+                  )
+                : 'all',
 
-            filterCSFloraWAPriorityCategory: sessionStorage.getItem(this.filterCSFloraWAPriorityCategory_cache) ?
-                sessionStorage.getItem(this.filterCSFloraWAPriorityCategory_cache) : 'all',
+            filterCSFloraWAPriorityCategory: sessionStorage.getItem(
+                this.filterCSFloraWAPriorityCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraWAPriorityCategory_cache
+                  )
+                : 'all',
 
-            filterCSFloraCommonwealthRelevance: sessionStorage.getItem(this.filterCSFloraCommonwealthRelevance_cache) ?
-                sessionStorage.getItem(this.filterCSFloraCommonwealthRelevance_cache) : "false",
+            filterCSFloraCommonwealthRelevance: sessionStorage.getItem(
+                this.filterCSFloraCommonwealthRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraCommonwealthRelevance_cache
+                  )
+                : 'false',
 
-            filterCSFloraInternationalRelevance: sessionStorage.getItem(this.filterCSFloraInternationalRelevance_cache) ?
-                sessionStorage.getItem(this.filterCSFloraInternationalRelevance_cache) : "false",
+            filterCSFloraInternationalRelevance: sessionStorage.getItem(
+                this.filterCSFloraInternationalRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraInternationalRelevance_cache
+                  )
+                : 'false',
 
             //filterCSFloraApplicationStatus: sessionStorage.getItem(this.filterCSFloraApplicationStatus_cache) ?
             //    sessionStorage.getItem(this.filterCSFloraApplicationStatus_cache) : 'approved',
-            filterCSFloraApplicationStatus: sessionStorage.getItem(this.filterCSFloraApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSFloraApplicationStatus_cache) : (this.is_for_agenda ? 'ready_for_agenda' : 'approved'),
+            filterCSFloraApplicationStatus: sessionStorage.getItem(
+                this.filterCSFloraApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraApplicationStatus_cache
+                  )
+                : this.is_for_agenda
+                  ? 'ready_for_agenda'
+                  : 'approved',
 
-            filterCSFloraAssessor: sessionStorage.getItem(this.filterCSFloraAssessor_cache) ?
-                sessionStorage.getItem(this.filterCSFloraAssessor_cache) : 'all',
+            filterCSFloraAssessor: sessionStorage.getItem(
+                this.filterCSFloraAssessor_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFloraAssessor_cache)
+                : 'all',
 
-            filterCSFloraSubmitter: sessionStorage.getItem(this.filterCSFloraSubmitter_cache) ?
-                sessionStorage.getItem(this.filterCSFloraSubmitter_cache) : 'all',
+            filterCSFloraSubmitter: sessionStorage.getItem(
+                this.filterCSFloraSubmitter_cache
+            )
+                ? sessionStorage.getItem(this.filterCSFloraSubmitter_cache)
+                : 'all',
 
-            filterCSFloraSubmitterCategory: sessionStorage.getItem(this.filterCSFloraSubmitterCategory_cache) ?
-                sessionStorage.getItem(this.filterCSFloraSubmitterCategory_cache) : 'all',
+            filterCSFloraSubmitterCategory: sessionStorage.getItem(
+                this.filterCSFloraSubmitterCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFloraSubmitterCategory_cache
+                  )
+                : 'all',
 
-            filterCSFromFloraEffectiveFromDate: sessionStorage.getItem(this.filterCSFromFloraEffectiveFromDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromFloraEffectiveFromDate_cache) : '',
-            filterCSToFloraEffectiveFromDate: sessionStorage.getItem(this.filterCSToFloraEffectiveFromDate_cache) ?
-                sessionStorage.getItem(this.filterCSToFloraEffectiveFromDate_cache) : '',
+            filterCSFromFloraEffectiveFromDate: sessionStorage.getItem(
+                this.filterCSFromFloraEffectiveFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromFloraEffectiveFromDate_cache
+                  )
+                : '',
+            filterCSToFloraEffectiveFromDate: sessionStorage.getItem(
+                this.filterCSToFloraEffectiveFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToFloraEffectiveFromDate_cache
+                  )
+                : '',
 
-            filterCSFromFloraEffectiveToDate: sessionStorage.getItem(this.filterCSFromFloraEffectiveToDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromFloraEffectiveToDate_cache) : '',
-            filterCSToFloraEffectiveToDate: sessionStorage.getItem(this.filterCSToFloraEffectiveToDate_cache) ?
-                sessionStorage.getItem(this.filterCSToFloraEffectiveToDate_cache) : '',
+            filterCSFromFloraEffectiveToDate: sessionStorage.getItem(
+                this.filterCSFromFloraEffectiveToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromFloraEffectiveToDate_cache
+                  )
+                : '',
+            filterCSToFloraEffectiveToDate: sessionStorage.getItem(
+                this.filterCSToFloraEffectiveToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToFloraEffectiveToDate_cache
+                  )
+                : '',
 
-            filterCSFromFloraReviewDueDate: sessionStorage.getItem(this.filterCSFromFloraReviewDueDate_cache) ?
-                sessionStorage.getItem(this.filterCSFromFloraReviewDueDate_cache) : '',
-            filterCSToFloraReviewDueDate: sessionStorage.getItem(this.filterCSToFloraReviewDueDate_cache) ?
-                sessionStorage.getItem(this.filterCSToFloraReviewDueDate_cache) : '',
+            filterCSFromFloraReviewDueDate: sessionStorage.getItem(
+                this.filterCSFromFloraReviewDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSFromFloraReviewDueDate_cache
+                  )
+                : '',
+            filterCSToFloraReviewDueDate: sessionStorage.getItem(
+                this.filterCSToFloraReviewDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSToFloraReviewDueDate_cache
+                  )
+                : '',
 
             filterListsSpecies: {},
             scientific_name_list: [],
@@ -430,148 +686,78 @@ export default {
             processing_statuses: [
                 { value: 'draft', name: 'Draft', className: '' },
                 { value: 'discarded', name: 'Discarded', className: '' },
-                { value: 'awaiting_assessor_action', name: 'Awaiting Assessor Action', className: 'optionGroup' },
-                { value: 'with_assessor', name: 'With Assessor', className: 'optionChild' },
-                { value: 'with_referral', name: 'With Referral', className: 'optionChild' },
-                { value: 'deferred', name: 'Deferred', className: 'optionChild' },
-                { value: 'awaiting_approver_action', name: 'Awaiting Approver Action', className: 'optionGroup' },
-                { value: 'proposed_for_agenda', name: 'Proposed For Agenda', className: 'optionChild' },
-                { value: 'ready_for_agenda', name: 'Ready For Agenda', className: 'optionChild' },
-                { value: 'on_agenda', name: 'On Agenda', className: 'optionChild' },
-                { value: 'with_approver', name: 'Proposed DeListed', className: 'optionChild' },
-                { value: 'inactive', name: 'Inactive', className: 'optionGroup' },
-                { value: 'declined', name: 'Declined', className: 'optionChild' },
+                {
+                    value: 'awaiting_assessor_action',
+                    name: 'Awaiting Assessor Action',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'with_assessor',
+                    name: 'With Assessor',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'with_referral',
+                    name: 'With Referral',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'deferred',
+                    name: 'Deferred',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'awaiting_approver_action',
+                    name: 'Awaiting Approver Action',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'proposed_for_agenda',
+                    name: 'Proposed For Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'ready_for_agenda',
+                    name: 'Ready For Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'on_agenda',
+                    name: 'On Agenda',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'with_approver',
+                    name: 'Proposed DeListed',
+                    className: 'optionChild',
+                },
+                {
+                    value: 'inactive',
+                    name: 'Inactive',
+                    className: 'optionGroup',
+                },
+                {
+                    value: 'declined',
+                    name: 'Declined',
+                    className: 'optionChild',
+                },
                 { value: 'closed', name: 'Closed', className: 'optionChild' },
-                { value: 'delisted', name: 'DeListed', className: 'optionChild' },
+                {
+                    value: 'delisted',
+                    name: 'DeListed',
+                    className: 'optionChild',
+                },
                 { value: 'approved', name: 'Approved', className: '' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        SpeciesConservationStatusHistory,
-    },
-    watch: {
-        filterCSFloraScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraScientificName_cache, vm.filterCSFloraScientificName);
-        },
-        filterCSFloraCommonName: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraCommonName_cache, vm.filterCSFloraCommonName);
-        },
-        filterCSFloraPhylogeneticGroup: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraPhylogeneticGroup_cache, vm.filterCSFloraPhylogeneticGroup);
-        },
-        filterCSFloraFamily: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraFamily_cache, vm.filterCSFloraFamily);
-        },
-        filterCSFloraGenus: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraGenus_cache, vm.filterCSFloraGenus);
-        },
-        filterCSFloraChangeCode: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraChangeCode_cache, vm.filterCSFloraChangeCode);
-        },
-        filterCSFloraWALegislativeList: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraWALegislativeList_cache, vm.filterCSFloraWALegislativeList);
-        },
-        filterCSFloraWALegislativeCategory: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraWALegislativeCategory_cache, vm.filterCSFloraWALegislativeCategory);
-        },
-        filterCSFloraWAPriorityCategory: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraWAPriorityCategory_cache, vm.filterCSFloraWAPriorityCategory);
-        },
-        filterCSFloraCommonwealthRelevance: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraCommonwealthRelevance_cache, vm.filterCSFloraCommonwealthRelevance);
-        },
-        filterCSFloraInternationalRelevance: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraInternationalRelevance_cache, vm.filterCSFloraInternationalRelevance);
-        },
-        filterCSFloraAssessor: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraAssessor_cache, vm.filterCSFloraAssessor);
-        },
-        filterCSFloraSubmitter: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraSubmitter_cache, vm.filterCSFloraSubmitter);
-        },
-        filterCSFloraSubmitterCategory: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraSubmitterCategory_cache, vm.filterCSFloraSubmitterCategory);
-        },
-        filterCSFromFloraEffectiveFromDate: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromFloraEffectiveFromDate_cache, vm.filterCSFromFloraEffectiveFromDate);
-        },
-        filterCSToFloraEffectiveFromDate: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToFloraEffectiveFromDate_cache, vm.filterCSToFloraEffectiveFromDate);
-        },
-        filterCSFromFloraEffectiveToDate: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromFloraEffectiveToDate_cache, vm.filterCSFromFloraEffectiveToDate);
-        },
-        filterCSToFloraEffectiveToDate: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToFloraEffectiveToDate_cache, vm.filterCSToFloraEffectiveToDate);
-        },
-        filterCSFromFloraReviewDueDate: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFromFloraReviewDueDate_cache, vm.filterCSFromFloraReviewDueDate);
-        },
-        filterCSToFloraReviewDueDate: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSToFloraReviewDueDate_cache, vm.filterCSToFloraReviewDueDate);
-        },
-        filterCSFloraApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSFloraApplicationStatus_cache, vm.filterCSFloraApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         defaultApplicationStatus: function () {
             return this.is_for_agenda ? 'ready_for_agenda' : 'approved';
         },
         filterApplied: function () {
-            if (this.filterCSFloraScientificName === 'all' &&
+            if (
+                this.filterCSFloraScientificName === 'all' &&
                 this.filterCSFloraCommonName === 'all' &&
                 this.filterCSFloraPhylogeneticGroup === 'all' &&
                 this.filterCSFloraFamily === 'all' &&
@@ -585,306 +771,334 @@ export default {
                 this.filterCSFloraAssessor === 'all' &&
                 this.filterCSFloraSubmitter === 'all' &&
                 this.filterCSFloraSubmitterCategory === 'all' &&
-                this.filterCSFloraApplicationStatus === this.defaultApplicationStatus &&
+                this.filterCSFloraApplicationStatus ===
+                    this.defaultApplicationStatus &&
                 this.filterCSFromFloraEffectiveFromDate === '' &&
                 this.filterCSToFloraEffectiveFromDate === '' &&
                 this.filterCSFromFloraEffectiveToDate === '' &&
                 this.filterCSToFloraEffectiveToDate === '' &&
                 this.filterCSFromFloraReviewDueDate === '' &&
-                this.filterCSToFloraReviewDueDate === '') {
-                return false
+                this.filterCSToFloraReviewDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_referral: function () {
             return this.level == 'referral';
         },
         addFloraCSVisibility: function () {
-            return this.profile && this.profile.groups.find(
-                (i) => [
-                    constants.GROUPS.INTERNAL_CONTRIBUTORS
-                ].includes(i)
+            return (
+                this.profile &&
+                this.profile.groups.find((i) =>
+                    [constants.GROUPS.INTERNAL_CONTRIBUTORS].includes(i)
+                )
             );
         },
         datatable_headers: function () {
-            return ['Number', 'Species', 'Scientific Name', 'Common Name', 'Family', 'Genera', 'Phylo Group(s)', 'Change Type', 'WA Priority List',
-                'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category', 'International Conservation',
+            return [
+                'Number',
+                'Species',
+                'Scientific Name',
+                'Common Name',
+                'Family',
+                'Genera',
+                'Phylo Group(s)',
+                'Change Type',
+                'WA Priority List',
+                'WA Priority Category',
+                'WA Legislative List',
+                'WA Legislative Category',
+                'Commonwealth Conservation Category',
+                'International Conservation',
                 'Conservation Criteria',
-                'Submitter Name', 'Submitter Category', 'Submitter Organisation', 'Assessor Name', 'Effective From Date', 'Effective To Date', 'Review Due Date',
-                'Status', 'Action']
+                'Submitter Name',
+                'Submitter Category',
+                'Submitter Organisation',
+                'Assessor Name',
+                'Effective From Date',
+                'Effective To Date',
+                'Review Due Date',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             let vm = this;
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    let value = full.conservation_status_number
+                render: function (data, type, full) {
+                    let value = full.conservation_status_number;
                     if (full.is_new_contributor) {
-                        value += ' <span class="badge bg-warning">New Contributor</span>'
+                        value +=
+                            ' <span class="badge bg-warning">New Contributor</span>';
                     }
-                    return value
+                    return value;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_species_number: function () {
             return {
-                data: "species_number",
+                data: 'species_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.species_number
+                render: function (data, type, full) {
+                    return full.species_number;
                 },
-                name: "species__species_number",
-            }
+                name: 'species__species_number',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species_taxonomy__scientific_name",
-            }
+                name: 'species_taxonomy__scientific_name',
+            };
         },
         column_common_name: function () {
             return {
-                data: "common_name",
+                data: 'common_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species_taxonomy__vernaculars__vernacular_name",
-            }
+                name: 'species_taxonomy__vernaculars__vernacular_name',
+            };
         },
         column_family: function () {
             return {
-                data: "family",
+                data: 'family',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species_taxonomy__family_name",
-            }
+                name: 'species_taxonomy__family_name',
+            };
         },
         column_genera: function () {
             return {
-                data: "genus",
+                data: 'genus',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species_taxonomy__genera_name",
-            }
+                name: 'species_taxonomy__genera_name',
+            };
         },
         column_phylo_group: function () {
             return {
-                data: "phylogenetic_group",
+                data: 'phylogenetic_group',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "species_taxonomy__phylogenetic_group",
+                name: 'species_taxonomy__phylogenetic_group',
                 render: function (data, type, full) {
                     let html = '';
                     if (full.phylogenetic_group) {
-                        for (let i = 0; i < full.phylogenetic_group.length; i++) {
-                            html += `<span class="badge bg-primary">${full.phylogenetic_group[i]}</span>`
+                        for (
+                            let i = 0;
+                            i < full.phylogenetic_group.length;
+                            i++
+                        ) {
+                            html += `<span class="badge bg-primary">${full.phylogenetic_group[i]}</span>`;
                         }
                     }
-                    return html
-                }
-            }
+                    return html;
+                },
+            };
         },
         column_change_code: function () {
             return {
-                data: "change_code",
+                data: 'change_code',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "change_code__code",
-            }
+                name: 'change_code__code',
+            };
         },
         column_wa_priority_list: function () {
             return {
-                data: "wa_priority_list",
+                data: 'wa_priority_list',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_priority_list__code",
-            }
+                name: 'wa_priority_list__code',
+            };
         },
         column_wa_priority_category: function () {
             return {
-                data: "wa_priority_category",
+                data: 'wa_priority_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_priority_category__code",
-            }
+                name: 'wa_priority_category__code',
+            };
         },
         column_wa_legislative_list: function () {
             return {
-                data: "wa_legislative_list",
+                data: 'wa_legislative_list',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_legislative_list__code",
-            }
+                name: 'wa_legislative_list__code',
+            };
         },
         column_wa_legislative_category: function () {
             return {
-                data: "wa_legislative_category",
+                data: 'wa_legislative_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "wa_legislative_category__code",
-            }
+                name: 'wa_legislative_category__code',
+            };
         },
         column_commonwealth_conservation_category: function () {
             return {
-                data: "commonwealth_conservation_category",
+                data: 'commonwealth_conservation_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "commonwealth_conservation_category",
-            }
+                name: 'commonwealth_conservation_category',
+            };
+        },
+        column_other_conservation_assessment: function () {
+            return {
+                data: 'other_conservation_assessment',
+                orderable: true,
+                searchable: true,
+                visible: true,
+                name: 'other_conservation_assessment',
+            };
         },
-        column_other_conservation_assessment:
-            function () {
-                return {
-                    data: "other_conservation_assessment",
-                    orderable: true,
-                    searchable: true,
-                    visible: true,
-                    name: "other_conservation_assessment",
-                }
-            },
         column_conservation_criteria: function () {
             return {
-                data: "conservation_criteria",
+                data: 'conservation_criteria',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "conservation_criteria",
-            }
+                name: 'conservation_criteria',
+            };
         },
         column_submitter_name: function () {
             return {
-                data: "submitter_name",
+                data: 'submitter_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "submitter_information__name",
-            }
+                name: 'submitter_information__name',
+            };
         },
         column_submitter_category: function () {
             return {
-                data: "submitter_category",
+                data: 'submitter_category',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "submitter_information__submitter_category__name",
-            }
+                name: 'submitter_information__submitter_category__name',
+            };
         },
         column_submitter_organisation: function () {
             return {
-                data: "submitter_organisation",
+                data: 'submitter_organisation',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "submitter_information__organisation",
-            }
+                name: 'submitter_information__organisation',
+            };
         },
         column_assessor_name: function () {
             return {
-                data: "assessor_name",
+                data: 'assessor_name',
                 orderable: true,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_status: function () {
             return {
                 // 9. Workflow Status
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.processing_status) {
                         return full.processing_status;
                     }
-                    return ''
+                    return '';
                 },
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_effective_from: function () {
             return {
-                data: "effective_from",
+                data: 'effective_from',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "effective_from",
-            }
+                name: 'effective_from',
+            };
         },
         column_effective_to: function () {
             return {
-                data: "effective_to",
+                data: 'effective_to',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "effective_to",
-            }
+                name: 'effective_to',
+            };
         },
         column_review_due_date: function () {
             return {
-                data: "review_due_date",
+                data: 'review_due_date',
                 orderable: true,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
                 // 10. Action
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (vm.is_for_agenda == false) {
                         if (full.internal_user_edit) {
                             links += `<a href='/internal/conservation-status/${full.id}'>Continue</a><br/>`;
@@ -892,16 +1106,20 @@ export default {
                             links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                 data-history-species='${full.species_number}'
                                 >History</a><br>`;
-                        }
-                        else {
-                            if (full.assessor_process || full.approver_process) {
+                        } else {
+                            if (
+                                full.assessor_process ||
+                                full.approver_process
+                            ) {
                                 links += `<a href='/internal/conservation-status/${full.id}'>Process</a><br/>`;
                                 links += `<a href='#' data-history-conservation-status-species='${full.id}'
                                         data-history-species='${full.species_number}'
                                         >History</a><br>`;
-                            }
-                            else {
-                                if (full.processing_status == constants.PROPOSAL_STATUS.DISCARDED.TEXT) {
+                            } else {
+                                if (
+                                    full.processing_status ==
+                                    constants.PROPOSAL_STATUS.DISCARDED.TEXT
+                                ) {
                                     links += `<a href='#' data-reinstate-conservation-status-species='${full.id}'>Reinstate</a><br/>`;
                                 }
                                 links += `<a href='/internal/conservation-status/${full.id}?action=view'>View</a><br/>`;
@@ -910,24 +1128,22 @@ export default {
                                     >History</a><br>`;
                             }
                         }
-                    }
-                    else {
+                    } else {
                         if (vm.meeting_obj.agenda_items_arr.includes(full.id)) {
                             links += `<a>Added</a><br/>`;
-                        }
-                        else {
+                        } else {
                             links += `<a href='#${full.id}' data-add-to-agenda='${full.id}'>Add</a><br/>`;
                         }
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -936,7 +1152,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -945,9 +1161,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
 
             columns = [
                 vm.column_number,
@@ -974,61 +1190,82 @@ export default {
                 vm.column_review_due_date,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = true
+            ];
+            search = true;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_scientific_name = vm.filterCSFloraScientificName;
+                        d.filter_scientific_name =
+                            vm.filterCSFloraScientificName;
                         d.filter_common_name = vm.filterCSFloraCommonName;
-                        d.filter_phylogenetic_group = vm.filterCSFloraPhylogeneticGroup;
+                        d.filter_phylogenetic_group =
+                            vm.filterCSFloraPhylogeneticGroup;
                         d.filter_family = vm.filterCSFloraFamily;
                         d.filter_genus = vm.filterCSFloraGenus;
                         d.filter_change_code = vm.filterCSFloraChangeCode;
-                        d.filter_wa_legislative_list = vm.filterCSFloraWALegislativeList;
-                        d.filter_wa_legislative_category = vm.filterCSFloraWALegislativeCategory;
-                        d.filter_wa_priority_category = vm.filterCSFloraWAPriorityCategory;
-                        d.filter_commonwealth_relevance = vm.filterCSFloraCommonwealthRelevance;
-                        d.filter_international_relevance = vm.filterCSFloraInternationalRelevance;
+                        d.filter_wa_legislative_list =
+                            vm.filterCSFloraWALegislativeList;
+                        d.filter_wa_legislative_category =
+                            vm.filterCSFloraWALegislativeCategory;
+                        d.filter_wa_priority_category =
+                            vm.filterCSFloraWAPriorityCategory;
+                        d.filter_commonwealth_relevance =
+                            vm.filterCSFloraCommonwealthRelevance;
+                        d.filter_international_relevance =
+                            vm.filterCSFloraInternationalRelevance;
                         d.filter_assessor = vm.filterCSFloraAssessor;
                         d.filter_submitter = vm.filterCSFloraSubmitter;
-                        d.filter_submitter_category = vm.filterCSFloraSubmitterCategory;
-                        d.filter_application_status = vm.filterCSFloraApplicationStatus;
-                        d.filter_from_effective_from_date = vm.filterCSFromFloraEffectiveFromDate;
-                        d.filter_to_effective_from_date = vm.filterCSToFloraEffectiveFromDate;
-                        d.filter_from_effective_to_date = vm.filterCSFromFloraEffectiveToDate;
-                        d.filter_to_effective_to_date = vm.filterCSToFloraEffectiveToDate;
-                        d.filter_from_review_due_date = vm.filterCSFromFloraReviewDueDate;
-                        d.filter_to_review_due_date = vm.filterCSToFloraReviewDueDate;
-                    }
+                        d.filter_submitter_category =
+                            vm.filterCSFloraSubmitterCategory;
+                        d.filter_application_status =
+                            vm.filterCSFloraApplicationStatus;
+                        d.filter_from_effective_from_date =
+                            vm.filterCSFromFloraEffectiveFromDate;
+                        d.filter_to_effective_from_date =
+                            vm.filterCSToFloraEffectiveFromDate;
+                        d.filter_from_effective_to_date =
+                            vm.filterCSFromFloraEffectiveToDate;
+                        d.filter_to_effective_to_date =
+                            vm.filterCSToFloraEffectiveToDate;
+                        d.filter_from_review_due_date =
+                            vm.filterCSFromFloraReviewDueDate;
+                        d.filter_to_review_due_date =
+                            vm.filterCSToFloraReviewDueDate;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: vm.is_for_agenda == false ? buttons : [],
@@ -1040,301 +1277,730 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSFloraScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraScientificName_cache,
+                vm.filterCSFloraScientificName
+            );
+        },
+        filterCSFloraCommonName: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraCommonName_cache,
+                vm.filterCSFloraCommonName
+            );
+        },
+        filterCSFloraPhylogeneticGroup: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraPhylogeneticGroup_cache,
+                vm.filterCSFloraPhylogeneticGroup
+            );
+        },
+        filterCSFloraFamily: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraFamily_cache,
+                vm.filterCSFloraFamily
+            );
+        },
+        filterCSFloraGenus: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraGenus_cache,
+                vm.filterCSFloraGenus
+            );
+        },
+        filterCSFloraChangeCode: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraChangeCode_cache,
+                vm.filterCSFloraChangeCode
+            );
+        },
+        filterCSFloraWALegislativeList: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraWALegislativeList_cache,
+                vm.filterCSFloraWALegislativeList
+            );
+        },
+        filterCSFloraWALegislativeCategory: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraWALegislativeCategory_cache,
+                vm.filterCSFloraWALegislativeCategory
+            );
+        },
+        filterCSFloraWAPriorityCategory: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraWAPriorityCategory_cache,
+                vm.filterCSFloraWAPriorityCategory
+            );
+        },
+        filterCSFloraCommonwealthRelevance: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraCommonwealthRelevance_cache,
+                vm.filterCSFloraCommonwealthRelevance
+            );
+        },
+        filterCSFloraInternationalRelevance: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraInternationalRelevance_cache,
+                vm.filterCSFloraInternationalRelevance
+            );
+        },
+        filterCSFloraAssessor: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraAssessor_cache,
+                vm.filterCSFloraAssessor
+            );
+        },
+        filterCSFloraSubmitter: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraSubmitter_cache,
+                vm.filterCSFloraSubmitter
+            );
+        },
+        filterCSFloraSubmitterCategory: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraSubmitterCategory_cache,
+                vm.filterCSFloraSubmitterCategory
+            );
+        },
+        filterCSFromFloraEffectiveFromDate: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromFloraEffectiveFromDate_cache,
+                vm.filterCSFromFloraEffectiveFromDate
+            );
+        },
+        filterCSToFloraEffectiveFromDate: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToFloraEffectiveFromDate_cache,
+                vm.filterCSToFloraEffectiveFromDate
+            );
+        },
+        filterCSFromFloraEffectiveToDate: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromFloraEffectiveToDate_cache,
+                vm.filterCSFromFloraEffectiveToDate
+            );
+        },
+        filterCSToFloraEffectiveToDate: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToFloraEffectiveToDate_cache,
+                vm.filterCSToFloraEffectiveToDate
+            );
+        },
+        filterCSFromFloraReviewDueDate: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFromFloraReviewDueDate_cache,
+                vm.filterCSFromFloraReviewDueDate
+            );
+        },
+        filterCSToFloraReviewDueDate: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSToFloraReviewDueDate_cache,
+                vm.filterCSToFloraReviewDueDate
+            );
+        },
+        filterCSFloraApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSFloraApplicationStatus_cache,
+                vm.filterCSFloraApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        if (
+            vm.profile &&
+            vm.profile.groups &&
+            vm.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS)
+        ) {
+            vm.processing_statuses.push({
+                value: 'discarded_by_me',
+                name: 'Discarded By Me',
+            });
         }
+        vm.fetchFilterLists();
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommonNameLookup();
+            vm.initialisePhyloGroupLookup();
+            vm.initialiseFamilyLookup();
+            vm.initialiseGeneraLookup();
+            vm.initialiseAssessorLookup();
+            vm.initialiseSubmitterLookup();
+            vm.addEventListeners();
+
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterCSFloraScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSFloraScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFloraScientificNameText'),
+                    vm.filterCSFloraScientificName,
+                    false,
+                    true
+                );
+                $('#cs_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFloraCommonName') != 'all' &&
+                sessionStorage.getItem('filterCSFloraCommonName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFloraCommonNameText'),
+                    vm.filterCSFloraCommonName,
+                    false,
+                    true
+                );
+                $('#cs_common_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFloraPhylogeneticGroup') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSFloraPhylogeneticGroup') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSFloraPhylogeneticGroupText'
+                    ),
+                    vm.filterCSFloraPhylogeneticGroup,
+                    false,
+                    true
+                );
+                $('#cs_phylo_group_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFloraFamily') != 'all' &&
+                sessionStorage.getItem('filterCSFloraFamily') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFloraFamilyText'),
+                    vm.filterCSFloraFamily,
+                    false,
+                    true
+                );
+                $('#cs_family_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFloraGenus') != 'all' &&
+                sessionStorage.getItem('filterCSFloraGenus') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFloraGenusText'),
+                    vm.filterCSFloraGenus,
+                    false,
+                    true
+                );
+                $('#cs_genera_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFloraAssessor') != 'all' &&
+                sessionStorage.getItem('filterCSFloraAssessor') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFloraAssessorText'),
+                    vm.filterCSFloraAssessor,
+                    false,
+                    true
+                );
+                $('#cs_assessor_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSFloraSubmitter') != 'all' &&
+                sessionStorage.getItem('filterCSFloraSubmitter') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSFloraSubmitterText'),
+                    vm.filterCSFloraSubmitter,
+                    false,
+                    true
+                );
+                $('#cs_submitter_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id, species) {
             this.speciesConservationStatusHistoryId = parseInt(id);
-            this.speciesHistoryId = species ? species : "not specified";
+            this.speciesHistoryId = species ? species : 'not specified';
             this.uuid++;
             this.$nextTick(() => {
                 this.$refs.species_conservation_status_history.isModalOpen = true;
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_scientific_name"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_scientific_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraScientificName = data;
-                    sessionStorage.setItem("filterCSFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFloraScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFloraScientificName = 'all';
-                    sessionStorage.setItem("filterCSFloraScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_scientific_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSFloraScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommonNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_common_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_common_name"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Common Name",
-                ajax: {
-                    url: api_endpoints.common_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_common_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_common_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Common Name',
+                    ajax: {
+                        url: api_endpoints.common_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraCommonName = data;
-                    sessionStorage.setItem("filterCSFloraCommonNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFloraCommonNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFloraCommonName = 'all';
-                    sessionStorage.setItem("filterCSFloraCommonNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_common_name_lookup-results"]')
+                    sessionStorage.setItem('filterCSFloraCommonNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_common_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialisePhyloGroupLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_phylo_group_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_phylo_group"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Phylo Group",
-                ajax: {
-                    url: api_endpoints.phylo_group_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_phylo_group_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_phylo_group'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Phylo Group',
+                    ajax: {
+                        url: api_endpoints.phylo_group_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraPhylogeneticGroup = data;
-                    sessionStorage.setItem("filterCSFloraPhylogeneticGroupText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFloraPhylogeneticGroupText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFloraPhylogeneticGroup = 'all';
-                    sessionStorage.setItem("filterCSFloraPhylogeneticGroupText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_phylo_group_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSFloraPhylogeneticGroupText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_phylo_group_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseFamilyLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_family_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_family"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Family",
-                ajax: {
-                    url: api_endpoints.family_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_family_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_family'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Family',
+                    ajax: {
+                        url: api_endpoints.family_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraFamily = data;
-                    sessionStorage.setItem("filterCSFloraFamilyText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFloraFamilyText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFloraFamily = 'all';
-                    sessionStorage.setItem("filterCSFloraFamilyText", '');
-                }).
-                on("select2:open", function (e) {
+                    sessionStorage.setItem('filterCSFloraFamilyText', '');
+                })
+                .on('select2:open', function (e) {
                     //const searchField = $(".select2-search__field")
-                    const searchField = $('[aria-controls="select2-cs_family_lookup-results"]')
+                    const searchField = $(
+                        '[aria-controls="select2-cs_family_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseGeneraLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_genera_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_genera"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Genera",
-                ajax: {
-                    url: api_endpoints.genera_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.cs_genera_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_genera'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Genera',
+                    ajax: {
+                        url: api_endpoints.genera_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraGenus = data;
-                    sessionStorage.setItem("filterCSFloraGenusText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSFloraGenusText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSFloraGenus = 'all';
-                    sessionStorage.setItem("filterCSFloraGenusText", '');
-                }).
-                on("select2:open", function (e) {
+                    sessionStorage.setItem('filterCSFloraGenusText', '');
+                })
+                .on('select2:open', function (e) {
                     //const searchField = $(".select2-search__field")
-                    const searchField = $('[aria-controls="select2-cs_genera_lookup-results"]')
+                    const searchField = $(
+                        '[aria-controls="select2-cs_genera_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseAssessorLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_assessor_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Search for Assessor",
-                ajax: {
-                    url: api_endpoints.users_api + '/get_department_users_ledger_id/',
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                        }
-                        return query;
+            $(vm.$refs.cs_assessor_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search for Assessor',
+                    ajax: {
+                        url:
+                            api_endpoints.users_api +
+                            '/get_department_users_ledger_id/',
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                            };
+                            return query;
+                        },
                     },
-                },
-            })
-                .on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.filterCSFloraAssessor = data;
-                    sessionStorage.setItem("filterCSFloraAssessorText", e.params.data.text);
+                    sessionStorage.setItem(
+                        'filterCSFloraAssessorText',
+                        e.params.data.text
+                    );
                 })
-                .on("select2:unselect", function (e) {
+                .on('select2:unselect', function (e) {
                     vm.filterCSFloraAssessor = 'all';
-                    sessionStorage.setItem("filterCSFloraAssessorText", '');
+                    sessionStorage.setItem('filterCSFloraAssessorText', '');
                 })
-                .on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_assessor_lookup-results"]')
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_assessor_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseSubmitterLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_submitter_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Search for Submitter",
-                ajax: {
-                    url: api_endpoints.users_api + '/get_users_ledger_id/',
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                        }
-                        return query;
+            $(vm.$refs.cs_submitter_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search for Submitter',
+                    ajax: {
+                        url: api_endpoints.users_api + '/get_users_ledger_id/',
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                            };
+                            return query;
+                        },
                     },
-                },
-            })
-                .on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.filterCSFloraSubmitter = data;
-                    sessionStorage.setItem("filterCSFloraSubmitterText", e.params.data.text);
+                    sessionStorage.setItem(
+                        'filterCSFloraSubmitterText',
+                        e.params.data.text
+                    );
                 })
-                .on("select2:unselect", function (e) {
+                .on('select2:unselect', function (e) {
                     vm.selected_referral = null;
                     vm.filterCSFloraSubmitter = 'all';
-                    sessionStorage.setItem("filterCSFloraSubmitterText", '');
+                    sessionStorage.setItem('filterCSFloraSubmitterText', '');
                 })
-                .on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_submitter_lookup-results"]')
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_submitter_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.common_name_list = vm.filterListsSpecies.common_name_list;
-                vm.family_list = vm.filterListsSpecies.family_list;
-                vm.wa_legislative_lists = vm.filterListsSpecies.wa_legislative_lists;
-                vm.wa_legislative_categories = vm.filterListsSpecies.wa_legislative_categories;
-                vm.wa_priority_lists = vm.filterListsSpecies.wa_priority_lists;
-                vm.wa_priority_categories = vm.filterListsSpecies.wa_priority_categories;
-                vm.change_codes = vm.filterListsSpecies.change_codes;
-                vm.submitter_categories = vm.filterListsSpecies.submitter_categories;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.common_name_list =
+                        vm.filterListsSpecies.common_name_list;
+                    vm.family_list = vm.filterListsSpecies.family_list;
+                    vm.wa_legislative_lists =
+                        vm.filterListsSpecies.wa_legislative_lists;
+                    vm.wa_legislative_categories =
+                        vm.filterListsSpecies.wa_legislative_categories;
+                    vm.wa_priority_lists =
+                        vm.filterListsSpecies.wa_priority_lists;
+                    vm.wa_priority_categories =
+                        vm.filterListsSpecies.wa_priority_categories;
+                    vm.change_codes = vm.filterListsSpecies.change_codes;
+                    vm.submitter_categories =
+                        vm.filterListsSpecies.submitter_categories;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createFloraConservationStatus: async function () {
             swal.fire({
                 title: `Propose New Flora Conservation Status`,
-                text: "Are you sure you want to propose a new flora conservation status?",
-                icon: "question",
+                text: 'Are you sure you want to propose a new flora conservation status?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Propose New Conservation Status',
                 reverseButtons: true,
@@ -1344,23 +2010,23 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFloraCSId = null
+                    let newFloraCSId = null;
                     try {
-                        const createUrl = api_endpoints.conservation_status + "/";
+                        const createUrl =
+                            api_endpoints.conservation_status + '/';
                         let payload = new Object();
-                        payload.application_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.application_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
-                            headers: { 'Content-Type': 'application/json', },
+                            headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(payload),
                         });
                         const data = await response.json();
                         if (data) {
                             newFloraCSId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -1373,9 +2039,9 @@ export default {
         discardCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Conservation Status Proposal",
-                text: "Are you sure you want to discard this proposal?",
-                icon: "question",
+                title: 'Discard Conservation Status Proposal',
+                text: 'Are you sure you want to discard this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Proposal',
                 customClass: {
@@ -1383,36 +2049,49 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your proposal has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_cs_proposal(
+                                conservation_status_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your proposal has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Conservation Status Proposal",
-                text: "Are you sure you want to reinstate this proposal?",
-                icon: "question",
+                title: 'Reinstate Conservation Status Proposal',
+                text: 'Are you sure you want to reinstate this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Proposal',
                 customClass: {
@@ -1420,29 +2099,42 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your proposal has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_cs_proposal(
+                                conservation_status_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your proposal has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addToMeetingAgenda: function (conservation_status_id) {
             let vm = this;
@@ -1450,100 +2142,75 @@ export default {
             payload.conservation_status_id = conservation_status_id;
             fetch(`/api/meeting/${vm.meeting_obj.id}/add_agenda_item.json`, {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json', },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                vm.meeting_obj.agenda_items_arr = await response.json();
-                vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                this.$emit('updateAgendaItems');
-            },
-                err => {
+            }).then(
+                async (response) => {
+                    vm.meeting_obj.agenda_items_arr = await response.json();
+                    vm.$refs.flora_cs_datatable.vmDataTable.ajax.reload(
+                        helpers.enablePopovers,
+                        false
+                    );
+                    this.$emit('updateAgendaItems');
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.flora_cs_datatable.vmDataTable.on('click', 'a[data-discard-cs-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-cs-proposal');
-                vm.discardCSProposal(id);
-            });
-            vm.$refs.flora_cs_datatable.vmDataTable.on('click', 'a[data-reinstate-conservation-status-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-conservation-status-species');
-                vm.reinstateCSProposal(id);
-            });
-            vm.$refs.flora_cs_datatable.vmDataTable.on('click', 'a[data-add-to-agenda]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-add-to-agenda');
-                vm.addToMeetingAgenda(id);
-            });
-            vm.$refs.flora_cs_datatable.vmDataTable.on('click', 'a[data-history-conservation-status-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-conservation-status-species');
-                var species = $(this).attr('data-history-species');
-                vm.historyDocument(id, species);
-            });
-            vm.$refs.flora_cs_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-cs-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-cs-proposal');
+                    vm.discardCSProposal(id);
+                }
+            );
+            vm.$refs.flora_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-conservation-status-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr(
+                        'data-reinstate-conservation-status-species'
+                    );
+                    vm.reinstateCSProposal(id);
+                }
+            );
+            vm.$refs.flora_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-add-to-agenda]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-add-to-agenda');
+                    vm.addToMeetingAgenda(id);
+                }
+            );
+            vm.$refs.flora_cs_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-conservation-status-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr(
+                        'data-history-conservation-status-species'
+                    );
+                    var species = $(this).attr('data-history-species');
+                    vm.historyDocument(id, species);
+                }
+            );
+            vm.$refs.flora_cs_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        if (vm.profile && vm.profile.groups && vm.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS)) {
-            vm.processing_statuses.push({ value: 'discarded_by_me', name: 'Discarded By Me' },);
-        }
-        vm.fetchFilterLists();
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommonNameLookup();
-            vm.initialisePhyloGroupLookup();
-            vm.initialiseFamilyLookup();
-            vm.initialiseGeneraLookup();
-            vm.initialiseAssessorLookup();
-            vm.initialiseSubmitterLookup();
-            vm.addEventListeners();
-
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterCSFloraScientificName") != 'all' && sessionStorage.getItem("filterCSFloraScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFloraScientificNameText"), vm.filterCSFloraScientificName, false, true);
-                $('#cs_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFloraCommonName") != 'all' && sessionStorage.getItem("filterCSFloraCommonName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFloraCommonNameText"), vm.filterCSFloraCommonName, false, true);
-                $('#cs_common_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFloraPhylogeneticGroup") != 'all' && sessionStorage.getItem("filterCSFloraPhylogeneticGroup") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFloraPhylogeneticGroupText"), vm.filterCSFloraPhylogeneticGroup, false, true);
-                $('#cs_phylo_group_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFloraFamily") != 'all' && sessionStorage.getItem("filterCSFloraFamily") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFloraFamilyText"), vm.filterCSFloraFamily, false, true);
-                $('#cs_family_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFloraGenus") != 'all' && sessionStorage.getItem("filterCSFloraGenus") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFloraGenusText"), vm.filterCSFloraGenus, false, true);
-                $('#cs_genera_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFloraAssessor") != 'all' && sessionStorage.getItem("filterCSFloraAssessor") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFloraAssessorText"), vm.filterCSFloraAssessor, false, true);
-                $('#cs_assessor_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSFloraSubmitter") != 'all' && sessionStorage.getItem("filterCSFloraSubmitter") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSFloraSubmitterText"), vm.filterCSFloraSubmitter, false, true);
-                $('#cs_submitter_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -1571,7 +2238,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -1596,7 +2265,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
index a933c8f8..c43dee47 100644
--- a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
@@ -1,28 +1,51 @@
 <template id="cs_communities_referrals_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_community_id_lookup">Community ID:</label>
-                        <select id="cs_ref_community_id_lookup" name="cs_ref_community_id_lookup"
-                            ref="cs_ref_community_id_lookup" class="form-control" />
+                        <label for="cs_ref_community_id_lookup"
+                            >Community ID:</label
+                        >
+                        <select
+                            id="cs_ref_community_id_lookup"
+                            ref="cs_ref_community_id_lookup"
+                            name="cs_ref_community_id_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_community_name_lookup">Community Name:</label>
-                        <select id="cs_ref_community_name_lookup" name="cs_ref_community_name_lookup"
-                            ref="cs_ref_community_name_lookup" class="form-control" />
+                        <label for="cs_ref_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="cs_ref_community_name_lookup"
+                            ref="cs_ref_community_name_lookup"
+                            name="cs_ref_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSRefCommunityApplicationStatus">
+                        <select
+                            v-model="filterCSRefCommunityApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -31,38 +54,42 @@
         </CollapsibleFilters>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="cs_communities_ref_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="cs_communities_ref_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'CSReferralsCommunityTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+    },
     props: {
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         filterCSRefCommunityMigratedId_cache: {
             type: String,
@@ -95,167 +122,161 @@ export default {
         return {
             datatable_id: 'cs-communities-ref-datatable-' + vm._uid,
 
-            filterCSRefCommunityMigratedId: sessionStorage.getItem(this.filterCSRefCommunityMigratedId_cache) ?
-                sessionStorage.getItem(this.filterCSRefCommunityMigratedId_cache) : 'all',
+            filterCSRefCommunityMigratedId: sessionStorage.getItem(
+                this.filterCSRefCommunityMigratedId_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefCommunityMigratedId_cache
+                  )
+                : 'all',
 
-            filterCSRefCommunityName: sessionStorage.getItem(this.filterCSRefCommunityName_cache) ?
-                sessionStorage.getItem(this.filterCSRefCommunityName_cache) : 'all',
+            filterCSRefCommunityName: sessionStorage.getItem(
+                this.filterCSRefCommunityName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSRefCommunityName_cache)
+                : 'all',
 
-            filterCSRefCommunityConservationList: sessionStorage.getItem(this.filterCSRefCommunityConservationList_cache) ? sessionStorage.getItem(this.filterCSRefCommunityConservationList_cache) : 'all',
+            filterCSRefCommunityConservationList: sessionStorage.getItem(
+                this.filterCSRefCommunityConservationList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefCommunityConservationList_cache
+                  )
+                : 'all',
 
-            filterCSRefCommunityConservationCategory:
-                sessionStorage.getItem(this.filterCSRefCommunityRefConservationCategory_cache) ?
-                    sessionStorage.getItem(this.filterCSRefCommunityRefConservationCategory_cache) : 'all',
+            filterCSRefCommunityConservationCategory: sessionStorage.getItem(
+                this.filterCSRefCommunityRefConservationCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefCommunityRefConservationCategory_cache
+                  )
+                : 'all',
 
-            filterCSRefCommunityApplicationStatus:
-                sessionStorage.getItem(this.filterCSRefCommunityApplicationStatus_cache) ?
-                    sessionStorage.getItem(this.filterCSRefCommunityApplicationStatus_cache) : 'all',
+            filterCSRefCommunityApplicationStatus: sessionStorage.getItem(
+                this.filterCSRefCommunityApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefCommunityApplicationStatus_cache
+                  )
+                : 'all',
 
             processing_statuses: [
                 { value: 'with_referral', name: 'Awaiting' },
                 { value: 'completed', name: 'Completed' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-    },
-    watch: {
-        filterCSRefCommunityMigratedId: function () {
-            let vm = this;
-            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefCommunityMigratedId_cache, vm.filterCSRefCommunityMigratedId);
-        },
-        filterCSRefCommunityName: function () {
-            let vm = this;
-            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefCommunityName_cache, vm.filterCSRefCommunityName);
-        },
-        filterCSRefCommunityConservationList: function () {
-            let vm = this;
-            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefCommunityConservationList_cache, vm.filterCSRefCommunityConservationList);
-        },
-        filterCSRefCommunityConservationCategory: function () {
-            let vm = this;
-            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefCommunityConservationCategory_cache,
-                vm.filterCSRefCommunityConservationCategory);
-        },
-        filterCSRefCommunityApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(
-                vm.filterCSRefCommunityApplicationStatus_cache, vm.filterCSRefCommunityApplicationStatus
-            );
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterCSRefCommunityMigratedId === 'all' &&
+            if (
+                this.filterCSRefCommunityMigratedId === 'all' &&
                 this.filterCSRefCommunityName === 'all' &&
                 this.filterCSRefCommunityConservationList === 'all' &&
                 this.filterCSRefCommunityConservationCategory === 'all' &&
-                this.filterCSRefCommunityApplicationStatus === 'all') {
-                return false
+                this.filterCSRefCommunityApplicationStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         datatable_headers: function () {
-            return ['Number', 'Community', 'Community Id', 'Community Name', 'Status', 'Action']
+            return [
+                'Number',
+                'Community',
+                'Community Id',
+                'Community Name',
+                'Status',
+                'Action',
+            ];
         },
         column_number: function () {
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let tick = '';
                     if (full.can_be_processed) {
-                        tick = " <i class='fa fa-exclamation-circle' style='color:#FFBF00'></i>";
-                    }
-                    else {
-                        tick = " <i class='fa fa-check-circle' style='color:green'></i>";
+                        tick =
+                            " <i class='fa fa-exclamation-circle' style='color:#FFBF00'></i>";
+                    } else {
+                        tick =
+                            " <i class='fa fa-check-circle' style='color:green'></i>";
                     }
                     return full.conservation_status_number + tick;
                 },
-                name: "conservation_status__id, conservation_status__conservation_status_number",
-            }
+                name: 'conservation_status__id, conservation_status__conservation_status_number',
+            };
         },
         column_community_number: function () {
             return {
-                data: "community_number",
+                data: 'community_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "conservation_status__community__community_number",
-            }
+                name: 'conservation_status__community__community_number',
+            };
         },
         column_community_id: function () {
             return {
-                data: "community_migrated_id",
+                data: 'community_migrated_id',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__community__taxonomy__community_migrated_id",
-            }
+                name: 'conservation_status__community__taxonomy__community_migrated_id',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__community__taxonomy__community_name",
-            }
+                name: 'conservation_status__community__taxonomy__community_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
             return {
-                data: "conservation_status_id",
+                data: 'conservation_status_id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed
+                        ? `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>`
+                        : `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
-                }
-            }
+                },
+            };
         },
         column_can_be_processed: function () {
             return {
-                data: "can_be_processed",
+                data: 'can_be_processed',
                 visible: false,
-            }
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
             let columns = [
                 vm.column_number,
@@ -264,9 +285,9 @@ export default {
                 vm.column_community_name,
                 vm.column_status,
                 vm.column_action,
-                vm.column_can_be_processed
-            ]
-            let search = false
+                vm.column_can_be_processed,
+            ];
+            let search = false;
             let buttons = [
                 {
                     extend: 'excel',
@@ -274,8 +295,8 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> Excel',
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
+                        columns: ':not(.no-export)',
+                    },
                 },
                 {
                     extend: 'csv',
@@ -283,48 +304,58 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> CSV',
                     className: 'btn btn-primary rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
-                }
-            ]
+                        columns: ':not(.no-export)',
+                    },
+                },
+            ];
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
-                        d.filter_community_migrated_id = vm.filterCSRefCommunityMigratedId;
+                    data: function (d) {
+                        d.filter_community_migrated_id =
+                            vm.filterCSRefCommunityMigratedId;
                         d.filter_community_name = vm.filterCSRefCommunityName;
-                        d.filter_conservation_list = vm.filterCSRefCommunityConservationList;
-                        d.filter_conservation_category = vm.filterCSRefCommunityConservationCategory;
+                        d.filter_conservation_list =
+                            vm.filterCSRefCommunityConservationList;
+                        d.filter_conservation_category =
+                            vm.filterCSRefCommunityConservationCategory;
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_application_status = vm.filterCSRefCommunityApplicationStatus;
+                        d.filter_application_status =
+                            vm.filterCSRefCommunityApplicationStatus;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -336,113 +367,218 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSRefCommunityMigratedId: function () {
+            let vm = this;
+            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefCommunityMigratedId_cache,
+                vm.filterCSRefCommunityMigratedId
+            );
+        },
+        filterCSRefCommunityName: function () {
+            let vm = this;
+            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefCommunityName_cache,
+                vm.filterCSRefCommunityName
+            );
+        },
+        filterCSRefCommunityConservationList: function () {
+            let vm = this;
+            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefCommunityConservationList_cache,
+                vm.filterCSRefCommunityConservationList
+            );
+        },
+        filterCSRefCommunityConservationCategory: function () {
+            let vm = this;
+            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefCommunityConservationCategory_cache,
+                vm.filterCSRefCommunityConservationCategory
+            );
+        },
+        filterCSRefCommunityApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.cs_communities_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefCommunityApplicationStatus_cache,
+                vm.filterCSRefCommunityApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
+            }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseCommunityNameLookup();
+            vm.initialiseCommunityIdLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterCSRefCommunityName') != 'all' &&
+                sessionStorage.getItem('filterCSRefCommunityName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefCommunityNameText'),
+                    vm.filterCSRefCommunityName,
+                    false,
+                    true
+                );
+                $('#cs_ref_community_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefCommunityMigratedId') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefCommunityMigratedId') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSRefCommunityMigratedIdText'
+                    ),
+                    vm.filterCSRefCommunityMigratedId,
+                    false,
+                    true
+                );
+                $('#cs_ref_community_id_lookup').append(newOption);
             }
-        }
+        });
     },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_community_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefCommunityName = data;
-                    sessionStorage.setItem("filterCSRefCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefCommunityName = 'all';
-                    sessionStorage.setItem("filterCSRefCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_community_name_lookup-results"]')
+                    sessionStorage.setItem('filterCSRefCommunityNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_community_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseCommunityIdLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_community_id_lookup).select2({
-                minimumInputLength: 1,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community ID",
-                ajax: {
-                    url: api_endpoints.community_id_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_community_id_lookup)
+                .select2({
+                    minimumInputLength: 1,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community ID',
+                    ajax: {
+                        url: api_endpoints.community_id_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefCommunityMigratedId = data;
-                    sessionStorage.setItem("filterCSRefCommunityMigratedIdText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefCommunityMigratedIdText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefCommunityMigratedId = 'all';
-                    sessionStorage.setItem("filterCSRefCommunityMigratedIdText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_community_id_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefCommunityMigratedIdText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_community_id_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.cs_communities_ref_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.cs_communities_ref_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseCommunityNameLookup();
-            vm.initialiseCommunityIdLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterCSRefCommunityName") != 'all' && sessionStorage.getItem("filterCSRefCommunityName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefCommunityNameText"), vm.filterCSRefCommunityName, false, true);
-                $('#cs_ref_community_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefCommunityMigratedId") != 'all' && sessionStorage.getItem("filterCSRefCommunityMigratedId") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefCommunityMigratedIdText"), vm.filterCSRefCommunityMigratedId, false, true);
-                $('#cs_ref_community_id_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
index 80a734aa..125384dd 100644
--- a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
@@ -1,28 +1,51 @@
 <template id="cs_external_referrals_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_scientific_name_lookup">Scientific Name:</label>
-                        <select id="cs_ref_scientific_name_lookup" name="cs_ref_scientific_name_lookup"
-                            ref="cs_ref_scientific_name_lookup" class="form-control" />
+                        <label for="cs_ref_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="cs_ref_scientific_name_lookup"
+                            ref="cs_ref_scientific_name_lookup"
+                            name="cs_ref_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_referrals_community_name_lookup">Community Name:</label>
-                        <select id="cs_referrals_community_name_lookup" name="cs_referrals_community_name_lookup"
-                            ref="cs_referrals_community_name_lookup" class="form-control" />
+                        <label for="cs_referrals_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="cs_referrals_community_name_lookup"
+                            ref="cs_referrals_community_name_lookup"
+                            name="cs_referrals_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSRefFloraApplicationStatus">
+                        <select
+                            v-model="filterCSRefFloraApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -32,30 +55,32 @@
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_cs_ref_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_cs_ref_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 
 export default {
     name: 'CSExternalReferralsTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+    },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         filterCSRefFloraScientificName_cache: {
             type: String,
@@ -78,141 +103,141 @@ export default {
         return {
             datatable_id: 'cs_external_ref-datatable-' + vm._uid,
 
-            filterCSRefFloraScientificName: sessionStorage.getItem(this.filterCSRefFloraScientificName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraScientificName_cache) : 'all',
+            filterCSRefFloraScientificName: sessionStorage.getItem(
+                this.filterCSRefFloraScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraScientificName_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraCommunityName: sessionStorage.getItem(this.filterCSRefFloraCommunityName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraCommunityName_cache) : 'all',
+            filterCSRefFloraCommunityName: sessionStorage.getItem(
+                this.filterCSRefFloraCommunityName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraCommunityName_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraApplicationStatus: sessionStorage.getItem(this.filterCSRefFloraApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraApplicationStatus_cache) : 'all',
+            filterCSRefFloraApplicationStatus: sessionStorage.getItem(
+                this.filterCSRefFloraApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraApplicationStatus_cache
+                  )
+                : 'all',
 
             processing_statuses: [
                 { value: 'with_referral', name: 'Awaiting' },
                 { value: 'completed', name: 'Completed' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-    },
-    watch: {
-        filterCSRefFloraScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraScientificName_cache, vm.filterCSRefFloraScientificName);
-        },
-        filterCSRefFloraCommunityName: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraCommunityName_cache, vm.filterCSRefFloraCommunityName);
-        },
-        filterCSRefFloraApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraApplicationStatus_cache, vm.filterCSRefFloraApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterCSRefFloraScientificName === 'all' &&
+            if (
+                this.filterCSRefFloraScientificName === 'all' &&
                 this.filterCSRefFloraCommunityName === 'all' &&
-                this.filterCSRefFloraApplicationStatus === 'all') {
-                return false
+                this.filterCSRefFloraApplicationStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         datatable_headers: function () {
-            return ['Number', 'Species', 'Scientific Name', 'Community Name', 'Status', 'Action']
+            return [
+                'Number',
+                'Species',
+                'Scientific Name',
+                'Community Name',
+                'Status',
+                'Action',
+            ];
         },
         column_number: function () {
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let tick = '';
                     if (full.can_be_processed) {
-                        tick = "<i class='fa fa-exclamation-circle ms-2' style='color:#FFBF00'></i>";
-                    }
-                    else {
-                        tick = "<i class='fa fa-check-circle ms-2' style='color:green'></i>";
+                        tick =
+                            "<i class='fa fa-exclamation-circle ms-2' style='color:#FFBF00'></i>";
+                    } else {
+                        tick =
+                            "<i class='fa fa-check-circle ms-2' style='color:green'></i>";
                     }
                     return full.conservation_status_number + tick;
                 },
-                name: "conservation_status__id, conservation_status__conservation_status_number",
-            }
+                name: 'conservation_status__id, conservation_status__conservation_status_number',
+            };
         },
         column_group_type: function () {
             return {
-                data: "group_type",
+                data: 'group_type',
                 orderable: true,
                 searchable: true,
                 visible: true,
                 render: function (data, type, full) {
                     return `<span class="text-capitalize">${full.group_type}</span>`;
                 },
-            }
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__species__taxonomy__scientific_name",
-            }
+                name: 'conservation_status__species__taxonomy__scientific_name',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__community__taxonomy__community_name",
-            }
+                name: 'conservation_status__community__taxonomy__community_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/external/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/external/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed
+                        ? `<a href='/external/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>`
+                        : `<a href='/external/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
-            }
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
             let columns = [
                 vm.column_number,
@@ -221,7 +246,7 @@ export default {
                 vm.column_community_name,
                 vm.column_status,
                 vm.column_action,
-            ]
+            ];
             let buttons = [
                 {
                     extend: 'excel',
@@ -229,8 +254,8 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> Excel',
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
+                        columns: ':not(.no-export)',
+                    },
                 },
                 {
                     extend: 'csv',
@@ -238,42 +263,51 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> CSV',
                     className: 'btn btn-primary rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
-                }
-            ]
+                        columns: ':not(.no-export)',
+                    },
+                },
+            ];
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: true,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1 , className: 'no-export'},
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
-                    "data": function (d) {
-                        d.filter_scientific_name = vm.filterCSRefFloraScientificName;
-                        d.filter_community_name = vm.filterCSRefFloraCommunityName;
-                        d.filter_application_status = vm.filterCSRefFloraApplicationStatus;
-                    }
+                    data: function (d) {
+                        d.filter_scientific_name =
+                            vm.filterCSRefFloraScientificName;
+                        d.filter_community_name =
+                            vm.filterCSRefFloraCommunityName;
+                        d.filter_application_status =
+                            vm.filterCSRefFloraApplicationStatus;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -285,115 +319,203 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSRefFloraScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraScientificName_cache,
+                vm.filterCSRefFloraScientificName
+            );
+        },
+        filterCSRefFloraCommunityName: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraCommunityName_cache,
+                vm.filterCSRefFloraCommunityName
+            );
+        },
+        filterCSRefFloraApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraApplicationStatus_cache,
+                vm.filterCSRefFloraApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommunityNameLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterCSRefFloraScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFloraScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSRefFloraScientificNameText'
+                    ),
+                    vm.filterCSRefFloraScientificName,
+                    false,
+                    true
+                );
+                $('#cs_ref_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFloraCommunityName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFloraCommunityName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFloraCommunityNameText'),
+                    vm.filterCSRefFloraCommunityName,
+                    false,
+                    true
+                );
+                $('#cs_referrals_community_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraScientificName = data;
-                    sessionStorage.setItem("filterCSRefFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraScientificName = 'all';
-                    sessionStorage.setItem("filterCSRefFloraScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_scientific_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFloraScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_referrals_community_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.communities_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.cs_referrals_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.communities_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraCommunityName = data;
-                    sessionStorage.setItem("filterCSRefFloraCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraCommunityName = 'all';
-                    sessionStorage.setItem("filterCSRefFloraCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_referrals_community_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFloraCommunityNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_referrals_community_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommunityNameLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterCSRefFloraScientificName") != 'all' && sessionStorage.getItem("filterCSRefFloraScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraScientificNameText"), vm.filterCSRefFloraScientificName, false, true);
-                $('#cs_ref_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFloraCommunityName") != 'all' && sessionStorage.getItem("filterCSRefFloraCommunityName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraCommunityNameText"), vm.filterCSRefFloraCommunityName, false, true);
-                $('#cs_referrals_community_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
index 31acc71b..0bc0eec4 100644
--- a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
@@ -1,49 +1,86 @@
 <template id="species_fauna_cs_referrals_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_scientific_name_lookup">Scientific Name:</label>
-                        <select id="cs_ref_scientific_name_lookup" name="cs_ref_scientific_name_lookup"
-                            ref="cs_ref_scientific_name_lookup" class="form-control" />
+                        <label for="cs_ref_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="cs_ref_scientific_name_lookup"
+                            ref="cs_ref_scientific_name_lookup"
+                            name="cs_ref_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_common_name_lookup">Common Name:</label>
-                        <select id="cs_ref_common_name_lookup" name="cs_ref_common_name_lookup"
-                            ref="cs_ref_common_name_lookup" class="form-control" />
+                        <label for="cs_ref_common_name_lookup"
+                            >Common Name:</label
+                        >
+                        <select
+                            id="cs_ref_common_name_lookup"
+                            ref="cs_ref_common_name_lookup"
+                            name="cs_ref_common_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_phylo_group_lookup">Phylo Group:</label>
-                        <select id="cs_ref_phylo_group_lookup" name="cs_ref_phylo_group_lookup"
-                            ref="cs_ref_phylo_group_lookup" class="form-control" />
+                        <label for="cs_ref_phylo_group_lookup"
+                            >Phylo Group:</label
+                        >
+                        <select
+                            id="cs_ref_phylo_group_lookup"
+                            ref="cs_ref_phylo_group_lookup"
+                            name="cs_ref_phylo_group_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="cs_ref_family_lookup">Family:</label>
-                        <select id="cs_ref_family_lookup" name="cs_ref_family_lookup" ref="cs_ref_family_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_ref_family_lookup"
+                            ref="cs_ref_family_lookup"
+                            name="cs_ref_family_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="cs_ref_genera_lookup">Genera:</label>
-                        <select id="cs_ref_genera_lookup" name="cs_ref_genera_lookup" ref="cs_ref_genera_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_ref_genera_lookup"
+                            ref="cs_ref_genera_lookup"
+                            name="cs_ref_genera_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSRefFaunaApplicationStatus">
+                        <select
+                            v-model="filterCSRefFaunaApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -52,38 +89,40 @@
         </CollapsibleFilters>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="fauna_cs_ref_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="fauna_cs_ref_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'CSReferralsFaunaTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+    },
     props: {
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         filterCSRefFaunaScientificName_cache: {
             type: String,
@@ -121,188 +160,183 @@ export default {
         return {
             datatable_id: 'species_fauna_cs_ref-datatable-' + vm._uid,
 
-            filterCSRefFaunaScientificName: sessionStorage.getItem(this.filterCSRefFaunaScientificName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFaunaScientificName_cache) : 'all',
+            filterCSRefFaunaScientificName: sessionStorage.getItem(
+                this.filterCSRefFaunaScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFaunaScientificName_cache
+                  )
+                : 'all',
 
-            filterCSRefFaunaCommonName: sessionStorage.getItem(this.filterCSRefFaunaCommonName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFaunaCommonName_cache) : 'all',
+            filterCSRefFaunaCommonName: sessionStorage.getItem(
+                this.filterCSRefFaunaCommonName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSRefFaunaCommonName_cache)
+                : 'all',
 
-            filterCSRefFaunaPhylogeneticGroup: sessionStorage.getItem(this.filterCSRefFaunaPhylogeneticGroup_cache) ?
-                sessionStorage.getItem(this.filterCSRefFaunaPhylogeneticGroup_cache) : 'all',
+            filterCSRefFaunaPhylogeneticGroup: sessionStorage.getItem(
+                this.filterCSRefFaunaPhylogeneticGroup_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFaunaPhylogeneticGroup_cache
+                  )
+                : 'all',
 
-            filterCSRefFaunaFamily: sessionStorage.getItem(this.filterCSRefFaunaFamily_cache) ?
-                sessionStorage.getItem(this.filterCSRefFaunaFamily_cache) : 'all',
+            filterCSRefFaunaFamily: sessionStorage.getItem(
+                this.filterCSRefFaunaFamily_cache
+            )
+                ? sessionStorage.getItem(this.filterCSRefFaunaFamily_cache)
+                : 'all',
 
-            filterCSRefFaunaGenus: sessionStorage.getItem(this.filterCSRefFaunaGenus_cache) ?
-                sessionStorage.getItem(this.filterCSRefFaunaGenus_cache) : 'all',
+            filterCSRefFaunaGenus: sessionStorage.getItem(
+                this.filterCSRefFaunaGenus_cache
+            )
+                ? sessionStorage.getItem(this.filterCSRefFaunaGenus_cache)
+                : 'all',
 
-            filterCSRefFaunaApplicationStatus: sessionStorage.getItem(this.filterCSRefFaunaApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSRefFaunaApplicationStatus_cache) : 'all',
+            filterCSRefFaunaApplicationStatus: sessionStorage.getItem(
+                this.filterCSRefFaunaApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFaunaApplicationStatus_cache
+                  )
+                : 'all',
 
             processing_statuses: [
                 { value: 'with_referral', name: 'Awaiting' },
                 { value: 'completed', name: 'Completed' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-    },
-    watch: {
-        filterCSRefFaunaScientificName: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFaunaScientificName_cache, vm.filterCSRefFaunaScientificName);
-        },
-        filterCSRefFaunaCommonName: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFaunaCommonName_cache, vm.filterCSRefFaunaCommonName);
-        },
-        filterCSRefFaunaPhylogeneticGroup: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFaunaPhylogeneticGroup_cache, vm.filterCSRefFaunaPhylogeneticGroup);
-        },
-        filterCSRefFaunaFamily: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFaunaFamily_cache, vm.filterCSRefFaunaFamily);
-        },
-        filterCSRefFaunaGenus: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFaunaGenus_cache, vm.filterCSRefFaunaGenus);
-        },
-        filterCSRefFaunaApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFaunaApplicationStatus_cache, vm.filterCSRefFaunaApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterCSRefFaunaScientificName === 'all' &&
+            if (
+                this.filterCSRefFaunaScientificName === 'all' &&
                 this.filterCSRefFaunaCommonName === 'all' &&
                 this.filterCSRefFaunaPhylogeneticGroup === 'all' &&
                 this.filterCSRefFaunaFamily === 'all' &&
                 this.filterCSRefFaunaGenus === 'all' &&
-                this.filterCSRefFaunaApplicationStatus === 'all') {
-                return false
+                this.filterCSRefFaunaApplicationStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         datatable_headers: function () {
-            return ['Number', 'Species', 'Scientific Name', 'Common Name', 'Status', 'Action']
+            return [
+                'Number',
+                'Species',
+                'Scientific Name',
+                'Common Name',
+                'Status',
+                'Action',
+            ];
         },
         column_number: function () {
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let tick = '';
                     if (full.can_be_processed) {
-                        tick = " <i class='fa fa-exclamation-circle' style='color:#FFBF00'></i>";
-                    }
-                    else {
-                        tick = " <i class='fa fa-check-circle' style='color:green'></i>";
+                        tick =
+                            " <i class='fa fa-exclamation-circle' style='color:#FFBF00'></i>";
+                    } else {
+                        tick =
+                            " <i class='fa fa-check-circle' style='color:green'></i>";
                     }
                     return full.conservation_status_number + tick;
                 },
-                name: "conservation_status__id, conservation_status__conservation_status_number",
-            }
+                name: 'conservation_status__id, conservation_status__conservation_status_number',
+            };
         },
         column_species_number: function () {
             return {
-                data: "species_number",
+                data: 'species_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "conservation_status__species__species_number",
-            }
+                name: 'conservation_status__species__species_number',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__species__taxonomy__scientific_name",
-            }
+                name: 'conservation_status__species__taxonomy__scientific_name',
+            };
         },
         column_common_name: function () {
             return {
-                data: "common_name",
+                data: 'common_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__species__taxonomy__vernaculars__vernacular_name",
-            }
+                name: 'conservation_status__species__taxonomy__vernaculars__vernacular_name',
+            };
         },
         column_status: function () {
             return {
                 // 9. Workflow Status
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "conservation_status__processing_status",
-            }
+                name: 'conservation_status__processing_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let links = '';
-                    links += full.can_user_process ? `<a href='/internal/conservation-status/${full.conservation_status}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation-status/${full.conservation_status}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_user_process
+                        ? `<a href='/internal/conservation-status/${full.conservation_status}/referral/${full.id}'>Process</a><br/>`
+                        : `<a href='/internal/conservation-status/${full.conservation_status}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
-            }
+            };
         },
         column_conservation_status: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "conservation_status",
+                data: 'conservation_status',
                 visible: false,
-            }
+            };
         },
         column_can_be_processed: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "can_be_processed",
+                data: 'can_be_processed',
                 visible: false,
-            }
+            };
         },
         column_can_user_process: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "can_user_process",
+                data: 'can_user_process',
                 visible: false,
-            }
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
             let columns = [
                 vm.column_number,
@@ -311,8 +345,8 @@ export default {
                 vm.column_common_name,
                 vm.column_status,
                 vm.column_action,
-            ]
-            let search = false
+            ];
+            let search = false;
             let buttons = [
                 {
                     extend: 'excel',
@@ -320,8 +354,8 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> Excel',
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
+                        columns: ':not(.no-export)',
+                    },
                 },
                 {
                     extend: 'csv',
@@ -329,48 +363,57 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> CSV',
                     className: 'btn btn-primary rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
-                }
-            ]
+                        columns: ':not(.no-export)',
+                    },
+                },
+            ];
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: true,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_scientific_name = vm.filterCSRefFaunaScientificName;
+                        d.filter_scientific_name =
+                            vm.filterCSRefFaunaScientificName;
                         d.filter_common_name = vm.filterCSRefFaunaCommonName;
-                        d.filter_phylogenetic_group = vm.filterCSRefFaunaPhylogeneticGroup;
+                        d.filter_phylogenetic_group =
+                            vm.filterCSRefFaunaPhylogeneticGroup;
                         d.filter_family = vm.filterCSRefFaunaFamily;
                         d.filter_genus = vm.filterCSRefFaunaGenus;
-                        d.filter_application_status = vm.filterCSRefFaunaApplicationStatus;
-                    }
+                        d.filter_application_status =
+                            vm.filterCSRefFaunaApplicationStatus;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -383,242 +426,410 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSRefFaunaScientificName: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFaunaScientificName_cache,
+                vm.filterCSRefFaunaScientificName
+            );
+        },
+        filterCSRefFaunaCommonName: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFaunaCommonName_cache,
+                vm.filterCSRefFaunaCommonName
+            );
+        },
+        filterCSRefFaunaPhylogeneticGroup: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFaunaPhylogeneticGroup_cache,
+                vm.filterCSRefFaunaPhylogeneticGroup
+            );
+        },
+        filterCSRefFaunaFamily: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFaunaFamily_cache,
+                vm.filterCSRefFaunaFamily
+            );
+        },
+        filterCSRefFaunaGenus: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFaunaGenus_cache,
+                vm.filterCSRefFaunaGenus
+            );
+        },
+        filterCSRefFaunaApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.fauna_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFaunaApplicationStatus_cache,
+                vm.filterCSRefFaunaApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommonNameLookup();
+            vm.initialisePhyloGroupLookup();
+            vm.initialiseFamilyLookup();
+            vm.initialiseGeneraLookup();
+            vm.addEventListeners();
+
+            if (
+                sessionStorage.getItem('filterCSRefFaunaScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFaunaScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSRefFaunaScientificNameText'
+                    ),
+                    vm.filterCSRefFaunaScientificName,
+                    false,
+                    true
+                );
+                $('#cs_ref_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFaunaCommonName') != 'all' &&
+                sessionStorage.getItem('filterCSRefFaunaCommonName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFaunaCommonNameText'),
+                    vm.filterCSRefFaunaCommonName,
+                    false,
+                    true
+                );
+                $('#cs_ref_common_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFaunaPhylogeneticGroup') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFaunaPhylogeneticGroup') !=
+                    null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSRefFaunaPhylogeneticGroupText'
+                    ),
+                    vm.filterCSRefFaunaPhylogeneticGroup,
+                    false,
+                    true
+                );
+                $('#cs_ref_phylo_group_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFaunaFamily') != 'all' &&
+                sessionStorage.getItem('filterCSRefFaunaFamily') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFaunaFamilyText'),
+                    vm.filterCSRefFaunaFamily,
+                    false,
+                    true
+                );
+                $('#cs_ref_family_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFaunaGenus') != 'all' &&
+                sessionStorage.getItem('filterCSRefFaunaGenus') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFaunaGenusText'),
+                    vm.filterCSRefFaunaGenus,
+                    false,
+                    true
+                );
+                $('#cs_ref_genera_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaScientificName = data;
-                    sessionStorage.setItem("filterCSRefFaunaScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFaunaScientificName = 'all';
-                    sessionStorage.setItem("filterCSRefFaunaScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_scientific_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_scientific_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseCommonNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_common_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Common Name",
-                ajax: {
-                    url: api_endpoints.common_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_common_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Common Name',
+                    ajax: {
+                        url: api_endpoints.common_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaCommonName = data;
-                    sessionStorage.setItem("filterCSRefFaunaCommonNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaCommonNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFaunaCommonName = 'all';
-                    sessionStorage.setItem("filterCSRefFaunaCommonNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_common_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaCommonNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_common_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialisePhyloGroupLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_phylo_group_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Phylo Group",
-                ajax: {
-                    url: api_endpoints.phylo_group_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_phylo_group_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Phylo Group',
+                    ajax: {
+                        url: api_endpoints.phylo_group_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaPhylogeneticGroup = data;
-                    sessionStorage.setItem("filterCSRefFaunaPhylogeneticGroupText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaPhylogeneticGroupText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFaunaPhylogeneticGroup = 'all';
-                    sessionStorage.setItem("filterCSRefFaunaPhylogeneticGroupText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_phylo_group_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaPhylogeneticGroupText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_phylo_group_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseFamilyLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_family_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Family",
-                ajax: {
-                    url: api_endpoints.family_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_family_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Family',
+                    ajax: {
+                        url: api_endpoints.family_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaFamily = data;
-                    sessionStorage.setItem("filterCSRefFaunaFamilyText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaFamilyText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFaunaFamily = 'all';
-                    sessionStorage.setItem("filterCSRefFaunaFamilyText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_family_lookup-results"]')
+                    sessionStorage.setItem('filterCSRefFaunaFamilyText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_family_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseGeneraLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_genera_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Genera",
-                ajax: {
-                    url: api_endpoints.genera_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_genera_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Genera',
+                    ajax: {
+                        url: api_endpoints.genera_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaGenus = data;
-                    sessionStorage.setItem("filterCSRefFaunaGenusText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFaunaGenusText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFaunaGenus = 'all';
-                    sessionStorage.setItem("filterCSRefFaunaGenusText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_genera_lookup-results"]')
+                    sessionStorage.setItem('filterCSRefFaunaGenusText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_genera_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.fauna_cs_ref_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.fauna_cs_ref_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommonNameLookup();
-            vm.initialisePhyloGroupLookup();
-            vm.initialiseFamilyLookup();
-            vm.initialiseGeneraLookup();
-            vm.addEventListeners();
-
-            if (sessionStorage.getItem("filterCSRefFaunaScientificName") != 'all' && sessionStorage.getItem("filterCSRefFaunaScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFaunaScientificNameText"), vm.filterCSRefFaunaScientificName, false, true);
-                $('#cs_ref_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFaunaCommonName") != 'all' && sessionStorage.getItem("filterCSRefFaunaCommonName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFaunaCommonNameText"), vm.filterCSRefFaunaCommonName, false, true);
-                $('#cs_ref_common_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFaunaPhylogeneticGroup") != 'all' && sessionStorage.getItem("filterCSRefFaunaPhylogeneticGroup") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFaunaPhylogeneticGroupText"), vm.filterCSRefFaunaPhylogeneticGroup, false, true);
-                $('#cs_ref_phylo_group_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFaunaFamily") != 'all' && sessionStorage.getItem("filterCSRefFaunaFamily") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFaunaFamilyText"), vm.filterCSRefFaunaFamily, false, true);
-                $('#cs_ref_family_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFaunaGenus") != 'all' && sessionStorage.getItem("filterCSRefFaunaGenus") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFaunaGenusText"), vm.filterCSRefFaunaGenus, false, true);
-                $('#cs_ref_genera_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
index 3ef29aaa..049c2a0b 100644
--- a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
@@ -1,49 +1,86 @@
 <template id="species_flora_cs_referrals_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_scientific_name_lookup">Scientific Name:</label>
-                        <select id="cs_ref_scientific_name_lookup" name="cs_ref_scientific_name_lookup"
-                            ref="cs_ref_scientific_name_lookup" class="form-control" />
+                        <label for="cs_ref_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="cs_ref_scientific_name_lookup"
+                            ref="cs_ref_scientific_name_lookup"
+                            name="cs_ref_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_common_name_lookup">Common Name:</label>
-                        <select id="cs_ref_common_name_lookup" name="cs_ref_common_name_lookup"
-                            ref="cs_ref_common_name_lookup" class="form-control" />
+                        <label for="cs_ref_common_name_lookup"
+                            >Common Name:</label
+                        >
+                        <select
+                            id="cs_ref_common_name_lookup"
+                            ref="cs_ref_common_name_lookup"
+                            name="cs_ref_common_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_ref_phylo_group_lookup">Phylo Group:</label>
-                        <select id="cs_ref_phylo_group_lookup" name="cs_ref_phylo_group_lookup"
-                            ref="cs_ref_phylo_group_lookup" class="form-control" />
+                        <label for="cs_ref_phylo_group_lookup"
+                            >Phylo Group:</label
+                        >
+                        <select
+                            id="cs_ref_phylo_group_lookup"
+                            ref="cs_ref_phylo_group_lookup"
+                            name="cs_ref_phylo_group_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="cs_ref_family_lookup">Family:</label>
-                        <select id="cs_ref_family_lookup" name="cs_ref_family_lookup" ref="cs_ref_family_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_ref_family_lookup"
+                            ref="cs_ref_family_lookup"
+                            name="cs_ref_family_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="cs_ref_genera_lookup">Genera:</label>
-                        <select id="cs_ref_genera_lookup" name="cs_ref_genera_lookup" ref="cs_ref_genera_lookup"
-                            class="form-control" />
+                        <select
+                            id="cs_ref_genera_lookup"
+                            ref="cs_ref_genera_lookup"
+                            name="cs_ref_genera_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSRefFloraApplicationStatus">
+                        <select
+                            v-model="filterCSRefFloraApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -53,38 +90,40 @@
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_cs_ref_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_cs_ref_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'CSReferralsFloraTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+    },
     props: {
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         filterCSRefFloraScientificName_cache: {
             type: String,
@@ -132,190 +171,184 @@ export default {
         return {
             datatable_id: 'species_flora_cs_ref-datatable-' + vm._uid,
 
-            filterCSRefFloraScientificName: sessionStorage.getItem(this.filterCSRefFloraScientificName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraScientificName_cache) : 'all',
+            filterCSRefFloraScientificName: sessionStorage.getItem(
+                this.filterCSRefFloraScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraScientificName_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraCommonName: sessionStorage.getItem(this.filterCSRefFloraCommonName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraCommonName_cache) : 'all',
+            filterCSRefFloraCommonName: sessionStorage.getItem(
+                this.filterCSRefFloraCommonName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSRefFloraCommonName_cache)
+                : 'all',
 
-            filterCSRefFloraPhylogeneticGroup: sessionStorage.getItem(this.filterCSRefFloraPhylogeneticGroup_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraPhylogeneticGroup_cache) : 'all',
+            filterCSRefFloraPhylogeneticGroup: sessionStorage.getItem(
+                this.filterCSRefFloraPhylogeneticGroup_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraPhylogeneticGroup_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraFamily: sessionStorage.getItem(this.filterCSRefFloraFamily_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraFamily_cache) : 'all',
+            filterCSRefFloraFamily: sessionStorage.getItem(
+                this.filterCSRefFloraFamily_cache
+            )
+                ? sessionStorage.getItem(this.filterCSRefFloraFamily_cache)
+                : 'all',
 
-            filterCSRefFloraGenus: sessionStorage.getItem(this.filterCSRefFloraGenus_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraGenus_cache) : 'all',
+            filterCSRefFloraGenus: sessionStorage.getItem(
+                this.filterCSRefFloraGenus_cache
+            )
+                ? sessionStorage.getItem(this.filterCSRefFloraGenus_cache)
+                : 'all',
 
-            filterCSRefFloraConservationList: sessionStorage.getItem(this.filterCSRefFloraConservationList_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraConservationList_cache) : 'all',
+            filterCSRefFloraConservationList: sessionStorage.getItem(
+                this.filterCSRefFloraConservationList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraConservationList_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraConservationCategory: sessionStorage.getItem(this.filterCSRefFloraConservationCategory_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraConservationCategory_cache) : 'all',
+            filterCSRefFloraConservationCategory: sessionStorage.getItem(
+                this.filterCSRefFloraConservationCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraConservationCategory_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraApplicationStatus: sessionStorage.getItem(this.filterCSRefFloraApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraApplicationStatus_cache) : 'all',
+            filterCSRefFloraApplicationStatus: sessionStorage.getItem(
+                this.filterCSRefFloraApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraApplicationStatus_cache
+                  )
+                : 'all',
 
             processing_statuses: [
                 { value: 'with_referral', name: 'Awaiting' },
                 { value: 'completed', name: 'Completed' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-    },
-    watch: {
-        filterCSRefFloraScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraScientificName_cache, vm.filterCSRefFloraScientificName);
-        },
-        filterCSRefFloraCommonName: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraCommonName_cache, vm.filterCSRefFloraCommonName);
-        },
-        filterCSRefFloraPhylogeneticGroup: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraPhylogeneticGroup_cache, vm.filterCSRefFloraPhylogeneticGroup);
-        },
-        filterCSRefFloraFamily: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraFamily_cache, vm.filterCSRefFloraFamily);
-        },
-        filterCSRefFloraGenus: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraGenus_cache, vm.filterCSRefFloraGenus);
-        },
-        filterCSRefFloraConservationList: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraConservationList_cache, vm.filterCSRefFloraConservationList);
-        },
-        filterCSRefFloraConservationCategory: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraConservationCategory_cache, vm.filterCSRefFloraConservationCategory);
-        },
-        filterCSRefFloraApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraApplicationStatus_cache, vm.filterCSRefFloraApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterCSRefFloraScientificName === 'all' &&
+            if (
+                this.filterCSRefFloraScientificName === 'all' &&
                 this.filterCSRefFloraCommonName === 'all' &&
                 this.filterCSRefFloraPhylogeneticGroup === 'all' &&
                 this.filterCSRefFloraFamily === 'all' &&
                 this.filterCSRefFloraGenus === 'all' &&
                 this.filterCSRefFloraConservationList === 'all' &&
                 this.filterCSRefFloraConservationCategory === 'all' &&
-                this.filterCSRefFloraApplicationStatus === 'all') {
-                return false
+                this.filterCSRefFloraApplicationStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         datatable_headers: function () {
-            return ['Number', 'Species', 'Scientific Name', 'Common Name', 'Status', 'Action']
+            return [
+                'Number',
+                'Species',
+                'Scientific Name',
+                'Common Name',
+                'Status',
+                'Action',
+            ];
         },
         column_number: function () {
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let tick = '';
                     if (full.can_be_processed) {
-                        tick = "<i class='fa fa-exclamation-circle ms-2' style='color:#FFBF00'></i>";
-                    }
-                    else {
-                        tick = "<i class='fa fa-check-circle ms-2' style='color:green'></i>";
+                        tick =
+                            "<i class='fa fa-exclamation-circle ms-2' style='color:#FFBF00'></i>";
+                    } else {
+                        tick =
+                            "<i class='fa fa-check-circle ms-2' style='color:green'></i>";
                     }
                     return full.conservation_status_number + tick;
                 },
-                name: "conservation_status__id, conservation_status__conservation_status_number",
-            }
+                name: 'conservation_status__id, conservation_status__conservation_status_number',
+            };
         },
         column_species_number: function () {
             return {
-                data: "species_number",
+                data: 'species_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "conservation_status__species__species_number",
-            }
+                name: 'conservation_status__species__species_number',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__species__taxonomy__scientific_name",
-            }
+                name: 'conservation_status__species__taxonomy__scientific_name',
+            };
         },
         column_common_name: function () {
             return {
-                data: "common_name",
+                data: 'common_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "conservation_status__species__taxonomy__vernaculars__vernacular_name",
-            }
+                name: 'conservation_status__species__taxonomy__vernaculars__vernacular_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed
+                        ? `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>Process</a><br/>`
+                        : `<a href='/internal/conservation-status/${full.conservation_status_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
-            }
+            };
         },
         column_can_be_processed: function () {
             return {
-                data: "can_be_processed",
+                data: 'can_be_processed',
                 visible: false,
-            }
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
             let columns = [
                 vm.column_number,
@@ -324,8 +357,8 @@ export default {
                 vm.column_common_name,
                 vm.column_status,
                 vm.column_action,
-                vm.column_can_be_processed
-            ]
+                vm.column_can_be_processed,
+            ];
             let buttons = [
                 {
                     extend: 'excel',
@@ -333,8 +366,8 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> Excel',
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
+                        columns: ':not(.no-export)',
+                    },
                 },
                 {
                     extend: 'csv',
@@ -342,47 +375,56 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> CSV',
                     className: 'btn btn-primary rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
-                }
-            ]
+                        columns: ':not(.no-export)',
+                    },
+                },
+            ];
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: true,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1 , className: 'no-export'},
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_scientific_name = vm.filterCSRefFloraScientificName;
+                        d.filter_scientific_name =
+                            vm.filterCSRefFloraScientificName;
                         d.filter_common_name = vm.filterCSRefFloraCommonName;
-                        d.filter_phylogenetic_group = vm.filterCSRefFloraPhylogeneticGroup;
+                        d.filter_phylogenetic_group =
+                            vm.filterCSRefFloraPhylogeneticGroup;
                         d.filter_family = vm.filterCSRefFloraFamily;
                         d.filter_genus = vm.filterCSRefFloraGenus;
-                        d.filter_application_status = vm.filterCSRefFloraApplicationStatus;
-                    }
+                        d.filter_application_status =
+                            vm.filterCSRefFloraApplicationStatus;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -394,243 +436,434 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSRefFloraScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraScientificName_cache,
+                vm.filterCSRefFloraScientificName
+            );
+        },
+        filterCSRefFloraCommonName: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraCommonName_cache,
+                vm.filterCSRefFloraCommonName
+            );
+        },
+        filterCSRefFloraPhylogeneticGroup: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraPhylogeneticGroup_cache,
+                vm.filterCSRefFloraPhylogeneticGroup
+            );
+        },
+        filterCSRefFloraFamily: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraFamily_cache,
+                vm.filterCSRefFloraFamily
+            );
+        },
+        filterCSRefFloraGenus: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraGenus_cache,
+                vm.filterCSRefFloraGenus
+            );
+        },
+        filterCSRefFloraConservationList: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraConservationList_cache,
+                vm.filterCSRefFloraConservationList
+            );
+        },
+        filterCSRefFloraConservationCategory: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraConservationCategory_cache,
+                vm.filterCSRefFloraConservationCategory
+            );
+        },
+        filterCSRefFloraApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraApplicationStatus_cache,
+                vm.filterCSRefFloraApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommonNameLookup();
+            vm.initialisePhyloGroupLookup();
+            vm.initialiseFamilyLookup();
+            vm.initialiseGeneraLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterCSRefFloraScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFloraScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSRefFloraScientificNameText'
+                    ),
+                    vm.filterCSRefFloraScientificName,
+                    false,
+                    true
+                );
+                $('#cs_ref_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFloraCommonName') != 'all' &&
+                sessionStorage.getItem('filterCSRefFloraCommonName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFloraCommonNameText'),
+                    vm.filterCSRefFloraCommonName,
+                    false,
+                    true
+                );
+                $('#cs_ref_common_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFloraPhylogeneticGroup') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFloraPhylogeneticGroup') !=
+                    null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSRefFloraPhylogeneticGroupText'
+                    ),
+                    vm.filterCSRefFloraPhylogeneticGroup,
+                    false,
+                    true
+                );
+                $('#cs_ref_phylo_group_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFloraFamily') != 'all' &&
+                sessionStorage.getItem('filterCSRefFloraFamily') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFloraFamilyText'),
+                    vm.filterCSRefFloraFamily,
+                    false,
+                    true
+                );
+                $('#cs_ref_family_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFloraGenus') != 'all' &&
+                sessionStorage.getItem('filterCSRefFloraGenus') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFloraGenusText'),
+                    vm.filterCSRefFloraGenus,
+                    false,
+                    true
+                );
+                $('#cs_ref_genera_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraScientificName = data;
-                    sessionStorage.setItem("filterCSRefFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraScientificName = 'all';
-                    sessionStorage.setItem("filterCSRefFloraScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_scientific_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFloraScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommonNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_common_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Common Name",
-                ajax: {
-                    url: api_endpoints.common_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_common_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Common Name',
+                    ajax: {
+                        url: api_endpoints.common_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraCommonName = data;
-                    sessionStorage.setItem("filterCSRefFloraCommonNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraCommonNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraCommonName = 'all';
-                    sessionStorage.setItem("filterCSRefFloraCommonNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_common_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFloraCommonNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_common_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialisePhyloGroupLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_phylo_group_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Phylo Group",
-                ajax: {
-                    url: api_endpoints.phylo_group_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_phylo_group_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Phylo Group',
+                    ajax: {
+                        url: api_endpoints.phylo_group_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraPhylogeneticGroup = data;
-                    sessionStorage.setItem("filterCSRefFloraPhylogeneticGroupText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraPhylogeneticGroupText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraPhylogeneticGroup = 'all';
-                    sessionStorage.setItem("filterCSRefFloraPhylogeneticGroupText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_phylo_group_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFloraPhylogeneticGroupText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_phylo_group_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseFamilyLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_family_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Family",
-                ajax: {
-                    url: api_endpoints.family_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_family_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Family',
+                    ajax: {
+                        url: api_endpoints.family_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraFamily = data;
-                    sessionStorage.setItem("filterCSRefFloraFamilyText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraFamilyText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraFamily = 'all';
-                    sessionStorage.setItem("filterCSRefFloraFamilyText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_family_lookup-results"]')
+                    sessionStorage.setItem('filterCSRefFloraFamilyText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_family_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseGeneraLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_ref_genera_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Genera",
-                ajax: {
-                    url: api_endpoints.genera_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            cs_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.cs_ref_genera_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Genera',
+                    ajax: {
+                        url: api_endpoints.genera_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                cs_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraGenus = data;
-                    sessionStorage.setItem("filterCSRefFloraGenusText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraGenusText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraGenus = 'all';
-                    sessionStorage.setItem("filterCSRefFloraGenusText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_ref_genera_lookup-results"]')
+                    sessionStorage.setItem('filterCSRefFloraGenusText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_ref_genera_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.flora_cs_ref_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_cs_ref_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommonNameLookup();
-            vm.initialisePhyloGroupLookup();
-            vm.initialiseFamilyLookup();
-            vm.initialiseGeneraLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterCSRefFloraScientificName") != 'all' && sessionStorage.getItem("filterCSRefFloraScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraScientificNameText"), vm.filterCSRefFloraScientificName, false, true);
-                $('#cs_ref_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFloraCommonName") != 'all' && sessionStorage.getItem("filterCSRefFloraCommonName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraCommonNameText"), vm.filterCSRefFloraCommonName, false, true);
-                $('#cs_ref_common_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFloraPhylogeneticGroup") != 'all' && sessionStorage.getItem("filterCSRefFloraPhylogeneticGroup") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraPhylogeneticGroupText"), vm.filterCSRefFloraPhylogeneticGroup, false, true);
-                $('#cs_ref_phylo_group_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFloraFamily") != 'all' && sessionStorage.getItem("filterCSRefFloraFamily") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraFamilyText"), vm.filterCSRefFloraFamily, false, true);
-                $('#cs_ref_family_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFloraGenus") != 'all' && sessionStorage.getItem("filterCSRefFloraGenus") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraGenusText"), vm.filterCSRefFloraGenus, false, true);
-                $('#cs_ref_genera_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/display_history.vue b/boranga/frontend/boranga/src/components/common/display_history.vue
index 7c0b0538..8383d17e 100755
--- a/boranga/frontend/boranga/src/components/common/display_history.vue
+++ b/boranga/frontend/boranga/src/components/common/display_history.vue
@@ -2,37 +2,53 @@
     <div id="displayHistory">
         <modal
             transition="modal fade"
-            :title="primary_model + ' ' + primary_model_number + ' History - Revision ' + revision_sequence"
+            :title="
+                primary_model +
+                ' ' +
+                primary_model_number +
+                ' History - Revision ' +
+                revision_sequence
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
-            @cancel="close()">
-
+            @cancel="close()"
+        >
             <div>
-            <div v-if="revision_sequence > 0">
-                <strong>Modified By:</strong> {{ revision_user }}
-            </div>
-            <div v-else="revision_sequence > 0">
-                <strong>Created By:</strong> {{ revision_user }}
-            </div>
-            <div v-if="revision_sequence > 0">
-                <strong>Date Modified:</strong> {{ revision_date }}
-            </div>
-            <div v-else="revision_sequence > 0">
-                <strong>Date Created:</strong> {{ revision_date }}
-            </div>
-            <!--<div v-for="(data, itemObjKey) in version_data">
+                <div v-if="revision_sequence > 0">
+                    <strong>Modified By:</strong> {{ revision_user }}
+                </div>
+                <div v-else="revision_sequence > 0">
+                    <strong>Created By:</strong> {{ revision_user }}
+                </div>
+                <div v-if="revision_sequence > 0">
+                    <strong>Date Modified:</strong> {{ revision_date }}
+                </div>
+                <div v-else="revision_sequence > 0">
+                    <strong>Date Created:</strong> {{ revision_date }}
+                </div>
+                <!--<div v-for="(data, itemObjKey) in version_data">
                 <strong>{{itemObjKey}}:</strong> <textarea class="form-control">{{ JSON.stringify(data, null, '\t') }}</textarea>
             </div>-->
-            <div>
-                <label for="checkbox" class="control-label"><strong>Show Null Fields:&nbsp;</strong></label>
-                <input type="checkbox" class="form-check-input" id="checkbox" v-model="showNullFields" v-on:change="formatHistoryData()"/>
-            </div>
-            <div>
-            <strong>Data:</strong>
-            </div>
-            <textarea disabled class="form-control" rows="25">{{ JSON.stringify(version_data_formatted, null, '\t') }}</textarea>
+                <div>
+                    <label for="checkbox" class="control-label"
+                        ><strong>Show Null Fields:&nbsp;</strong></label
+                    >
+                    <input
+                        id="checkbox"
+                        v-model="showNullFields"
+                        type="checkbox"
+                        class="form-check-input"
+                        @change="formatHistoryData()"
+                    />
+                </div>
+                <div>
+                    <strong>Data:</strong>
+                </div>
+                <textarea disabled class="form-control" rows="25">{{
+                    JSON.stringify(version_data_formatted, null, '\t')
+                }}</textarea>
             </div>
 
             <!--<div v-for="(data, itemObjKey) in version_data">
@@ -86,33 +102,30 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-  api_endpoints,
-}
-from '@/utils/hooks'
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
-    name:'DisplayHistory',
+    name: 'DisplayHistory',
     components: {
         modal,
         FormSection,
     },
-    props:{
-        primary_model:{
+    props: {
+        primary_model: {
             type: String,
-            required:true
+            required: true,
         },
-        primary_model_number:{
+        primary_model_number: {
             type: String,
-            required:true
+            required: true,
         },
-        revision_id:{
+        revision_id: {
             type: Number,
-            required:true
+            required: true,
         },
-        revision_sequence:{
+        revision_sequence: {
             type: Number,
-            required:true
+            required: true,
         },
     },
 
@@ -127,8 +140,14 @@ export default {
             showNullFields: false,
         };
     },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.fetchHistoryData();
+        });
+    },
 
-    methods:{
+    methods: {
         close: function () {
             this.errorString = '';
             this.isModalOpen = false;
@@ -138,84 +157,93 @@ export default {
             let vm = this;
             const result = {};
             for (const key in values) {
-                if (values[key] !== null && values[key] !== undefined && (typeof values[key]!=='string' && (values[key].isArray || typeof values[key]==='object'))) {
+                if (
+                    values[key] !== null &&
+                    values[key] !== undefined &&
+                    typeof values[key] !== 'string' &&
+                    (values[key].isArray || typeof values[key] === 'object')
+                ) {
                     let subResult = vm.removeNullValues(values[key]);
                     if (Object.keys(subResult).length > 0) {
                         result[key] = subResult;
                     }
-                }
-                else if (values[key] !== null && values[key] !== undefined && values[key] !== "") {
+                } else if (
+                    values[key] !== null &&
+                    values[key] !== undefined &&
+                    values[key] !== ''
+                ) {
                     result[key] = values[key];
                 }
             }
             return result;
         },
-        formatHistoryData: function() {
+        formatHistoryData: function () {
             let vm = this;
-            if (this.showNullFields)
-            {
+            if (this.showNullFields) {
                 vm.version_data_formatted = vm.version_data;
-            }
-            else
-            {
-                vm.version_data_formatted = vm.removeNullValues(vm.version_data);
+            } else {
+                vm.version_data_formatted = vm.removeNullValues(
+                    vm.version_data
+                );
             }
         },
-        fetchHistoryData: function(){
+        fetchHistoryData: function () {
             let vm = this;
-            fetch(api_endpoints.lookup_revision_versions(vm.primary_model,vm.revision_id))
-            .then(async (response) => {
-                const data = await response.json();
-                vm.revision_date = data['date_created'];
-                vm.revision_user = data['revision_user'];
-                vm.version_data = data['version_data'];
-                vm.formatHistoryData();
-            },(error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.lookup_revision_versions(
+                    vm.primary_model,
+                    vm.revision_id
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.revision_date = data['date_created'];
+                    vm.revision_user = data['revision_user'];
+                    vm.version_data = data['version_data'];
+                    vm.formatHistoryData();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
     },
-    mounted: function(){
-        let vm = this;
-        this.$nextTick(() => {
-            vm.fetchHistoryData();
-        });
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
-    input[type=text], select {
-        width: 100%;
-        padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-    }
-    input[type=number]{
-        width: 50%;
-    }
-    .interval-margin{
-       margin-right: -100px;
-    }
-    .interval-range-true-input{
-        width: 20%;
-        margin-left: -80px;
-    }
-    .interval-range-true-choice{
-        width: 20%;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
+input[type='text'],
+select {
+    width: 100%;
+    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+}
+input[type='number'] {
+    width: 50%;
+}
+.interval-margin {
+    margin-right: -100px;
+}
+.interval-range-true-input {
+    width: 20%;
+    margin-left: -80px;
+}
+.interval-range-true-choice {
+    width: 20%;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/help_text.vue b/boranga/frontend/boranga/src/components/common/help_text.vue
index 2e56b821..3b9e237a 100644
--- a/boranga/frontend/boranga/src/components/common/help_text.vue
+++ b/boranga/frontend/boranga/src/components/common/help_text.vue
@@ -5,19 +5,41 @@
         </template>
         <template v-if="helpTextEntry">
             <template v-if="helpTextEntry.icon_with_popover">
-                <i :id="helpTextEntry.section_id" class="bi bi-info-circle-fill text-primary help-text-popover"
-                    data-bs-toggle="popover" data-bs-trigger="hover focus" :data-bs-content="helpTextEntry.text"
-                    data-bs-placement="top"></i><template v-if="helpTextEntry.user_can_administer">
-                    <a :href="`/admin/boranga/helptextentry/${helpTextEntry.id}/change/`" role="button" class="ms-2"
-                        target="_blank" title="Edit help text"><i class="bi bi-pencil-square"></i></a>
+                <i
+                    :id="helpTextEntry.section_id"
+                    class="bi bi-info-circle-fill text-primary help-text-popover"
+                    data-bs-toggle="popover"
+                    data-bs-trigger="hover focus"
+                    :data-bs-content="helpTextEntry.text"
+                    data-bs-placement="top"
+                ></i
+                ><template v-if="helpTextEntry.user_can_administer">
+                    <a
+                        :href="`/admin/boranga/helptextentry/${helpTextEntry.id}/change/`"
+                        role="button"
+                        class="ms-2"
+                        target="_blank"
+                        title="Edit help text"
+                        ><i class="bi bi-pencil-square"></i
+                    ></a>
                 </template>
             </template>
             <template v-else>
-                <alert type="primary"><i :id="helpTextEntry.section_id"
-                        class="bi bi-info-circle-fill text-primary help-text-popover me-2"></i>{{ helpTextEntry.text }}
+                <alert type="primary"
+                    ><i
+                        :id="helpTextEntry.section_id"
+                        class="bi bi-info-circle-fill text-primary help-text-popover me-2"
+                    ></i
+                    >{{ helpTextEntry.text }}
                     <template v-if="helpTextEntry.user_can_administer">
-                        <a :href="`/admin/boranga/helptextentry/${helpTextEntry.id}/change/`" role="button" class="ms-2"
-                            target="_blank" title="Edit help text"><i class="bi bi-pencil-square"></i></a>
+                        <a
+                            :href="`/admin/boranga/helptextentry/${helpTextEntry.id}/change/`"
+                            role="button"
+                            class="ms-2"
+                            target="_blank"
+                            title="Edit help text"
+                            ><i class="bi bi-pencil-square"></i
+                        ></a>
                     </template>
                 </alert>
             </template>
@@ -26,26 +48,28 @@
 </template>
 
 <script>
-
-import alert from '@vue-utils/alert.vue'
-import { api_endpoints } from "@/utils/hooks.js"
+import alert from '@vue-utils/alert.vue';
+import { api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'HelpText',
     components: {
-        alert
+        alert,
     },
     props: {
         section_id: {
             type: String,
-            required: true
+            required: true,
         },
     },
     data: function () {
         return {
             helpTextEntry: null,
             errorText: null,
-        }
+        };
+    },
+    created: function () {
+        this.fetchHelpText();
     },
     methods: {
         fetchHelpText: function () {
@@ -57,8 +81,11 @@ export default {
                         this.$nextTick(() => {
                             this.$nextTick(() => {
                                 if (vm.helpTextEntry.icon_with_popover) {
-                                    var helpTextEntryElement = document.getElementById(this.section_id);
-                                    new bootstrap.Popover(helpTextEntryElement)
+                                    var helpTextEntryElement =
+                                        document.getElementById(
+                                            this.section_id
+                                        );
+                                    new bootstrap.Popover(helpTextEntryElement);
                                 }
                             });
                         });
@@ -69,10 +96,7 @@ export default {
                         this.errorText = data.detail;
                     });
             }
-        }
-    },
-    created: function () {
-        this.fetchHelpText();
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/invite_external_referee.vue b/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
index 052f007e..6268e272 100644
--- a/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
+++ b/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
@@ -1,21 +1,36 @@
 <template lang="html">
     <div id="invite-external-referee">
         <modal :title="title()" large ok-text="Send Invite" @ok="validateForm">
-            <form id="inviteExternalRefereeForm" class="needs-validation form-horizontal"
-                name="inviteExternalRefereeForm" novalidate>
+            <form
+                id="inviteExternalRefereeForm"
+                class="needs-validation form-horizontal"
+                name="inviteExternalRefereeForm"
+                novalidate
+            >
                 <div class="row mt-3">
                     <div class="col-lg-12 ps-5 pe-5">
-                        <alert v-if="errors" class="d-flex align-items-center" type="danger"
-                            icon="exclamation-triangle-fill">
+                        <alert
+                            v-if="errors"
+                            class="d-flex align-items-center"
+                            type="danger"
+                            icon="exclamation-triangle-fill"
+                        >
                             {{ errors }}
                         </alert>
 
                         <div class="row mb-3">
-                            <label for="email" class="col-sm-3 col-form-label">Email
+                            <label for="email" class="col-sm-3 col-form-label"
+                                >Email
                             </label>
                             <div class="col-sm-9">
-                                <input ref="Email" v-model="external_referee_invite.email" type="email"
-                                    class="form-control" name="email" required />
+                                <input
+                                    ref="Email"
+                                    v-model="external_referee_invite.email"
+                                    type="email"
+                                    class="form-control"
+                                    name="email"
+                                    required
+                                />
                                 <div class="invalid-feedback">
                                     Please enter a valid email address.
                                 </div>
@@ -23,10 +38,21 @@
                         </div>
 
                         <div class="row mb-3 mt-3">
-                            <label for="first_name" class="col-sm-3 col-form-label">First Name</label>
+                            <label
+                                for="first_name"
+                                class="col-sm-3 col-form-label"
+                                >First Name</label
+                            >
                             <div class="col-sm-9">
-                                <input id="first_name" ref="first_name" v-model="external_referee_invite.first_name"
-                                    type="text" class="form-control" name="first_name" required />
+                                <input
+                                    id="first_name"
+                                    ref="first_name"
+                                    v-model="external_referee_invite.first_name"
+                                    type="text"
+                                    class="form-control"
+                                    name="first_name"
+                                    required
+                                />
                                 <div class="invalid-feedback">
                                     Please enter the referee's first name.
                                 </div>
@@ -34,10 +60,19 @@
                         </div>
 
                         <div class="row mb-3">
-                            <label for="last_name" class="col-sm-3 col-form-label">Last Name</label>
+                            <label
+                                for="last_name"
+                                class="col-sm-3 col-form-label"
+                                >Last Name</label
+                            >
                             <div class="col-sm-9">
-                                <input v-model="external_referee_invite.last_name" type="text" class="form-control"
-                                    name="last_name" required />
+                                <input
+                                    v-model="external_referee_invite.last_name"
+                                    type="text"
+                                    class="form-control"
+                                    name="last_name"
+                                    required
+                                />
                                 <div class="invalid-feedback">
                                     Please enter the referee's last name.
                                 </div>
@@ -45,10 +80,18 @@
                         </div>
 
                         <div class="row mb-4">
-                            <label for="mobile" class="col-sm-3 col-form-label">Invite Comments</label>
+                            <label for="mobile" class="col-sm-3 col-form-label"
+                                >Invite Comments</label
+                            >
                             <div class="col-sm-9">
-                                <textarea v-model="external_referee_invite.invite_text
-                                    " class="form-control" name="invite_text" required />
+                                <textarea
+                                    v-model="
+                                        external_referee_invite.invite_text
+                                    "
+                                    class="form-control"
+                                    name="invite_text"
+                                    required
+                                />
                                 <div class="invalid-feedback">
                                     Please enter an invite comment.
                                 </div>
@@ -56,13 +99,23 @@
                         </div>
 
                         <alert class="alert alert-primary">
-                            <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
+                            <symbol
+                                id="info-fill"
+                                fill="currentColor"
+                                viewBox="0 0 16 16"
+                            >
                                 <path
-                                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
+                                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+                                />
                             </symbol>
                             <ul class="list-group">
-                                <svg class="bi flex-shrink-0 text-primary mb-3" width="24" height="24" role="img"
-                                    aria-label="Info:">
+                                <svg
+                                    class="bi flex-shrink-0 text-primary mb-3"
+                                    width="24"
+                                    height="24"
+                                    role="img"
+                                    aria-label="Info:"
+                                >
                                     <use xlink:href="#info-fill" />
                                 </svg>
                                 <li class="list-group-item">
@@ -83,7 +136,7 @@
 </template>
 
 <script>
-import alert from '@vue-utils/alert.vue'
+import alert from '@vue-utils/alert.vue';
 import modal from '@vue-utils/bootstrap-modal.vue';
 
 export default {
@@ -111,7 +164,7 @@ export default {
         return {
             isModalOpen: false,
             external_referee_invite: {
-                "email": '',
+                email: '',
             },
             errors: null,
         };
@@ -136,8 +189,8 @@ export default {
             this.isModalOpen = false;
             this.errors = null;
             this.external_referee_invite = {
-                "email": '',
-            }
+                email: '',
+            };
             document
                 .getElementById('inviteExternalRefereeForm')
                 .classList.remove('was-validated');
@@ -149,7 +202,10 @@ export default {
                 vm.sendData();
             } else {
                 form.classList.add('was-validated');
-                $('#inviteExternalRefereeForm').find(':invalid').first().focus();
+                $('#inviteExternalRefereeForm')
+                    .find(':invalid')
+                    .first()
+                    .focus();
             }
             return false;
         },
@@ -158,11 +214,11 @@ export default {
             vm.errors = false;
             const url = `/api/${vm.model}/${vm.pk}/external_referee_invite/`;
             fetch(url, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(vm.external_referee_invite),
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.external_referee_invite),
             })
                 .then((response) => {
                     swal.fire({
diff --git a/boranga/frontend/boranga/src/components/common/map_functions.js b/boranga/frontend/boranga/src/components/common/map_functions.js
index 748c4b06..a32c334d 100644
--- a/boranga/frontend/boranga/src/components/common/map_functions.js
+++ b/boranga/frontend/boranga/src/components/common/map_functions.js
@@ -183,7 +183,9 @@ export async function queryLayerAtPoint(map_component, layer, coordinate) {
  */
 export function set_mode(mode, subMode = null) {
     if (!this.map.getTargetElement()) {
-        console.warn('Map not initialized in set_mode function. Returning false.');
+        console.warn(
+            'Map not initialized in set_mode function. Returning false.'
+        );
         return false;
     }
     // Toggle map mode on/off when the new mode is the old one
diff --git a/boranga/frontend/boranga/src/components/common/measure.js b/boranga/frontend/boranga/src/components/common/measure.js
index f2765ac7..8536e457 100644
--- a/boranga/frontend/boranga/src/components/common/measure.js
+++ b/boranga/frontend/boranga/src/components/common/measure.js
@@ -2,7 +2,7 @@ import { Fill, Stroke, Style, Text, RegularShape } from 'ol/style';
 import { getLength } from 'ol/sphere';
 
 let MeasureStyles = {
-    'defaultStyle': new Style({
+    defaultStyle: new Style({
         fill: new Fill({
             color: 'rgba(255, 255, 255, 0.2)',
         }),
@@ -20,10 +20,10 @@ let MeasureStyles = {
             points: 4,
             radius: 10,
             radius2: 0,
-            angle: Math.PI / 4
+            angle: Math.PI / 4,
         }),
     }),
-    'segmentStyle': new Style({
+    segmentStyle: new Style({
         text: new Text({
             font: '12px Calibri,sans-serif',
             fill: new Fill({
@@ -46,7 +46,7 @@ let MeasureStyles = {
             }),
         }),
     }),
-    'labelStyle': new Style({
+    labelStyle: new Style({
         text: new Text({
             font: '14px Calibri,sans-serif',
             fill: new Fill({
@@ -83,4 +83,4 @@ export function formatLength(line) {
     return output;
 }
 
-export default MeasureStyles;
\ No newline at end of file
+export default MeasureStyles;
diff --git a/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue b/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue
index c0d3d64a..95779fad 100644
--- a/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue
+++ b/boranga/frontend/boranga/src/components/common/meeting_side_panel.vue
@@ -1,29 +1,31 @@
 <template>
     <div class="card card-default">
-        <div class="card-header">
-            Submission
-        </div>
+        <div class="card-header">Submission</div>
         <div class="card-body py-2">
             <strong>Created by</strong><br />
             {{ submitter_first_name }}
             {{ submitter_last_name }}
-            <span v-if="is_new_contributor" class="badge bg-warning"><i class="bi bi-person-plus-fill"></i> New
-                Contributor</span>
+            <span v-if="is_new_contributor" class="badge bg-warning"
+                ><i class="bi bi-person-plus-fill"></i> New Contributor</span
+            >
         </div>
         <div v-if="datetime_created" class="card-body border-top py-2">
             <strong>Created on</strong><br />
-            {{ formatDateDay(datetime_created) }} <span class="fw-light">at</span> {{ formatDateTime(datetime_created)
-            }}
+            {{ formatDateDay(datetime_created) }}
+            <span class="fw-light">at</span>
+            {{ formatDateTime(datetime_created) }}
         </div>
         <div v-if="datetime_scheduled" class="card-body border-top py-2">
             <strong>Scheduled on</strong><br />
-            {{ formatDateDay(datetime_scheduled) }} <span class="fw-light">at</span> {{
-                formatDateTime(datetime_scheduled) }}
+            {{ formatDateDay(datetime_scheduled) }}
+            <span class="fw-light">at</span>
+            {{ formatDateTime(datetime_scheduled) }}
         </div>
         <div v-if="datetime_completed" class="card-body border-top py-2">
             <strong>Marked as Completed on</strong><br />
-            {{ formatDateDay(datetime_completed) }} <span class="fw-light">at</span> {{
-                formatDateTime(datetime_completed) }}
+            {{ formatDateDay(datetime_completed) }}
+            <span class="fw-light">at</span>
+            {{ formatDateTime(datetime_completed) }}
         </div>
         <div v-if="enableHistory" class="card-body border-top py-2">
             <table class="table small-table">
@@ -78,7 +80,7 @@ export default {
         },
         formatDateTime: function (data) {
             return data ? moment(data).format('HH:mm:ss A') : '';
-        }
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
index 43914447..834d0061 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
@@ -1,66 +1,119 @@
 <template lang="html">
     <div id="contactDetail">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large>
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <form class="form-horizontal needs-validation" name="contactDetailForm" novalidate>
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                    <form
+                        class="form-horizontal needs-validation"
+                        name="contactDetailForm"
+                        novalidate
+                    >
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row modal-input-row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Name</label>
+                                        <label class="control-label pull-left"
+                                            >Name</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" :disabled="isReadOnly"
-                                            v-model="contactObj.contact_name" ref="contact_name" required />
+                                        <input
+                                            ref="contact_name"
+                                            v-model="contactObj.contact_name"
+                                            type="text"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                            required
+                                        />
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Role</label>
+                                        <label class="control-label pull-left"
+                                            >Role</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" :disabled="isReadOnly"
-                                            v-model="contactObj.role" />
+                                        <input
+                                            v-model="contactObj.role"
+                                            type="text"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                        />
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Contact Details</label>
+                                        <label class="control-label pull-left"
+                                            >Contact Details</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea class="form-control" id="contact_details" :disabled="isReadOnly"
-                                            v-model="contactObj.contact" rows="4" />
+                                        <textarea
+                                            id="contact_details"
+                                            v-model="contactObj.contact"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                            rows="4"
+                                        />
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Organisation</label>
+                                        <label class="control-label pull-left"
+                                            >Organisation</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" :disabled="isReadOnly"
-                                            v-model="contactObj.organisation" />
+                                        <input
+                                            v-model="contactObj.organisation"
+                                            type="text"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                        />
                                     </div>
                                 </div>
 
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Notes</label>
+                                        <label class="control-label pull-left"
+                                            >Notes</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea class="form-control" id="notes" :disabled="isReadOnly"
-                                            v-model="contactObj.notes" rows="4" />
+                                        <textarea
+                                            id="notes"
+                                            v-model="contactObj.notes"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                            rows="4"
+                                        />
                                     </div>
                                 </div>
 
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">&nbsp;</label>
+                                        <label class="control-label pull-left"
+                                            >&nbsp;</label
+                                        >
                                     </div>
                                     <div v-if="!isReadOnly" class="col-sm-9">
-                                        <button type="button" class="btn btn-primary mb-2" @click="clearForm">Clear
-                                            Form</button><br />
+                                        <button
+                                            type="button"
+                                            class="btn btn-primary mb-2"
+                                            @click="clearForm"
+                                        >
+                                            Clear Form</button
+                                        ><br />
                                     </div>
                                 </div>
                             </div>
@@ -68,47 +121,92 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <div v-if="!isReadOnly">
-                    <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                    <template v-if="contact_detail_id">
-                        <button type="button" v-if="updatingContact" disabled class="btn btn-primary" @click="ok">
-                            Updating <span class="spinner-border spinner-border-sm" role="status"
-                                aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span></button>
-                        <button type="button" v-else class="btn btn-primary" @click="ok">Update Contact</button>
-                    </template>
-                    <template v-else>
-                        <button type="button" v-if="addingContact" disabled class="btn btn-primary" @click="ok">Adding
-                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span></button>
-                        <button type="button" v-else class="btn btn-primary" @click="ok">Add Contact</button>
-                    </template>
+            <template #footer>
+                <div>
+                    <div v-if="!isReadOnly">
+                        <button
+                            type="button"
+                            class="btn btn-secondary me-2"
+                            @click="cancel"
+                        >
+                            Cancel
+                        </button>
+                        <template v-if="contact_detail_id">
+                            <button
+                                v-if="updatingContact"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Updating
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Update Contact
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button
+                                v-if="addingContact"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Adding
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Add Contact
+                            </button>
+                        </template>
+                    </div>
                 </div>
-            </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers } from '@/utils/hooks.js';
 
 export default {
     name: 'ContactDetail',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         occurrence: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -128,7 +226,7 @@ export default {
             successString: '',
             success: false,
             validDate: false,
-        }
+        };
     },
     computed: {
         showError: function () {
@@ -137,16 +235,17 @@ export default {
         },
         title: function () {
             var action = this.contact_detail_action;
-            if (typeof action === "string" && action.length > 0) {
-                var capitalizedAction = action.charAt(0).toUpperCase() + action.slice(1);
+            if (typeof action === 'string' && action.length > 0) {
+                var capitalizedAction =
+                    action.charAt(0).toUpperCase() + action.slice(1);
                 return `${capitalizedAction} Contact to ${this.occurrence.occurrence_number}`;
             } else {
-                return "Invalid Contact detail action"; // Or handle the error in an appropriate way
+                return 'Invalid Contact detail action'; // Or handle the error in an appropriate way
             }
         },
         isReadOnly: function () {
-            return this.contact_detail_action === "view" ? true : false;
-        }
+            return this.contact_detail_action === 'view' ? true : false;
+        },
     },
     watch: {
         isModalOpen: function (val) {
@@ -155,7 +254,11 @@ export default {
                     this.$refs.contact_name.focus();
                 });
             }
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.contactDetailForm;
     },
     methods: {
         ok: function () {
@@ -165,7 +268,7 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             this.isModalOpen = false;
@@ -177,7 +280,7 @@ export default {
             let vm = this;
             vm.errors = false;
             let contactObj = JSON.parse(JSON.stringify(vm.contactObj));
-            let formData = new FormData()
+            let formData = new FormData();
 
             if (vm.contactObj.id) {
                 vm.updatingContact = true;
@@ -187,16 +290,19 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-            }).then((response) => {
-                    vm.updatingContact = false;
-                    vm.$parent.updatedContactDetails();
-                    vm.close();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.updatingContact = false;
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    (response) => {
+                        vm.updatingContact = false;
+                        vm.$parent.updatedContactDetails();
+                        vm.close();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                        vm.updatingContact = false;
+                    }
+                );
             } else {
                 vm.addingContact = true;
                 formData.append('data', JSON.stringify(contactObj));
@@ -205,30 +311,29 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.addingContact = false;
-                    vm.$parent.updatedContactDetails();
-                    vm.close();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.addingContact = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    (response) => {
+                        vm.addingContact = false;
+                        vm.$parent.updatedContactDetails();
+                        vm.close();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.addingContact = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
             }
         },
         clearForm: function () {
             this.contactObj = {
-                occurrence: this.occurrence.id
+                occurrence: this.occurrence.id,
             };
             this.$refs.contact_name.focus();
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.contactDetailForm;
-    }
-}
+};
 </script>
 
 <style lang="css">
@@ -236,7 +341,7 @@ export default {
     margin-bottom: 20px;
 }
 
-input[type=text],
+input[type='text'],
 select {
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
index 958d87e3..d70be5e8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
@@ -1,80 +1,173 @@
 <template lang="html">
     <div id="observerDetail">
-        <modal v-if="observerObj" transition="modal fade" @ok="ok()" @cancel="close()" :title="title" large>
+        <modal
+            v-if="observerObj"
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <form class="form-horizontal needs-validation" name="observerDetailForm" novalidate>
-                        <alert v-if="errorString" type="danger"><strong>{{ errorString }}</strong></alert>
+                    <form
+                        class="form-horizontal needs-validation"
+                        name="observerDetailForm"
+                        novalidate
+                    >
+                        <alert v-if="errorString" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Name</label>
+                                        <label class="control-label pull-left"
+                                            >Name</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" :disabled="isReadOnly"
-                                            v-model="observerObj.observer_name" ref="observer_name" required
-                                            autofocus />
+                                        <input
+                                            ref="observer_name"
+                                            v-model="observerObj.observer_name"
+                                            type="text"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                            required
+                                            autofocus
+                                        />
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Role</label>
+                                        <label class="control-label pull-left"
+                                            >Role</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" :disabled="isReadOnly"
-                                            v-model="observerObj.role" />
+                                        <input
+                                            v-model="observerObj.role"
+                                            type="text"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                        />
                                     </div>
                                 </div>
-                                <div v-if="'contact' in observerObj" class="row mb-3">
+                                <div
+                                    v-if="'contact' in observerObj"
+                                    class="row mb-3"
+                                >
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Contact Details</label>
+                                        <label class="control-label pull-left"
+                                            >Contact Details</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea class="form-control" id="contact_details" :disabled="isReadOnly"
-                                            v-model="observerObj.contact" rows="4" />
+                                        <textarea
+                                            id="contact_details"
+                                            v-model="observerObj.contact"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                            rows="4"
+                                        />
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Organisation</label>
+                                        <label class="control-label pull-left"
+                                            >Organisation</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" :disabled="isReadOnly"
-                                            v-model="observerObj.organisation" />
+                                        <input
+                                            v-model="observerObj.organisation"
+                                            type="text"
+                                            class="form-control"
+                                            :disabled="isReadOnly"
+                                        />
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Main Observer</label>
+                                        <label class="control-label pull-left"
+                                            >Main Observer</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <div class="form-check form-check-inline">
+                                        <div
+                                            class="form-check form-check-inline"
+                                        >
                                             <input
-                                                :disabled="isReadOnly || (occurrence_report.has_main_observer && !observerObj.main_observer)"
-                                                id="mainObserverYes" class="form-check-input" type="radio"
-                                                v-model="observerObj.main_observer" value="true">
-                                            <label for="mainObserverYes" class="form-check-label">Yes</label>
+                                                id="mainObserverYes"
+                                                v-model="
+                                                    observerObj.main_observer
+                                                "
+                                                :disabled="
+                                                    isReadOnly ||
+                                                    (occurrence_report.has_main_observer &&
+                                                        !observerObj.main_observer)
+                                                "
+                                                class="form-check-input"
+                                                type="radio"
+                                                value="true"
+                                            />
+                                            <label
+                                                for="mainObserverYes"
+                                                class="form-check-label"
+                                                >Yes</label
+                                            >
                                         </div>
-                                        <div class="form-check form-check-inline">
+                                        <div
+                                            class="form-check form-check-inline"
+                                        >
                                             <input
-                                                :disabled="isReadOnly || (occurrence_report.has_main_observer && !observerObj.main_observer)"
-                                                id="mainObserverNo" class="form-check-input" type="radio"
-                                                v-model="observerObj.main_observer" value="false">
-                                            <label for="mainObserverNo" class="form-check-label">No</label>
+                                                id="mainObserverNo"
+                                                v-model="
+                                                    observerObj.main_observer
+                                                "
+                                                :disabled="
+                                                    isReadOnly ||
+                                                    (occurrence_report.has_main_observer &&
+                                                        !observerObj.main_observer)
+                                                "
+                                                class="form-check-input"
+                                                type="radio"
+                                                value="false"
+                                            />
+                                            <label
+                                                for="mainObserverNo"
+                                                class="form-check-label"
+                                                >No</label
+                                            >
                                         </div>
                                     </div>
                                 </div>
-                                <div v-if="!occurrence_report.has_main_observer" class="row mb-3">
+                                <div
+                                    v-if="!occurrence_report.has_main_observer"
+                                    class="row mb-3"
+                                >
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">&nbsp;</label>
+                                        <label class="control-label pull-left"
+                                            >&nbsp;</label
+                                        >
                                     </div>
                                     <div v-if="!isReadOnly" class="col-sm-9">
-                                        <button type="button" class="btn btn-primary mb-2" @click="clearForm">Clear
-                                            Form</button><br />
-                                        <button type="button" class="btn btn-primary"
-                                            @click="populateWithSubmitterInformation()">Populate Form with Submitter
-                                            Details</button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-primary mb-2"
+                                            @click="clearForm"
+                                        >
+                                            Clear Form</button
+                                        ><br />
+                                        <button
+                                            type="button"
+                                            class="btn btn-primary"
+                                            @click="
+                                                populateWithSubmitterInformation()
+                                            "
+                                        >
+                                            Populate Form with Submitter Details
+                                        </button>
                                     </div>
                                 </div>
                             </div>
@@ -82,51 +175,99 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
+            <template #footer>
                 <div>
-                    <button type="button" class="btn btn-secondary me-2" @click="close()"><template
-                            v-if="isReadOnly">Close</template><template v-else>Cancel</template></button>
-                    <template v-if="!isReadOnly">
-                        <template v-if="observerObj.id">
-                            <button type="button" v-if="updatingObserver" disabled class="btn btn-primary"
-                                @click="ok">Updating <span class="spinner-border spinner-border-sm" role="status"
-                                    aria-hidden="true"></span>
-                                <span class="visually-hidden">Loading...</span></button>
-                            <button type="button" v-else class="btn btn-primary" @click="ok">Update Observer</button>
+                    <div>
+                        <button
+                            type="button"
+                            class="btn btn-secondary me-2"
+                            @click="close()"
+                        >
+                            <template v-if="isReadOnly">Close</template
+                            ><template v-else>Cancel</template>
+                        </button>
+                        <template v-if="!isReadOnly">
+                            <template v-if="observerObj.id">
+                                <button
+                                    v-if="updatingObserver"
+                                    type="button"
+                                    disabled
+                                    class="btn btn-primary"
+                                    @click="ok"
+                                >
+                                    Updating
+                                    <span
+                                        class="spinner-border spinner-border-sm"
+                                        role="status"
+                                        aria-hidden="true"
+                                    ></span>
+                                    <span class="visually-hidden"
+                                        >Loading...</span
+                                    >
+                                </button>
+                                <button
+                                    v-else
+                                    type="button"
+                                    class="btn btn-primary"
+                                    @click="ok"
+                                >
+                                    Update Observer
+                                </button>
+                            </template>
+                            <template v-else>
+                                <button
+                                    v-if="addingObserver"
+                                    type="button"
+                                    disabled
+                                    class="btn btn-primary"
+                                    @click="ok"
+                                >
+                                    Adding
+                                    <span
+                                        class="spinner-border spinner-border-sm"
+                                        role="status"
+                                        aria-hidden="true"
+                                    ></span>
+                                    <span class="visually-hidden"
+                                        >Loading...</span
+                                    >
+                                </button>
+                                <button
+                                    v-else
+                                    type="button"
+                                    class="btn btn-primary"
+                                    @click="ok"
+                                >
+                                    Add Observer
+                                </button>
+                            </template>
                         </template>
-                        <template v-else>
-                            <button type="button" v-if="addingObserver" disabled class="btn btn-primary"
-                                @click="ok">Adding
-                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                <span class="visually-hidden">Loading...</span></button>
-                            <button type="button" v-else class="btn btn-primary" @click="ok">Add Observer</button>
-                        </template>
-                    </template>
+                    </div>
                 </div>
-            </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers } from '@/utils/hooks.js';
 
 export default {
     name: 'ObserverDetail',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         occurrence_report: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -138,20 +279,21 @@ export default {
             addingObserver: false,
             updatingObserver: false,
             errorString: '',
-        }
+        };
     },
     computed: {
         title: function () {
             var action = this.observer_detail_action;
-            if (typeof action === "string" && action.length > 0) {
-                var capitalizedAction = action.charAt(0).toUpperCase() + action.slice(1);
+            if (typeof action === 'string' && action.length > 0) {
+                var capitalizedAction =
+                    action.charAt(0).toUpperCase() + action.slice(1);
                 return `${capitalizedAction} Observer of ${this.occurrence_report.occurrence_report_number}`;
             } else {
-                return "Invalid Observer detail action"; // Or handle the error in an appropriate way
+                return 'Invalid Observer detail action'; // Or handle the error in an appropriate way
             }
         },
         isReadOnly: function () {
-            return this.observer_detail_action === "view" ? true : false;
+            return this.observer_detail_action === 'view' ? true : false;
         },
     },
     watch: {
@@ -165,11 +307,12 @@ export default {
                         if (!this.occurrence_report.has_main_observer) {
                             this.populateWithSubmitterInformation();
                         }
-                        this.observerObj.main_observer = !this.occurrence_report.has_main_observer;
+                        this.observerObj.main_observer =
+                            !this.occurrence_report.has_main_observer;
                     }
                 });
             }
-        }
+        },
     },
     methods: {
         ok: function () {
@@ -188,7 +331,7 @@ export default {
             let vm = this;
             vm.errorString = '';
             let observerObj = JSON.parse(JSON.stringify(vm.observerObj));
-            let formData = new FormData()
+            let formData = new FormData();
 
             if (vm.observerObj.id) {
                 vm.updatingObserver = true;
@@ -198,15 +341,18 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.updatingObserver = false;
-                    vm.$parent.updatedObserverDetails();
-                    vm.close();
-                }, (error) => {
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.updatingObserver = false;
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    (response) => {
+                        vm.updatingObserver = false;
+                        vm.$parent.updatedObserverDetails();
+                        vm.close();
+                    },
+                    (error) => {
+                        vm.errorString = helpers.apiVueResourceError(error);
+                        vm.updatingObserver = false;
+                    }
+                );
             } else {
                 vm.addingObserver = true;
                 formData.append('data', JSON.stringify(observerObj));
@@ -215,15 +361,18 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.addingObserver = false;
-                    vm.$parent.updatedObserverDetails();
-                    vm.close();
-                }, (error) => {
-                    vm.addingObserver = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    (response) => {
+                        vm.addingObserver = false;
+                        vm.$parent.updatedObserverDetails();
+                        vm.close();
+                    },
+                    (error) => {
+                        vm.addingObserver = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
             }
         },
         populateWithSubmitterInformation: function () {
@@ -237,13 +386,17 @@ export default {
             };
             observerObj = { ...observerObj, ...this.observerObj };
             console.log(this.occurrence_report.submitter_information);
-            observerObj.observer_name = this.occurrence_report.submitter_information.name;
-            observerObj.contact = this.occurrence_report.submitter_information.contact_details;
+            observerObj.observer_name =
+                this.occurrence_report.submitter_information.name;
+            observerObj.contact =
+                this.occurrence_report.submitter_information.contact_details;
             if (this.occurrence_report.submitter_information.organisation) {
-                observerObj.organisation = this.occurrence_report.submitter_information.organisation;
+                observerObj.organisation =
+                    this.occurrence_report.submitter_information.organisation;
             }
             if (this.occurrence_report.submitter_information.position) {
-                observerObj.role = this.occurrence_report.submitter_information.position;
+                observerObj.role =
+                    this.occurrence_report.submitter_information.position;
             }
             this.observerObj = Object.assign({}, observerObj);
         },
@@ -257,5 +410,5 @@ export default {
             this.$refs.observer_name.focus();
         },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
index fd7e4ca7..4836687b 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
@@ -2,335 +2,472 @@
     <div id="animal_observation">
         <form @change="calculateTotalNumberSeen">
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Primary Detection Method:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Primary Detection Method:</label
+                >
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" style="width:100%;" class="form-select input-sm"
-                        ref="primary_detection_select" v-model="animal_observation.primary_detection_method">
-                        <option v-for="option in primary_detection_method_list" :value="option.id" :key="option.id">
+                    <select
+ref="primary_detection_select" v-model="animal_observation.primary_detection_method" :disabled="isReadOnly"
+                        style="width:100%;" class="form-select input-sm">
+                        <option
+                            v-for="option in primary_detection_method_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Secondary Signs:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Secondary Signs:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="secondary_sign_list && secondary_sign_list.length > 0 && animal_observation.secondary_sign && !secondary_sign_list.map((d) => d.id).includes(animal_observation.secondary_sign)">
-                            <input type="text" v-if="animal_observation.secondary_sign_name" class="form-control mb-3"
-                                :value="animal_observation.secondary_sign_name + ' (Now Archived)'" disabled />
+                            v-if="
+                                secondary_sign_list &&
+                                secondary_sign_list.length > 0 &&
+                                animal_observation.secondary_sign &&
+                                !secondary_sign_list
+                                    .map((d) => d.id)
+                                    .includes(animal_observation.secondary_sign)
+                            "
+                        >
+                            <input
+v-if="animal_observation.secondary_sign_name" type="text" class="form-control mb-3"
+                                :value="
+                                    animal_observation.secondary_sign_name +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change secondary sign to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="animal_observation.secondary_sign">
-                            <option v-for="secondary_sign in secondary_sign_list" :value="secondary_sign.id" v-bind:key="secondary_sign.id">
+                        <select
+                            v-model="animal_observation.secondary_sign"
+                            class="form-select"
+                        >
+                            <option
+                                v-for="secondary_sign in secondary_sign_list"
+                                :key="secondary_sign.id"
+                                :value="secondary_sign.id"
+                            >
                                 {{ secondary_sign.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly" v-model="animal_observation.secondary_sign_name" />
+                        <input
+                            v-model="animal_observation.secondary_sign_name"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Reproductive State:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Reproductive State:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="reprod_state_list && reprod_state_list.length > 0 && animal_observation.reproductive_state && !reprod_state_list.map((d) => d.id).includes(animal_observation.reproductive_state)">
-                            <input type="text" v-if="animal_observation.reproductive_state_name" class="form-control mb-3"
-                                :value="animal_observation.reproductive_state_name + ' (Now Archived)'" disabled />
+                            v-if="
+                                reprod_state_list &&
+                                reprod_state_list.length > 0 &&
+                                animal_observation.reproductive_state &&
+                                !reprod_state_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        animal_observation.reproductive_state
+                                    )
+                            "
+                        >
+                            <input
+v-if="animal_observation.reproductive_state_name" type="text" class="form-control mb-3"
+                                :value="
+                                    animal_observation.reproductive_state_name +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change reproductive state to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="animal_observation.reproductive_state">
-                            <option v-for="reproductive_state in reprod_state_list" :value="reproductive_state.id" v-bind:key="reproductive_state.id">
+                        <select
+                            v-model="animal_observation.reproductive_state"
+                            class="form-select"
+                        >
+                            <option
+                                v-for="reproductive_state in reprod_state_list"
+                                :key="reproductive_state.id"
+                                :value="reproductive_state.id"
+                            >
                                 {{ reproductive_state.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly" v-model="animal_observation.reproductive_state_name" />
+                        <input
+                            v-model="animal_observation.reproductive_state_name"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Animal Health:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Animal Health:</label
+                >
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" v-model="animal_observation.animal_health_id">
-                        <option v-for="option in animal_health_list" :value="option.id" v-bind:key="option.id">
+                    <select
+                        v-model="animal_observation.animal_health_id"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option
+                            v-for="option in animal_health_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Cause of Death:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Cause of Death:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="death_reason_list && death_reason_list.length > 0 && animal_observation.death_reason_id && !death_reason_list.map((d) => d.id).includes(animal_observation.death_reason_id)">
-                            <input type="text" v-if="animal_observation.death_reason" class="form-control mb-3"
-                                :value="animal_observation.death_reason + ' (Now Archived)'" disabled />
+                            v-if="
+                                death_reason_list &&
+                                death_reason_list.length > 0 &&
+                                animal_observation.death_reason_id &&
+                                !death_reason_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        animal_observation.death_reason_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="animal_observation.death_reason" type="text" class="form-control mb-3"
+                                :value="
+                                    animal_observation.death_reason +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change death reason to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="animal_observation.death_reason_id">
-                            <option v-for="death_reason in death_reason_list" :value="death_reason.id" v-bind:key="death_reason.id">
+                        <select
+                            v-model="animal_observation.death_reason_id"
+                            class="form-select"
+                        >
+                            <option
+                                v-for="death_reason in death_reason_list"
+                                :key="death_reason.id"
+                                :value="death_reason.id"
+                            >
                                 {{ death_reason.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly" v-model="animal_observation.death_reason" />
+                        <input
+                            v-model="animal_observation.death_reason"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Distinctive Features :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Distinctive Features :</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="distinct_features"
-                        placeholder="" v-model="animal_observation.distinctive_feature" />
+                    <textarea
+id="distinct_features" v-model="animal_observation.distinctive_feature" :disabled="isReadOnly" type="text" row="2"
+                        class="form-control" placeholder="" />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Actions Taken :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Actions Taken :</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="distinct_features"
-                        placeholder="" v-model="animal_observation.action_taken" />
+                    <textarea
+id="distinct_features" v-model="animal_observation.action_taken" :disabled="isReadOnly" type="text" row="2"
+                        class="form-control" placeholder="" />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Actions Required :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Actions Required :</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="distinct_features"
-                        placeholder="" v-model="animal_observation.action_required" />
+                    <textarea
+id="distinct_features" v-model="animal_observation.action_required" :disabled="isReadOnly" type="text" row="2"
+                        class="form-control" placeholder="" />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Observation Details :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Observation Details :</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="distinct_features"
-                        placeholder="" v-model="animal_observation.observation_detail_comment" />
+                    <textarea
+id="distinct_features" v-model="animal_observation.observation_detail_comment" :disabled="isReadOnly" type="text" row="2"
+                        class="form-control" placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Animal Count Date: </label>
+                <label for="" class="col-sm-3 control-label"
+                    >Animal Count Date:
+                </label>
                 <div class="col-sm-9">
-                    <input v-model="animal_observation.count_date
-                        " :disabled="true" type="datetime-local" class="form-control" name="animal_count_date" />
+                    <input
+v-model="animal_observation.count_date
+                        :disabled="true"
+                        type="datetime-local"
+                        class="form-control"
+                        name="animal_count_date"
+                    />
                 </div>
             </div>
 
-            <label for="" class="col-lg-3 control-label fs-5 fw-bold">Animal Count :</label>
+            <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+                >Animal Count :</label
+            >
             <div class="row mb-3">
                 <div class="col-sm-2">
-                    <label class="form-check-label fw-bold" for="not-counted">Not Counted</label>
+                    <label class="form-check-label fw-bold" for="not-counted"
+                        >Not Counted</label
+                    >
                 </div>
                 <div class="col-sm-2">
-                    <input type="checkbox" id="not-counted" v-model="animal_observation.counted" true-value="false"
-                        false-value="true" @change="checkboxChanged">
+                    <input
+id="not-counted" v-model="animal_observation.counted" type="checkbox" true-value="false"
+                        false-value="true"
+                        @change="checkboxChanged"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <div class="col-sm-4">
-
-                </div>
-                <div class="col-sm-2 fw-bold">
-                    Adult
-                </div>
-                <div class="col-sm-2 fw-bold">
-                    Juvenile
-                </div>
-                <div class="col-sm-2 fw-bold">
-                    Age Unknown
-                </div>
+                <div class="col-sm-4"></div>
+                <div class="col-sm-2 fw-bold">Adult</div>
+                <div class="col-sm-2 fw-bold">Juvenile</div>
+                <div class="col-sm-2 fw-bold">Age Unknown</div>
             </div>
             <div class="row mb-3">
-                <div class="col-sm-4 fw-bold">
-                    Alive
-                </div>
+                <div class="col-sm-4 fw-bold">Alive</div>
                 <div class="col-sm-2">
                     Male
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_adult_male" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_adult_male" />
+                    <input
+id="alive_adult_male" v-model="animal_observation.alive_adult_male" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Male
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_juvenile_male" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_juvenile_male" />
+                    <input
+id="alive_juvenile_male" v-model="animal_observation.alive_juvenile_male" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Male
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_unsure_male" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_unsure_male" />
+                    <input
+id="alive_unsure_male" v-model="animal_observation.alive_unsure_male" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
             </div>
             <div class="row mb-3">
-                <div class="col-sm-4 fw-bold">
-
-                </div>
+                <div class="col-sm-4 fw-bold"></div>
                 <div class="col-sm-2">
                     Female
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_adult_female" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_adult_female" />
+                    <input
+id="alive_adult_female" v-model="animal_observation.alive_adult_female" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Female
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_juvenile_female" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_juvenile_female" />
+                    <input
+id="alive_juvenile_female" v-model="animal_observation.alive_juvenile_female" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Female
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_unsure_female" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_unsure_female" />
+                    <input
+id="alive_unsure_female" v-model="animal_observation.alive_unsure_female" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
             </div>
             <div class="row mb-3">
-                <div class="col-sm-4 fw-bold">
-
-                </div>
+                <div class="col-sm-4 fw-bold"></div>
                 <div class="col-sm-2">
                     Sex Unknown
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_adult_unknown" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_adult_unknown" />
+                    <input
+id="alive_adult_unknown" v-model="animal_observation.alive_adult_unknown" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_juvenile_unknown" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_juvenile_unknown" />
+                    <input
+id="alive_juvenile_unknown" v-model="animal_observation.alive_juvenile_unknown" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="alive_unsure_unknown" placeholder="" min="0" step="1"
-                        v-model="animal_observation.alive_unsure_unknown" />
+                    <input
+id="alive_unsure_unknown" v-model="animal_observation.alive_unsure_unknown" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <div class="col-sm-4">
-
-                </div>
-                <div class="col-sm-2 fw-bold">
-                    Adult
-                </div>
-                <div class="col-sm-2 fw-bold">
-                    Juvenile
-                </div>
-                <div class="col-sm-2 fw-bold">
-                    Age Unknown
-                </div>
+                <div class="col-sm-4"></div>
+                <div class="col-sm-2 fw-bold">Adult</div>
+                <div class="col-sm-2 fw-bold">Juvenile</div>
+                <div class="col-sm-2 fw-bold">Age Unknown</div>
             </div>
             <div class="row mb-3">
-                <div class="col-sm-4 fw-bold">
-                    Dead
-                </div>
+                <div class="col-sm-4 fw-bold">Dead</div>
                 <div class="col-sm-2">
                     Male
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_adult_male" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_adult_male" />
+                    <input
+id="dead_adult_male" v-model="animal_observation.dead_adult_male" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Male
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_juvenile_male" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_juvenile_male" />
+                    <input
+id="dead_juvenile_male" v-model="animal_observation.dead_juvenile_male" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Male
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_unsure_male" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_unsure_male" />
+                    <input
+id="dead_unsure_male" v-model="animal_observation.dead_unsure_male" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
             </div>
             <div class="row mb-3">
-                <div class="col-sm-4 fw-bold">
-
-                </div>
+                <div class="col-sm-4 fw-bold"></div>
                 <div class="col-sm-2">
                     Female
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_adult_female" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_adult_female" />
+                    <input
+id="dead_adult_female" v-model="animal_observation.dead_adult_female" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Female
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_juvenile_female" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_juvenile_female" />
+                    <input
+id="dead_juvenile_female" v-model="animal_observation.dead_juvenile_female" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Female
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_unsure_female" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_unsure_female" />
+                    <input
+id="dead_unsure_female" v-model="animal_observation.dead_unsure_female" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
             </div>
             <div class="row mb-4">
-                <div class="col-sm-4 fw-bold">
-
-                </div>
+                <div class="col-sm-4 fw-bold"></div>
                 <div class="col-sm-2">
                     Sex Unknown
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_adult_unknown" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_adult_unknown" />
+                    <input
+id="dead_adult_unknown" v-model="animal_observation.dead_adult_unknown" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_juvenile_unknown" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_juvenile_unknown" />
+                    <input
+id="dead_juvenile_unknown" v-model="animal_observation.dead_juvenile_unknown" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
-                    <input :disabled="isReadOnly || not_counted" type="number" class="form-control animal-count-input"
-                        id="dead_unsure_unknown" placeholder="" min="0" step="1"
-                        v-model="animal_observation.dead_unsure_unknown" />
+                    <input
+id="dead_unsure_unknown" v-model="animal_observation.dead_unsure_unknown" :disabled="isReadOnly || not_counted"
+                        type="number" class="form-control animal-count-input" placeholder="" min="0"
+                        step="1" />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-4 control-label">Total Number Seen (alive and dead):</label>
+                <label for="" class="col-sm-4 control-label"
+                    >Total Number Seen (alive and dead):</label
+                >
                 <div class="col-sm-6">
-                    <input readonly type="number" class="form-control ocr_number" id="quadrats_surveyed" placeholder=""
-                        min="0" v-model="total_seen" />
+                    <input
+id="quadrats_surveyed" v-model="total_seen" readonly type="number" class="form-control ocr_number"
+                        placeholder="" min="0" />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="animal_observation.copied_ocr" class="float-end"><b>Sourced from
-                            {{ animal_observation.copied_ocr }}</b></span>
+                    <span v-if="animal_observation.copied_ocr" class="float-end"
+                        ><b
+                            >Sourced from {{ animal_observation.copied_ocr }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingAnimalOnservationDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingAnimalOnservationDetails" :disabled="isReadOnly"
+                    <button
+v-if="!updatingAnimalOnservationDetails" :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateAnimalObservationDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateAnimalObservationDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </form>
@@ -338,15 +475,13 @@
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'AnimalObservation',
+    components: {
+        FormSection,
+    },
     props: {
         animal_observation: {
             type: Object,
@@ -393,16 +528,60 @@ export default {
             not_counted: false,
         }
     },
-    components: {
-        FormSection,
-    },
     watch: {
         animal_observation: function () {
             let vm = this;
-            $(vm.$refs.primary_detection_select).val(vm.animal_observation.primary_detection_method).trigger('change.select2');
+            $(vm.$refs.primary_detection_select)
+                .val(vm.animal_observation.primary_detection_method)
+                .trigger('change.select2');
             //$(vm.$refs.secondary_sign_select).val(vm.animal_observation.secondary_sign).trigger('change.select2');
-            $(vm.$refs.reproductive_state_select).val(vm.animal_observation.reproductive_state).trigger('change.select2');
-        }
+            $(vm.$refs.reproductive_state_select)
+                .val(vm.animal_observation.reproductive_state)
+                .trigger('change.select2');
+        },
+    },
+    created: async function () {
+        let vm = this;
+        const response = await fetch(`/api/occurrence/animal_observation_list_of_values.json`);
+        vm.listOfAnimalValuesDict = await response.json();
+        vm.primary_detection_method_list = vm.listOfAnimalValuesDict.primary_detection_method_list;
+        vm.primary_detection_method_list.splice(0, 0,
+            {
+                id: '',
+                name: '',
+            });
+        vm.secondary_sign_list = vm.listOfAnimalValuesDict.secondary_sign_list;
+        vm.secondary_sign_list.splice(0, 0,
+            {
+                id: '',
+                name: '',
+            });
+        vm.reprod_state_list = vm.listOfAnimalValuesDict.reprod_state_list;
+        vm.reprod_state_list.splice(0, 0,
+            {
+                id: '',
+                name: '',
+            });
+        vm.death_reason_list = vm.listOfAnimalValuesDict.death_reason_list;
+        vm.death_reason_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.animal_health_list = vm.listOfAnimalValuesDict.animal_health_list;
+        vm.animal_health_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+    },
+    mounted: function () {
+        let vm = this;
+        vm.initialisePrimaryDetectionSelect();
+        vm.initialiseSecondarySignSelect();
+        vm.initialiseReprodStateSelect();
+        vm.calculateTotalNumberSeen();
+        vm.not_counted = !vm.animal_observation.counted;
     },
     methods: {
         calculateTotalNumberSeen: function () {
@@ -511,50 +690,7 @@ export default {
             });
         },
     },
-    created: async function () {
-        let vm = this;
-        const response = await fetch(`/api/occurrence/animal_observation_list_of_values.json`);
-        vm.listOfAnimalValuesDict = await response.json();
-        vm.primary_detection_method_list = vm.listOfAnimalValuesDict.primary_detection_method_list;
-        vm.primary_detection_method_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
-        vm.secondary_sign_list = vm.listOfAnimalValuesDict.secondary_sign_list;
-        vm.secondary_sign_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
-        vm.reprod_state_list = vm.listOfAnimalValuesDict.reprod_state_list;
-        vm.reprod_state_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
-        vm.death_reason_list = vm.listOfAnimalValuesDict.death_reason_list;
-        vm.death_reason_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.animal_health_list = vm.listOfAnimalValuesDict.animal_health_list;
-        vm.animal_health_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-    },
-    mounted: function () {
-        let vm = this;
-        vm.initialisePrimaryDetectionSelect();
-        vm.initialiseSecondarySignSelect();
-        vm.initialiseReprodStateSelect();
-        vm.calculateTotalNumberSeen();
-        vm.not_counted = !vm.animal_observation.counted;
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -578,13 +714,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
index 569c3dc4..e5db88ac 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
@@ -1,43 +1,102 @@
 <template lang="html">
     <div id="communityOccurrence">
-        <FormSection :formCollapse="false" label="Occurrence" Index="occurrence">
+        <FormSection
+            :form-collapse="false"
+            label="Occurrence"
+            Index="occurrence"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label fw-bold">Occurrence Name: <span class="text-danger">*</span></label>
+                <label for="" class="col-sm-3 control-label fw-bold"
+                    >Occurrence Name: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <textarea class="form-control" :disabled="isReadOnly" rows="1" id="occurrence_name" placeholder=""
-                        v-model="occurrence_obj.occurrence_name" />
+                    <textarea
+                        id="occurrence_name"
+                        v-model="occurrence_obj.occurrence_name"
+                        class="form-control"
+                        :disabled="isReadOnly"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label fw-bold">Community Name: <span class="text-danger">*</span></label>
-                <div class="col-sm-9" :id="select_community_name">
-                    <select :disabled="isReadOnly" :id="community_name_lookup" :name="community_name_lookup"
-                        :ref="community_name_lookup" class="form-control" />
+                <label for="" class="col-sm-3 control-label fw-bold"
+                    >Community Name: <span class="text-danger">*</span></label
+                >
+                <div :id="select_community_name" class="col-sm-9">
+                    <select
+                        :id="community_name_lookup"
+                        :ref="community_name_lookup"
+                        :disabled="isReadOnly"
+                        :name="community_name_lookup"
+                        class="form-control"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Occurrence Source:</label>
-                <div v-for="source in occurrence_source_list" class="col-sm-auto">
-                    <input :disabled="isReadOnly" type="checkbox" v-model="occurrence_obj.occurrence_source" v-bind:value="source[0]" v-bind:id="source[1]">
+                <label for="" class="col-sm-3 control-label"
+                    >Occurrence Source:</label
+                >
+                <div
+                    v-for="source in occurrence_source_list"
+                    class="col-sm-auto"
+                >
+                    <input
+                        :id="source[1]"
+                        v-model="occurrence_obj.occurrence_source"
+                        :disabled="isReadOnly"
+                        type="checkbox"
+                        :value="source[0]"
+                    />
                     {{ source[1] }}
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Wild Status:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Wild Status:</label
+                >
                 <div class="col-sm-9">
                     <template
-                        v-if="wild_status_list && wild_status_list.length > 0 && occurrence_obj.wild_status && !wild_status_list.map((d) => d.id).includes(occurrence_obj.wild_status)">
-                        <input type="text" v-if="occurrence_obj.wild_status_name" class="form-control mb-3"
-                            :value="occurrence_obj.wild_status_name + ' (Now Archived)'" disabled />
-                        <div v-if="occurrence_obj.wild_status" class="mb-3 text-muted">
+                        v-if="
+                            wild_status_list &&
+                            wild_status_list.length > 0 &&
+                            occurrence_obj.wild_status &&
+                            !wild_status_list
+                                .map((d) => d.id)
+                                .includes(occurrence_obj.wild_status)
+                        "
+                    >
+                        <input
+                            v-if="occurrence_obj.wild_status_name"
+                            type="text"
+                            class="form-control mb-3"
+                            :value="
+                                occurrence_obj.wild_status_name +
+                                ' (Now Archived)'
+                            "
+                            disabled
+                        />
+                        <div
+                            v-if="occurrence_obj.wild_status"
+                            class="mb-3 text-muted"
+                        >
                             Change wild status to:
                         </div>
                     </template>
-                    <select :disabled="isReadOnly"
+                    <select
+                        v-model="occurrence_obj.wild_status"
+                        :disabled="isReadOnly"
                         class="form-select"
-                        v-model="occurrence_obj.wild_status">
-                        <option :value="null" selected disabled>Select Wild Status</option>
-                        <option v-for="option in wild_status_list" :value="option.id" :key="option.id">
+                    >
+                        <option :value="null" selected disabled>
+                            Select Wild Status
+                        </option>
+                        <option
+                            v-for="option in wild_status_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
@@ -46,142 +105,169 @@
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Comments:</label>
                 <div class="col-sm-9">
-                    <textarea class="form-control" :disabled="isReadOnly" id="occurrence_comments" placeholder=""
-                        v-model="occurrence_obj.comment" />
+                    <textarea
+                        id="occurrence_comments"
+                        v-model="occurrence_obj.comment"
+                        class="form-control"
+                        :disabled="isReadOnly"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <ContactDatatable ref="contact_datatable" :occurrence_obj="occurrence_obj"
-                :is-read-only="isReadOnly" @refreshOccurrence="refreshOccurrence()">
+            <ContactDatatable
+                ref="contact_datatable"
+                :occurrence_obj="occurrence_obj"
+                :is-read-only="isReadOnly"
+                @refresh-occurrence="refreshOccurrence()"
+            >
             </ContactDatatable>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj />
+            <RelatedReports
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+            />
         </FormSection>
     </div>
 </template>
 
 <script>
-
 import FormSection from '@/components/forms/section_toggle.vue';
 import ContactDatatable from './contact_datatable.vue';
-import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue'
-import {
-    api_endpoints,
-}
-    from '@/utils/hooks'
+import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
     name: 'CommunityOccurrence',
+    components: {
+        FormSection,
+        RelatedReports,
+        ContactDatatable,
+    },
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
         let vm = this;
         return {
-            community_name_lookup: 'community_name_lookup' + vm.occurrence_obj.id,
-            select_community_name: "select_community_name" + vm.occurrence_obj.id,
+            community_name_lookup:
+                'community_name_lookup' + vm.occurrence_obj.id,
+            select_community_name:
+                'select_community_name' + vm.occurrence_obj.id,
             occ_profile_dict: {},
             wild_status_list: [],
             occurrence_source_list: [],
-        }
+        };
     },
-    components: {
-        FormSection,
-        RelatedReports,
-        ContactDatatable,
+    computed: {
+        isReadOnly: function () {
+            return !this.occurrence_obj.can_user_edit;
+        },
     },
-    watch: {
+    watch: {},
+    created: async function () {
+        let vm = this;
+        let action = this.$route.query.action;
+        let dict_url =
+            action == 'view'
+                ? api_endpoints.occ_profile_dict +
+                  '?group_type=' +
+                  vm.occurrence_obj.group_type_id +
+                  '&action=' +
+                  action
+                : api_endpoints.occ_profile_dict +
+                  '?group_type=' +
+                  vm.occurrence_obj.group_type_id;
+        fetch(dict_url).then(
+            async (response) => {
+                vm.occ_profile_dict = await response.json();
+                vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
+                vm.occurrence_source_list =
+                    vm.occ_profile_dict.occurrence_source_list;
+                this.getCommunityDisplay();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.eventListeners();
+            vm.initialiseCommunityNameLookup();
+        });
     },
     methods: {
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.community_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_community_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.occurrence_obj.group_type_id,
-                            cs_community: true,
-                            cs_community_status: vm.occurrence_obj.processing_status,
-                        }
-                        return query;
+            $(vm.$refs[vm.community_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_community_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.occurrence_obj.group_type_id,
+                                cs_community: true,
+                                cs_community_status:
+                                    vm.occurrence_obj.processing_status,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.occurrence_obj.community = data;
                     vm.occurrence_obj.community_id = data.id;
                     vm.community_display = e.params.data.text;
                     vm.taxon_previous_name = e.params.data.taxon_previous_name;
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_obj.community_id = null
+                    vm.occurrence_obj.community_id = null;
                     vm.community_display = '';
                     vm.taxon_previous_name = '';
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.community_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.community_name_lookup +
+                            '-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         getCommunityDisplay: function () {
             let vm = this;
             if (vm.occurrence_obj?.community_id) {
-                let community_display_url = api_endpoints.community_display +
-                    "?community_id=" + vm.occurrence_obj.community_id
+                let community_display_url =
+                    api_endpoints.community_display +
+                    '?community_id=' +
+                    vm.occurrence_obj.community_id;
                 fetch(community_display_url).then(async (response) => {
-                        const data = await response.json();
-                        var newOption = new Option(data.name, data.id, false, true);
-                        $('#' + vm.community_name_lookup).append(newOption);
-                        vm.community_display = data.name
-                    })
+                    const data = await response.json();
+                    var newOption = new Option(data.name, data.id, false, true);
+                    $('#' + vm.community_name_lookup).append(newOption);
+                    vm.community_display = data.name;
+                });
             }
         },
         eventListeners: function () {
             let vm = this;
-
-        },
-    },
-    created: async function () {
-        let vm = this;
-        let action = this.$route.query.action;
-        let dict_url = action == "view" ? api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type_id + '&action=' + action :
-            api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type_id
-        fetch(dict_url).then(async (response) => {
-            vm.occ_profile_dict = await response.json();
-            vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
-            vm.occurrence_source_list = vm.occ_profile_dict.occurrence_source_list;
-            this.getCommunityDisplay();
-
-        }, (error) => {
-            console.log(error);
-        })
-    },
-    computed: {
-        isReadOnly: function () {
-            return !(this.occurrence_obj.can_user_edit);
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.eventListeners();
-            vm.initialiseCommunityNameLookup();
-        });
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -201,13 +287,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
index 626cb28a..34d7a5d4 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
@@ -1,54 +1,71 @@
 <template lang="html">
     <div id="contactTable">
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label fw-bold">Key Contacts:</label>
+            <label for="" class="col-sm-3 control-label fw-bold"
+                >Key Contacts:</label
+            >
             <div class="col-sm-9 text-end">
-                <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                    @click.prevent="newContactDetail">
+                <button
+                    :disabled="isReadOnly"
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="newContactDetail"
+                >
                     <i class="fa-solid fa-circle-plus"></i>
                     Add Contact
                 </button>
             </div>
         </div>
         <div class="row mb-3">
-            <datatable ref="contact_detail_datatable" id="contactDetailTable" :dtOptions="contact_detail_options"
-                :dtHeaders="contact_detail_headers" />
+            <datatable
+                id="contactDetailTable"
+                ref="contact_detail_datatable"
+                :dt-options="contact_detail_options"
+                :dt-headers="contact_detail_headers"
+            />
         </div>
-        <ContactDetail v-if="occurrence_obj" ref="contact_detail" @refreshFromResponse="refreshFromResponse"
-            :url="contact_detail_url" :occurrence="occurrence_obj">
+        <ContactDetail
+            v-if="occurrence_obj"
+            ref="contact_detail"
+            :url="contact_detail_url"
+            :occurrence="occurrence_obj"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ContactDetail>
         <div v-if="occContactDetailHistoryId">
-            <OCCContactDetailHistory ref="occ_contact_detail_history" :key="occContactDetailHistoryId"
-                :contact-id="occContactDetailHistoryId" />
+            <OCCContactDetailHistory
+                ref="occ_contact_detail_history"
+                :key="occContactDetailHistoryId"
+                :contact-id="occContactDetailHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-;
 import datatable from '@vue-utils/datatable.vue';
-import ContactDetail from './add_contact_detail.vue'
+import ContactDetail from './add_contact_detail.vue';
 import OCCContactDetailHistory from '../../internal/occurrence/occ_contact_detail_history.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'ContactTable',
+    components: {
+        datatable,
+        ContactDetail,
+        OCCContactDetailHistory,
+    },
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         isReadOnly: {
             type: Boolean,
-            default: true
+            default: true,
         },
     },
     emits: ['refreshOccurrenceReport'],
@@ -57,11 +74,18 @@ export default {
         return {
             occContactDetailHistoryId: null,
             contact_detail_url: api_endpoints.contact_detail,
-            contact_detail_headers: ['Contact Name', 'Contact Role', 'Contact Details', 'Organisation', 'Notes', 'Action'],
+            contact_detail_headers: [
+                'Contact Name',
+                'Contact Role',
+                'Contact Details',
+                'Organisation',
+                'Notes',
+                'Action',
+            ],
             contact_detail_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -71,11 +95,15 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + '/contact_details'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.occurrence,
+                        vm.occurrence_obj.id + '/contact_details'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -85,8 +113,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -94,65 +122,75 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "contact_name",
+                        data: 'contact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.contact_name;
                             } else {
-                                return '<s>' + full.contact_name + '</s>'
+                                return '<s>' + full.contact_name + '</s>';
                             }
                         },
                     },
                     {
-                        data: "role",
+                        data: 'role',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.role;
                             } else {
-                                return '<s>' + full.role + '</s>'
+                                return '<s>' + full.role + '</s>';
                             }
                         },
                     },
                     {
-                        data: "contact",
+                        data: 'contact',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 let value = full.contact;
-                                let result = helpers.dtPopover(value, 30, 'hover');
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
                                 return type == 'export' ? value : result;
                             } else {
                                 let value = full.contact;
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                return '<s>' + type == 'export' ? value : result + '</s>'
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                return '<s>' + type == 'export'
+                                    ? value
+                                    : result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "organisation",
+                        data: 'organisation',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.organisation;
                             } else {
-                                return '<s>' + full.organisation + '</s>'
+                                return '<s>' + full.organisation + '</s>';
                             }
                         },
                     },
                     {
-                        data: "notes",
+                        data: 'notes',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
@@ -160,14 +198,13 @@ export default {
                             let result = helpers.dtPopover(value, 60, 'hover');
                             if (full.visible) {
                                 return result;
-                            }
-                            else {
+                            } else {
                                 return '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.visible) {
@@ -182,7 +219,7 @@ export default {
                             }
                             links += `<a href='#' data-history-contact='${full.id}'>History</a><br>`;
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -196,51 +233,75 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        datatable,
-        ContactDetail,
-        OCCContactDetailHistory,
+            },
+        };
     },
     watch: {
         isReadOnly: function (newVal, oldVal) {
             this.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.eventListeners();
+        });
     },
     methods: {
         eventListeners: function () {
             let vm = this;
-            vm.$refs.contact_detail_datatable.vmDataTable.on('click', 'a[data-edit-contact_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-contact_det');
-                vm.editContactDetail(id);
-            });
-            vm.$refs.contact_detail_datatable.vmDataTable.on('click', 'a[data-view-contact_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-contact_det');
-                vm.viewContactDetail(id);
-            });
+            vm.$refs.contact_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-contact_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-contact_det');
+                    vm.editContactDetail(id);
+                }
+            );
+            vm.$refs.contact_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-contact_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-contact_det');
+                    vm.viewContactDetail(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.contact_detail_datatable.vmDataTable.on('click', 'a[data-delete-contact_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-delete-contact_det');
-                vm.deleteContactDetail(id);
-            });
-            vm.$refs.contact_detail_datatable.vmDataTable.on('click', 'a[data-reinstate-contact_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-contact_det');
-                vm.reinstateContactDetail(id);
-            });
-            vm.$refs.contact_detail_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-            vm.$refs.contact_detail_datatable.vmDataTable.on('click', 'a[data-history-contact]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-contact');
-                vm.historyContactDetail(id);
-            });
+            vm.$refs.contact_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-delete-contact_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-delete-contact_det');
+                    vm.deleteContactDetail(id);
+                }
+            );
+            vm.$refs.contact_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-contact_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-contact_det');
+                    vm.reinstateContactDetail(id);
+                }
+            );
+            vm.$refs.contact_detail_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+            vm.$refs.contact_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-contact]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-contact');
+                    vm.historyContactDetail(id);
+                }
+            );
         },
         refreshFromResponse: function () {
             let vm = this;
@@ -248,7 +309,11 @@ export default {
         },
         adjust_table_width: function () {
             let vm = this;
-            if (vm.$refs.contact_detail_datatable !== undefined) { vm.$refs.contact_detail_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (vm.$refs.contact_detail_datatable !== undefined) {
+                vm.$refs.contact_detail_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
         newContactDetail: function () {
             let vm = this;
@@ -261,7 +326,7 @@ export default {
                 contact: '',
                 organisation: '',
                 notes: '',
-            }
+            };
             this.$refs.contact_detail.contactObj = new_contact_detail;
             this.$refs.contact_detail.contact_detail_action = 'add';
             this.$refs.contact_detail.isModalOpen = true;
@@ -270,32 +335,42 @@ export default {
             let vm = this;
             this.$refs.contact_detail.contact_detail_id = id;
             this.$refs.contact_detail.contact_detail_action = 'edit';
-            fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id)).then(async (response) => {
-                this.$refs.contact_detail.contactObj = await response.json();
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(api_endpoints.contact_detail, id)
+            ).then(
+                async (response) => {
+                    this.$refs.contact_detail.contactObj =
+                        await response.json();
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.contact_detail.isModalOpen = true;
         },
         viewContactDetail: function (id) {
             let vm = this;
             this.$refs.contact_detail.contact_detail_id = id;
             this.$refs.contact_detail.contact_detail_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id)).then(async (response) => {
-                this.$refs.contact_detail.contactObj = await response.json();
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(api_endpoints.contact_detail, id)
+            ).then(
+                async (response) => {
+                    this.$refs.contact_detail.contactObj =
+                        await response.json();
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.contact_detail.isModalOpen = true;
         },
         deleteContactDetail: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Contact",
-                text: "Are you sure you want to discard this Contact?",
-                icon: "question",
+                title: 'Discard Contact',
+                text: 'Are you sure you want to discard this Contact?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Contact',
                 customClass: {
@@ -303,42 +378,60 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The Contact has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            }).then((result) => {
-                                vm.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
-                                vm.$emit('refreshOccurrenceReport');
-                                if (vm.occurrence_obj.processing_status == "Unlocked") {
-                                    vm.$router.go();
-                                }
-                            });
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.contact_detail,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The Contact has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                }).then((result) => {
+                                    vm.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
+                                    vm.$emit('refreshOccurrenceReport');
+                                    if (
+                                        vm.occurrence_obj.processing_status ==
+                                        'Unlocked'
+                                    ) {
+                                        vm.$router.go();
+                                    }
+                                });
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateContactDetail: function (id) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.contact_detail, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                .then((response) => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.contact_detail,
+                    id + '/reinstate'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                }
+            ).then(
+                (response) => {
                     swal.fire({
                         title: 'Reinstated',
                         text: 'The Contact has been reinstated',
@@ -349,11 +442,12 @@ export default {
                     }).then((result) => {
                         vm.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
                         vm.$emit('refreshOccurrenceReport');
-                        if (vm.occurrence_obj.processing_status == "Unlocked") {
+                        if (vm.occurrence_obj.processing_status == 'Unlocked') {
                             vm.$router.go();
                         }
                     });
-                }, (error) => {
+                },
+                (error) => {
                     var errorText = helpers.apiVueResourceError(error);
                     swal.fire({
                         title: 'Error',
@@ -363,7 +457,8 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         updatedContactDetails() {
             let vm = this;
@@ -376,11 +471,5 @@ export default {
             });
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.eventListeners();
-        });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
index 3d58ef43..4d819bb8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
@@ -1,58 +1,75 @@
 <template lang="html">
     <div id="observerTable">
         <div v-if="!isReadOnly" class="row mb-3">
-            <label for="" class="col-sm-3 control-label fw-bold">Observation Details: <span class="text-danger">*</span></label>
+            <label for="" class="col-sm-3 control-label fw-bold"
+                >Observation Details: <span class="text-danger">*</span></label
+            >
             <div class="col-sm-9 text-end">
-                <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                    @click.prevent="newObserverDetail">
+                <button
+                    :disabled="isReadOnly"
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="newObserverDetail"
+                >
                     <i class="fa-solid fa-circle-plus"></i>
                     Add Observer
                 </button>
             </div>
         </div>
         <div class="row mb-3">
-            <datatable ref="observer_detail_datatable" id="observerDetailTable" :dtOptions="observer_detail_options"
-                :dtHeaders="observer_detail_headers" />
+            <datatable
+                id="observerDetailTable"
+                ref="observer_detail_datatable"
+                :dt-options="observer_detail_options"
+                :dt-headers="observer_detail_headers"
+            />
         </div>
-        <ObserverDetail v-if="occurrence_report_obj" ref="observer_detail" @refreshFromResponse="refreshFromResponse"
-            :url="observer_detail_url" :occurrence_report="occurrence_report_obj">
+        <ObserverDetail
+            v-if="occurrence_report_obj"
+            ref="observer_detail"
+            :url="observer_detail_url"
+            :occurrence_report="occurrence_report_obj"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ObserverDetail>
         <div v-if="ocrObserverDetailHistoryId">
-            <OCRObserverDetailHistory ref="ocr_observer_detail_history" :key="ocrObserverDetailHistoryId"
-                :observer-id="ocrObserverDetailHistoryId" />
+            <OCRObserverDetailHistory
+                ref="ocr_observer_detail_history"
+                :key="ocrObserverDetailHistoryId"
+                :observer-id="ocrObserverDetailHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-;
 import datatable from '@vue-utils/datatable.vue';
-import ObserverDetail from './add_observer_detail.vue'
+import ObserverDetail from './add_observer_detail.vue';
 import OCRObserverDetailHistory from '../../internal/occurrence/ocr_observer_detail_history.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'ObserverTable',
+    components: {
+        datatable,
+        ObserverDetail,
+        OCRObserverDetailHistory,
+    },
     props: {
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         isReadOnly: {
             type: Boolean,
-            default: true
+            default: true,
         },
         show_observer_contact_information: {
             type: Boolean,
-            default: true
+            default: true,
         },
     },
     emits: ['refreshOccurrenceReport'],
@@ -60,12 +77,12 @@ export default {
         let vm = this;
         let columns = [
             {
-                data: "observer_name",
+                data: 'observer_name',
                 orderable: true,
                 searchable: true,
             },
             {
-                data: "contact",
+                data: 'contact',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
@@ -75,25 +92,25 @@ export default {
                 },
             },
             {
-                data: "role",
+                data: 'role',
                 orderable: true,
                 searchable: true,
             },
             {
-                data: "organisation",
+                data: 'organisation',
                 orderable: true,
                 searchable: true,
             },
             {
-                data: "main_observer",
+                data: 'main_observer',
                 orderable: true,
                 searchable: true,
                 render: function (data, type, full) {
                     return full.main_observer ? 'Yes' : 'No';
-                }
+                },
             },
             {
-                data: "id",
+                data: 'id',
                 mRender: function (data, type, full) {
                     let links = '';
                     if (full.visible) {
@@ -106,38 +123,61 @@ export default {
                     } else if (!vm.isReadOnly) {
                         links += `<a href='#' data-reinstate-observer_det='${full.id}'>Reinstate</a><br>`;
                     }
-                    if(full.can_action && !vm.is_external){
+                    if (full.can_action && !vm.is_external) {
                         links += `<a href='#' data-history-observer='${full.id}'>History</a><br>`;
                     }
                     return links;
-                }
+                },
             },
-        ]
+        ];
         if (!vm.show_observer_contact_information) {
             columns.splice(1, 1);
         }
         return {
             ocrObserverDetailHistoryId: null,
             observer_detail_url: api_endpoints.observer_detail,
-            observer_detail_headers: vm.show_observer_contact_information ? ['Contact Name', 'Contact Detail', 'Observer Role', 'Organisation', 'Main Observer', 'Action'] : ['Contact Name', 'Observer Role', 'Organisation', 'Main Observer', 'Action'],
+            observer_detail_headers: vm.show_observer_contact_information
+                ? [
+                      'Contact Name',
+                      'Contact Detail',
+                      'Observer Role',
+                      'Organisation',
+                      'Main Observer',
+                      'Action',
+                  ]
+                : [
+                      'Contact Name',
+                      'Observer Role',
+                      'Organisation',
+                      'Main Observer',
+                      'Action',
+                  ],
             observer_detail_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 2, className: 'actions', targets: -1 },
+                    {
+                        responsivePriority: 2,
+                        className: 'actions',
+                        targets: -1,
+                    },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report_obj.id + '/observer_details'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.occurrence_report,
+                        vm.occurrence_report_obj.id + '/observer_details'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -147,8 +187,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -156,15 +196,17 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: columns,
                 processing: true,
                 rowCallback: function (row, data, index) {
                     if (!data.visible) {
-                        $(row).children('td:not(.actions)').addClass('text-decoration-line-through');
+                        $(row)
+                            .children('td:not(.actions)')
+                            .addClass('text-decoration-line-through');
                     }
                 },
                 drawCallback: function () {
@@ -177,51 +219,75 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        datatable,
-        ObserverDetail,
-        OCRObserverDetailHistory,
+            },
+        };
     },
     watch: {
         isReadOnly: function (newVal, oldVal) {
             this.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.eventListeners();
+        });
     },
     methods: {
         eventListeners: function () {
             let vm = this;
-            vm.$refs.observer_detail_datatable.vmDataTable.on('click', 'a[data-edit-observer_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-observer_det');
-                vm.editObserverDetail(id);
-            });
-            vm.$refs.observer_detail_datatable.vmDataTable.on('click', 'a[data-view-observer_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-observer_det');
-                vm.viewObserverDetail(id);
-            });
+            vm.$refs.observer_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-observer_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-observer_det');
+                    vm.editObserverDetail(id);
+                }
+            );
+            vm.$refs.observer_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-observer_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-observer_det');
+                    vm.viewObserverDetail(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.observer_detail_datatable.vmDataTable.on('click', 'a[data-delete-observer_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-delete-observer_det');
-                vm.deleteObserverDetail(id);
-            });
-            vm.$refs.observer_detail_datatable.vmDataTable.on('click', 'a[data-reinstate-observer_det]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-observer_det');
-                vm.reinstateObserverDetail(id);
-            });
-            vm.$refs.observer_detail_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-            vm.$refs.observer_detail_datatable.vmDataTable.on('click', 'a[data-history-observer]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-observer');
-                vm.historyObserverDetail(id);
-            });
+            vm.$refs.observer_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-delete-observer_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-delete-observer_det');
+                    vm.deleteObserverDetail(id);
+                }
+            );
+            vm.$refs.observer_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-observer_det]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-observer_det');
+                    vm.reinstateObserverDetail(id);
+                }
+            );
+            vm.$refs.observer_detail_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+            vm.$refs.observer_detail_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-observer]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-observer');
+                    vm.historyObserverDetail(id);
+                }
+            );
         },
         refreshFromResponse: function () {
             let vm = this;
@@ -229,7 +295,11 @@ export default {
         },
         adjust_table_width: function () {
             let vm = this;
-            if (vm.$refs.observer_detail_datatable !== undefined) { vm.$refs.observer_detail_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (vm.$refs.observer_detail_datatable !== undefined) {
+                vm.$refs.observer_detail_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
         newObserverDetail: function () {
             let vm = this;
@@ -242,40 +312,50 @@ export default {
                 contact: '',
                 organisation: '',
                 main_observer: false,
-            }
+            };
             this.$refs.observer_detail.observerObj = new_observer_detail;
             this.$refs.observer_detail.observer_detail_action = 'add';
             this.$refs.observer_detail.isModalOpen = true;
         },
         editObserverDetail: async function (id) {
             this.$refs.observer_detail.observer_detail_action = 'edit';
-            await fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id)).then(async (response) => {
-                this.$refs.observer_detail.observerObj = await response.json();
-                this.$refs.observer_detail.observerObj.id = id;
-            },
-                err => {
+            await fetch(
+                helpers.add_endpoint_json(api_endpoints.observer_detail, id)
+            ).then(
+                async (response) => {
+                    this.$refs.observer_detail.observerObj =
+                        await response.json();
+                    this.$refs.observer_detail.observerObj.id = id;
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.observer_detail.isModalOpen = true;
         },
         viewObserverDetail: async function (id) {
             this.$refs.observer_detail.observer_detail_id = id;
             this.$refs.observer_detail.observer_detail_action = 'view';
-            await fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id)).then(async (response) => {
-                this.$refs.observer_detail.observerObj = await response.json();
-                this.$refs.observer_detail.observerObj.id = id;
-            },
-                err => {
+            await fetch(
+                helpers.add_endpoint_json(api_endpoints.observer_detail, id)
+            ).then(
+                async (response) => {
+                    this.$refs.observer_detail.observerObj =
+                        await response.json();
+                    this.$refs.observer_detail.observerObj.id = id;
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.observer_detail.isModalOpen = true;
         },
         deleteObserverDetail: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Observer",
-                text: "Are you sure you want to discard this Observer?",
-                icon: "question",
+                title: 'Discard Observer',
+                text: 'Are you sure you want to discard this Observer?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Observer',
                 customClass: {
@@ -283,42 +363,60 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The Observer has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            }).then((result) => {
-                                vm.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
-                                vm.$emit('refreshOccurrenceReport');
-                                if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                                    vm.$router.go();
-                                }
-                            });
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.observer_detail,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The Observer has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                }).then((result) => {
+                                    vm.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
+                                    vm.$emit('refreshOccurrenceReport');
+                                    if (
+                                        vm.occurrence_report_obj
+                                            .processing_status == 'Unlocked'
+                                    ) {
+                                        vm.$router.go();
+                                    }
+                                });
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateObserverDetail: function (id) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.observer_detail, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                .then((response) => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.observer_detail,
+                    id + '/reinstate'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                }
+            ).then(
+                (response) => {
                     swal.fire({
                         title: 'Reinstated',
                         text: 'The Observer has been reinstated',
@@ -329,11 +427,15 @@ export default {
                     }).then((result) => {
                         vm.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
                         vm.$emit('refreshOccurrenceReport');
-                        if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
                             vm.$router.go();
                         }
                     });
-                }, (error) => {
+                },
+                (error) => {
                     var errorText = helpers.apiVueResourceError(error);
                     swal.fire({
                         title: 'Error',
@@ -343,13 +445,14 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         updatedObserverDetails() {
             let vm = this;
             this.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
             vm.$emit('refreshOccurrenceReport');
-            if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+            if (vm.occurrence_report_obj.processing_status == 'Unlocked') {
                 vm.$router.go();
             }
         },
@@ -360,11 +463,5 @@ export default {
             });
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.eventListeners();
-        });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
index f40e0cac..66f42ec1 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
@@ -1,61 +1,79 @@
 <template lang="html">
     <div id="occ_documents">
-        <FormSection :formCollapse="false" label="Documents" Index="documents">
-            <alert type="warning"><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload Management or Recovery Plans
-                here</alert>
+        <FormSection :form-collapse="false" label="Documents" Index="documents">
+            <alert type="warning"
+                ><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload
+                Management or Recovery Plans here</alert
+            >
             <form class="form-horizontal" action="index.html" method="post">
                 <div class="col-sm-12">
                     <div class="text-end">
-                        <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                            @click.prevent="newDocument">
+                        <button
+                            :disabled="isReadOnly"
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newDocument"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Document
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                        :dtHeaders="documents_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="documents_datatable"
+                        :dt-options="documents_options"
+                        :dt-headers="documents_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <DocumentDetail ref="document_detail" @refreshFromResponse="refreshFromResponse" :url="occ_document_url"
-            :is_internal="is_internal"></DocumentDetail>
+        <DocumentDetail
+            ref="document_detail"
+            :url="occ_document_url"
+            :is_internal="is_internal"
+            @refresh-from-response="refreshFromResponse"
+        ></DocumentDetail>
         <div v-if="occurenceDocumentHistoryId">
-            <OccurenceDocumentHistory ref="occ_document_history" :key="occurenceDocumentHistoryId"
-                :document-id="occurenceDocumentHistoryId" :occurrence-id="occurrence_obj.id" />
+            <OccurenceDocumentHistory
+                ref="occ_document_history"
+                :key="occurenceDocumentHistoryId"
+                :document-id="occurenceDocumentHistoryId"
+                :occurrence-id="occurrence_obj.id"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
-import DocumentDetail from '@/components/common/add_document.vue'
+import DocumentDetail from '@/components/common/add_document.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import OccurenceDocumentHistory from '../../internal/occurrence/occ_document_history.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OCCDocuments',
+    components: {
+        alert,
+        FormSection,
+        datatable,
+        DocumentDetail,
+        OccurenceDocumentHistory,
+    },
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -63,14 +81,22 @@ export default {
         return {
             uuid: 0,
             occurenceDocumentHistoryId: null,
-            panelBody: "occ-documents-" + vm._uid,
+            panelBody: 'occ-documents-' + vm._uid,
             values: null,
             occ_document_url: api_endpoints.occurrence_documents,
-            documents_headers: ['Number', 'Category', 'Sub Category', 'Document', 'Description', 'Date/Time', 'Action'],
+            documents_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
             documents_options: {
                 autowidth: true,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -80,11 +106,15 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + '/documents'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.occurrence,
+                        vm.occurrence_obj.id + '/documents'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -94,8 +124,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -103,97 +133,124 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "document_number",
+                        data: 'document_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_number;
-                            }
-                            else {
-                                return '<s>' + full.document_number + '</s>'
+                            } else {
+                                return '<s>' + full.document_number + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "document_category_name",
+                        data: 'document_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "document_sub_category_name",
+                        data: 'document_sub_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_sub_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_sub_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "name",
+                        data: 'name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.active) {
                                 let value = full.name;
-                                let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                links += '<span><a href="' + full._file + '" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
                             } else {
                                 let value = full.name;
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                links += type == 'export' ? value : '<s>' + result + '</s>';
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
                             }
                             return links;
                         },
-
                     },
                     {
-                        data: "description",
+                        data: 'description',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.active) {
                                 return type == 'export' ? value : result;
                             } else {
-                                return type == 'export' ? value : '<s>' + result + '</s>';
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "uploaded_date",
+                        data: 'uploaded_date',
                         mRender: function (data, type, full) {
                             if (full.active) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
                             } else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY HH:mm') + '</s>' : '';
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
 
@@ -201,15 +258,14 @@ export default {
                                 if (full.active) {
                                     links += `<a href='#${full.id}' data-edit-document='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-document='${full.id}'>Discard</a><br>`;
-                                }
-                                else {
+                                } else {
                                     links += `<a href='#' data-reinstate-document='${full.id}'>Reinstate</a><br>`;
                                 }
                             }
                             links += `<a href='#' data-history-document='${full.id}'>History</a><br>`;
 
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -223,18 +279,22 @@ export default {
                     setTimeout(function () {
                         vm.adjust_table_width();
                     }, 100);
-                }
-            }
-        }
+                },
+            },
+        };
     },
-    components: {
-        alert,
-        FormSection,
-        datatable,
-        DocumentDetail,
-        OccurenceDocumentHistory,
+    computed: {
+        isReadOnly: function () {
+            return !this.occurrence_obj.can_user_edit;
+        },
     },
     watch: {},
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         newDocument: function () {
             let vm = this;
@@ -247,7 +307,7 @@ export default {
                 document_category: '',
                 document_sub_category: '',
                 uploaded_date: null,
-            }
+            };
             this.$refs.document_detail.documentObj = new_document_another;
             this.$refs.document_detail.uploaded_document = [];
             this.$refs.document_detail.document_action = 'add';
@@ -259,18 +319,32 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.document_detail.documentObj = data;
-                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [data];
-                //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(data.document_category);
-
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_documents,
+                    id
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.document_detail.documentObj = data;
+                    this.$refs.document_detail.documentObj.uploaded_date =
+                        data.uploaded_date != null &&
+                        data.uploaded_date != undefined
+                            ? moment(data.uploaded_date).format(
+                                  'yyyy-MM-DDTHH:mm'
+                              )
+                            : '';
+                    this.$refs.document_detail.uploaded_document = [data];
+                    //-----this method is called as it wasn't fetching subcategory
+                    this.$refs.document_detail.fetchSubCategory(
+                        data.document_category
+                    );
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             //this.$refs.document_detail.fetchSpeciesDocument(id);
             this.$refs.document_detail.isModalOpen = true;
         },
@@ -284,126 +358,156 @@ export default {
         discardDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Document",
-                text: "Are you sure you want to discard this Document?",
-                icon: "question",
+                title: 'Discard Document',
+                text: 'Are you sure you want to discard this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Document',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The document has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.occurrence_documents,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The document has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Document",
-                text: "Are you sure you want to Reinstate this Document?",
-                icon: "question",
+                title: 'Reinstate Document',
+                text: 'Are you sure you want to Reinstate this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Document',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_documents, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your document has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.occurrence_documents,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your document has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         updatedDocuments() {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-edit-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-document');
-                vm.editDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-history-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-document');
-                vm.historyDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-discard-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-document');
-                vm.discardDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-reinstate-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-document');
-                vm.reinstateDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-document');
+                    vm.editDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-document');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-document');
+                    vm.discardDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-document');
+                    vm.reinstateDocument(id);
+                }
+            );
 
-            vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.documents_datatable !== undefined) { this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
-        },
-    },
-    computed: {
-        isReadOnly: function () {
-            return !(this.occurrence_obj.can_user_edit);
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
index fd90d9a8..de664115 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
@@ -1,12 +1,21 @@
 <template lang="html">
     <div id="habitat">
-        <FormSection :formCollapse="false" label="Habitat Composition" :Index="habitatCompositionBody">
+        <FormSection
+            :form-collapse="false"
+            label="Habitat Composition"
+            :Index="habitatCompositionBody"
+        >
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Land Form:</label>
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" style="width:100%;" class="form-select input-sm"
-                        ref="land_form_select" v-model="occurrence_obj.habitat_composition.land_form">
-                        <option v-for="option in land_form_list" :value="option.id" :key="option.id">
+                    <select
+ref="land_form_select" v-model="occurrence_obj.habitat_composition.land_form" :disabled="isReadOnly"
+                        style="width:100%;" class="form-select input-sm">
+                        <option
+                            v-for="option in land_form_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
@@ -17,31 +26,68 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="rock_type_list && rock_type_list.length > 0 && occurrence_obj.habitat_composition.rock_type_id && !rock_type_list.map((d) => d.id).includes(occurrence_obj.habitat_composition.rock_type_id)">
-                            <input type="text" v-if="occurrence_obj.habitat_composition.rock_type"
+                            v-if="
+                                rock_type_list &&
+                                rock_type_list.length > 0 &&
+                                occurrence_obj.habitat_composition
+                                    .rock_type_id &&
+                                !rock_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.habitat_composition
+                                            .rock_type_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.habitat_composition.rock_type" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.habitat_composition.rock_type + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.habitat_composition
+                                        .rock_type + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change rock type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.habitat_composition.rock_type_id">
-                            <option v-for="rock_type in rock_type_list" :value="rock_type.id" v-bind:key="rock_type.id">
+                        <select
+                            v-model="
+                                occurrence_obj.habitat_composition.rock_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="rock_type in rock_type_list"
+                                :key="rock_type.id"
+                                :value="rock_type.id"
+                            >
                                 {{ rock_type.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.habitat_composition.rock_type" />
+                        <input
+v-model="occurrence_obj.habitat_composition.rock_type" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Loose Rock % :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Loose Rock % :</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="loose_rock_per" placeholder=""
-                        min="0" max="100" v-model="occurrence_obj.habitat_composition.loose_rock_percent" />
+                    <input
+id="loose_rock_per" v-model="
+                            occurrence_obj.habitat_composition
+                                .loose_rock_percent
+                        " :disabled="isReadOnly" type="number" class="form-control"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -49,76 +95,159 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="soil_type_list && soil_type_list.length > 0 && occurrence_obj.habitat_composition.soil_type_id && !soil_type_list.map((d) => d.id).includes(occurrence_obj.habitat_composition.soil_type_id)">
-                            <input type="text" v-if="occurrence_obj.habitat_composition.soil_type"
+                            v-if="
+                                soil_type_list &&
+                                soil_type_list.length > 0 &&
+                                occurrence_obj.habitat_composition
+                                    .soil_type_id &&
+                                !soil_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.habitat_composition
+                                            .soil_type_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.habitat_composition.soil_type" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.habitat_composition.soil_type + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.habitat_composition
+                                        .soil_type + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change soil type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.habitat_composition.soil_type_id">
-                            <option v-for="soil_type in soil_type_list" :value="soil_type.id" v-bind:key="soil_type.id">
+                        <select
+                            v-model="
+                                occurrence_obj.habitat_composition.soil_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="soil_type in soil_type_list"
+                                :key="soil_type.id"
+                                :value="soil_type.id"
+                            >
                                 {{ soil_type.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.habitat_composition.soil_type" />
+                        <input
+v-model="occurrence_obj.habitat_composition.soil_type" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Soil Colour:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Soil Colour:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="soil_colour_list && soil_colour_list.length > 0 && occurrence_obj.habitat_composition.soil_colour_id && !soil_colour_list.map((d) => d.id).includes(occurrence_obj.habitat_composition.soil_colour_id)">
-                            <input colour="text" v-if="occurrence_obj.habitat_composition.soil_colour"
+                            v-if="
+                                soil_colour_list &&
+                                soil_colour_list.length > 0 &&
+                                occurrence_obj.habitat_composition
+                                    .soil_colour_id &&
+                                !soil_colour_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.habitat_composition
+                                            .soil_colour_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.habitat_composition.soil_colour" colour="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.habitat_composition.soil_colour + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.habitat_composition
+                                        .soil_colour + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change soil colour to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.habitat_composition.soil_colour_id">
-                            <option v-for="soil_colour in soil_colour_list" :value="soil_colour.id"
-                                v-bind:key="soil_colour.id">
+                        <select
+                            v-model="
+                                occurrence_obj.habitat_composition
+                                    .soil_colour_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+v-for="soil_colour in soil_colour_list" :key="soil_colour.id"
+                                :value="soil_colour.id">
                                 {{ soil_colour.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" colour="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.habitat_composition.soil_colour" />
+                        <input
+v-model="occurrence_obj.habitat_composition.soil_colour" class="form-control" colour="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Soil Condition:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Soil Condition:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="soil_condition_list && soil_condition_list.length > 0 && occurrence_obj.habitat_composition.soil_condition_id && !soil_condition_list.map((d) => d.id).includes(occurrence_obj.habitat_composition.soil_condition_id)">
-                            <input type="text" v-if="occurrence_obj.habitat_composition.soil_condition"
+                            v-if="
+                                soil_condition_list &&
+                                soil_condition_list.length > 0 &&
+                                occurrence_obj.habitat_composition
+                                    .soil_condition_id &&
+                                !soil_condition_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.habitat_composition
+                                            .soil_condition_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.habitat_composition.soil_condition" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.habitat_composition.soil_condition + ' (Now Archived)'"
-                                disabled />
+                                :value="
+                                    occurrence_obj.habitat_composition
+                                        .soil_condition + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change soil condition to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.habitat_composition.soil_condition_id">
-                            <option v-for="soil_condition in soil_condition_list" :value="soil_condition.id"
-                                v-bind:key="soil_condition.id">
+                        <select
+                            v-model="
+                                occurrence_obj.habitat_composition
+                                    .soil_condition_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+v-for="soil_condition in soil_condition_list" :key="soil_condition.id"
+                                :value="soil_condition.id">
                                 {{ soil_condition.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.habitat_composition.soil_condition" />
+                        <input
+v-model="occurrence_obj.habitat_composition.soil_condition" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
@@ -127,206 +256,379 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="drainage_list && drainage_list.length > 0 && occurrence_obj.habitat_composition.drainage_id && !drainage_list.map((d) => d.id).includes(occurrence_obj.habitat_composition.drainage_id)">
-                            <input type="text" v-if="occurrence_obj.habitat_composition.drainage"
+                            v-if="
+                                drainage_list &&
+                                drainage_list.length > 0 &&
+                                occurrence_obj.habitat_composition
+                                    .drainage_id &&
+                                !drainage_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.habitat_composition
+                                            .drainage_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.habitat_composition.drainage" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.habitat_composition.drainage + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.habitat_composition
+                                        .drainage + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change drainage to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.habitat_composition.drainage_id">
-                            <option v-for="drainage in drainage_list" :value="drainage.id" v-bind:key="drainage.id">
+                        <select
+                            v-model="
+                                occurrence_obj.habitat_composition.drainage_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="drainage in drainage_list"
+                                :key="drainage.id"
+                                :value="drainage.id"
+                            >
                                 {{ drainage.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.habitat_composition.drainage" />
+                        <input
+v-model="occurrence_obj.habitat_composition.drainage" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Water Quality:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Water Quality:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" class="form-control" placeholder=""
-                        v-model="occurrence_obj.habitat_composition.water_quality" />
+                    <textarea
+v-model="occurrence_obj.habitat_composition.water_quality" :disabled="isReadOnly" type="text" class="form-control"
+                        placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Habitat Notes:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Habitat Notes:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" class="form-control" placeholder=""
-                        v-model="occurrence_obj.habitat_composition.habitat_notes" />
+                    <textarea
+v-model="occurrence_obj.habitat_composition.habitat_notes" :disabled="isReadOnly" type="text" class="form-control"
+                        placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.habitat_composition.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.habitat_composition.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.habitat_composition.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{
+                                occurrence_obj.habitat_composition.copied_ocr
+                            }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingHabitatCompositionDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingHabitatCompositionDetails" :disabled="isReadOnly"
+                    <button
+v-if="!updatingHabitatCompositionDetails" :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateHabitatCompositionDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateHabitatCompositionDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
 
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj
-                :section_type="'habitat_composition'" @copyUpdate="copyUpdate" />
+            <RelatedReports
+:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj
+                :section_type="'habitat_composition'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
-        <FormSection :formCollapse="false" label="Habitat Condition" :Index="habitatConditionBody">
-            <label for="" class="col-lg-3 control-label fs-5 fw-bold">Keighery Scale</label>
+        <FormSection
+            :form-collapse="false"
+            label="Habitat Condition"
+            :Index="habitatConditionBody"
+        >
+            <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+                >Keighery Scale</label
+            >
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Pristine %:</label>
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="pristine"
-                        placeholder="" min="0" max="100" v-model="occurrence_obj.habitat_condition.pristine"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+id="pristine" v-model="occurrence_obj.habitat_condition.pristine" :disabled="isReadOnly" type="number"
+                        class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Excellent %:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Excellent %:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="excellent"
-                        placeholder="" min="0" max="100" v-model="occurrence_obj.habitat_condition.excellent"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+id="excellent" v-model="occurrence_obj.habitat_condition.excellent" :disabled="isReadOnly" type="number"
+                        class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Very Good %:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Very Good %:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="very_good"
-                        placeholder="" min="0" max="100" v-model="occurrence_obj.habitat_condition.very_good"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+id="very_good" v-model="occurrence_obj.habitat_condition.very_good" :disabled="isReadOnly" type="number"
+                        class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Good %:</label>
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="good" placeholder=""
-                        min="0" max="100" v-model="occurrence_obj.habitat_condition.good"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+id="good" v-model="occurrence_obj.habitat_condition.good" :disabled="isReadOnly" type="number" class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Degraded %:</label>
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="degraded"
-                        placeholder="" min="0" max="100" v-model="occurrence_obj.habitat_condition.degraded"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+id="degraded" v-model="occurrence_obj.habitat_condition.degraded" :disabled="isReadOnly" type="number"
+                        class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Completely Degraded %:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Completely Degraded %:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="completely_degraded"
-                        placeholder="" min="0" max="100" v-model="occurrence_obj.habitat_condition.completely_degraded"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+id="completely_degraded" v-model="
+                            occurrence_obj.habitat_condition.completely_degraded
+                        " :disabled="isReadOnly" type="number"
+                        class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label"></label>
                 <div class="col-sm-6">
-                    <input readonly type="text" class="form-control occ_number" id="habitat_cond_sum" placeholder=""
-                        v-model="habitat_cond_sum" />
+                    <input
+id="habitat_cond_sum" v-model="habitat_cond_sum" readonly type="text" class="form-control occ_number"
+                        placeholder="" />
                 </div>
             </div>
-            <div v-if="occurrence_obj.group_type == 'community'" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Count Date: </label>
+            <div
+                v-if="occurrence_obj.group_type == 'community'"
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-3 control-label"
+                    >Count Date:
+                </label>
                 <div class="col-sm-9">
-                    <input v-model="occurrence_obj.habitat_condition.count_date
-                        " :disabled="true" type="datetime-local" class="form-control" name="count_date" />
+                    <input
+v-model="occurrence_obj.habitat_condition.count_date
+                        :disabled="true"
+                        type="datetime-local"
+                        class="form-control"
+                        name="count_date"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.habitat_condition.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.habitat_condition.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.habitat_condition.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{ occurrence_obj.habitat_condition.copied_ocr }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingHabitatConditionDetails" :disabled="isReadOnly"
+                    <button
+v-if="!updatingHabitatConditionDetails" :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateHabitatConditionDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateHabitatConditionDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'habitat_condition'"
-                @copyUpdate="copyUpdate" />
+            <RelatedReports
+:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'habitat_condition'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Vegetation Structure" :Index="vegetationStructureBody">
+        <FormSection
+            :form-collapse="false"
+            label="Vegetation Structure"
+            :Index="vegetationStructureBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 1:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 1:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_1" placeholder=""
-                        v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_one" />
+                    <textarea
+id="vegetation_structure_text_1" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_one" :disabled="isReadOnly" type="text"
+                        row="2" class="form-control"
+                        placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 2:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 2:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_2" placeholder=""
-                        v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_two" />
+                    <textarea
+id="vegetation_structure_text_2" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_two" :disabled="isReadOnly" type="text"
+                        row="2" class="form-control"
+                        placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 3:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 3:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_3" placeholder=""
-                        v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_three" />
+                    <textarea
+id="vegetation_structure_text_3" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_three" :disabled="isReadOnly" type="text"
+                        row="2" class="form-control"
+                        placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 4:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 4:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_4" placeholder=""
-                        v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_four" />
+                    <textarea
+id="vegetation_structure_text_4" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_four" :disabled="isReadOnly" type="text"
+                        row="2" class="form-control"
+                        placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.vegetation_structure.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.vegetation_structure.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.vegetation_structure.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{
+                                occurrence_obj.vegetation_structure.copied_ocr
+                            }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingVegetationStructure" :disabled="isReadOnly"
+                    <button
+v-if="!updatingVegetationStructure" :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateVegetationStructure()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateVegetationStructure()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj
-                :section_type="'vegetation_structure'" @copyUpdate="copyUpdate" />
+            <RelatedReports
+:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj
+                :section_type="'vegetation_structure'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Fire History" :Index="fireHistoryBody">
-            <label for="" class="col-lg-3 control-label fs-5 fw-bold">Last Fire History</label>
+        <FormSection
+            :form-collapse="false"
+            label="Fire History"
+            :Index="fireHistoryBody"
+        >
+            <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+                >Last Fire History</label
+            >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Last Fire Estimate:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Last Fire Estimate:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="month" class="form-control" name="last_fire_date"
-                        ref="last_fire_date" @change="checkDate()"
-                        v-model="occurrence_obj.fire_history.last_fire_estimate" />
+                    <input
+ref="last_fire_date" v-model="occurrence_obj.fire_history.last_fire_estimate" :disabled="isReadOnly" type="month"
+                        class="form-control" name="last_fire_date"
+                        @change="checkDate()" />
                 </div>
             </div>
             <div class="row mb-3">
@@ -334,98 +636,167 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="intensity_list && intensity_list.length > 0 && occurrence_obj.fire_history.intensity_id && !intensity_list.map((d) => d.id).includes(occurrence_obj.fire_history.intensity_id)">
-                            <input type="text" v-if="occurrence_obj.fire_history.intensity" class="form-control mb-3"
-                                :value="occurrence_obj.fire_history.intensity + ' (Now Archived)'" disabled />
+                            v-if="
+                                intensity_list &&
+                                intensity_list.length > 0 &&
+                                occurrence_obj.fire_history.intensity_id &&
+                                !intensity_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.fire_history.intensity_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.fire_history.intensity" type="text" class="form-control mb-3"
+                                :value="
+                                    occurrence_obj.fire_history.intensity +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change intensity to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.fire_history.intensity_id">
-                            <option v-for="intensity in intensity_list" :value="intensity.id" v-bind:key="intensity.id">
+                        <select
+                            v-model="occurrence_obj.fire_history.intensity_id"
+                            class="form-select"
+                        >
+                            <option
+                                v-for="intensity in intensity_list"
+                                :key="intensity.id"
+                                :value="intensity.id"
+                            >
                                 {{ intensity.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.fire_history.intensity" />
+                        <input
+v-model="occurrence_obj.fire_history.intensity" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Comments :</label>
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="fire_history_comment"
-                        placeholder="" v-model="occurrence_obj.fire_history.comment" />
+                    <textarea
+id="fire_history_comment" v-model="occurrence_obj.fire_history.comment" :disabled="isReadOnly" type="text" row="2"
+                        class="form-control" placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.fire_history.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.fire_history.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.fire_history.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{ occurrence_obj.fire_history.copied_ocr }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingFireHistoryDetails" :disabled="isReadOnly"
+                    <button
+v-if="!updatingFireHistoryDetails" :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateFireHistoryDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating</button>
+                        @click.prevent="updateFireHistoryDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                    </button>
                 </div>
             </div>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'fire_history'"
-                @copyUpdate="copyUpdate" />
+            <RelatedReports
+:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'fire_history'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
-        <FormSection :formCollapse="false" label="Associated Species" :Index="associatedSpeciesBody">
-
-            <RelatedSpecies :isReadOnly="isReadOnly" ref="related_species" :occurrence_obj=occurrence_obj />
+        <FormSection
+            :form-collapse="false"
+            label="Associated Species"
+            :Index="associatedSpeciesBody"
+        >
+            <RelatedSpecies
+                ref="related_species"
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+            />
 
             <div class="row mb-3">
                 <div class="col-sm-3">
-                    <label for="related_species" class="control-label">Comment</label>
+                    <label for="related_species" class="control-label"
+                        >Comment</label
+                    >
                 </div>
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="related_species"
-                        placeholder="" v-model="occurrence_obj.associated_species.comment" />
+                    <textarea
+id="related_species" v-model="occurrence_obj.associated_species.comment" :disabled="isReadOnly" type="text" row="2"
+                        class="form-control" placeholder="" />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.associated_species.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.associated_species.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.associated_species.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{
+                                occurrence_obj.associated_species.copied_ocr
+                            }}</b
+                        ></span
+                    >
                 </div>
             </div>
 
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingAssociatedSpeciesDetails" :disabled="isReadOnly"
+                    <button
+v-if="!updatingAssociatedSpeciesDetails" :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateAssociatedSpeciesDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateAssociatedSpeciesDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
 
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'associated_species'"
-                @copyUpdate="copyUpdate" />
+            <RelatedReports
+:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'associated_species'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
     </div>
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue'
-import RelatedSpecies from '@/components/common/occurrence/occ_related_species_table.vue'
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
+import RelatedSpecies from '@/components/common/occurrence/occ_related_species_table.vue';
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'OCCHabitat',
+    components: {
+        FormSection,
+        RelatedReports,
+        RelatedSpecies,
+    },
     props: {
         occurrence_obj: {
             type: Object,
@@ -469,14 +840,9 @@ export default {
             updatingAssociatedSpeciesDetails: false,
         }
     },
-    components: {
-        FormSection,
-        RelatedReports,
-        RelatedSpecies,
-    },
     computed: {
         isReadOnly: function () {
-            return !(this.occurrence_obj.can_user_edit);
+            return !this.occurrence_obj.can_user_edit;
         },
     },
     watch: {
@@ -491,6 +857,60 @@ export default {
         //         }
         // },
     },
+    created: async function () {
+        let vm = this;
+        //------fetch list of values
+        const response = await fetch('/api/occurrence/list_of_values.json');
+        vm.listOfValuesDict = await response.json();
+        vm.land_form_list = vm.listOfValuesDict.land_form_list;
+        vm.land_form_list.splice(0, 0,
+            {
+                id: '',
+                name: '',
+            });
+        vm.rock_type_list = vm.listOfValuesDict.rock_type_list;
+        vm.rock_type_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.soil_type_list = vm.listOfValuesDict.soil_type_list;
+        vm.soil_type_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.soil_colour_list = vm.listOfValuesDict.soil_colour_list;
+        vm.soil_colour_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.soil_condition_list = vm.listOfValuesDict.soil_condition_list;
+        vm.soil_condition_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.drainage_list = vm.listOfValuesDict.drainage_list;
+        vm.drainage_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.intensity_list = vm.listOfValuesDict.intensity_list;
+        vm.intensity_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+    },
+    mounted: function () {
+        let vm = this;
+        vm.eventListeners();
+        vm.initialiseLandFormSelect();
+        vm.calcKeigheryTotal();
+    },
     methods: {
         eventListeners: function () {
             let vm = this;
@@ -749,61 +1169,7 @@ export default {
 
         }
     },
-    created: async function () {
-        let vm = this;
-        //------fetch list of values
-        const response = await fetch('/api/occurrence/list_of_values.json');
-        vm.listOfValuesDict = await response.json();
-        vm.land_form_list = vm.listOfValuesDict.land_form_list;
-        vm.land_form_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
-        vm.rock_type_list = vm.listOfValuesDict.rock_type_list;
-        vm.rock_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.soil_type_list = vm.listOfValuesDict.soil_type_list;
-        vm.soil_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.soil_colour_list = vm.listOfValuesDict.soil_colour_list;
-        vm.soil_colour_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.soil_condition_list = vm.listOfValuesDict.soil_condition_list;
-        vm.soil_condition_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.drainage_list = vm.listOfValuesDict.drainage_list;
-        vm.drainage_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.intensity_list = vm.listOfValuesDict.intensity_list;
-        vm.intensity_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-    },
-    mounted: function () {
-        let vm = this;
-        vm.eventListeners();
-        vm.initialiseLandFormSelect();
-        vm.calcKeigheryTotal();
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -827,13 +1193,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
index 0431c2ed..6d5afdb9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -1,19 +1,39 @@
 <template lang="html">
     <div id="occLocations">
-        <FormSection :form-collapse="false" label="Location" Index="occurrence_location">
+        <FormSection
+            :form-collapse="false"
+            label="Location"
+            Index="occurrence_location"
+        >
             <div class="row mb-3">
                 <div class="col">
-                    <span class="text-danger">*</span> <span class="text-muted">You must indicate the location for your
-                        occurrence</span>
+                    <span class="text-danger">*</span>
+                    <span class="text-muted"
+                        >You must indicate the location for your
+                        occurrence</span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
-                <MapComponent ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_obj"
-                    :is_external="false" :point-features-supported="true" :polygon-features-supported="true"
-                    :drawable="true" :editable="true" :file-upload-disabled="true" level="internal" style-by="model"
-                    :map-info-text="isInternal ? '' : 'Some text to explain the map and its use.'
-                        " :selectable="true" :coordinate-reference-systems="coordinateReferenceSystems"
-                    :spatial-operations-allowed="['__all__']" :tile-layer-api-url="tileLayerApiUrl"
+                <MapComponent
+ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_obj"
+                    :is_external="false"
+                    :point-features-supported="true"
+                    :polygon-features-supported="true"
+                    :drawable="true"
+                    :editable="true"
+                    :file-upload-disabled="true"
+                    level="internal"
+                    style-by="model"
+                    :map-info-text="
+                        isInternal
+                            ? ''
+                            : 'Some text to explain the map and its use.'
+                    "
+                    :selectable="true"
+                    :coordinate-reference-systems="coordinateReferenceSystems"
+                    :spatial-operations-allowed="['__all__']"
+                    :tile-layer-api-url="tileLayerApiUrl"
                     :validate-feature-before-save="true"
                     :query-layer-definition="{
                         name: queryLayerName,
@@ -29,7 +49,8 @@
                         z_index: 2,
                         collapse: true,
                         property_display_map: ocrPropertyDisplayMap,
-                    }" :additional-layers-definitions="[
+                    }"
+                    :additional-layers-definitions="[
                         {
                             name: occurrenceLayerName,
                             title: 'Occurrence',
@@ -102,9 +123,14 @@
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Region:</label>
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" @change="filterDistrict($event)"
-                        v-model="occurrence_obj.location.region_id">
-                        <option v-for="option in region_list" :value="option.id" v-bind:key="option.id">
+                    <select
+v-model="occurrence_obj.location.region_id" :disabled="isReadOnly" class="form-select"
+                        @change="filterDistrict($event)">
+                        <option
+                            v-for="option in region_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
@@ -113,8 +139,16 @@
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">District:</label>
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" v-model="occurrence_obj.location.district_id">
-                        <option v-for="option in filtered_district_list" :value="option.id" v-bind:key="option.id">
+                    <select
+                        v-model="occurrence_obj.location.district_id"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option
+                            v-for="option in filtered_district_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
@@ -123,61 +157,113 @@
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Locality:</label>
                 <div class="col-sm-9">
-                    <textarea id="locality" v-model="occurrence_obj.location.locality
-                        " :disabled="isReadOnly" class="form-control" rows="1" placeholder="" />
+                    <textarea
+id="locality" v-model="occurrence_obj.location.locality
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
             <!-- -------------------------------- -->
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Location Description:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Location Description:</label
+                >
                 <div class="col-sm-9">
-                    <textarea id="loc_description" v-model="occurrence_obj.location.location_description
-                        " :disabled="isReadOnly" class="form-control" rows="2" placeholder="" />
+                    <textarea
+id="loc_description" v-model="occurrence_obj.location.location_description
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Boundary Description:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Boundary Description:</label
+                >
                 <div class="col-sm-9">
-                    <textarea id="boundary_descr" v-model="occurrence_obj.location.boundary_description
-                        " :disabled="isReadOnly" class="form-control" rows="2" placeholder="" />
+                    <textarea
+id="boundary_descr" v-model="occurrence_obj.location.boundary_description
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Map Data Type</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Map Data Type</label
+                >
                 <div class="col-sm-6">
-                    <label class="me-2">Boundary</label><input disabled type="radio"
-                        :checked="occurrence_obj.location.has_boundary" class="form-check-input me-2">
-                    <label class="me-2">Point/s</label><input disabled type="radio"
-                        :checked="occurrence_obj.location.has_points" class="form-check-input me-2">
+                    <label class="me-2">Boundary</label
+                    ><input
+                        disabled
+                        type="radio"
+                        :checked="occurrence_obj.location.has_boundary"
+                        class="form-check-input me-2"
+                    />
+                    <label class="me-2">Point/s</label
+                    ><input
+                        disabled
+                        type="radio"
+                        :checked="occurrence_obj.location.has_points"
+                        class="form-check-input me-2"
+                    />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Coordinate Source:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Coordinate Source:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
-                        <template v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_obj.location
-                            .coordinate_source_id && !coordinate_source_list.map((d) => d.id).includes(occurrence_obj.location
-                                .coordinate_source_id)">
-                            <input type="text" v-if="occurrence_obj.location.coordinate_source"
+                        <template
+v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_obj.location
+                                !coordinate_source_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.location
+                                            .coordinate_source_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.location.coordinate_source" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.location.coordinate_source + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.location.coordinate_source +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change coordinate source to:
                             </div>
                         </template>
-                        <select class="form-select"
-                            v-model="occurrence_obj.location.coordinate_source_id">
-                            <option v-for="option in coordinate_source_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="occurrence_obj.location.coordinate_source_id"
+                            class="form-select">
+                            <option
+                                v-for="option in coordinate_source_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.location.coordinate_source" />
+                        <input
+v-model="occurrence_obj.location.coordinate_source" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
@@ -200,88 +286,143 @@
                 </div>
             </div>-->
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label fw-bold">Location Accuracy: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-3 control-label fw-bold"
+                    >Location Accuracy:
+                    <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
-                        <template v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_obj.location
-                            .location_accuracy_id && !location_accuracy_list.map((d) => d.id).includes(occurrence_obj.location
-                                .location_accuracy_id)">
-                            <input type="text" v-if="occurrence_obj.location.location_accuracy"
+                        <template
+v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_obj.location
+                                !location_accuracy_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.location
+                                            .location_accuracy_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_obj.location.location_accuracy" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.location.location_accuracy + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.location.location_accuracy +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change coordinate source to:
                             </div>
                         </template>
-                        <select class="form-select"
-                            v-model="occurrence_obj.location.location_accuracy_id">
-                            <option v-for="option in location_accuracy_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="occurrence_obj.location.location_accuracy_id"
+                            class="form-select">
+                            <option
+                                v-for="option in location_accuracy_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.location.location_accuracy" />
+                        <input
+v-model="occurrence_obj.location.location_accuracy" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.location.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.location.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.location.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{ occurrence_obj.location.copied_ocr }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingLocationDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingLocationDetails" class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateLocationDetails()" :disabled="isReadOnly">
+                    <button
+v-if="!updatingLocationDetails" class="btn btn-primary btn-sm float-end"
+                        :disabled="isReadOnly" @click.prevent="updateLocationDetails()">
                         Update
                     </button>
                     <button v-else disabled class="float-end btn btn-primary">
-                        Updating <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
                         <span class="visually-hidden">Loading...</span>
                     </button>
                 </div>
             </div>
-            <FormSection :form-collapse="false" label="Occurrence Sites" Index="occurrence_sites_datatable">
+            <FormSection
+                :form-collapse="false"
+                label="Occurrence Sites"
+                Index="occurrence_sites_datatable"
+            >
                 <div>
-                    <OccurrenceSiteDatatable v-if="occurrence_obj" ref="occurrence_sites_datatable"
-                        :key="datatableOCCSiteKey" :occurrence_obj="occurrence_obj" @updatedSites="updatedSites">
+                    <OccurrenceSiteDatatable
+v-if="occurrence_obj" ref="occurrence_sites_datatable"
+                        :key="datatableOCCSiteKey"
+                        :occurrence_obj="occurrence_obj"
+                        @updated-sites="updatedSites"
+                    >
                     </OccurrenceSiteDatatable>
                 </div>
             </FormSection>
             <!-- Occurrence Tenure Datatable -->
-            <FormSection :form-collapse="false" label="Occurrence Tenures" Index="occurrence_tenure_datatable">
+            <FormSection
+                :form-collapse="false"
+                label="Occurrence Tenures"
+                Index="occurrence_tenure_datatable"
+            >
                 <div>
-                    <OccurrenceTenureDatatable v-if="occurrence_obj" ref="occurrence_tenure_datatable"
-                        :key="datatableOCCTenureKey" :occurrence-id="occurrence_obj.id"
-                        :href-container-id="getMapContainerId" @highlight-on-map="highlightPointOnMap"
-                        @edit-tenure-details="editTenureDetails">
+                    <OccurrenceTenureDatatable
+v-if="occurrence_obj" ref="occurrence_tenure_datatable"
+                        :key="datatableOCCTenureKey"
+                        :occurrence-id="occurrence_obj.id"
+                        :href-container-id="getMapContainerId"
+                        @highlight-on-map="highlightPointOnMap"
+                        @edit-tenure-details="editTenureDetails"
+                    >
                     </OccurrenceTenureDatatable>
                 </div>
             </FormSection>
-            <RelatedReports v-if="occurrence_obj" ref="related_reports_datatable" :key="datatableRelatedOCRKey"
-                :is-read-only="isReadOnly" :occurrence_obj="occurrence_obj" :section_type="'location'"
-                :href-container-id="getMapContainerId" :target-map-layer-name-for-copy="occurrenceLayerName"
-                :target-map-layer-name-for-show-hide="queryLayerName" @copyUpdate="copyUpdate"
-                @highlight-on-map="highlightIdOnMapLayer" @copy-to-map-layer="copyToMapLayer"
-                @toggle-show-on-map="toggleShowOnMapLayer" />
+            <RelatedReports
+v-if="occurrence_obj" ref="related_reports_datatable" :key="datatableRelatedOCRKey"
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'location'"
+                :href-container-id="getMapContainerId"
+                :target-map-layer-name-for-copy="occurrenceLayerName"
+                :target-map-layer-name-for-show-hide="queryLayerName"
+                @copy-update="copyUpdate"
+                @highlight-on-map="highlightIdOnMapLayer"
+                @copy-to-map-layer="copyToMapLayer"
+                @toggle-show-on-map="toggleShowOnMapLayer"
+            />
         </FormSection>
     </div>
 </template>
 
 <script>
-;
 import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { api_endpoints, helpers } from '@/utils/hooks';
 import MapComponent from '../component_map.vue';
 import OccurrenceSiteDatatable from '@/components/internal/occurrence/occurrence_site_datatable.vue';
 import OccurrenceTenureDatatable from '@/components/internal/occurrence/occurrence_tenure_datatable.vue';
-import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue'
+import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
 import {
     intersects,
     intersectedArea,
@@ -442,7 +583,7 @@ export default {
             if (this.is_readonly) {
                 return this.is_readonly;
             }
-            return this.occurrence_obj.readonly
+            return this.occurrence_obj.readonly;
         },
         csrf_token: function () {
             return helpers.getCookie('csrftoken');
@@ -494,11 +635,10 @@ export default {
         vm.filterRegionDistrict = await response.json();
         vm.region_list = vm.filterRegionDistrict.region_list;
         vm.district_list = vm.filterRegionDistrict.district_list;
-        vm.region_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.region_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         this.filterDistrict();
 
         fetch(
@@ -563,14 +703,19 @@ export default {
                     this.occurrence_obj.location.district_id = null; //-----to remove the previous selection
                 }
                 this.filtered_district_list = [];
-                this.filtered_district_list = [{
-                    id: null,
-                    name: "",
-                    region_id: null,
-                }];
+                this.filtered_district_list = [
+                    {
+                        id: null,
+                        name: '',
+                        region_id: null,
+                    },
+                ];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
-                    if (choice.region_id === this.occurrence_obj.location.region_id) {
+                    if (
+                        choice.region_id ===
+                        this.occurrence_obj.location.region_id
+                    ) {
                         this.filtered_district_list.push(choice);
                     }
                 }
@@ -599,7 +744,8 @@ export default {
                 vm.$refs.component_map.setLoadingMap(true);
             }
 
-            payload.site_geometry = vm.$refs.component_map.getJSONFeatures("site_layer");
+            payload.site_geometry =
+                vm.$refs.component_map.getJSONFeatures('site_layer');
 
             vm.$http
                 .post(
@@ -612,7 +758,8 @@ export default {
                         emulateJSON: true,
                     }
                 )
-                .then(async (response) => {
+                .then(
+                    async (response) => {
                         vm.updatingLocationDetails = false;
                         vm.occurrence_obj.location = await response.json();
                         swal.fire({
@@ -623,7 +770,10 @@ export default {
                                 confirmButton: 'btn btn-primary',
                             },
                         }).then((result) => {
-                            if (vm.occurrence_obj.processing_status == "Unlocked") {
+                            if (
+                                vm.occurrence_obj.processing_status ==
+                                'Unlocked'
+                            ) {
                                 vm.$router.go();
                             }
                         });
@@ -662,7 +812,7 @@ export default {
             this.uuid_datatable_ocr = uuid();
         },
         updatedSites: function () {
-            this.incrementComponentMapKey()
+            this.incrementComponentMapKey();
         },
         searchForCRS: function (search, loading) {
             const vm = this;
@@ -812,7 +962,8 @@ export default {
             };
 
             console.log(
-                `Updating show on map for ${feature.getProperties().label
+                `Updating show on map for ${
+                    feature.getProperties().label
                 }: ${showOnMap}.`
             );
             return fetch(apiEndpoint, payload)
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
index 85340192..ae8c3b70 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
@@ -1,276 +1,611 @@
 <template lang="html">
     <div id="observation">
-        <FormSection :formCollapse="false" label="Observation Details" :Index="observationDetailBody">
+        <FormSection
+            :form-collapse="false"
+            label="Observation Details"
+            :Index="observationDetailBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Observation Method:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Observation Method:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="observation_method_list && observation_method_list.length > 0 && occurrence_obj.observation_detail.observation_method_id && !observation_method_list.map((d) => d.id).includes(occurrence_obj.observation_detail.observation_method_id)">
-                            <input type="text" v-if="occurrence_obj.observation_detail.observation_method"
+                            v-if="
+                                observation_method_list &&
+                                observation_method_list.length > 0 &&
+                                occurrence_obj.observation_detail
+                                    .observation_method_id &&
+                                !observation_method_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.observation_detail
+                                            .observation_method_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_obj.observation_detail
+                                        .observation_method
+                                "
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.observation_detail.observation_method + ' (Now Archived)'"
-                                disabled />
+                                :value="
+                                    occurrence_obj.observation_detail
+                                        .observation_method + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change observation method to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.observation_detail.observation_method_id">
-                            <option v-for="observation_method in observation_method_list" :value="observation_method.id"
-                                v-bind:key="observation_method.id">
+                        <select
+                            v-model="
+                                occurrence_obj.observation_detail
+                                    .observation_method_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="observation_method in observation_method_list"
+                                :key="observation_method.id"
+                                :value="observation_method.id"
+                            >
                                 {{ observation_method.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.observation_detail.observation_method" />
+                        <input
+                            v-model="
+                                occurrence_obj.observation_detail
+                                    .observation_method
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Area Surveyed(m<sup>2</sup>) :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Area Surveyed(m<sup>2</sup>) :</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="area_surveyed"
-                        placeholder="" min="0" v-model="occurrence_obj.observation_detail.area_surveyed" />
+                    <input
+                        id="area_surveyed"
+                        v-model="
+                            occurrence_obj.observation_detail.area_surveyed
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Survey Duration(mins) :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Survey Duration(mins) :</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control occ_number" id="survey_duration"
-                        placeholder="" min="0" v-model="occurrence_obj.observation_detail.survey_duration" />
+                    <input
+                        id="survey_duration"
+                        v-model="
+                            occurrence_obj.observation_detail.survey_duration
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control occ_number"
+                        placeholder=""
+                        min="0"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.observation_detail.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.observation_detail.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.observation_detail.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{
+                                occurrence_obj.observation_detail.copied_ocr
+                            }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingHabitatCompositionDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingObservationDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingObservationDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateObservationDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateObservationDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'observation_detail'"
-                @copyUpdate="copyUpdate" />
+            <RelatedReports
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'observation_detail'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Plant Count" :Index="plantCountBody" v-if="isFlora">
-            <PlantCount v-if="isFlora" :plant_count="occurrence_obj.plant_count" :is_report=false
-                :occurrence_id="occurrence_obj.id" id="plantCountDetail" :is_external="is_external"
-                :isReadOnly="isReadOnly" ref="plantCountDetail" @mounted="populatePlantCountLookups">
+        <FormSection
+            v-if="isFlora"
+            :form-collapse="false"
+            label="Plant Count"
+            :Index="plantCountBody"
+        >
+            <PlantCount
+                v-if="isFlora"
+                id="plantCountDetail"
+                ref="plantCountDetail"
+                :plant_count="occurrence_obj.plant_count"
+                :is_report="false"
+                :occurrence_id="occurrence_obj.id"
+                :is_external="is_external"
+                :is-read-only="isReadOnly"
+                @mounted="populatePlantCountLookups"
+            >
             </PlantCount>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'plant_count'"
-                @copyUpdate="copyUpdate" />
+            <RelatedReports
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'plant_count'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Animal Observation" :Index="animalObsBody" v-if="isFauna">
-            <AnimalObservation v-if="isFauna" :animal_observation="occurrence_obj.animal_observation" :is_report=false
-                :occurrence_id="occurrence_obj.id" id="animalObservationDetail" :is_external="is_external"
-                :isReadOnly="isReadOnly" ref="animalObservationDetail" @mounted="populateAnimalObservationLookups">
+        <FormSection
+            v-if="isFauna"
+            :form-collapse="false"
+            label="Animal Observation"
+            :Index="animalObsBody"
+        >
+            <AnimalObservation
+                v-if="isFauna"
+                id="animalObservationDetail"
+                ref="animalObservationDetail"
+                :animal_observation="occurrence_obj.animal_observation"
+                :is_report="false"
+                :occurrence_id="occurrence_obj.id"
+                :is_external="is_external"
+                :is-read-only="isReadOnly"
+                @mounted="populateAnimalObservationLookups"
+            >
             </AnimalObservation>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'animal_observation'"
-                @copyUpdate="copyUpdate" />
+            <RelatedReports
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'animal_observation'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Identification" :Index="identificationBody">
+        <FormSection
+            :form-collapse="false"
+            label="Identification"
+            :Index="identificationBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">ID Confirmed by:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >ID Confirmed by:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="id_confirmed_by" placeholder=""
-                        v-model="occurrence_obj.identification.id_confirmed_by" />
+                    <input
+                        id="id_confirmed_by"
+                        v-model="occurrence_obj.identification.id_confirmed_by"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label fw-bold">Identification Certainty: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-3 control-label fw-bold"
+                    >Identification Certainty:
+                    <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="identification_certainty_list && identification_certainty_list.length > 0 && occurrence_obj.identification.identification_certainty_id && !identification_certainty_list.map((d) => d.id).includes(occurrence_obj.identification.identification_certainty_id)">
-                            <input type="text" v-if="occurrence_obj.identification.identification_certainty"
+                            v-if="
+                                identification_certainty_list &&
+                                identification_certainty_list.length > 0 &&
+                                occurrence_obj.identification
+                                    .identification_certainty_id &&
+                                !identification_certainty_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.identification
+                                            .identification_certainty_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_obj.identification
+                                        .identification_certainty
+                                "
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.identification.identification_certainty + ' (Now Archived)'"
-                                disabled />
+                                :value="
+                                    occurrence_obj.identification
+                                        .identification_certainty +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change identification certainty to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.identification.identification_certainty_id">
-                            <option v-for="option in identification_certainty_list" :value="option.id"
-                                v-bind:key="option.id">
+                        <select
+                            v-model="
+                                occurrence_obj.identification
+                                    .identification_certainty_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in identification_certainty_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.identification.identification_certainty" />
+                        <input
+                            v-model="
+                                occurrence_obj.identification
+                                    .identification_certainty
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Sample Type:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Sample Type:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="sample_type_list && sample_type_list.length > 0 && occurrence_obj.identification.sample_type_id && !sample_type_list.map((d) => d.id).includes(occurrence_obj.identification.sample_type_id)">
-                            <input type="text" v-if="occurrence_obj.identification.sample_type"
+                            v-if="
+                                sample_type_list &&
+                                sample_type_list.length > 0 &&
+                                occurrence_obj.identification.sample_type_id &&
+                                !sample_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.identification
+                                            .sample_type_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="occurrence_obj.identification.sample_type"
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.identification.sample_type + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.identification.sample_type +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change sample type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.identification.sample_type_id">
-                            <option v-for="option in sample_type_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="
+                                occurrence_obj.identification.sample_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in sample_type_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.identification.sample_type" />
+                        <input
+                            v-model="occurrence_obj.identification.sample_type"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Sample Destination:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Sample Destination:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="sample_dest_list && sample_dest_list.length > 0 && occurrence_obj.identification.sample_destination_id && !sample_dest_list.map((d) => d.id).includes(occurrence_obj.identification.sample_destination_id)">
-                            <input type="text" v-if="occurrence_obj.identification.sample_destination"
+                            v-if="
+                                sample_dest_list &&
+                                sample_dest_list.length > 0 &&
+                                occurrence_obj.identification
+                                    .sample_destination_id &&
+                                !sample_dest_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.identification
+                                            .sample_destination_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_obj.identification
+                                        .sample_destination
+                                "
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.identification.sample_destination + ' (Now Archived)'"
-                                disabled />
+                                :value="
+                                    occurrence_obj.identification
+                                        .sample_destination + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change sample destination to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.identification.sample_destination_id">
-                            <option v-for="option in sample_dest_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="
+                                occurrence_obj.identification
+                                    .sample_destination_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in sample_dest_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.identification.sample_destination" />
+                        <input
+                            v-model="
+                                occurrence_obj.identification.sample_destination
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Permit Type:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Permit Type:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="permit_type_list && permit_type_list.length > 0 && occurrence_obj.identification.permit_type_id && !permit_type_list.map((d) => d.id).includes(occurrence_obj.identification.permit_type_id)">
-                            <input type="text" v-if="occurrence_obj.identification.permit_type"
+                            v-if="
+                                permit_type_list &&
+                                permit_type_list.length > 0 &&
+                                occurrence_obj.identification.permit_type_id &&
+                                !permit_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_obj.identification
+                                            .permit_type_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="occurrence_obj.identification.permit_type"
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_obj.identification.permit_type + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_obj.identification.permit_type +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change permit type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_obj.identification.permit_type_id">
-                            <option v-for="option in permit_type_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="
+                                occurrence_obj.identification.permit_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in permit_type_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_obj.identification.permit_type" />
+                        <input
+                            v-model="occurrence_obj.identification.permit_type"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Permit ID:</label>
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="permit_id" placeholder=""
-                        v-model="occurrence_obj.identification.permit_id" />
+                    <input
+                        id="permit_id"
+                        v-model="occurrence_obj.identification.permit_id"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Sample Label/ Collector Number:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Sample Label/ Collector Number:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="collector_number"
-                        placeholder="" v-model="occurrence_obj.identification.collector_number" />
+                    <textarea
+                        id="collector_number"
+                        v-model="occurrence_obj.identification.collector_number"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Barcode/Catalog Number:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Barcode/Catalog Number:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="barcode_number"
-                        placeholder="" v-model="occurrence_obj.identification.barcode_number" />
+                    <textarea
+                        id="barcode_number"
+                        v-model="occurrence_obj.identification.barcode_number"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Identification Comments:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Identification Comments:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="identification_comment" placeholder=""
-                        v-model="occurrence_obj.identification.identification_comment" />
+                    <textarea
+                        id="identification_comment"
+                        v-model="
+                            occurrence_obj.identification.identification_comment
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <span v-if="occurrence_obj.identification.copied_ocr" class="float-end"><b>Sourced from
-                            {{ occurrence_obj.identification.copied_ocr }}</b></span>
+                    <span
+                        v-if="occurrence_obj.identification.copied_ocr"
+                        class="float-end"
+                        ><b
+                            >Sourced from
+                            {{ occurrence_obj.identification.copied_ocr }}</b
+                        ></span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingHabitatCompositionDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingIdentificationDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingIdentificationDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateIdentificationDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateIdentificationDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'identification'"
-                @copyUpdate="copyUpdate" />
+            <RelatedReports
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'identification'"
+                @copy-update="copyUpdate"
+            />
         </FormSection>
     </div>
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import PlantCount from './plant_count.vue'
-import AnimalObservation from './animal_observation.vue'
-import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue'
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import PlantCount from './plant_count.vue';
+import AnimalObservation from './animal_observation.vue';
+import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'OCCObservation',
+    components: {
+        FormSection,
+        PlantCount,
+        AnimalObservation,
+        RelatedReports,
+    },
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -281,8 +616,8 @@ export default {
             animalObsBody: 'animalObsBody' + vm._uid,
             identificationBody: 'identificationBody' + vm._uid,
             //---to show fields related to Fauna
-            isFauna: vm.occurrence_obj.group_type === "fauna" ? true : false,
-            isFlora: vm.occurrence_obj.group_type === "flora" ? true : false,
+            isFauna: vm.occurrence_obj.group_type === 'fauna' ? true : false,
+            isFlora: vm.occurrence_obj.group_type === 'flora' ? true : false,
             //----list of values dictionary
             listOfValuesDict: {},
             //scientific_name_list: [],
@@ -293,56 +628,99 @@ export default {
             permit_type_list: [],
             updatingObservationDetails: false,
             updatingIdentificationDetails: false,
-        }
-    },
-    components: {
-        FormSection,
-        PlantCount,
-        AnimalObservation,
-        RelatedReports,
+        };
     },
     computed: {
         isReadOnly: function () {
-            return !(this.occurrence_obj.can_user_edit);
+            return !this.occurrence_obj.can_user_edit;
         },
     },
-    watch: {
+    watch: {},
+    created: async function () {
+        let vm = this;
+        //------fetch list of values
+        const response = await fetch(
+            `/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_obj.group_type}`
+        );
+        vm.listOfValuesDict = await response.json();
+        vm.observation_method_list =
+            vm.listOfValuesDict.observation_method_list;
+        vm.observation_method_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.identification_certainty_list =
+            vm.listOfValuesDict.identification_certainty_list;
+        vm.identification_certainty_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.sample_type_list = vm.listOfValuesDict.sample_type_list;
+        vm.sample_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.sample_dest_list = vm.listOfValuesDict.sample_dest_list;
+        vm.sample_dest_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.permit_type_list = vm.listOfValuesDict.permit_type_list;
+        vm.permit_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+    },
+    mounted: function () {
+        let vm = this;
+        vm.eventListeners();
     },
     methods: {
-        eventListeners: function () {
-        },
+        eventListeners: function () {},
         updateObservationDetails: function () {
             let vm = this;
             vm.updatingObservationDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_observation_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_obj.observation_detail)
-            }).then(async (response) => {
-                vm.updatingObservationDetails = false;
-                vm.occurrence_obj.observation_detail = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Observation details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Observation details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/update_observation_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingObservationDetails = false;
-            });
+                    body: JSON.stringify(vm.occurrence_obj.observation_detail),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingObservationDetails = false;
+                    vm.occurrence_obj.observation_detail =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Observation details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Observation details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingObservationDetails = false;
+                }
+            );
         },
         copyUpdate: function (object, section) {
             let vm = this;
@@ -351,139 +729,113 @@ export default {
         updateIdentificationDetails: function () {
             let vm = this;
             vm.updatingIdentificationDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_identification_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_obj.identification)
-            }).then(async (response) => {
-                vm.updatingIdentificationDetails = false;
-                vm.occurrence_obj.identification = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Identification details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Identification details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/update_identification_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingIdentificationDetails = false;
-            });
+                    body: JSON.stringify(vm.occurrence_obj.identification),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingIdentificationDetails = false;
+                    vm.occurrence_obj.identification = await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Identification details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Identification details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingIdentificationDetails = false;
+                }
+            );
         },
         populatePlantCountLookups: function () {
             // using child refs to assign the list values to avoid calling the above api again in plantCount component
-            vm.$refs.plantCountDetail.plant_count_method_list = vm.listOfValuesDict.plant_count_method_list;
-            vm.$refs.plantCountDetail.plant_count_method_list.splice(0, 0,
-                {
-                    id: null,
-                    name: null,
-                });
-            vm.$refs.plantCountDetail.plant_count_accuracy_list = vm.listOfValuesDict.plant_count_accuracy_list;
-            vm.$refs.plantCountDetail.plant_count_accuracy_list.splice(0, 0,
-                {
-                    id: null,
-                    name: null,
-                });
-            vm.$refs.plantCountDetail.plant_condition_list = vm.listOfValuesDict.plant_condition_list;
-            vm.$refs.plantCountDetail.plant_condition_list.splice(0, 0,
-                {
-                    id: null,
-                    name: null,
-                });
-            vm.$refs.plantCountDetail.counted_subject_list = vm.listOfValuesDict.counted_subject_list;
-            vm.$refs.plantCountDetail.counted_subject_list.splice(0, 0,
-                {
-                    id: null,
-                    name: null,
-                });
-        },
-        populateAnimalObservationLookups: function () {
-            // using child refs to assign the list values to avoid calling the above api again in AnimalObservation component
-            vm.$refs.animalObservationDetail.primary_detection_method_list = vm.listOfValuesDict.primary_detection_method_list;
-            vm.$refs.animalObservationDetail.primary_detection_method_list.splice(0, 0,
-                {
-                    id: '',
-                    name: '',
-                });
-            vm.$refs.animalObservationDetail.secondary_sign_list = vm.listOfValuesDict.secondary_sign_list;
-            vm.$refs.animalObservationDetail.secondary_sign_list.splice(0, 0,
-                {
-                    id: '',
-                    name: '',
-                });
-            vm.$refs.animalObservationDetail.reprod_state_list = vm.listOfValuesDict.reprod_state_list;
-            vm.$refs.animalObservationDetail.reprod_state_list.splice(0, 0,
-                {
-                    id: '',
-                    name: '',
-                });
-            vm.$refs.animalObservationDetail.death_reason_list = vm.listOfValuesDict.death_reason_list;
-            vm.$refs.animalObservationDetail.death_reason_list.splice(0, 0,
-                {
-                    id: null,
-                    name: null,
-                });
-            vm.$refs.animalObservationDetail.animal_health_list = vm.listOfValuesDict.animal_health_list;
-            vm.$refs.animalObservationDetail.animal_health_list.splice(0, 0,
-                {
-                    id: null,
-                    name: null,
-                });
-        }
-
-    },
-    created: async function () {
-        let vm = this;
-        //------fetch list of values
-        const response = await fetch(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_obj.group_type}`);
-        vm.listOfValuesDict = await response.json();
-        vm.observation_method_list = vm.listOfValuesDict.observation_method_list;
-        vm.observation_method_list.splice(0, 0,
-            {
+            vm.$refs.plantCountDetail.plant_count_method_list =
+                vm.listOfValuesDict.plant_count_method_list;
+            vm.$refs.plantCountDetail.plant_count_method_list.splice(0, 0, {
                 id: null,
                 name: null,
             });
-        vm.identification_certainty_list = vm.listOfValuesDict.identification_certainty_list;
-        vm.identification_certainty_list.splice(0, 0,
-            {
+            vm.$refs.plantCountDetail.plant_count_accuracy_list =
+                vm.listOfValuesDict.plant_count_accuracy_list;
+            vm.$refs.plantCountDetail.plant_count_accuracy_list.splice(0, 0, {
                 id: null,
                 name: null,
             });
-        vm.sample_type_list = vm.listOfValuesDict.sample_type_list;
-        vm.sample_type_list.splice(0, 0,
-            {
+            vm.$refs.plantCountDetail.plant_condition_list =
+                vm.listOfValuesDict.plant_condition_list;
+            vm.$refs.plantCountDetail.plant_condition_list.splice(0, 0, {
                 id: null,
                 name: null,
             });
-        vm.sample_dest_list = vm.listOfValuesDict.sample_dest_list;
-        vm.sample_dest_list.splice(0, 0,
-            {
+            vm.$refs.plantCountDetail.counted_subject_list =
+                vm.listOfValuesDict.counted_subject_list;
+            vm.$refs.plantCountDetail.counted_subject_list.splice(0, 0, {
                 id: null,
                 name: null,
             });
-        vm.permit_type_list = vm.listOfValuesDict.permit_type_list;
-        vm.permit_type_list.splice(0, 0,
-            {
+        },
+        populateAnimalObservationLookups: function () {
+            // using child refs to assign the list values to avoid calling the above api again in AnimalObservation component
+            vm.$refs.animalObservationDetail.primary_detection_method_list =
+                vm.listOfValuesDict.primary_detection_method_list;
+            vm.$refs.animalObservationDetail.primary_detection_method_list.splice(
+                0,
+                0,
+                {
+                    id: '',
+                    name: '',
+                }
+            );
+            vm.$refs.animalObservationDetail.secondary_sign_list =
+                vm.listOfValuesDict.secondary_sign_list;
+            vm.$refs.animalObservationDetail.secondary_sign_list.splice(0, 0, {
+                id: '',
+                name: '',
+            });
+            vm.$refs.animalObservationDetail.reprod_state_list =
+                vm.listOfValuesDict.reprod_state_list;
+            vm.$refs.animalObservationDetail.reprod_state_list.splice(0, 0, {
+                id: '',
+                name: '',
+            });
+            vm.$refs.animalObservationDetail.death_reason_list =
+                vm.listOfValuesDict.death_reason_list;
+            vm.$refs.animalObservationDetail.death_reason_list.splice(0, 0, {
                 id: null,
                 name: null,
             });
+            vm.$refs.animalObservationDetail.animal_health_list =
+                vm.listOfValuesDict.animal_health_list;
+            vm.$refs.animalObservationDetail.animal_health_list.splice(0, 0, {
+                id: null,
+                name: null,
+            });
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.eventListeners();
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -507,13 +859,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
index 45463cd5..0bda12bc 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
@@ -1,19 +1,35 @@
 <template lang="html">
     <div id="existingThreats">
-        <modal transition="modal fade" :title="'Add Existing Threat'" :large="true" :full="true" :showOK="false"
-            cancel-text="Close" @cancel="close()">
+        <modal
+            transition="modal fade"
+            :title="'Add Existing Threat'"
+            :large="true"
+            :full="true"
+            :show-o-k="false"
+            cancel-text="Close"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <alert v-if="errorString" type="danger"><strong>{{ errorString }}</strong></alert>
+                    <alert v-if="errorString" type="danger"
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
                                 <div v-if="occurrenceId" class="col-lg-12">
-                                    <datatable :id="datatable_id" ref="threat_datatable" :dt-options="datatable_options"
-                                        :dt-headers="datatable_headers" />
+                                    <datatable
+                                        :id="datatable_id"
+                                        ref="threat_datatable"
+                                        :dt-options="datatable_options"
+                                        :dt-headers="datatable_headers"
+                                    />
                                 </div>
-                                <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse"
-                                    :url="occ_threat_url"></ThreatDetail>
+                                <ThreatDetail
+                                    ref="threat_detail"
+                                    :url="occ_threat_url"
+                                    @refresh-from-response="refreshFromResponse"
+                                ></ThreatDetail>
                             </div>
                         </div>
                     </div>
@@ -23,12 +39,11 @@
     </div>
 </template>
 <script>
-
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
-import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
+import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import { v4 as uuid } from 'uuid';
 
 export default {
@@ -72,139 +87,136 @@ export default {
                 'Threat Source',
                 'Comments',
                 'Current Impact',
-                'Potential Impact'
+                'Potential Impact',
             ];
         },
         column_number: function () {
             return {
-                data: "threat_number",
+                data: 'threat_number',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
                         return full.threat_number;
-                    }
-                    else {
-                        return '<s>' + full.threat_number + '</s>'
+                    } else {
+                        return '<s>' + full.threat_number + '</s>';
                     }
                 },
             };
         },
         column_ocr: function () {
             return {
-                data: "occurrence_report",
+                data: 'occurrence_report',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
-                        return "OCR" + full.occurrence_report;
-                    }
-                    else {
-                        return '<s>OCR' + full.occurrence_report + '</s>'
+                        return 'OCR' + full.occurrence_report;
+                    } else {
+                        return '<s>OCR' + full.occurrence_report + '</s>';
                     }
                 },
             };
         },
         column_category: function () {
             return {
-                data: "threat_category",
+                data: 'threat_category',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
                         return full.threat_category;
-                    }
-                    else {
-                        return '<s>' + full.threat_category + '</s>'
+                    } else {
+                        return '<s>' + full.threat_category + '</s>';
                     }
                 },
             };
         },
         column_source: function () {
             return {
-                data: "source",
+                data: 'source',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
                         return full.source;
-                    }
-                    else {
-                        return '<s>' + full.source + '</s>'
+                    } else {
+                        return '<s>' + full.source + '</s>';
                     }
                 },
             };
         },
         column_observed: function () {
             return {
-                data: "date_observed",
+                data: 'date_observed',
                 mRender: function (data, type, full) {
                     if (full.visible) {
-                        return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
+                        return data != '' && data != null
+                            ? moment(data).format('DD/MM/YYYY')
+                            : '';
+                    } else {
+                        return data != '' && data != null
+                            ? '<s>' + moment(data).format('DD/MM/YYYY')
+                            : '' + '</s>';
                     }
-                    else {
-                        return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
-                    }
-                }
+                },
             };
         },
         column_threat_agent: function () {
             return {
-                data: "threat_agent",
+                data: 'threat_agent',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
                         return full.threat_agent;
-                    }
-                    else {
-                        return '<s>' + full.threat_agent + '</s>'
+                    } else {
+                        return '<s>' + full.threat_agent + '</s>';
                     }
                 },
             };
         },
         column_comment: function () {
             return {
-                data: "comment",
+                data: 'comment',
                 orderable: true,
                 searchable: true,
-                'render': function (value, type, full) {
+                render: function (value, type, full) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     if (full.visible) {
                         return type == 'export' ? value : result;
-                    }
-                    else {
-                        return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                    } else {
+                        return type == 'export'
+                            ? '<s>' + value + '</s>'
+                            : '<s>' + result + '</s>';
                     }
                 },
             };
         },
         column_current_impact: function () {
             return {
-                data: "current_impact_name",
+                data: 'current_impact_name',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
                         return full.current_impact_name;
-                    }
-                    else {
-                        return '<s>' + full.current_impact_name + '</s>'
+                    } else {
+                        return '<s>' + full.current_impact_name + '</s>';
                     }
                 },
             };
         },
         column_potential_impact: function () {
             return {
-                data: "potential_impact_name",
+                data: 'potential_impact_name',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
                         return full.potential_impact_name;
-                    }
-                    else {
-                        return '<s>' + full.potential_impact_name + '</s>'
+                    } else {
+                        return '<s>' + full.potential_impact_name + '</s>';
                     }
                 },
             };
@@ -216,11 +228,11 @@ export default {
                 searchable: false,
                 visible: true,
                 mRender: function (data, type, full) {
-                    let links = "";
+                    let links = '';
                     links += `<a href='#' data-view-threat='${full.id}'>View</a><br>`;
                     links += `<a href='#' data-add-threat='${full.id}'>Add</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -253,7 +265,10 @@ export default {
                     { responsivePriority: 2, targets: 4 },
                 ],
                 ajax: {
-                    url: "/api/occurrence/" + this.occurrenceId + "/get_existing_ocr_threats/",
+                    url:
+                        '/api/occurrence/' +
+                        this.occurrenceId +
+                        '/get_existing_ocr_threats/',
                     dataSrc: '',
                 },
                 dom: 'lBfrtip',
@@ -262,6 +277,12 @@ export default {
             };
         },
     },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         close: function () {
             this.errorString = '';
@@ -275,7 +296,8 @@ export default {
             let newThreatObj = new Object();
             newThreatObj.occurrence_report_threat_id = vm.threatObj.id;
             newThreatObj.date_observed = vm.threatObj.date_observed;
-            newThreatObj.potential_threat_onset = vm.threatObj.potential_threat_onset;
+            newThreatObj.potential_threat_onset =
+                vm.threatObj.potential_threat_onset;
             newThreatObj.potential_impact = vm.threatObj.potential_impact;
             newThreatObj.current_impact = vm.threatObj.current_impact;
             newThreatObj.comment = vm.threatObj.comment;
@@ -284,7 +306,7 @@ export default {
             newThreatObj.occurrence = vm.occurrenceId;
 
             let threatObj = JSON.parse(JSON.stringify(newThreatObj));
-            let formData = new FormData()
+            let formData = new FormData();
 
             vm.addingThreat = true;
             formData.append('data', JSON.stringify(threatObj));
@@ -294,66 +316,78 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: formData,
-            }).then((response) => {
-                vm.addingThreat = false;
-                vm.refreshFromResponse();
-                vm.$parent.updatedThreats();
-            }, (error) => {
-                vm.errors = true;
-                vm.addingThreat = false;
-                vm.errorString = helpers.apiVueResourceError(error);
-            });
-
+            }).then(
+                (response) => {
+                    vm.addingThreat = false;
+                    vm.refreshFromResponse();
+                    vm.$parent.updatedThreats();
+                },
+                (error) => {
+                    vm.errors = true;
+                    vm.addingThreat = false;
+                    vm.errorString = helpers.apiVueResourceError(error);
+                }
+            );
         },
         viewThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         addThreat: function (id) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.threatObj = data;
-                console.log(this.threatObj);
-                vm.sendData()
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.threatObj = data;
+                    console.log(this.threatObj);
+                    vm.sendData();
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.threat_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-threat');
-                vm.viewThreat(id);
-            });
-            vm.$refs.threat_datatable.vmDataTable.on('click', 'a[data-add-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-add-threat');
-                vm.addThreat(id);
-            });
+            vm.$refs.threat_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-threat');
+                    vm.viewThreat(id);
+                }
+            );
+            vm.$refs.threat_datatable.vmDataTable.on(
+                'click',
+                'a[data-add-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-add-threat');
+                    vm.addThreat(id);
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.threat_datatable.vmDataTable.ajax.reload();
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    },
 };
 </script>
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
index 7f38986a..f8e9ce09 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
@@ -1,32 +1,40 @@
 <template lang="html">
     <div :id="'related_ocr' + section_type">
-        <FormSection :formCollapse="false" label="Related Occurrence Reports" :Index="'related_ocr' + section_type"
-            @toggle-collapse="toggleCollapse">
+        <FormSection
+            :form-collapse="false"
+            label="Related Occurrence Reports"
+            :Index="'related_ocr' + section_type"
+            @toggle-collapse="toggleCollapse"
+        >
             <div>
-                <datatable ref="related_ocr_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="related_ocr_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </FormSection>
 
         <div v-if="sectionOCRId">
-            <SectionModal ref="section_modal" :key="sectionOCRId" :sectionTypeDisplay="sectionTypeFormatted"
-                :sectionType="section_type" :ocrNumber="sectionOCRId" :sectionObj="sectionObj" />
+            <SectionModal
+                ref="section_modal"
+                :key="sectionOCRId"
+                :section-type-display="sectionTypeFormatted"
+                :section-type="section_type"
+                :ocr-number="sectionOCRId"
+                :section-obj="sectionObj"
+            />
         </div>
     </div>
 </template>
 
 <script>
-
-import { v4 as uuid } from 'uuid'
-import datatable from '@/utils/vue/datatable.vue'
+import { v4 as uuid } from 'uuid';
+import datatable from '@/utils/vue/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import SectionModal from '@/components/common/occurrence/ocr_section_modal.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import SectionModal from '@/components/common/occurrence/ocr_section_modal.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'TableRelatedItems',
@@ -38,16 +46,16 @@ export default {
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         section_type: {
             type: String,
             required: false,
-            default: "",
+            default: '',
         },
         isReadOnly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         hrefContainerId: {
             type: String,
@@ -79,7 +87,7 @@ export default {
             sectionOCRId: null,
             sectionTypeFormatted: null,
             sectionObj: null,
-        }
+        };
     },
     computed: {
         column_number: function () {
@@ -88,7 +96,7 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_status: function () {
             return {
@@ -96,7 +104,7 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_observation_date: function () {
             return {
@@ -104,7 +112,7 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_location_accuracy: function () {
             return {
@@ -112,7 +120,7 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_identification_certainty: function () {
             return {
@@ -120,7 +128,7 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_site: function () {
             return {
@@ -128,7 +136,7 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_submitter: function () {
             return {
@@ -136,7 +144,7 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_action: function () {
             return {
@@ -145,12 +153,12 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (row, type, full) {
+                render: function (row, type, full) {
                     let links = '';
                     links += `<a href='/internal/occurrence-report/${full.id}' target="_blank">View</a><br>`;
                     return links;
-                }
-            }
+                },
+            };
         },
         copied_to_occurrence: function () {
             return {
@@ -171,7 +179,7 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (row, type, full) {
+                render: function (row, type, full) {
                     let links = '';
                     if (vm.section_type == 'location') {
                         if (full.geometry_show_on_map === false) {
@@ -187,15 +195,15 @@ export default {
                     links += `<a href='#' data-replace-section='${full.id}'>Copy Section Data</a><br>`;
 
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let action = vm.column_action
-            if (vm.section_type !== "" && !vm.isReadOnly) {
-                action = vm.column_copy_action
+            let action = vm.column_action;
+            if (vm.section_type !== '' && !vm.isReadOnly) {
+                action = vm.column_copy_action;
             }
 
             let columns = [
@@ -208,11 +216,11 @@ export default {
                 vm.column_site,
                 vm.copied_to_occurrence,
                 action,
-            ]
+            ];
             return {
                 autoWidth: true,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 //serverSide: true,
@@ -225,14 +233,18 @@ export default {
                 ],
                 ajax: {
                     //"url": '/api/proposal/' + vm.proposal.id + '/get_related_items/',
-                    "url": "/api/occurrence/" + this.occurrence_obj.id + "/get_related_occurrence_reports/",
-                    "dataSrc": "",
+                    url:
+                        '/api/occurrence/' +
+                        this.occurrence_obj.id +
+                        '/get_related_occurrence_reports/',
+                    dataSrc: '',
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
-                        d.related_filter_type = vm.filterRelatedType
-                    }
+                    data: function (d) {
+                        d.related_filter_type = vm.filterRelatedType;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [],
@@ -248,7 +260,7 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
+            };
         },
         datatable_headers: function () {
             return [
@@ -262,9 +274,15 @@ export default {
                 'Site',
                 'Copied to OCC',
                 'Action',
-            ]
+            ];
         },
     },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         toggleCollapse: function () {
             //console.log("toggle");
@@ -273,68 +291,101 @@ export default {
         viewSection: function (id) {
             let vm = this;
             //get ocr object with id
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, id)).then(async (response) => {
-                let ocrObj = await response.json();
+            fetch(
+                helpers.add_endpoint_json(api_endpoints.occurrence_report, id)
+            ).then(
+                async (response) => {
+                    let ocrObj = await response.json();
 
-                vm.sectionObj = ocrObj[vm.section_type];
-                vm.sectionOCRId = id;
-                vm.sectionTypeFormatted = vm.section_type.split('_')
-                    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
-                    .join(' ');
+                    vm.sectionObj = ocrObj[vm.section_type];
+                    vm.sectionOCRId = id;
+                    vm.sectionTypeFormatted = vm.section_type
+                        .split('_')
+                        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+                        .join(' ');
 
-                this.$nextTick(() => {
-                    this.$refs.section_modal.isModalOpen = true;
-                });
-            },
-                err => {
+                    this.$nextTick(() => {
+                        this.$refs.section_modal.isModalOpen = true;
+                    });
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         copySection: function (id, merge) {
             let vm = this;
             vm.errors = false;
 
-            let formData = new FormData()
+            let formData = new FormData();
 
-            let data = { 'occurrence_report_id': id, 'section': vm.section_type, 'merge': merge };
+            let data = {
+                occurrence_report_id: id,
+                section: vm.section_type,
+                merge: merge,
+            };
             formData.append('data', JSON.stringify(data));
 
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + "/copy_ocr_section"), {
-                method: 'POST',
-                body: formData,
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/copy_ocr_section'
+                ),
+                {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
                 }
-            }).then(async (response) => {
-                const data = await response.json();
-                vm.$refs.related_ocr_datatable.vmDataTable.ajax.reload();
-                vm.$emit('copyUpdate', data, vm.section_type);
-            },
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.$refs.related_ocr_datatable.vmDataTable.ajax.reload();
+                    vm.$emit('copyUpdate', data, vm.section_type);
+                },
                 (error) => {
                     vm.errors = true;
                     vm.errorString = helpers.apiVueResourceError(error);
-                });
+                }
+            );
         },
         adjust_table_width: function () {
-            if (this.$refs.related_ocr_datatable !== undefined) { this.$refs.related_ocr_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.related_ocr_datatable !== undefined) {
+                this.$refs.related_ocr_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-view-section]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-section');
-                vm.viewSection(id);
-            });
-            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-merge-section]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-merge-section');
-                vm.copySection(id, true);
-            });
-            vm.$refs.related_ocr_datatable.vmDataTable.on('click', 'a[data-replace-section]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-replace-section');
-                vm.copySection(id, false);
-            });
+            vm.$refs.related_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-section]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-section');
+                    vm.viewSection(id);
+                }
+            );
+            vm.$refs.related_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-merge-section]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-merge-section');
+                    vm.copySection(id, true);
+                }
+            );
+            vm.$refs.related_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-replace-section]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-replace-section');
+                    vm.copySection(id, false);
+                }
+            );
             vm.$refs.related_ocr_datatable.vmDataTable.on(
                 'click',
                 'a[data-highlight-on-map]',
@@ -386,11 +437,5 @@ export default {
             );
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
index fdf136d2..5c6c53a7 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
@@ -1,16 +1,24 @@
 <template lang="html">
     <div :id="'related_species'">
-
         <div class="row mb-3">
             <label for="" class="col-sm-3 control-label">NOMOS Lookup:</label>
-            <div class="col-sm-6" :id="select_scientific_name">
-                <select :disabled="isReadOnly" :id="scientific_name_lookup" :name="scientific_name_lookup"
-                    :ref="scientific_name_lookup" class="form-control" />
+            <div :id="select_scientific_name" class="col-sm-6">
+                <select
+                    :id="scientific_name_lookup"
+                    :ref="scientific_name_lookup"
+                    :disabled="isReadOnly"
+                    :name="scientific_name_lookup"
+                    class="form-control"
+                />
             </div>
             <div class="col-sm-12">
                 <div class="text-end">
-                    <button :disabled="isReadOnly || adding_species" type="button" class="btn btn-primary mb-2"
-                        @click.prevent="addRelatedSpecies">
+                    <button
+                        :disabled="isReadOnly || adding_species"
+                        type="button"
+                        class="btn btn-primary mb-2"
+                        @click.prevent="addRelatedSpecies"
+                    >
                         <i class="fa-solid fa-circle-plus"></i>
                         Add Related Species
                     </button>
@@ -19,22 +27,20 @@
         </div>
 
         <div>
-            <datatable ref="related_species_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                :dtHeaders="datatable_headers" />
+            <datatable
+                :id="datatable_id"
+                ref="related_species_datatable"
+                :dt-options="datatable_options"
+                :dt-headers="datatable_headers"
+            />
         </div>
     </div>
 </template>
 
 <script>
-
-import { v4 as uuid } from 'uuid'
-import datatable from '@/utils/vue/datatable.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { v4 as uuid } from 'uuid';
+import datatable from '@/utils/vue/datatable.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'TableRelatedSpecies',
@@ -44,23 +50,25 @@ export default {
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         isReadOnly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data() {
         let vm = this;
         return {
-            scientific_name_lookup: 'scientific_name_lookup' + vm.occurrence_obj.id,
-            select_scientific_name: "select_scientific_name" + vm.occurrence_obj.id,
+            scientific_name_lookup:
+                'scientific_name_lookup' + vm.occurrence_obj.id,
+            select_scientific_name:
+                'select_scientific_name' + vm.occurrence_obj.id,
             selected_scientific_name: null,
             adding_species: false,
             uuid: 0,
             datatable_id: uuid(),
-        }
+        };
     },
     computed: {
         column_scientific_name: function () {
@@ -69,11 +77,11 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-            }
+            };
         },
         column_common_name: function () {
             return {
@@ -81,11 +89,11 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-            }
+            };
         },
         column_kingdom: function () {
             return {
@@ -93,11 +101,11 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-            }
+            };
         },
         column_action: function () {
             let vm = this;
@@ -106,27 +114,27 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (row, type, full) {
+                render: function (row, type, full) {
                     let links = '';
                     if (!vm.isReadOnly) {
                         links += `<a href='#' data-discard-species='${full.id}'>Remove</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
             let columns = [
                 vm.column_scientific_name,
                 vm.column_common_name,
                 vm.column_kingdom,
                 vm.column_action,
-            ]
+            ];
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 //serverSide: true,
@@ -134,26 +142,30 @@ export default {
                 ordering: true,
                 order: [[0, 'desc']],
                 ajax: {
-                    "url": "/api/occurrence/" + this.occurrence_obj.id + "/get_related_species/",
-                    "dataSrc": "",
+                    url:
+                        '/api/occurrence/' +
+                        this.occurrence_obj.id +
+                        '/get_related_species/',
+                    dataSrc: '',
                 },
                 dom: 'lBfrtip',
                 buttons: [],
                 columns: columns,
                 processing: true,
-                initComplete: function (settings, json) {
-                },
-            }
+                initComplete: function (settings, json) {},
+            };
         },
         datatable_headers: function () {
-            return [
-                'Scientific Name',
-                'Common Name',
-                'Kingdom',
-                'Action',
-            ]
+            return ['Scientific Name', 'Common Name', 'Kingdom', 'Action'];
         },
     },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.addEventListeners();
+        });
+    },
     methods: {
         reload: function () {
             let vm = this;
@@ -162,9 +174,14 @@ export default {
         addRelatedSpecies: function () {
             let vm = this;
             if (vm.selected_scientific_name && !vm.adding_species) {
-                vm.adding_species = true
-                fetch("/api/occurrence/" + this.occurrence_obj.id + '/add_related_species?species=' + vm.selected_scientific_name)
-                    .then((response) => {
+                vm.adding_species = true;
+                fetch(
+                    '/api/occurrence/' +
+                        this.occurrence_obj.id +
+                        '/add_related_species?species=' +
+                        vm.selected_scientific_name
+                ).then(
+                    (response) => {
                         swal.fire({
                             title: 'Added',
                             text: 'Related Species has been added',
@@ -176,99 +193,112 @@ export default {
                         vm.$refs.related_species_datatable.vmDataTable.ajax.reload();
                         vm.selected_scientific_name = null;
                         vm.adding_species = false;
-                    }, (error) => {
+                    },
+                    (error) => {
                         console.log(error);
                         vm.adding_species = false;
-                    });
+                    }
+                );
             }
         },
         removeRelatedSpecies: function (id) {
             let vm = this;
             swal.fire({
-                title: "Remove Related Species",
-                text: "Are you sure you want to remove this Related Species?",
-                icon: "question",
+                title: 'Remove Related Species',
+                text: 'Are you sure you want to remove this Related Species?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Remove Related Species',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch("/api/occurrence/" + this.occurrence_obj.id + '/remove_related_species?species=' + id)
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Removed',
-                                text: 'Related Species has been removed',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.related_species_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            '/api/occurrence/' +
+                                this.occurrence_obj.id +
+                                '/remove_related_species?species=' +
+                                id
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Removed',
+                                    text: 'Related Species has been removed',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.related_species_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_scientific_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
+                        // results: function (data, page) { // parse the results into the format expected by Select2.
+                        //     // since we are using custom formatting functions we do not need to alter remote JSON data
+                        //     return {results: data};
+                        // },
                     },
-                    // results: function (data, page) { // parse the results into the format expected by Select2.
-                    //     // since we are using custom formatting functions we do not need to alter remote JSON data
-                    //     return {results: data};
-                    // },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.selected_scientific_name = data;
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.selected_scientific_name = null;
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.related_species_datatable.vmDataTable.on('click', 'a[data-discard-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-species');
-                vm.removeRelatedSpecies(id);
-            });
-        }
+            vm.$refs.related_species_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-species');
+                    vm.removeRelatedSpecies(id);
+                }
+            );
+        },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
index 0cd67a54..b5bbaded 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
@@ -1,25 +1,55 @@
 <template lang="html">
     <div id="section_details">
-        <modal transition="modal fade" @ok="ok()" @cancel="close()" :title="'OCC ' + occNumber + ' ' + sectionTypeDisplay" large>
+        <modal
+            transition="modal fade"
+            :title="'OCC ' + occNumber + ' ' + sectionTypeDisplay"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <FormSection :formCollapse="false" :label="sectionTypeDisplay">
+                    <FormSection
+                        :form-collapse="false"
+                        :label="sectionTypeDisplay"
+                    >
                         <div class="card-body card-collapse">
-                            <div v-for="(value,index) in sectionObjExpanded">
-                                <div v-if="value && index != 'id' ">
-                                    <div v-if="typeof value == 'object'" >
-                                        <div v-for="(o_value,o_index) in value" class="row mb-3">
-                                            <label class="col-sm-6 control-label">{{index}}.{{o_index}}:</label>
+                            <div v-for="(value, index) in sectionObjExpanded">
+                                <div v-if="value && index != 'id'">
+                                    <div v-if="typeof value == 'object'">
+                                        <div
+                                            v-for="(o_value, o_index) in value"
+                                            class="row mb-3"
+                                        >
+                                            <label
+                                                class="col-sm-6 control-label"
+                                                >{{ index }}.{{
+                                                    o_index
+                                                }}:</label
+                                            >
                                             <div class="col-sm-6">
-                                                <input :disabled="true" type="text" class="form-control" :value="o_value"/>
+                                                <input
+                                                    :disabled="true"
+                                                    type="text"
+                                                    class="form-control"
+                                                    :value="o_value"
+                                                />
                                             </div>
                                         </div>
                                     </div>
                                     <div v-else>
                                         <div class="row mb-3">
-                                            <label class="col-sm-6 control-label">{{index}}:</label>
+                                            <label
+                                                class="col-sm-6 control-label"
+                                                >{{ index }}:</label
+                                            >
                                             <div class="col-sm-6">
-                                            <textarea :disabled="true" type="text" class="form-control">{{value}}</textarea>
+                                                <textarea
+                                                    :disabled="true"
+                                                    type="text"
+                                                    class="form-control"
+                                                    >{{ value }}</textarea
+                                                >
                                             </div>
                                         </div>
                                     </div>
@@ -29,22 +59,26 @@
                     </FormSection>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="close">Close</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="close"
+                    >
+                        Close
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-  api_endpoints,
-  helpers
-}
-from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'SectionModal',
     components: {
@@ -59,16 +93,16 @@ export default {
         },
         sectionType: {
             type: String,
-            required:true,
+            required: true,
         },
         sectionTypeDisplay: {
             type: String,
-            required:true,
+            required: true,
         },
         occNumber: {
             type: String,
-            required:true,
-        }
+            required: true,
+        },
     },
     data: function () {
         let vm = this;
@@ -76,7 +110,13 @@ export default {
             isModalOpen: false,
             form: null,
             sectionObjExpanded: vm.sectionObj,
-        }
+        };
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.fetchSectionData();
+        });
     },
     methods: {
         close: function () {
@@ -84,23 +124,24 @@ export default {
             this.errors = false;
             $('.has-error').removeClass('has-error');
         },
-        fetchSectionData: function(){
+        fetchSectionData: function () {
             let vm = this;
             if (vm.sectionObj.occurrence_id !== undefined) {
-                fetch(api_endpoints.lookup_occ_section_values(vm.sectionType,vm.sectionObj.occurrence_id))
-                .then(async (response) => {
-                    vm.sectionObjExpanded = await response.json();
-                },(error) => {
-                    console.log(error);
-                })
+                fetch(
+                    api_endpoints.lookup_occ_section_values(
+                        vm.sectionType,
+                        vm.sectionObj.occurrence_id
+                    )
+                ).then(
+                    async (response) => {
+                        vm.sectionObjExpanded = await response.json();
+                    },
+                    (error) => {
+                        console.log(error);
+                    }
+                );
             }
         },
     },
-    mounted: function(){
-        let vm = this;
-        this.$nextTick(() => {
-            vm.fetchSectionData();
-        });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
index e645bd06..317b3b0b 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
@@ -1,15 +1,26 @@
 <template lang="html">
     <div id="occ_threats">
-        <FormSection :formCollapse="false" label="Threats" :Index="threatBody">
-            <CollapsibleFilters component_title="Filters" ref="collapsible_filters"
-                @created="collapsible_component_mounted" class="mb-2">
+        <FormSection :form-collapse="false" label="Threats" :Index="threatBody">
+            <CollapsibleFilters
+                ref="collapsible_filters"
+                component_title="Filters"
+                class="mb-2"
+                @created="collapsible_component_mounted"
+            >
                 <div class="row">
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Threat Source:</label>
-                            <select class="form-select" v-model="filterThreatSource">
+                            <select
+                                v-model="filterThreatSource"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_source_filter_list" :value="option">{{ option }}
+                                <option
+                                    v-for="option in threat_source_filter_list"
+                                    :value="option"
+                                >
+                                    {{ option }}
                                 </option>
                             </select>
                         </div>
@@ -17,10 +28,16 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Category:</label>
-                            <select class="form-select" v-model="filterThreatCategory">
+                            <select
+                                v-model="filterThreatCategory"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name
-                                    }}
+                                <option
+                                    v-for="option in threat_category_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -28,9 +45,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Current Impact:</label>
-                            <select class="form-select" v-model="filterThreatCurrentImpact">
+                            <select
+                                v-model="filterThreatCurrentImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_current_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -39,9 +62,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Potential Impact:</label>
-                            <select class="form-select" v-model="filterThreatPotentialImpact">
+                            <select
+                                v-model="filterThreatPotentialImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_potential_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -50,9 +79,16 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Status:</label>
-                            <select class="form-select" v-model="filterThreatStatus">
+                            <select
+                                v-model="filterThreatStatus"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                                <option
+                                    v-for="option in threat_status_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -60,15 +96,25 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed From:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
-                                v-model="filterObservedFromDate">
+                            <input
+                                id="observed_from_date"
+                                v-model="filterObservedFromDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed To:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
-                                v-model="filterObservedToDate">
+                            <input
+                                id="observed_to_date"
+                                v-model="filterObservedToDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                 </div>
@@ -76,63 +122,86 @@
             <form class="form-horizontal" action="index.html" method="post">
                 <div class="col-sm-12">
                     <div class="text-end">
-                        <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                            @click.prevent="newThreat">
+                        <button
+                            :disabled="isReadOnly"
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newThreat"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add New Threat
                         </button>
                         &nbsp;
-                        <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                            @click.prevent="existingThreat">
+                        <button
+                            :disabled="isReadOnly"
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="existingThreat"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Existing Threat
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                        :dtHeaders="threats_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="threats_datatable"
+                        :dt-options="threats_options"
+                        :dt-headers="threats_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url">
+        <ThreatDetail
+            ref="threat_detail"
+            :url="occ_threat_url"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ThreatDetail>
         <div v-if="showExisting">
-            <ExistingThreat ref="existing_threats" :occurrenceId="occurrence_obj.id" />
+            <ExistingThreat
+                ref="existing_threats"
+                :occurrence-id="occurrence_obj.id"
+            />
         </div>
         <div v-if="occConservationThreatHistoryId">
-            <ConservationThreatHistory ref="occ_conservation_threat_history" :key="occConservationThreatHistoryId"
-                :threat-id="occConservationThreatHistoryId" />
+            <ConservationThreatHistory
+                ref="occ_conservation_threat_history"
+                :key="occConservationThreatHistoryId"
+                :threat-id="occConservationThreatHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
-import ExistingThreat from '@/components/common/occurrence/occ_ocr_existing_threats.vue'
+import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
+import ExistingThreat from '@/components/common/occurrence/occ_ocr_existing_threats.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import ConservationThreatHistory from '../../internal/occurrence/occ_conservation_threat_history.vue';
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OCCThreats',
+    components: {
+        FormSection,
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        ExistingThreat,
+        CollapsibleFilters,
+    },
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -141,8 +210,8 @@ export default {
             uuid: 0,
             occConservationThreatHistoryId: null,
             showExisting: false,
-            threatBody: "threatBody" + vm._uid,
-            panelBody: "species-threats-" + vm._uid,
+            threatBody: 'threatBody' + vm._uid,
+            panelBody: 'species-threats-' + vm._uid,
             values: null,
             occ_threat_url: api_endpoints.occ_threat,
 
@@ -160,16 +229,26 @@ export default {
             threat_potential_impact_filter_list: [],
 
             threat_status_filter_list: [
-                { id: "active", name: "Active" },
-                { id: "removed", name: "Removed" },
+                { id: 'active', name: 'Active' },
+                { id: 'removed', name: 'Removed' },
             ],
 
-            threats_headers: ['Number', 'Original Report', 'Category', 'Date Observed', 'Threat Agent', 'Comments', 'Threat Source',
-                'Current Impact', 'Potential Impact', 'Action'],
+            threats_headers: [
+                'Number',
+                'Original Report',
+                'Category',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Threat Source',
+                'Current Impact',
+                'Potential Impact',
+                'Action',
+            ],
             threats_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 serverSide: false,
@@ -180,20 +259,26 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + '/threats'),
-                    "dataSrc": '',
-                    "data": function (d) {
-                        d.filter_threat_source = vm.filterThreatSource
-                        d.filter_threat_category = vm.filterThreatCategory
-                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                        d.filter_threat_status = vm.filterThreatStatus
-                        d.filter_observed_from_date = vm.filterObservedFromDate
-                        d.filter_observed_to_date = vm.filterObservedToDate
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.occurrence,
+                        vm.occurrence_obj.id + '/threats'
+                    ),
+                    dataSrc: '',
+                    data: function (d) {
+                        d.filter_threat_source = vm.filterThreatSource;
+                        d.filter_threat_category = vm.filterThreatCategory;
+                        d.filter_threat_current_impact =
+                            vm.filterThreatCurrentImpact;
+                        d.filter_threat_potential_impact =
+                            vm.filterThreatPotentialImpact;
+                        d.filter_threat_status = vm.filterThreatStatus;
+                        d.filter_observed_from_date = vm.filterObservedFromDate;
+                        d.filter_observed_to_date = vm.filterObservedToDate;
                     },
                 },
                 order: [[0, 'desc']],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -203,8 +288,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -212,140 +297,156 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "threat_number",
+                        data: 'threat_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return "OCC" + full.occurrence + " - " + full.threat_number;
-                            }
-                            else {
-                                return '<s>' + "OCC" + full.occurrence + " - " + full.threat_number + '</s>'
+                                return (
+                                    'OCC' +
+                                    full.occurrence +
+                                    ' - ' +
+                                    full.threat_number
+                                );
+                            } else {
+                                return (
+                                    '<s>' +
+                                    'OCC' +
+                                    full.occurrence +
+                                    ' - ' +
+                                    full.threat_number +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "original_report",
+                        data: 'original_report',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.original_report != null) {
                                 if (full.visible) {
-                                    return full.original_report + " - " + full.original_threat;
-                                }
-                                else {
-                                    return '<s>' + full.original_report + " - " + full.original_threat + '</s>';
+                                    return (
+                                        full.original_report +
+                                        ' - ' +
+                                        full.original_threat
+                                    );
+                                } else {
+                                    return (
+                                        '<s>' +
+                                        full.original_report +
+                                        ' - ' +
+                                        full.original_threat +
+                                        '</s>'
+                                    );
                                 }
-                            }
-                            else {
-                                return ""
+                            } else {
+                                return '';
                             }
                         },
-
                     },
                     {
-                        data: "threat_category",
+                        data: 'threat_category',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_category;
-                            }
-                            else {
-                                return '<s>' + full.threat_category + '</s>'
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "date_observed",
+                        data: 'date_observed',
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
-                            }
-                            else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "threat_agent",
+                        data: 'threat_agent',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_agent;
-                            }
-                            else {
-                                return '<s>' + full.threat_agent + '</s>'
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "comment",
+                        data: 'comment',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.visible) {
                                 return type == 'export' ? value : result;
-                            }
-                            else {
-                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "source",
+                        data: 'source',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.source;
-                            }
-                            else {
-                                return '<s>' + full.source + '</s>'
+                            } else {
+                                return '<s>' + full.source + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "current_impact_name",
+                        data: 'current_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.current_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.current_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "potential_impact_name",
+                        data: 'potential_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.potential_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.potential_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.visible) {
@@ -354,14 +455,12 @@ export default {
                                     links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
                                 }
-                            }
-                            else {
+                            } else {
                                 links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
-
                             }
                             links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -376,23 +475,16 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        FormSection,
-        datatable,
-        ThreatDetail,
-        ConservationThreatHistory,
-        ExistingThreat,
-        CollapsibleFilters,
+            },
+        };
     },
     computed: {
         isReadOnly: function () {
-            return !(this.occurrence_obj.can_user_edit);
+            return !this.occurrence_obj.can_user_edit;
         },
         filterApplied: function () {
-            if (this.filterThreatSource === 'all' &&
+            if (
+                this.filterThreatSource === 'all' &&
                 this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
@@ -400,9 +492,9 @@ export default {
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
             ) {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
     },
@@ -410,7 +502,9 @@ export default {
         filterApplied: function () {
             if (this.$refs.collapsible_filters) {
                 // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
         filterThreatSource: function () {
@@ -442,31 +536,53 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
         },
     },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
 
         fetchFilterLists: function () {
             let vm = this;
 
             //Threat Source filter list (specific to instance)
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + '/threat_source_list')).then(async (response) => {
-                vm.threat_source_filter_list = await response.json();
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/threat_source_list'
+                )
+            ).then(
+                async (response) => {
+                    vm.threat_source_filter_list = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
 
             //Category, Current Impact, Potential Impact (generic to all threats)
-            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
-                const data = await response.json();
-                vm.threat_category_filter_list = data["threat_category_lists"];
-                vm.threat_current_impact_filter_list = data["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
-            }, (error) => {
-                console.log(error);
-            })
-
+            fetch('/api/threat/threat_list_of_values/').then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.threat_category_filter_list =
+                        data['threat_category_lists'];
+                    vm.threat_current_impact_filter_list =
+                        data['current_impact_lists'];
+                    vm.threat_potential_impact_filter_list =
+                        data['potential_impact_lists'];
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         newThreat: function () {
             let vm = this;
@@ -482,7 +598,7 @@ export default {
                 potential_impact: '',
                 potential_threat_onset: '',
                 date_observed: null,
-            }
+            };
             this.$refs.threat_detail.threatObj = new_occ_threat;
             this.$refs.threat_detail.threat_action = 'add';
             this.$refs.threat_detail.isModalOpen = true;
@@ -492,34 +608,46 @@ export default {
             this.uuid++;
             this.$nextTick(() => {
                 this.$refs.existing_threats.isModalOpen = true;
-            })
+            });
         },
         editThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         historyThreat: function (id) {
@@ -532,126 +660,164 @@ export default {
         discardThreat: function (id) {
             let vm = this;
             swal.fire({
-                title: "Remove Threat",
-                text: "Are you sure you want to remove this Threat?",
-                icon: "question",
+                title: 'Remove Threat',
+                text: 'Are you sure you want to remove this Threat?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Remove Threat',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your threat has been removed',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.occ_threat,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your threat has been removed',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.threats_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateThreat: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Threat",
-                text: "Are you sure you want to Reinstate this Threat?",
-                icon: "question",
+                title: 'Reinstate Threat',
+                text: 'Are you sure you want to Reinstate this Threat?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Threat',
                 customClass: {
-                    confirmButton: 'btn btn-primary'
+                    confirmButton: 'btn btn-primary',
                 },
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your threat has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.occ_threat,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your threat has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.threats_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         updatedThreats() {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-edit-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-threat');
-                vm.editThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-threat');
-                vm.viewThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-threat');
-                vm.historyThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-threat');
+                    vm.editThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-threat');
+                    vm.viewThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-threat');
+                    vm.historyThreat(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-discard-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-threat');
-                vm.discardThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-threat');
+                    vm.discardThreat(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-reinstate-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-threat');
-                vm.reinstateThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-threat');
+                    vm.reinstateThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
index 2c91068b..fd15911b 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
@@ -1,30 +1,48 @@
 <template lang="html">
     <div id="speciesOccurrenceReport">
-        <FormSection :formCollapse="false" label="Occurrence Report" Index="occurrence_report">
-            <fieldset id="occurrence-report-profile-fieldset" @change="saveOccurrenceReport">
+        <FormSection
+            :form-collapse="false"
+            label="Occurrence Report"
+            Index="occurrence_report"
+        >
+            <fieldset
+                id="occurrence-report-profile-fieldset"
+                @change="saveOccurrenceReport"
+            >
                 <template v-if="!is_external">
-                    <CollapsibleComponent component_title="Assessment Comments" ref="assessment_comments"
-                        :collapsed="false">
+                    <CollapsibleComponent
+ref="assessment_comments" component_title="Assessment Comments"
+                        :collapsed="false"
+                    >
                         <div class="row">
                             <div class="col rounded">
                                 <div class="row">
                                     <div class="col">
                                         <div class="form-floating m-3">
-                                            <textarea :disabled="deficiency_readonly" class="form-control"
-                                                id="assessor_deficiencies" placeholder="Deficiency Comments"
-                                                v-model="occurrence_report_obj.deficiency_data" />
-                                            <label for="assessor_deficiencies" class="form-label">Deficiency
-                                                Comments</label>
+                                            <textarea
+id="assessor_deficiencies" v-model="occurrence_report_obj.deficiency_data"
+                                                :disabled="deficiency_readonly" class="form-control"
+                                                placeholder="Deficiency Comments" />
+                                            <label
+                                                for="assessor_deficiencies"
+                                                class="form-label"
+                                                >Deficiency Comments</label
+                                            >
                                         </div>
                                     </div>
                                 </div>
                                 <div class="row">
                                     <div class="col">
                                         <div class="form-floating m-3 mt-1">
-                                            <textarea :disabled="assessor_comment_readonly" class="form-control"
-                                                rows="3" id="assessor_comment" placeholder="Assessor Comments"
-                                                v-model="occurrence_report_obj.assessor_data" />
-                                            <label for="" class="col-sm-4 col-form-label">Assessor Comments</label>
+                                            <textarea
+id="assessor_comment" v-model="occurrence_report_obj.assessor_data"
+                                                :disabled="assessor_comment_readonly" class="form-control" rows="3"
+                                                placeholder="Assessor Comments" />
+                                            <label
+                                                for=""
+                                                class="col-sm-4 col-form-label"
+                                                >Assessor Comments</label
+                                            >
                                         </div>
                                     </div>
                                 </div>
@@ -32,22 +50,42 @@
                                     <div>
                                         <div class="row mt-2">
                                             <div class="col ms-3">
-                                                <h6 class="text-muted">Referral Comments</h6>
+                                                <h6 class="text-muted">
+                                                    Referral Comments
+                                                </h6>
                                             </div>
                                         </div>
-                                        <template v-for="ref in referral_comments_boxes">
+                                        <template
+                                            v-for="ref in referral_comments_boxes"
+                                        >
                                             <div class="row mb-3">
                                                 <div class="col">
-                                                    <div class="form-floating m-3 mt-1">
-                                                        <textarea v-if='!ref.readonly' :disabled="true" :id="ref.name"
-                                                            :name="ref.name" class="form-control"
-                                                            :placeholder="ref.label"
-                                                            v-model="referral.referral_comment" />
-                                                        <textarea v-else :disabled="true" :name="ref.name"
-                                                            :value="ref.value || ''" class="form-control"
+                                                    <div
+                                                        class="form-floating m-3 mt-1"
+                                                    >
+                                                        <textarea
+v-if='!ref.readonly' :id="ref.name" v-model="referral.referral_comment"
+                                                            :disabled="true"
+                                                            :name="ref.name"
+                                                            class="form-control"
                                                             :placeholder="ref.label" />
-                                                        <label :for="ref.name" class="form-label">{{ ref.label
-                                                            }}</label>
+                                                        <textarea
+v-else :disabled="true" :name="ref.name"
+                                                            :value="
+                                                                ref.value || ''
+                                                            "
+                                                            class="form-control"
+                                                            :placeholder="
+                                                                ref.label
+                                                            "
+                                                        />
+                                                        <label
+                                                            :for="ref.name"
+                                                            class="form-label"
+                                                            >{{
+                                                                ref.label
+                                                            }}</label
+                                                        >
                                                     </div>
                                                 </div>
                                             </div>
@@ -60,93 +98,149 @@
                 </template>
                 <div v-show="!isCommunity">
                     <div class="row mb-3">
-                        <label for="" class="col-sm-3 col-form-label fw-bold">Scientific Name: <span
-                                class="text-danger">*</span></label>
+                        <label for="" class="col-sm-3 col-form-label fw-bold"
+                            >Scientific Name:
+                            <span class="text-danger">*</span></label
+                        >
                         <div :id="select_scientific_name" class="col-sm-9">
-                            <select :id="scientific_name_lookup" :ref="scientific_name_lookup" :disabled="isReadOnly"
-                                :name="scientific_name_lookup" class="form-control" />
+                            <select
+:id="scientific_name_lookup" :ref="scientific_name_lookup" :disabled="isReadOnly"
+                                :name="scientific_name_lookup"
+                                class="form-control"
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
                         <label for="" class="col-sm-3 col-form-label"></label>
                         <div class="col-sm-9">
-                            <textarea id="species_display" v-model="species_display" disabled class="form-control"
-                                rows="2" />
+                            <textarea
+id="species_display" v-model="species_display" disabled class="form-control"
+                                rows="2"
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="" class="col-sm-3 col-form-label">Previous Name:</label>
+                        <label for="" class="col-sm-3 col-form-label"
+                            >Previous Name:</label
+                        >
                         <div class="col-sm-9">
-                            <input id="previous_name" v-model="taxon_previous_name" readonly type="text"
-                                class="form-control" placeholder="" />
+                            <input
+id="previous_name" v-model="taxon_previous_name" readonly type="text"
+                                class="form-control"
+                                placeholder=""
+                            />
                         </div>
                     </div>
                 </div>
                 <div v-show="isCommunity">
                     <div class="row mb-3">
-                        <label for="" class="col-sm-3 col-form-label">Community Name:</label>
+                        <label for="" class="col-sm-3 col-form-label"
+                            >Community Name:</label
+                        >
                         <div :id="select_community_name" class="col-sm-9">
-                            <select :id="community_name_lookup" :ref="community_name_lookup" :disabled="isReadOnly"
-                                :name="community_name_lookup" class="form-control" />
+                            <select
+:id="community_name_lookup" :ref="community_name_lookup" :disabled="isReadOnly"
+                                :name="community_name_lookup"
+                                class="form-control"
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
                         <label for="" class="col-sm-3 col-form-label"></label>
                         <div class="col-sm-9">
-                            <textarea id="community_display" v-model="community_display" disabled class="form-control"
-                                rows="2" />
+                            <textarea
+id="community_display" v-model="community_display" disabled class="form-control"
+                                rows="2"
+                            />
                         </div>
                     </div>
                 </div>
-                <div v-if="occurrence_report_obj.migrated_from_id" class="row mb-3">
-                    <label for="migrated_from_id" class="col-sm-3 col-form-label">Migrated From ID:</label>
+                <div
+                    v-if="occurrence_report_obj.migrated_from_id"
+                    class="row mb-3"
+                >
+                    <label
+                        for="migrated_from_id"
+                        class="col-sm-3 col-form-label"
+                        >Migrated From ID:</label
+                    >
                     <div class="col-sm-9">
-                        <input id="migrated_from_id" :value="occurrence_report_obj.migrated_from_id" disabled
-                            type="text" class="form-control" />
+                        <input
+id="migrated_from_id" :value="occurrence_report_obj.migrated_from_id" disabled
+                            type="text"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="row mb-3">
                     <label for="" class="col-sm-3 col-form-label">Site:</label>
                     <div class="col-sm-9">
-                        <textarea id="site" v-model="occurrence_report_obj.site
-                            " :disabled="isReadOnly" class="form-control" rows="1" placeholder="" />
+                        <textarea
+id="site" v-model="occurrence_report_obj.site
+                            :disabled="isReadOnly"
+                            class="form-control"
+                            rows="1"
+                            placeholder=""
+                        />
                     </div>
                 </div>
                 <template v-if="!is_external">
                     <div class="row mb-3">
-                        <label for="occurrence_report_is_for_occurrence_number" class="col-sm-3 col-form-label">OCR is
-                            for OCC Number:
-                            <HelpText section_id="occurrence_report_is_for_occurrence_number" />
+                        <label
+                            for="occurrence_report_is_for_occurrence_number"
+                            class="col-sm-3 col-form-label"
+                            >OCR is for OCC Number:
+                            <HelpText
+                                section_id="occurrence_report_is_for_occurrence_number"
+                            />
                         </label>
                         <div class="col-sm-9">
-                            <input id="occurrence_report_is_for_occurrence_number" type="text" v-model="occurrence_report_obj.ocr_for_occ_number
-                                " :disabled="isReadOnly" class="form-control" autocomplete="new-password" />
+                            <input
+id="occurrence_report_is_for_occurrence_number" v-model="occurrence_report_obj.ocr_for_occ_number
+                                " type="text" :disabled="isReadOnly" class="form-control" autocomplete="new-password" />
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="occurrence_report_for_occurrence_name" class="col-sm-3 col-form-label">Occurrence
-                            Name:
-                            <HelpText section_id="occurrence_report_for_occurrence_name" />
+                        <label
+                            for="occurrence_report_for_occurrence_name"
+                            class="col-sm-3 col-form-label"
+                            >Occurrence Name:
+                            <HelpText
+                                section_id="occurrence_report_for_occurrence_name"
+                            />
                         </label>
                         <div class="col-sm-9">
-                            <input id="occurrence_report_for_occurrence_name" type="text" v-model="occurrence_report_obj.ocr_for_occ_name
-                                " :disabled="isReadOnly" class="form-control" autocomplete="new-password" />
+                            <input
+id="occurrence_report_for_occurrence_name" v-model="occurrence_report_obj.ocr_for_occ_name
+                                " type="text" :disabled="isReadOnly" class="form-control" autocomplete="new-password" />
                         </div>
                     </div>
                 </template>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Observation Date: <span
-                            class="text-danger">*</span></label>
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Observation Date:
+                        <span class="text-danger">*</span></label
+                    >
                     <div class="col-sm-9">
-                        <input v-model="occurrence_report_obj.observation_date
-                            " :disabled="isReadOnly" type="datetime-local" class="form-control" name="start_date"
-                            @change="formatObservationDate()" />
+                        <input
+v-model="occurrence_report_obj.observation_date
+                            :disabled="isReadOnly"
+                            type="datetime-local"
+                            class="form-control"
+                            name="start_date"
+                            @change="formatObservationDate()"
+                        />
                     </div>
                 </div>
-                <ObserverDatatable ref="observer_datatable" :occurrence_report_obj="occurrence_report_obj"
-                    :is_external="is_external" :is-read-only="isReadOnly"
-                    :show_observer_contact_information="show_observer_contact_information"
-                    @refreshOccurrenceReport="refreshOccurrenceReport()">
+                <ObserverDatatable
+ref="observer_datatable" :occurrence_report_obj="occurrence_report_obj"
+                    :is_external="is_external"
+                    :is-read-only="isReadOnly"
+                    :show_observer_contact_information="
+                        show_observer_contact_information
+                    "
+                    @refresh-occurrence-report="refreshOccurrenceReport()"
+                >
                 </ObserverDatatable>
             </fieldset>
         </FormSection>
@@ -157,17 +251,19 @@
 import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import ObserverDatatable from './observer_datatable.vue';
-import CollapsibleComponent from '@/components/forms/collapsible_component.vue'
+import CollapsibleComponent from '@/components/forms/collapsible_component.vue';
 import HelpText from '@/components/common/help_text.vue';
 
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OccurrenceReportProfile',
+    components: {
+        FormSection,
+        HelpText,
+        ObserverDatatable,
+        CollapsibleComponent
+    },
     props: {
         occurrence_report_obj: {
             type: Object,
@@ -209,31 +305,107 @@ export default {
             referral_comments_boxes: [],
         }
     },
-    components: {
-        FormSection,
-        HelpText,
-        ObserverDatatable,
-        CollapsibleComponent
+    computed: {
+        isReadOnly: function () {
+            return this.occurrence_report_obj.readonly;
+        },
+        csrf_token: function () {
+            return helpers.getCookie('csrftoken');
+        },
+        deficiency_readonly: function () {
+            return !this.is_external &&
+                !this.occurrence_report_obj.can_user_edit &&
+                this.occurrence_report_obj.assessor_mode.assessor_level ==
+                    'assessor' &&
+                this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
+                !this.occurrence_report_obj.assessor_mode
+                    .status_without_assessor
+                ? false
+                : true;
+        },
+        assessor_comment_readonly: function () {
+            return !this.is_external &&
+                !this.occurrence_report_obj.can_user_edit &&
+                this.occurrence_report_obj.assessor_mode.assessor_level ==
+                    'assessor' &&
+                this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
+                !this.occurrence_report_obj.assessor_mode
+                    .status_without_assessor
+                ? false
+                : true;
+        },
     },
     watch: {
-        "occurrence_report_obj.observation_date": function () {
+        'occurrence_report_obj.observation_date': function () {
             let vm = this;
             if (vm.isFauna) {
-                if (vm.occurrence_report_obj && vm.occurrence_report_obj.animal_observation) {
-                    vm.occurrence_report_obj.animal_observation.count_date = vm.occurrence_report_obj.observation_date
+                if (
+                    vm.occurrence_report_obj &&
+                    vm.occurrence_report_obj.animal_observation
+                ) {
+                    vm.occurrence_report_obj.animal_observation.count_date =
+                        vm.occurrence_report_obj.observation_date;
                 }
-            }
-            else if (vm.isCommunity) {
-                if (vm.occurrence_report_obj && vm.occurrence_report_obj.habitat_condition) {
-                    vm.occurrence_report_obj.habitat_condition.count_date = vm.occurrence_report_obj.observation_date
+            } else if (vm.isCommunity) {
+                if (
+                    vm.occurrence_report_obj &&
+                    vm.occurrence_report_obj.habitat_condition
+                ) {
+                    vm.occurrence_report_obj.habitat_condition.count_date =
+                        vm.occurrence_report_obj.observation_date;
+                }
+            } else {
+                if (
+                    vm.occurrence_report_obj &&
+                    vm.occurrence_report_obj.plant_count
+                ) {
+                    vm.occurrence_report_obj.plant_count.count_date =
+                        vm.occurrence_report_obj.observation_date;
                 }
             }
-            else {
-                if (vm.occurrence_report_obj && vm.occurrence_report_obj.plant_count) {
-                    vm.occurrence_report_obj.plant_count.count_date = vm.occurrence_report_obj.observation_date
+        },
+    },
+    created: async function () {
+        let vm = this;
+        this.uuid = uuid();
+        //------fetch list of values according to action
+        let action = this.$route.query.action;
+        let dict_url =
+            action == 'view'
+                ? api_endpoints.cs_profile_dict +
+                '?group_type=' +
+                vm.occurrence_report_obj.group_type +
+                '&action=' +
+                action
+                : api_endpoints.cs_profile_dict +
+                '?group_type=' +
+                vm.occurrence_report_obj.group_type;
+        fetch(dict_url).then(async (response) => {
+                vm.cs_profile_dict = await response.json();
+                if (!vm.isCommunity) {
+                    this.getSpeciesDisplay();
+                }
+                else {
+                    this.getCommunityDisplay();
                 }
+            },
+            (error) => {
+                console.log(error);
             }
+        );
+        if (!vm.is_external) {
+            this.generateReferralCommentBoxes();
+        }
+    },
+    mounted: function () {
+        let vm = this;
+        if (!vm.is_external && vm.$refs.assessment_comments) {
+            vm.$refs.assessment_comments.show_warning_icon(false);
         }
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommunityNameLookup();
+        });
     },
     methods: {
         test: function () {
@@ -430,71 +602,7 @@ export default {
             }
         }
     },
-    created: async function () {
-        let vm = this;
-        this.uuid = uuid();
-        //------fetch list of values according to action
-        let action = this.$route.query.action;
-        let dict_url =
-            action == 'view'
-                ? api_endpoints.cs_profile_dict +
-                '?group_type=' +
-                vm.occurrence_report_obj.group_type +
-                '&action=' +
-                action
-                : api_endpoints.cs_profile_dict +
-                '?group_type=' +
-                vm.occurrence_report_obj.group_type;
-        fetch(dict_url).then(async (response) => {
-                vm.cs_profile_dict = await response.json();
-                if (!vm.isCommunity) {
-                    this.getSpeciesDisplay();
-                }
-                else {
-                    this.getCommunityDisplay();
-                }
-            },
-            (error) => {
-                console.log(error);
-            }
-        );
-        if (!vm.is_external) {
-            this.generateReferralCommentBoxes();
-        }
-    },
-    computed: {
-        isReadOnly: function () {
-            return this.occurrence_report_obj.readonly
-        },
-        csrf_token: function () {
-            return helpers.getCookie('csrftoken');
-        },
-        deficiency_readonly: function () {
-            return !this.is_external &&
-                !this.occurrence_report_obj.can_user_edit &&
-                this.occurrence_report_obj.assessor_mode.assessor_level == 'assessor' &&
-                this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
-                !this.occurrence_report_obj.assessor_mode.status_without_assessor ? false : true;
-        },
-        assessor_comment_readonly: function () {
-            return !this.is_external &&
-                !this.occurrence_report_obj.can_user_edit &&
-                this.occurrence_report_obj.assessor_mode.assessor_level == 'assessor' &&
-                this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
-                !this.occurrence_report_obj.assessor_mode.status_without_assessor ? false : true
-        },
-    },
-    mounted: function () {
-        let vm = this;
-        if (!vm.is_external && vm.$refs.assessment_comments) {
-            vm.$refs.assessment_comments.show_warning_icon(false);
-        }
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommunityNameLookup();
-        });
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -514,13 +622,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
index 5b4b49c8..857c87ee 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
@@ -1,89 +1,112 @@
 <template lang="html">
     <div id="ocr_documents">
-        <FormSection :formCollapse="false" label="Documents" Index="documents">
-            <alert type="warning"><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload Management or Recovery Plans here</alert>
+        <FormSection :form-collapse="false" label="Documents" Index="documents">
+            <alert type="warning"
+                ><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload
+                Management or Recovery Plans here</alert
+            >
             <form class="form-horizontal" action="index.html" method="post">
                 <div v-if="!isReadOnly" class="col-sm-12">
                     <div class="text-end">
-                        <button type="button" class="btn btn-primary mb-2 "
-                            @click.prevent="newDocument">
+                        <button
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newDocument"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Document
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                        :dtHeaders="documents_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="documents_datatable"
+                        :dt-options="documents_options"
+                        :dt-headers="documents_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <DocumentDetail ref="document_detail" @refreshFromResponse="refreshFromResponse" :url="ocr_document_url"
-            :is_internal="is_internal">
+        <DocumentDetail
+            ref="document_detail"
+            :url="ocr_document_url"
+            :is_internal="is_internal"
+            @refresh-from-response="refreshFromResponse"
+        >
         </DocumentDetail>
-        <ViewDocument ref="view_document" :is_internal="is_internal"></ViewDocument>
+        <ViewDocument
+            ref="view_document"
+            :is_internal="is_internal"
+        ></ViewDocument>
         <div v-if="occurenceReportDocumentHistoryId">
-            <OccurenceReportDocumentHistory ref="ocr_document_history" :key="occurenceReportDocumentHistoryId"
-                :document-id="occurenceReportDocumentHistoryId" :occurrence-report-id="occurrence_report_obj.id" />
+            <OccurenceReportDocumentHistory
+                ref="ocr_document_history"
+                :key="occurenceReportDocumentHistoryId"
+                :document-id="occurenceReportDocumentHistoryId"
+                :occurrence-report-id="occurrence_report_obj.id"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
-import ViewDocument from '@/components/common/view_document.vue'
-import DocumentDetail from '@/components/common/add_document.vue'
+import ViewDocument from '@/components/common/view_document.vue';
+import DocumentDetail from '@/components/common/add_document.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import OccurenceReportDocumentHistory from '../../internal/occurrence/ocr_document_history.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OCRDocuments',
+    components: {
+        alert,
+        FormSection,
+        datatable,
+        DocumentDetail,
+        OccurenceReportDocumentHistory,
+        ViewDocument,
+    },
     props: {
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
-    components: {
-        alert,
-        FormSection,
-        datatable,
-        DocumentDetail,
-        OccurenceReportDocumentHistory,
-        ViewDocument,
-    },
     data: function () {
         let vm = this;
         return {
             uuid: 0,
             occurenceReportDocumentHistoryId: null,
-            panelBody: "ocr-documents-" + vm._uid,
+            panelBody: 'ocr-documents-' + vm._uid,
             values: null,
             ocr_document_url: api_endpoints.occurrence_report_documents,
-            documents_headers: ['Number', 'Category', 'Sub Category', 'Document', 'Description', 'Date/Time', 'Action'],
+            documents_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
             documents_options: {
                 autowidth: true,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -93,11 +116,15 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report_obj.id + '/documents'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.occurrence_report,
+                        vm.occurrence_report_obj.id + '/documents'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -107,8 +134,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -116,93 +143,124 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "document_number",
+                        data: 'document_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_number;
-                            }
-                            else {
-                                return '<s>' + full.document_number + '</s>'
+                            } else {
+                                return '<s>' + full.document_number + '</s>';
                             }
                         },
                     },
                     {
-                        data: "document_category_name",
+                        data: 'document_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "document_sub_category_name",
+                        data: 'document_sub_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_sub_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_sub_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "name",
+                        data: 'name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.active) {
                                 let value = full.name;
-                                let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                links += '<span><a href="' + full._file + '" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
                             } else {
                                 let value = full.name;
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                links += type == 'export' ? value : '<s>' + result + '</s>';
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
                             }
                             return links;
                         },
                     },
                     {
-                        data: "description",
+                        data: 'description',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.active) {
                                 return type == 'export' ? value : result;
                             } else {
-                                return type == 'export' ? value : '<s>' + result + '</s>';
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "uploaded_date",
+                        data: 'uploaded_date',
                         mRender: function (data, type, full) {
                             if (full.active) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
                             } else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY HH:mm') + '</s>' : '';
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             // to restrict submitter to edit doc when the report is in workflow
@@ -211,8 +269,7 @@ export default {
                                 if (full.active) {
                                     links += `<a href='#${full.id}' data-edit-document='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-document='${full.id}'>Discard</a><br>`;
-                                }
-                                else {
+                                } else {
                                     links += `<a href='#' data-reinstate-document='${full.id}'>Reinstate</a><br>`;
                                 }
                             }
@@ -220,7 +277,7 @@ export default {
                                 links += `<a href='#' data-history-document='${full.id}'>History</a><br>`;
                             }
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -235,8 +292,8 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
+            },
+        };
     },
     computed: {
         isReadOnly: function () {
@@ -244,9 +301,15 @@ export default {
             if (this.is_readonly) {
                 return this.is_readonly;
             }
-            return this.occurrence_report_obj.readonly
+            return this.occurrence_report_obj.readonly;
         },
     },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         viewDocument: function (document) {
             this.$refs.view_document.document = document;
@@ -264,7 +327,7 @@ export default {
                 document_sub_category: '',
                 uploaded_date: null,
                 can_submitter_access: false,
-            }
+            };
             this.$refs.document_detail.documentObj = new_document_another;
             this.$refs.document_detail.uploaded_document = [];
             this.$refs.document_detail.document_action = 'add';
@@ -276,18 +339,32 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.document_detail.documentObj = data;
-                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [data];
-                //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(data.document_category);
-
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report_documents,
+                    id
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.document_detail.documentObj = data;
+                    this.$refs.document_detail.documentObj.uploaded_date =
+                        data.uploaded_date != null &&
+                        data.uploaded_date != undefined
+                            ? moment(data.uploaded_date).format(
+                                  'yyyy-MM-DDTHH:mm'
+                              )
+                            : '';
+                    this.$refs.document_detail.uploaded_document = [data];
+                    //-----this method is called as it wasn't fetching subcategory
+                    this.$refs.document_detail.fetchSubCategory(
+                        data.document_category
+                    );
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.document_detail.isModalOpen = true;
         },
         historyDocument: function (id) {
@@ -300,9 +377,9 @@ export default {
         discardDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Document",
-                text: "Are you sure you want to discard this Document?",
-                icon: "question",
+                title: 'Discard Document',
+                text: 'Are you sure you want to discard this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Document',
                 customClass: {
@@ -312,11 +389,17 @@ export default {
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
+                    fetch(
+                        helpers.add_endpoint_json(
+                            api_endpoints.occurrence_report_documents,
+                            id + '/discard'
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: { 'Content-Type': 'application/json' },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'The document has been discarded',
@@ -326,22 +409,27 @@ export default {
                                 },
                             }).then((result) => {
                                 vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                                if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+                                if (
+                                    vm.occurrence_report_obj
+                                        .processing_status == 'Unlocked'
+                                ) {
                                     vm.$router.go();
                                 }
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         reinstateDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Document",
-                text: "Are you sure you want to Reinstate this Document?",
-                icon: "question",
+                title: 'Reinstate Document',
+                text: 'Are you sure you want to Reinstate this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Document',
                 customClass: {
@@ -350,11 +438,17 @@ export default {
                 },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report_documents, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
+                    fetch(
+                        helpers.add_endpoint_json(
+                            api_endpoints.occurrence_report_documents,
+                            id + '/reinstate'
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: { 'Content-Type': 'application/json' },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your document has been reinstated',
@@ -364,69 +458,96 @@ export default {
                                 },
                             }).then((result) => {
                                 vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                                if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+                                if (
+                                    vm.occurrence_report_obj
+                                        .processing_status == 'Unlocked'
+                                ) {
                                     vm.$router.go();
                                 }
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         updatedDocuments() {
             let vm = this;
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
-            if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+            if (vm.occurrence_report_obj.processing_status == 'Unlocked') {
                 vm.$router.go();
             }
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-view-document]', function (e) {
-                e.preventDefault();
-                var document = vm.$refs.documents_datatable.vmDataTable.row($(this).parent()).data();
-                vm.viewDocument(document);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-edit-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-document');
-                vm.editDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-history-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-document');
-                vm.historyDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-document]',
+                function (e) {
+                    e.preventDefault();
+                    var document = vm.$refs.documents_datatable.vmDataTable
+                        .row($(this).parent())
+                        .data();
+                    vm.viewDocument(document);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-document');
+                    vm.editDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-document');
+                    vm.historyDocument(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-discard-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-document');
-                vm.discardDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-document');
+                    vm.discardDocument(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-reinstate-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-document');
-                vm.reinstateDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-document');
+                    vm.reinstateDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.documents_datatable !== undefined) { this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    },
-
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
index fa99646e..677cbe2e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
@@ -1,12 +1,27 @@
 <template lang="html">
     <div id="habitat">
-        <FormSection :formCollapse="false" label="Habitat Composition" :Index="habitatCompositionBody">
+        <FormSection
+            :form-collapse="false"
+            label="Habitat Composition"
+            :Index="habitatCompositionBody"
+        >
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Land Form:</label>
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" style="width:100%;" class="form-select input-sm"
-                        ref="land_form_select" v-model="occurrence_report_obj.habitat_composition.land_form">
-                        <option v-for="option in land_form_list" :value="option.id" :key="option.id">
+                    <select
+                        ref="land_form_select"
+                        v-model="
+                            occurrence_report_obj.habitat_composition.land_form
+                        "
+                        :disabled="isReadOnly"
+                        style="width: 100%"
+                        class="form-select input-sm"
+                    >
+                        <option
+                            v-for="option in land_form_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
@@ -17,29 +32,83 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="rock_type_list && rock_type_list.length > 0 && occurrence_report_obj.habitat_composition.rock_type_id && !rock_type_list.map((d) => d.id).includes(occurrence_report_obj.habitat_composition.rock_type_id)">
-                            <input type="text" v-if="occurrence_report_obj.habitat_composition.rock_type" class="form-control mb-3"
-                                :value="occurrence_report_obj.habitat_composition.rock_type + ' (Now Archived)'" disabled />
+                            v-if="
+                                rock_type_list &&
+                                rock_type_list.length > 0 &&
+                                occurrence_report_obj.habitat_composition
+                                    .rock_type_id &&
+                                !rock_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj
+                                            .habitat_composition.rock_type_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.habitat_composition
+                                        .rock_type
+                                "
+                                type="text"
+                                class="form-control mb-3"
+                                :value="
+                                    occurrence_report_obj.habitat_composition
+                                        .rock_type + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change rock type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.habitat_composition.rock_type_id">
-                            <option v-for="rock_type in rock_type_list" :value="rock_type.id" v-bind:key="rock_type.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .rock_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="rock_type in rock_type_list"
+                                :key="rock_type.id"
+                                :value="rock_type.id"
+                            >
                                 {{ rock_type.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly" v-model="occurrence_report_obj.habitat_composition.rock_type" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .rock_type
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Loose Rock % :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Loose Rock % :</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="loose_rock_per" placeholder=""
-                        min="0" max="100" v-model="occurrence_report_obj.habitat_composition.loose_rock_percent" />
+                    <input
+                        id="loose_rock_per"
+                        v-model="
+                            occurrence_report_obj.habitat_composition
+                                .loose_rock_percent
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -47,67 +116,195 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="soil_type_list && soil_type_list.length > 0 && occurrence_report_obj.habitat_composition.soil_type_id && !soil_type_list.map((d) => d.id).includes(occurrence_report_obj.habitat_composition.soil_type_id)">
-                            <input type="text" v-if="occurrence_report_obj.habitat_composition.soil_type" class="form-control mb-3"
-                                :value="occurrence_report_obj.habitat_composition.soil_type + ' (Now Archived)'" disabled />
+                            v-if="
+                                soil_type_list &&
+                                soil_type_list.length > 0 &&
+                                occurrence_report_obj.habitat_composition
+                                    .soil_type_id &&
+                                !soil_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj
+                                            .habitat_composition.soil_type_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.habitat_composition
+                                        .soil_type
+                                "
+                                type="text"
+                                class="form-control mb-3"
+                                :value="
+                                    occurrence_report_obj.habitat_composition
+                                        .soil_type + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change soil type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.habitat_composition.soil_type_id">
-                            <option v-for="soil_type in soil_type_list" :value="soil_type.id" v-bind:key="soil_type.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .soil_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="soil_type in soil_type_list"
+                                :key="soil_type.id"
+                                :value="soil_type.id"
+                            >
                                 {{ soil_type.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly" v-model="occurrence_report_obj.habitat_composition.soil_type" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .soil_type
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Soil Colour:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Soil Colour:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="soil_colour_list && soil_colour_list.length > 0 && occurrence_report_obj.habitat_composition.soil_colour_id && !soil_colour_list.map((d) => d.id).includes(occurrence_report_obj.habitat_composition.soil_colour_id)">
-                            <input colour="text" v-if="occurrence_report_obj.habitat_composition.soil_colour" class="form-control mb-3"
-                                :value="occurrence_report_obj.habitat_composition.soil_colour + ' (Now Archived)'" disabled />
+                            v-if="
+                                soil_colour_list &&
+                                soil_colour_list.length > 0 &&
+                                occurrence_report_obj.habitat_composition
+                                    .soil_colour_id &&
+                                !soil_colour_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj
+                                            .habitat_composition.soil_colour_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.habitat_composition
+                                        .soil_colour
+                                "
+                                colour="text"
+                                class="form-control mb-3"
+                                :value="
+                                    occurrence_report_obj.habitat_composition
+                                        .soil_colour + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change soil colour to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.habitat_composition.soil_colour_id">
-                            <option v-for="soil_colour in soil_colour_list" :value="soil_colour.id" v-bind:key="soil_colour.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .soil_colour_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="soil_colour in soil_colour_list"
+                                :key="soil_colour.id"
+                                :value="soil_colour.id"
+                            >
                                 {{ soil_colour.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" colour="text" :disabled="isReadOnly" v-model="occurrence_report_obj.habitat_composition.soil_colour" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .soil_colour
+                            "
+                            class="form-control"
+                            colour="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Soil Condition:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Soil Condition:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="soil_condition_list && soil_condition_list.length > 0 && occurrence_report_obj.habitat_composition.soil_condition_id && !soil_condition_list.map((d) => d.id).includes(occurrence_report_obj.habitat_composition.soil_condition_id)">
-                            <input type="text" v-if="occurrence_report_obj.habitat_composition.soil_condition" class="form-control mb-3"
-                                :value="occurrence_report_obj.habitat_composition.soil_condition + ' (Now Archived)'" disabled />
+                            v-if="
+                                soil_condition_list &&
+                                soil_condition_list.length > 0 &&
+                                occurrence_report_obj.habitat_composition
+                                    .soil_condition_id &&
+                                !soil_condition_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj
+                                            .habitat_composition
+                                            .soil_condition_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.habitat_composition
+                                        .soil_condition
+                                "
+                                type="text"
+                                class="form-control mb-3"
+                                :value="
+                                    occurrence_report_obj.habitat_composition
+                                        .soil_condition + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change soil condition to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.habitat_composition.soil_condition_id">
-                            <option v-for="soil_condition in soil_condition_list" :value="soil_condition.id" v-bind:key="soil_condition.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .soil_condition_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="soil_condition in soil_condition_list"
+                                :key="soil_condition.id"
+                                :value="soil_condition.id"
+                            >
                                 {{ soil_condition.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly" v-model="occurrence_report_obj.habitat_composition.soil_condition" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .soil_condition
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -116,182 +313,425 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="drainage_list && drainage_list.length > 0 && occurrence_report_obj.habitat_composition.drainage_id && !drainage_list.map((d) => d.id).includes(occurrence_report_obj.habitat_composition.drainage_id)">
-                            <input type="text" v-if="occurrence_report_obj.habitat_composition.drainage"
+                            v-if="
+                                drainage_list &&
+                                drainage_list.length > 0 &&
+                                occurrence_report_obj.habitat_composition
+                                    .drainage_id &&
+                                !drainage_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj
+                                            .habitat_composition.drainage_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.habitat_composition
+                                        .drainage
+                                "
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_report_obj.habitat_composition.drainage + ' (Now Archived)'"
-                                disabled />
+                                :value="
+                                    occurrence_report_obj.habitat_composition
+                                        .drainage + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change drainage to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.habitat_composition.drainage_id">
-                            <option v-for="drainage in drainage_list" :value="drainage.id"
-                                v-bind:key="drainage.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .drainage_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="drainage in drainage_list"
+                                :key="drainage.id"
+                                :value="drainage.id"
+                            >
                                 {{ drainage.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.habitat_composition.drainage" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.habitat_composition
+                                    .drainage
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Water Quality:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Water Quality:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" class="form-control" placeholder=""
-                        v-model="occurrence_report_obj.habitat_composition.water_quality" />
+                    <textarea
+                        v-model="
+                            occurrence_report_obj.habitat_composition
+                                .water_quality
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Habitat Notes:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Habitat Notes:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" class="form-control" placeholder=""
-                        v-model="occurrence_report_obj.habitat_composition.habitat_notes" />
+                    <textarea
+                        v-model="
+                            occurrence_report_obj.habitat_composition
+                                .habitat_notes
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingHabitatCompositionDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingHabitatCompositionDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingHabitatCompositionDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateHabitatCompositionDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateHabitatCompositionDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
-        <FormSection :formCollapse="false" label="Habitat Condition" :Index="habitatConditionBody">
-            <label for="" class="col-lg-3 control-label fs-5 fw-bold">Keighery Scale</label>
+        <FormSection
+            :form-collapse="false"
+            label="Habitat Condition"
+            :Index="habitatConditionBody"
+        >
+            <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+                >Keighery Scale</label
+            >
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Pristine %:</label>
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="pristine"
-                        placeholder="" min="0" max="100" v-model="occurrence_report_obj.habitat_condition.pristine"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+                        id="pristine"
+                        v-model="
+                            occurrence_report_obj.habitat_condition.pristine
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Excellent %:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Excellent %:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="excellent"
-                        placeholder="" min="0" max="100" v-model="occurrence_report_obj.habitat_condition.excellent"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+                        id="excellent"
+                        v-model="
+                            occurrence_report_obj.habitat_condition.excellent
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Very Good %:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Very Good %:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="very_good"
-                        placeholder="" min="0" max="100" v-model="occurrence_report_obj.habitat_condition.very_good"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+                        id="very_good"
+                        v-model="
+                            occurrence_report_obj.habitat_condition.very_good
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Good %:</label>
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="good" placeholder=""
-                        min="0" max="100" v-model="occurrence_report_obj.habitat_condition.good"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+                        id="good"
+                        v-model="occurrence_report_obj.habitat_condition.good"
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Degraded %:</label>
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="degraded"
-                        placeholder="" min="0" max="100" v-model="occurrence_report_obj.habitat_condition.degraded"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+                        id="degraded"
+                        v-model="
+                            occurrence_report_obj.habitat_condition.degraded
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Completely Degraded %:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Completely Degraded %:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="completely_degraded"
-                        placeholder="" min="0" max="100"
-                        v-model="occurrence_report_obj.habitat_condition.completely_degraded"
-                        @change.prevent="calcKeigheryTotal()" />
+                    <input
+                        id="completely_degraded"
+                        v-model="
+                            occurrence_report_obj.habitat_condition
+                                .completely_degraded
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                        max="100"
+                        @change.prevent="calcKeigheryTotal()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label"></label>
                 <div class="col-sm-6">
-                    <input readonly type="text" class="form-control ocr_number" id="habitat_cond_sum" placeholder=""
-                        v-model="habitat_cond_sum" />
+                    <input
+                        id="habitat_cond_sum"
+                        v-model="habitat_cond_sum"
+                        readonly
+                        type="text"
+                        class="form-control ocr_number"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="occurrence_report_obj.group_type=='community'" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Count Date: </label>
+            <div
+                v-if="occurrence_report_obj.group_type == 'community'"
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-3 control-label"
+                    >Count Date:
+                </label>
                 <div class="col-sm-9">
-                    <input v-model="occurrence_report_obj.habitat_condition.count_date
-                        " :disabled="true" type="datetime-local" class="form-control" name="count_date" />
+                    <input
+                        v-model="
+                            occurrence_report_obj.habitat_condition.count_date
+                        "
+                        :disabled="true"
+                        type="datetime-local"
+                        class="form-control"
+                        name="count_date"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingHabitatConditionDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingHabitatConditionDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateHabitatConditionDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateHabitatConditionDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
-        <FormSection :formCollapse="false" label="Vegetation Structure" :Index="vegetationStructureBody">
+        <FormSection
+            :form-collapse="false"
+            label="Vegetation Structure"
+            :Index="vegetationStructureBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 1:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 1:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_1" placeholder=""
-                        v-model="occurrence_report_obj.vegetation_structure.vegetation_structure_layer_one" />
+                    <textarea
+                        id="vegetation_structure_text_1"
+                        v-model="
+                            occurrence_report_obj.vegetation_structure
+                                .vegetation_structure_layer_one
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 2:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 2:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_2" placeholder=""
-                        v-model="occurrence_report_obj.vegetation_structure.vegetation_structure_layer_two" />
+                    <textarea
+                        id="vegetation_structure_text_2"
+                        v-model="
+                            occurrence_report_obj.vegetation_structure
+                                .vegetation_structure_layer_two
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 3:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 3:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_3" placeholder=""
-                        v-model="occurrence_report_obj.vegetation_structure.vegetation_structure_layer_three" />
+                    <textarea
+                        id="vegetation_structure_text_3"
+                        v-model="
+                            occurrence_report_obj.vegetation_structure
+                                .vegetation_structure_layer_three
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-6 control-label">Vegetation Structure - Layer 4:</label>
+                <label for="" class="col-sm-6 control-label"
+                    >Vegetation Structure - Layer 4:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="vegetation_structure_text_4" placeholder=""
-                        v-model="occurrence_report_obj.vegetation_structure.vegetation_structure_layer_four" />
+                    <textarea
+                        id="vegetation_structure_text_4"
+                        v-model="
+                            occurrence_report_obj.vegetation_structure
+                                .vegetation_structure_layer_four
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingVegetationStructure" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingVegetationStructure"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateVegetationStructure()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateVegetationStructure()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
-        <FormSection :formCollapse="false" label="Fire History" :Index="fireHistoryBody">
-            <label for="" class="col-lg-3 control-label fs-5 fw-bold">Last Fire History</label>
+        <FormSection
+            :form-collapse="false"
+            label="Fire History"
+            :Index="fireHistoryBody"
+        >
+            <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+                >Last Fire History</label
+            >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Last Fire Estimate:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Last Fire Estimate:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="month" class="form-control" name="last_fire_date"
-                        ref="last_fire_date" @change="checkDate()"
-                        v-model="occurrence_report_obj.fire_history.last_fire_estimate" />
+                    <input
+                        ref="last_fire_date"
+                        v-model="
+                            occurrence_report_obj.fire_history
+                                .last_fire_estimate
+                        "
+                        :disabled="isReadOnly"
+                        type="month"
+                        class="form-control"
+                        name="last_fire_date"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -299,63 +739,147 @@
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="intensity_list && intensity_list.length > 0 && occurrence_report_obj.fire_history.intensity_id && !intensity_list.map((d) => d.id).includes(occurrence_report_obj.fire_history.intensity_id)">
-                            <input type="text" v-if="occurrence_report_obj.fire_history.intensity" class="form-control mb-3"
-                                :value="occurrence_report_obj.fire_history.intensity + ' (Now Archived)'" disabled />
+                            v-if="
+                                intensity_list &&
+                                intensity_list.length > 0 &&
+                                occurrence_report_obj.fire_history
+                                    .intensity_id &&
+                                !intensity_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.fire_history
+                                            .intensity_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.fire_history.intensity
+                                "
+                                type="text"
+                                class="form-control mb-3"
+                                :value="
+                                    occurrence_report_obj.fire_history
+                                        .intensity + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change intensity to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.fire_history.intensity_id">
-                            <option v-for="intensity in intensity_list" :value="intensity.id" v-bind:key="intensity.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.fire_history.intensity_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="intensity in intensity_list"
+                                :key="intensity.id"
+                                :value="intensity.id"
+                            >
                                 {{ intensity.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.fire_history.intensity" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.fire_history.intensity
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Comments :</label>
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="fire_history_comment"
-                        placeholder="" v-model="occurrence_report_obj.fire_history.comment" />
+                    <textarea
+                        id="fire_history_comment"
+                        v-model="occurrence_report_obj.fire_history.comment"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingFireHistoryDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingFireHistoryDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateFireHistoryDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateFireHistoryDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
-        <FormSection :formCollapse="false" label="Associated Species" :Index="associatedSpeciesBody">
-            <RelatedSpecies :isReadOnly="isReadOnly" ref="related_species"
-                :occurrence_report_obj=occurrence_report_obj />
+        <FormSection
+            :form-collapse="false"
+            label="Associated Species"
+            :Index="associatedSpeciesBody"
+        >
+            <RelatedSpecies
+                ref="related_species"
+                :is-read-only="isReadOnly"
+                :occurrence_report_obj="occurrence_report_obj"
+            />
             <div class="row mb-3">
                 <div class="col-sm-3">
-                    <label for="related_species" class="control-label">Comment</label>
+                    <label for="related_species" class="control-label"
+                        >Comment</label
+                    >
                 </div>
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="related_species"
-                        placeholder="" v-model="occurrence_report_obj.associated_species.comment" />
+                    <textarea
+                        id="related_species"
+                        v-model="
+                            occurrence_report_obj.associated_species.comment
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingAssociatedSpeciesDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingAssociatedSpeciesDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateAssociatedSpeciesDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateAssociatedSpeciesDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
@@ -363,29 +887,28 @@
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import RelatedSpecies from '@/components/common/occurrence/ocr_related_species_table.vue'
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import RelatedSpecies from '@/components/common/occurrence/ocr_related_species_table.vue';
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'OCRHabitat',
+    components: {
+        FormSection,
+        RelatedSpecies,
+    },
     props: {
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -397,7 +920,8 @@ export default {
             fireHistoryBody: 'fireHistoryBody' + vm._uid,
             associatedSpeciesBody: 'associatedSpeciesBody' + vm._uid,
             //---to show fields related to Fauna
-            isFauna: vm.occurrence_report_obj.group_type === "fauna" ? true : false,
+            isFauna:
+                vm.occurrence_report_obj.group_type === 'fauna' ? true : false,
             //----list of values dictionary
             listOfValuesDict: {},
             //scientific_name_list: [],
@@ -414,11 +938,7 @@ export default {
             updatingVegetationStructure: false,
             updatingFireHistoryDetails: false,
             updatingAssociatedSpeciesDetails: false,
-        }
-    },
-    components: {
-        FormSection,
-        RelatedSpecies,
+        };
     },
     computed: {
         isReadOnly: function () {
@@ -426,7 +946,7 @@ export default {
             if (this.is_readonly) {
                 return this.is_readonly;
             }
-            return this.occurrence_report_obj.readonly
+            return this.occurrence_report_obj.readonly;
         },
     },
     watch: {
@@ -441,255 +961,410 @@ export default {
         //         }
         // },
     },
+    created: async function () {
+        let vm = this;
+        //------fetch list of values
+        const response = await fetch(
+            '/api/occurrence_report/list_of_values.json'
+        );
+        vm.listOfValuesDict = await response.json();
+        vm.land_form_list = vm.listOfValuesDict.land_form_list;
+        vm.land_form_list.splice(0, 0, {
+            id: '',
+            name: '',
+        });
+        vm.rock_type_list = vm.listOfValuesDict.rock_type_list;
+        vm.rock_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.soil_type_list = vm.listOfValuesDict.soil_type_list;
+        vm.soil_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.soil_colour_list = vm.listOfValuesDict.soil_colour_list;
+        vm.soil_colour_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.soil_condition_list = vm.listOfValuesDict.soil_condition_list;
+        vm.soil_condition_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.drainage_list = vm.listOfValuesDict.drainage_list;
+        vm.drainage_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.intensity_list = vm.listOfValuesDict.intensity_list;
+        vm.intensity_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+    },
+    mounted: function () {
+        let vm = this;
+        vm.eventListeners();
+        vm.initialiseLandFormSelect();
+        vm.calcKeigheryTotal();
+    },
     methods: {
         eventListeners: function () {
             let vm = this;
-            $(vm.$refs.flowering_period_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Flowering Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.flowering_period_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Flowering Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_report_obj.conservation_attributes.flowering_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.occurrence_report_obj.conservation_attributes.flowering_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_report_obj.conservation_attributes.flowering_period = selected.val();
+                    vm.occurrence_report_obj.conservation_attributes.flowering_period =
+                        selected.val();
                 });
         },
         checkDate: function () {
             let vm = this;
             if (vm.$refs.last_fire_date.value) {
-                vm.occurrence_report_obj.fire_history.last_fire_estimate = vm.$refs.last_fire_date.value;
-            }
-            else {
+                vm.occurrence_report_obj.fire_history.last_fire_estimate =
+                    vm.$refs.last_fire_date.value;
+            } else {
                 vm.occurrence_report_obj.fire_history.last_fire_estimate = null;
             }
         },
         relatedSpeciesTextChanged: function (new_text) {
-            this.occurrence_report_obj.associated_species.related_species = new_text
+            this.occurrence_report_obj.associated_species.related_species =
+                new_text;
         },
         initialiseLandFormSelect: function () {
             let vm = this;
             // Initialise select2 for proposed Conservation Criteria
-            $(vm.$refs.land_form_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Land Form",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.land_form_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Land Form',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_report_obj.habitat_composition.land_form = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.occurrence_report_obj.habitat_composition.land_form =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_report_obj.habitat_composition.land_form = selected.val();
+                    vm.occurrence_report_obj.habitat_composition.land_form =
+                        selected.val();
                 });
         },
         updateHabitatCompositionDetails: function () {
             let vm = this;
             vm.updatingHabitatCompositionDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_habitat_composition_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_report_obj.habitat_composition)
-            }).then(async (response) => {
-                vm.updatingHabitatCompositionDetails = false;
-                vm.occurrence_report_obj.habitat_composition = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Habitat Composition details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                }).then((result) => {
-                    if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Habitat Composition details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report_obj.id +
+                        '/update_habitat_composition_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingHabitatCompositionDetails = false;
-            });
+                    body: JSON.stringify(
+                        vm.occurrence_report_obj.habitat_composition
+                    ),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingHabitatCompositionDetails = false;
+                    vm.occurrence_report_obj.habitat_composition =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Habitat Composition details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((result) => {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
+                            vm.$router.go();
+                        }
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Habitat Composition details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingHabitatCompositionDetails = false;
+                }
+            );
         },
         updateHabitatConditionDetails: function () {
             let vm = this;
             var valKeigheryTotal = vm.calcKeigheryTotal();
             if (valKeigheryTotal) {
                 vm.updatingHabitatConditionDetails = true;
-                fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_habitat_condition_details')), {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.occurrence_report,
+                        vm.occurrence_report_obj.id +
+                            '/update_habitat_condition_details'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(
+                            vm.occurrence_report_obj.habitat_condition
+                        ),
+                    }
+                ).then(
+                    async (response) => {
+                        vm.updatingHabitatConditionDetails = false;
+                        vm.occurrence_report_obj.habitat_condition =
+                            await response.json();
+                        swal.fire({
+                            title: 'Saved',
+                            text: 'Habitat Condition details have been saved',
+                            icon: 'success',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        }).then((result) => {
+                            if (
+                                vm.occurrence_report_obj.processing_status ==
+                                'Unlocked'
+                            ) {
+                                vm.$router.go();
+                            }
+                        });
+                    },
+                    (error) => {
+                        var text = helpers.apiVueResourceError(error);
+                        swal.fire({
+                            title: 'Error',
+                            text:
+                                'Habitat Condition details cannot be saved because of the following error: ' +
+                                text,
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        }).then((result) => {
+                            if (
+                                vm.occurrence_report_obj.processing_status ==
+                                'Unlocked'
+                            ) {
+                                vm.$router.go();
+                            }
+                        });
+                        vm.updatingHabitatConditionDetails = false;
+                    }
+                );
+            }
+        },
+        updateVegetationStructure: function () {
+            let vm = this;
+            vm.updatingVegetationStructure = true;
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report_obj.id + '/update_vegetation_structure'
+                ),
+                {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(vm.occurrence_report_obj.habitat_condition)
-                }).then(async (response) => {
-                    vm.updatingHabitatConditionDetails = false;
-                    vm.occurrence_report_obj.habitat_condition = await response.json();
+                    body: JSON.stringify(
+                        vm.occurrence_report_obj.vegetation_structure
+                    ),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingVegetationStructure = false;
+                    vm.occurrence_report_obj.vegetation_structure =
+                        await response.json();
                     swal.fire({
                         title: 'Saved',
-                        text: 'Habitat Condition details have been saved',
+                        text: 'Vegetation Structure details have been saved',
                         icon: 'success',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
+                            confirmButton: 'btn btn-primary',
                         },
                     }).then((result) => {
-                        if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
                             vm.$router.go();
                         }
                     });
-                }, (error) => {
+                },
+                (error) => {
                     var text = helpers.apiVueResourceError(error);
                     swal.fire({
                         title: 'Error',
-                        text: 'Habitat Condition details cannot be saved because of the following error: ' + text,
+                        text:
+                            'Vegetation Structure details cannot be saved because of the following error: ' +
+                            text,
                         icon: 'error',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
+                            confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
-                        if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                            vm.$router.go();
-                        }
                     });
-                    vm.updatingHabitatConditionDetails = false;
-                });
-            }
-        },
-        updateVegetationStructure: function () {
-            let vm = this;
-            vm.updatingVegetationStructure = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_vegetation_structure')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_report_obj.vegetation_structure)
-            }).then(async (response) => {
-                vm.updatingVegetationStructure = false;
-                vm.occurrence_report_obj.vegetation_structure = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Vegetation Structure details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                }).then((result) => {
-                    if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Vegetation Structure details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-                vm.updatingVegetationStructure = false;
-            });
+                    vm.updatingVegetationStructure = false;
+                }
+            );
         },
         updateFireHistoryDetails: function () {
             let vm = this;
             vm.updatingFireHistoryDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_fire_history_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_report_obj.fire_history)
-            }).then(async (response) => {
-                vm.updatingFireHistoryDetails = false;
-                vm.occurrence_report_obj.fire_history = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Fire History details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                }).then((result) => {
-                    if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Fire History details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report_obj.id + '/update_fire_history_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingFireHistoryDetails = false;
-            });
+                    body: JSON.stringify(vm.occurrence_report_obj.fire_history),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingFireHistoryDetails = false;
+                    vm.occurrence_report_obj.fire_history =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Fire History details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((result) => {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
+                            vm.$router.go();
+                        }
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Fire History details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingFireHistoryDetails = false;
+                }
+            );
         },
         updateAssociatedSpeciesDetails: function () {
             let vm = this;
             vm.updatingAssociatedSpeciesDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_associated_species_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_report_obj.associated_species)
-            }).then(async (response) => {
-                vm.updatingAssociatedSpeciesDetails = false;
-                vm.occurrence_report_obj.associated_species = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Associated Species details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                }).then((result) => {
-                    if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Associated Species cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report_obj.id +
+                        '/update_associated_species_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingAssociatedSpeciesDetails = false;
-            });
+                    body: JSON.stringify(
+                        vm.occurrence_report_obj.associated_species
+                    ),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingAssociatedSpeciesDetails = false;
+                    vm.occurrence_report_obj.associated_species =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Associated Species details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((result) => {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
+                            vm.$router.go();
+                        }
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Associated Species cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingAssociatedSpeciesDetails = false;
+                }
+            );
         },
         calcKeigheryTotal: function () {
             let vm = this;
             let total = 0;
-            let a = parseInt(vm.occurrence_report_obj.habitat_condition.pristine);
-            let b = parseInt(vm.occurrence_report_obj.habitat_condition.excellent);
-            let c = parseInt(vm.occurrence_report_obj.habitat_condition.very_good);
+            let a = parseInt(
+                vm.occurrence_report_obj.habitat_condition.pristine
+            );
+            let b = parseInt(
+                vm.occurrence_report_obj.habitat_condition.excellent
+            );
+            let c = parseInt(
+                vm.occurrence_report_obj.habitat_condition.very_good
+            );
             let d = parseInt(vm.occurrence_report_obj.habitat_condition.good);
-            let e = parseInt(vm.occurrence_report_obj.habitat_condition.degraded);
-            let f = parseInt(vm.occurrence_report_obj.habitat_condition.completely_degraded);
+            let e = parseInt(
+                vm.occurrence_report_obj.habitat_condition.degraded
+            );
+            let f = parseInt(
+                vm.occurrence_report_obj.habitat_condition.completely_degraded
+            );
             total = a + b + c + d + e + f;
             vm.habitat_cond_sum = total;
             if (total > 100) {
@@ -698,72 +1373,16 @@ export default {
                     text: 'The total Kiery Scale should not exceed 100% ',
                     icon: 'warning',
                     customClass: {
-                        confirmButton: 'btn btn-primary'
+                        confirmButton: 'btn btn-primary',
                     },
                 });
                 return false;
-            }
-            else {
+            } else {
                 return true;
             }
-
-        }
-    },
-    created: async function () {
-        let vm = this;
-        //------fetch list of values
-        const response = await fetch('/api/occurrence_report/list_of_values.json');
-        vm.listOfValuesDict = await response.json();
-        vm.land_form_list = vm.listOfValuesDict.land_form_list;
-        vm.land_form_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
-        vm.rock_type_list = vm.listOfValuesDict.rock_type_list;
-        vm.rock_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.soil_type_list = vm.listOfValuesDict.soil_type_list;
-        vm.soil_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.soil_colour_list = vm.listOfValuesDict.soil_colour_list;
-        vm.soil_colour_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.soil_condition_list = vm.listOfValuesDict.soil_condition_list;
-        vm.soil_condition_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.drainage_list = vm.listOfValuesDict.drainage_list;
-        vm.drainage_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.intensity_list = vm.listOfValuesDict.intensity_list;
-        vm.intensity_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-    },
-    mounted: function () {
-        let vm = this;
-        vm.eventListeners();
-        vm.initialiseLandFormSelect();
-        vm.calcKeigheryTotal();
+        },
     },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -787,13 +1406,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
index 892ad526..2b6783e9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
@@ -1,22 +1,39 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template lang="html">
     <div id="ocrLocation">
-        <FormSection :form-collapse="false" label="Location" Index="occurrence_report_location">
+        <FormSection
+            :form-collapse="false"
+            label="Location"
+            Index="occurrence_report_location"
+        >
             <div class="row mb-3">
                 <div class="col">
-                    <span class="text-danger">*</span> <span class="text-muted">You must indicate the location for your
-                        occurrence report</span>
+                    <span class="text-danger">*</span>
+                    <span class="text-muted"
+                        >You must indicate the location for your occurrence
+                        report</span
+                    >
                 </div>
             </div>
             <div class="row mb-3">
-                <MapComponent ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_report_obj"
-                    :is_external="is_external" :point-features-supported="true"
-                    :polygon-features-supported="isFauna == false" :drawable="true" :editable="true" level="external"
-                    style-by="assessor" :map-info-text="is_internal
-                        ? ''
-                        : 'Use the <b>draw</b> tool to draw the area of the report on the map.</br>You can <b>save</b> the report and continue at a later time.'
-                        " :selectable="true" :coordinate-reference-systems="coordinateReferenceSystems"
-                    :tile-layer-api-url="tileLayerApiUrl" :query-layer-definition="{
+                <MapComponent
+ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_report_obj"
+                    :is_external="is_external"
+                    :point-features-supported="true"
+                    :polygon-features-supported="isFauna == false"
+                    :drawable="true"
+                    :editable="true"
+                    level="external"
+                    style-by="assessor"
+                    :map-info-text="
+                        is_internal
+                            ? ''
+                            : 'Use the <b>draw</b> tool to draw the area of the report on the map.</br>You can <b>save</b> the report and continue at a later time.'
+                    "
+                    :selectable="true"
+                    :coordinate-reference-systems="coordinateReferenceSystems"
+                    :tile-layer-api-url="tileLayerApiUrl"
+                    :query-layer-definition="{
                         name: 'query_layer',
                         title: 'Occurrence Report',
                         default: true,
@@ -26,16 +43,24 @@
                         geometry_name: 'ocr_geometry',
                         collapse: false,
                         property_display_map: ocrPropertyDisplayMap,
-                    }" @validate-feature="validateFeature.bind(this)()" @refreshFromResponse="refreshFromResponse"
-                    @crs-select-search="searchForCRS"></MapComponent>
+                    }"
+                    @validate-feature="validateFeature.bind(this)()"
+                    @refresh-from-response="refreshFromResponse"
+                    @crs-select-search="searchForCRS"
+                ></MapComponent>
             </div>
 
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Region:</label>
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" @change="filterDistrict($event)"
-                        v-model="occurrence_report_obj.location.region_id">
-                        <option v-for="option in region_list" :value="option.id" v-bind:key="option.id">
+                    <select
+v-model="occurrence_report_obj.location.region_id" :disabled="isReadOnly" class="form-select"
+                        @change="filterDistrict($event)">
+                        <option
+                            v-for="option in region_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
@@ -44,9 +69,14 @@
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">District:</label>
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select"
-                        v-model="occurrence_report_obj.location.district_id">
-                        <option v-for="option in filtered_district_list" :value="option.id" v-bind:key="option.id">
+                    <select
+v-model="occurrence_report_obj.location.district_id" :disabled="isReadOnly"
+                        class="form-select">
+                        <option
+                            v-for="option in filtered_district_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
@@ -55,25 +85,46 @@
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Locality:</label>
                 <div class="col-sm-9">
-                    <textarea id="locality" v-model="occurrence_report_obj.location.locality
-                        " :disabled="isReadOnly" class="form-control" rows="1" placeholder="" />
+                    <textarea
+id="locality" v-model="occurrence_report_obj.location.locality
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
             <!-- -------------------------------- -->
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label fw-bold">Location Description: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-3 control-label fw-bold"
+                    >Location Description:
+                    <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <textarea id="loc_description" v-model="occurrence_report_obj.location.location_description
-                        " :disabled="isReadOnly" class="form-control" rows="2" placeholder="" />
+                    <textarea
+id="loc_description" v-model="occurrence_report_obj.location.location_description
+                        "
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Boundary Description:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Boundary Description:</label
+                >
                 <div class="col-sm-9">
-                    <textarea id="boundary_descr" v-model="occurrence_report_obj.location.boundary_description
-                        " :disabled="isReadOnly" class="form-control" rows="2" placeholder="" />
+                    <textarea
+id="boundary_descr" v-model="occurrence_report_obj.location.boundary_description
+                        "
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <!--<div class="row mb-3">
@@ -101,12 +152,24 @@
             </div>-->
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Map Data Type</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Map Data Type</label
+                >
                 <div class="col-sm-6">
-                    <label class="me-2">Boundary</label><input disabled type="radio"
-                        :checked="occurrence_report_obj.location.has_boundary" class="form-check-input me-2">
-                    <label class="me-2">Point/s</label><input disabled type="radio"
-                        :checked="occurrence_report_obj.location.has_points" class="form-check-input me-2">
+                    <label class="me-2">Boundary</label
+                    ><input
+                        disabled
+                        type="radio"
+                        :checked="occurrence_report_obj.location.has_boundary"
+                        class="form-check-input me-2"
+                    />
+                    <label class="me-2">Point/s</label
+                    ><input
+                        disabled
+                        type="radio"
+                        :checked="occurrence_report_obj.location.has_points"
+                        class="form-check-input me-2"
+                    />
                 </div>
             </div>
 
@@ -148,29 +211,51 @@
                 </div>
             </div>-->
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Coordinate Source:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Coordinate Source:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
-                        <template v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_report_obj.location
-                            .coordinate_source_id && !coordinate_source_list.map((d) => d.id).includes(occurrence_report_obj.location
-                                .coordinate_source_id)">
-                            <input type="text" v-if="occurrence_report_obj.location.coordinate_source"
+                        <template
+v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_report_obj.location
+                                    .coordinate_source_id &&
+                                !coordinate_source_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.location
+                                            .coordinate_source_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_report_obj.location.coordinate_source" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_report_obj.location.coordinate_source + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_report_obj.location
+                                        .coordinate_source + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change coordinate source to:
                             </div>
                         </template>
-                        <select class="form-select"
-                            v-model="occurrence_report_obj.location.coordinate_source_id">
-                            <option v-for="option in coordinate_source_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="occurrence_report_obj.location.coordinate_source_id"
+                            class="form-select">
+                            <option
+                                v-for="option in coordinate_source_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.location.coordinate_source_id" />
+                        <input
+v-model="occurrence_report_obj.location.coordinate_source_id" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
@@ -193,29 +278,51 @@
                 </div>
             </div>-->
             <div v-if="canAssess" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Location Accuracy:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Location Accuracy:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
-                        <template v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_report_obj.location
-                            .location_accuracy_id && !location_accuracy_list.map((d) => d.id).includes(occurrence_report_obj.location
-                                .location_accuracy_id)">
-                            <input type="text" v-if="occurrence_report_obj.location.location_accuracy"
+                        <template
+v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_report_obj.location
+                                    .location_accuracy_id &&
+                                !location_accuracy_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.location
+                                            .location_accuracy_id
+                                    )
+                            "
+                        >
+                            <input
+v-if="occurrence_report_obj.location.location_accuracy" type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_report_obj.location.location_accuracy + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_report_obj.location
+                                        .location_accuracy + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change coordinate source to:
                             </div>
                         </template>
-                        <select class="form-select"
-                            v-model="occurrence_report_obj.location.location_accuracy_id">
-                            <option v-for="option in location_accuracy_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="occurrence_report_obj.location.location_accuracy_id"
+                            class="form-select">
+                            <option
+                                v-for="option in location_accuracy_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.location.location_accuracy" />
+                        <input
+v-model="occurrence_report_obj.location.location_accuracy" class="form-control" type="text"
+                            :disabled="isReadOnly" />
                     </template>
                 </div>
             </div>
@@ -223,12 +330,18 @@
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingLocationDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingLocationDetails" class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateLocationDetails()" :disabled="isReadOnly">
+                    <button
+v-if="!updatingLocationDetails" class="btn btn-primary btn-sm float-end"
+                        :disabled="isReadOnly" @click.prevent="updateLocationDetails()">
                         Update
                     </button>
                     <button v-else disabled class="float-end btn btn-primary">
-                        Updating <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
                         <span class="visually-hidden">Loading...</span>
                     </button>
                 </div>
@@ -238,7 +351,6 @@
 </template>
 
 <script>
-;
 import { v4 as uuid } from 'uuid';
 // import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -302,22 +414,22 @@ export default {
 
             deficiency_readonly:
                 !this.is_external &&
-                    !this.occurrence_report_obj.can_user_edit &&
-                    this.occurrence_report_obj.assessor_mode.assessor_level ==
+                !this.occurrence_report_obj.can_user_edit &&
+                this.occurrence_report_obj.assessor_mode.assessor_level ==
                     'assessor' &&
-                    this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
-                    !this.occurrence_report_obj.assessor_mode
-                        .status_without_assessor
+                this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
+                !this.occurrence_report_obj.assessor_mode
+                    .status_without_assessor
                     ? false
                     : true,
             assessor_comment_readonly:
                 !this.is_external &&
-                    !this.occurrence_report_obj.can_user_edit &&
-                    this.occurrence_report_obj.assessor_mode.assessor_level ==
+                !this.occurrence_report_obj.can_user_edit &&
+                this.occurrence_report_obj.assessor_mode.assessor_level ==
                     'assessor' &&
-                    this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
-                    !this.occurrence_report_obj.assessor_mode
-                        .status_without_assessor
+                this.occurrence_report_obj.assessor_mode.has_assessor_mode &&
+                !this.occurrence_report_obj.assessor_mode
+                    .status_without_assessor
                     ? false
                     : true,
 
@@ -337,7 +449,8 @@ export default {
         },
         canAssess: function () {
             if (!this.is_external) {
-                return this.occurrence_report_obj.assessor_mode.assessor_can_assess;
+                return this.occurrence_report_obj.assessor_mode
+                    .assessor_can_assess;
             } else {
                 return false;
             }
@@ -381,7 +494,7 @@ export default {
             }
         },
         isReadOnly: function () {
-            return this.occurrence_report_obj.readonly
+            return this.occurrence_report_obj.readonly;
         },
         componentMapKey: function () {
             return `component-map-${this.uuid}`;
@@ -465,11 +578,10 @@ export default {
         vm.filterRegionDistrict = await response.json();
         vm.region_list = vm.filterRegionDistrict.region_list;
         vm.district_list = vm.filterRegionDistrict.district_list;
-        vm.region_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.region_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         this.filterDistrict();
     },
     mounted: function () {
@@ -485,14 +597,19 @@ export default {
                     this.occurrence_report_obj.location.district_id = null; //-----to remove the previous selection
                 }
                 this.filtered_district_list = [];
-                this.filtered_district_list = [{
-                    id: null,
-                    name: "",
-                    region_id: null,
-                }];
+                this.filtered_district_list = [
+                    {
+                        id: null,
+                        name: '',
+                        region_id: null,
+                    },
+                ];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
-                    if (choice.region_id === this.occurrence_report_obj.location.region_id) {
+                    if (
+                        choice.region_id ===
+                        this.occurrence_report_obj.location.region_id
+                    ) {
                         this.filtered_district_list.push(choice);
                     }
                 }
@@ -534,9 +651,11 @@ export default {
                         emulateJSON: true,
                     }
                 )
-                .then(async (response) => {
+                .then(
+                    async (response) => {
                         vm.updatingLocationDetails = false;
-                        vm.occurrence_report_obj.location = await response.json();
+                        vm.occurrence_report_obj.location =
+                            await response.json();
                         swal.fire({
                             title: 'Saved',
                             text: 'Location details have been saved',
@@ -545,7 +664,10 @@ export default {
                                 confirmButton: 'btn btn-primary',
                             },
                         }).then((result) => {
-                            if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+                            if (
+                                vm.occurrence_report_obj.processing_status ==
+                                'Unlocked'
+                            ) {
                                 vm.$router.go();
                             }
                         });
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
index c7ba84d9..e20c049a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
@@ -1,32 +1,38 @@
 <template id="ocr-more-referrals">
     <div>
-        <a v-if="!isFinalised" ref="showRef" @click.prevent="" role="button" class="mt-2 float-end">Show All
-            Referrals</a>
+        <a
+            v-if="!isFinalised"
+            ref="showRef"
+            role="button"
+            class="mt-2 float-end"
+            @click.prevent=""
+            >Show All Referrals</a
+        >
     </div>
 </template>
 
 <script>
-import { constants, api_endpoints, helpers } from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OccurrenceReportMoreReferrals',
     props: {
         isFinalised: {
             type: Boolean,
-            required: true
+            required: true,
         },
         canAction: {
             type: Boolean,
-            required: true
+            required: true,
         },
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         referral_url: {
             type: String,
-            default: null
-        }
+            default: null,
+        },
     },
     data() {
         let vm = this;
@@ -36,15 +42,15 @@ export default {
             datatable_url: '',
             datatable_options: {
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 deferRender: true,
                 autowidth: true,
                 processing: true,
                 ajax: {
-                    "url": this.referral_url,
-                    "dataSrc": '',
+                    url: this.referral_url,
+                    dataSrc: '',
                 },
                 columns: [
                     {
@@ -52,18 +58,18 @@ export default {
                         data: 'lodged_on',
                         render: function (date) {
                             return moment(date).format(vm.dateFormat);
-                        }
+                        },
                     },
                     {
                         title: 'Referral',
                         data: 'referral',
                         render: function (data, type, full) {
                             return `<span>${data.first_name} ${data.last_name}</span>`;
-                        }
+                        },
                     },
                     {
                         title: 'Status',
-                        data: 'processing_status'
+                        data: 'processing_status',
                     },
                     {
                         title: 'Action',
@@ -73,67 +79,86 @@ export default {
                             if (!vm.canAction) {
                                 return result;
                             }
-                            var user = full.referral.first_name + ' ' + full.referral.last_name;
+                            var user =
+                                full.referral.first_name +
+                                ' ' +
+                                full.referral.last_name;
                             if (full.processing_status == 'Awaiting') {
                                 result = `<a href="" data-id="${data}" data-user="${user}" class="remindRef">Remind</a>/<a href="" data-id="${data}" data-user="${user}" class="recallRef">Recall</a>`;
-                            }
-                            else {
+                            } else {
                                 result = `<a href="" data-id="${data}" data-user="${user}" class="resendRef">Resend</a>`;
                             }
                             return result;
-                        }
+                        },
                     },
                     {
                         title: 'Referral Comments',
                         data: 'referral_comment',
 
-                        'render': function (value) {
+                        render: function (value) {
                             var ellipsis = '...',
                                 truncated = _.truncate(value, {
                                     length: 20,
                                     omission: ellipsis,
-                                    separator: ' '
+                                    separator: ' ',
                                 }),
                                 result = '<span>' + truncated + '</span>',
-                                popTemplate = _.template('<a href="#" ' +
-                                    'role="button" ' +
-                                    'data-bs-toggle="popover" ' +
-                                    'data-bs-trigger="click" ' +
-                                    'data-bs-placement="top auto"' +
-                                    'data-bs-html="true" ' +
-                                    'data-bs-content="<%= text %>" ' +
-                                    '>more</a>');
+                                popTemplate = _.template(
+                                    '<a href="#" ' +
+                                        'role="button" ' +
+                                        'data-bs-toggle="popover" ' +
+                                        'data-bs-trigger="click" ' +
+                                        'data-bs-placement="top auto"' +
+                                        'data-bs-html="true" ' +
+                                        'data-bs-content="<%= text %>" ' +
+                                        '>more</a>'
+                                );
                             if (_.endsWith(truncated, ellipsis)) {
                                 result += popTemplate({
-                                    text: value
+                                    text: value,
                                 });
                             }
 
                             return result;
                         },
-                    }
-                ]
+                    },
+                ],
             },
-        }
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            let vm = this;
+            // if loop given below to avoid error when referral completes his task
+            if (!vm.isFinalised) {
+                this.initialiseTable();
+            }
+        });
     },
     methods: {
         remindReferral: function (_id, user) {
             let vm = this;
 
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/remind')).then(async (response) => {
-                const data = await response.json();
-                vm.$emit('refreshFromResponse', data);
-                vm.table.ajax.reload();
-                swal.fire({
-                    title: 'Referral Reminder',
-                    text: 'A reminder has been sent to ' + user,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.ocr_referrals,
+                    _id + '/remind'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.$emit('refreshFromResponse', data);
+                    vm.table.ajax.reload();
+                    swal.fire({
+                        title: 'Referral Reminder',
+                        text: 'A reminder has been sent to ' + user,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Remind Referral Error',
                         text: helpers.apiVueResourceError(error),
@@ -142,24 +167,31 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         resendReferral: function (_id, user) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/resend')).then(async (response) => {
-                const data = await response.json();
-                vm.$emit('refreshFromResponse', data);
-                vm.table.ajax.reload();
-                swal.fire({
-                    title: 'Referral Resent',
-                    text: 'The referral has been resent to ' + user,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.ocr_referrals,
+                    _id + '/resend'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.$emit('refreshFromResponse', data);
+                    vm.table.ajax.reload();
+                    swal.fire({
+                        title: 'Referral Resent',
+                        text: 'The referral has been resent to ' + user,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Resend Referral Error',
                         text: helpers.apiVueResourceError(error),
@@ -168,24 +200,31 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         recallReferral: function (_id, user) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, _id + '/recall')).then(async (response) => {
-                const data = await response.json();
-                vm.$emit('refreshFromResponse', data);
-                vm.table.ajax.reload();
-                swal.fire({
-                    title: 'Referral Recall',
-                    text: 'The referral has been recalled from ' + user,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.ocr_referrals,
+                    _id + '/recall'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.$emit('refreshFromResponse', data);
+                    vm.table.ajax.reload();
+                    swal.fire({
+                        title: 'Referral Recall',
+                        text: 'The referral has been recalled from ' + user,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Referral Recall Error',
                         text: helpers.apiVueResourceError(error),
@@ -194,19 +233,26 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         initialiseTable: function () {
             // To allow table elements (ref: https://getbootstrap.com/docs/5.1/getting-started/javascript/#sanitizer)
-            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
-            myDefaultAllowList.table = []
+            var myDefaultAllowList = bootstrap.Tooltip.Default.allowList;
+            myDefaultAllowList.table = [];
 
             let vm = this;
             let table_id = 'ocr-more-referrals-table' + vm._uid;
             let popover_name = 'popover-' + vm._uid;
-            let my_content = '<table id="' + table_id + '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0" width="100%"></table>'
-            let my_template = '<div class="popover ' + popover_name + '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
-            let popover_elem = $(vm.$refs.showRef)[0]
+            let my_content =
+                '<table id="' +
+                table_id +
+                '" class="hover table table-striped table-bordered dt-responsive" cellspacing="0" width="100%"></table>';
+            let my_template =
+                '<div class="popover ' +
+                popover_name +
+                '" role="tooltip"><div class="popover-arrow" style="top:110px;"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';
+            let popover_elem = $(vm.$refs.showRef)[0];
 
             new bootstrap.Popover(popover_elem, {
                 html: true,
@@ -215,56 +261,70 @@ export default {
                 title: 'Referrals',
                 container: 'body',
                 placement: 'right',
-                trigger: "click focus",
-            })
+                trigger: 'click focus',
+            });
             popover_elem.addEventListener('inserted.bs.popover', function () {
-                console.log('in inserted.bs.popover')
+                console.log('in inserted.bs.popover');
 
                 vm.table = $('#' + table_id).DataTable(vm.datatable_options);
 
                 // activate popover when table is drawn.
-                vm.table.on('draw.dt', function () {
-                    var tablePopover = $(this).find('[data-bs-toggle="popover"]');
-                    if (tablePopover.length > 0) {
-                        new bootstrap.Popover(tablePopover, {
-                            html: true,
-                            trigger: 'hover',
-                            placement: 'bottom',
-                            container: 'body',
-                        });                        // the next line prevents from scrolling up to the top after clicking on the popover.
-                        $(tablePopover).on('click', function (e) {
-                            e.preventDefault();
-                            return true;
-                        });
-                    }
-                }).on('click', '.resendRef', function (e) {
-                    e.preventDefault();
-                    var _id = $(this).data('id');
-                    var user = $(this).data('user');
-                    vm.resendReferral(_id, user);
-                }).on('click', '.recallRef', function (e) {
-                    e.preventDefault();
-                    var _id = $(this).data('id');
-                    var user = $(this).data('user');
-                    vm.recallReferral(_id, user);
-                }).on('click', '.remindRef', function (e) {
-                    e.preventDefault();
-                    var _id = $(this).data('id');
-                    var user = $(this).data('user');
-                    vm.remindReferral(_id, user);
-                });
-            })
+                vm.table
+                    .on('draw.dt', function () {
+                        var tablePopover = $(this).find(
+                            '[data-bs-toggle="popover"]'
+                        );
+                        if (tablePopover.length > 0) {
+                            new bootstrap.Popover(tablePopover, {
+                                html: true,
+                                trigger: 'hover',
+                                placement: 'bottom',
+                                container: 'body',
+                            }); // the next line prevents from scrolling up to the top after clicking on the popover.
+                            $(tablePopover).on('click', function (e) {
+                                e.preventDefault();
+                                return true;
+                            });
+                        }
+                    })
+                    .on('click', '.resendRef', function (e) {
+                        e.preventDefault();
+                        var _id = $(this).data('id');
+                        var user = $(this).data('user');
+                        vm.resendReferral(_id, user);
+                    })
+                    .on('click', '.recallRef', function (e) {
+                        e.preventDefault();
+                        var _id = $(this).data('id');
+                        var user = $(this).data('user');
+                        vm.recallReferral(_id, user);
+                    })
+                    .on('click', '.remindRef', function (e) {
+                        e.preventDefault();
+                        var _id = $(this).data('id');
+                        var user = $(this).data('user');
+                        vm.remindReferral(_id, user);
+                    });
+            });
             popover_elem.addEventListener('shown.bs.popover', function () {
-                console.log('in shown.bs.popover')
+                console.log('in shown.bs.popover');
 
                 var el = vm.$refs.showRef;
                 var popoverheight = parseInt($('.' + popover_name).height());
 
-                var popover_bounding_top = parseInt($('.' + popover_name)[0].getBoundingClientRect().top);
-                var popover_bounding_bottom = parseInt($('.' + popover_name)[0].getBoundingClientRect().bottom);
+                var popover_bounding_top = parseInt(
+                    $('.' + popover_name)[0].getBoundingClientRect().top
+                );
+                var popover_bounding_bottom = parseInt(
+                    $('.' + popover_name)[0].getBoundingClientRect().bottom
+                );
 
-                var el_bounding_top = parseInt($(el)[0].getBoundingClientRect().top);
-                var el_bounding_bottom = parseInt($(el)[0].getBoundingClientRect().top);
+                var el_bounding_top = parseInt(
+                    $(el)[0].getBoundingClientRect().top
+                );
+                var el_bounding_bottom = parseInt(
+                    $(el)[0].getBoundingClientRect().top
+                );
 
                 var diff = el_bounding_top - popover_bounding_top;
 
@@ -272,18 +332,11 @@ export default {
                 var pos2 = parseInt($(el).position().top) - 5;
 
                 var x = diff + 5;
-                $('.' + popover_name).children('.arrow').css('top', x + 'px');
-            })
+                $('.' + popover_name)
+                    .children('.arrow')
+                    .css('top', x + 'px');
+            });
         },
     },
-    mounted() {
-        this.$nextTick(() => {
-            let vm = this;
-            // if loop given below to avoid error when referral completes his task
-            if (!vm.isFinalised) {
-                this.initialiseTable();
-            }
-        })
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
index da0f76f2..523d3b75 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
@@ -1,218 +1,551 @@
 <template lang="html">
     <div id="observation">
-        <FormSection :formCollapse="false" label="Observation Details" :Index="observationDetailBody">
+        <FormSection
+            :form-collapse="false"
+            label="Observation Details"
+            :Index="observationDetailBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Observation Method:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Observation Method:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="observation_method_list && observation_method_list.length > 0 && occurrence_report_obj.observation_detail.observation_method_id && !observation_method_list.map((d) => d.id).includes(occurrence_report_obj.observation_detail.observation_method_id)">
-                            <input type="text" v-if="occurrence_report_obj.observation_detail.observation_method" class="form-control mb-3"
-                                :value="occurrence_report_obj.observation_detail.observation_method + ' (Now Archived)'" disabled />
+                            v-if="
+                                observation_method_list &&
+                                observation_method_list.length > 0 &&
+                                occurrence_report_obj.observation_detail
+                                    .observation_method_id &&
+                                !observation_method_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.observation_detail
+                                            .observation_method_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.observation_detail
+                                        .observation_method
+                                "
+                                type="text"
+                                class="form-control mb-3"
+                                :value="
+                                    occurrence_report_obj.observation_detail
+                                        .observation_method + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change observation method to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.observation_detail.observation_method_id">
-                            <option v-for="observation_method in observation_method_list" :value="observation_method.id" v-bind:key="observation_method.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.observation_detail
+                                    .observation_method_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="observation_method in observation_method_list"
+                                :key="observation_method.id"
+                                :value="observation_method.id"
+                            >
                                 {{ observation_method.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.observation_detail.observation_method" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.observation_detail
+                                    .observation_method
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Area Surveyed(m<sup>2</sup>) :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Area Surveyed(m<sup>2</sup>) :</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="area_surveyed"
-                        placeholder="" min="0" v-model="occurrence_report_obj.observation_detail.area_surveyed" />
+                    <input
+                        id="area_surveyed"
+                        v-model="
+                            occurrence_report_obj.observation_detail
+                                .area_surveyed
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Survey Duration(mins) :</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Survey Duration(mins) :</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="survey_duration"
-                        placeholder="" min="0" v-model="occurrence_report_obj.observation_detail.survey_duration" />
+                    <input
+                        id="survey_duration"
+                        v-model="
+                            occurrence_report_obj.observation_detail
+                                .survey_duration
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingObservationDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingObservationDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateObservationDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateObservationDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Plant Count" :Index="plantCountBody" v-if="isFlora">
-            <PlantCount v-if="isFlora" :plant_count="occurrence_report_obj.plant_count"
-                :processing_status="occurrence_report_obj.processing_status" :is_report=true
-                :occurrence_id="occurrence_report_obj.id" id="plantCountDetail" :is_external="is_external"
-                :isReadOnly="isReadOnly" ref="plantCountDetail">
+        <FormSection
+            v-if="isFlora"
+            :form-collapse="false"
+            label="Plant Count"
+            :Index="plantCountBody"
+        >
+            <PlantCount
+                v-if="isFlora"
+                id="plantCountDetail"
+                ref="plantCountDetail"
+                :plant_count="occurrence_report_obj.plant_count"
+                :processing_status="occurrence_report_obj.processing_status"
+                :is_report="true"
+                :occurrence_id="occurrence_report_obj.id"
+                :is_external="is_external"
+                :is-read-only="isReadOnly"
+            >
             </PlantCount>
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Animal Observation" :Index="animalObsBody" v-if="isFauna">
-            <AnimalObservation v-if="isFauna" :animal_observation="occurrence_report_obj.animal_observation"
-                :processing_status="occurrence_report_obj.processing_status" :is_report=true
-                :occurrence_id="occurrence_report_obj.id" id="animalObservationDetail" :is_external="is_external"
-                :isReadOnly="isReadOnly" ref="animalObservationDetail">
+        <FormSection
+            v-if="isFauna"
+            :form-collapse="false"
+            label="Animal Observation"
+            :Index="animalObsBody"
+        >
+            <AnimalObservation
+                v-if="isFauna"
+                id="animalObservationDetail"
+                ref="animalObservationDetail"
+                :animal_observation="occurrence_report_obj.animal_observation"
+                :processing_status="occurrence_report_obj.processing_status"
+                :is_report="true"
+                :occurrence_id="occurrence_report_obj.id"
+                :is_external="is_external"
+                :is-read-only="isReadOnly"
+            >
             </AnimalObservation>
         </FormSection>
 
-        <FormSection :formCollapse="false" label="Identification" :Index="identificationBody">
+        <FormSection
+            :form-collapse="false"
+            label="Identification"
+            :Index="identificationBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">ID Confirmed by:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >ID Confirmed by:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="id_confirmed_by" placeholder=""
-                        v-model="occurrence_report_obj.identification.id_confirmed_by" />
+                    <input
+                        id="id_confirmed_by"
+                        v-model="
+                            occurrence_report_obj.identification.id_confirmed_by
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Identification Certainty:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Identification Certainty:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="identification_certainty_list && identification_certainty_list.length > 0 && occurrence_report_obj.identification.identification_certainty_id && !identification_certainty_list.map((d) => d.id).includes(occurrence_report_obj.identification.identification_certainty_id)">
-                            <input type="text" v-if="occurrence_report_obj.identification.identification_certainty"
+                            v-if="
+                                identification_certainty_list &&
+                                identification_certainty_list.length > 0 &&
+                                occurrence_report_obj.identification
+                                    .identification_certainty_id &&
+                                !identification_certainty_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.identification
+                                            .identification_certainty_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.identification
+                                        .identification_certainty
+                                "
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_report_obj.identification.identification_certainty + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_report_obj.identification
+                                        .identification_certainty +
+                                    ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change identification certainty to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.identification.identification_certainty_id">
-                            <option v-for="option in identification_certainty_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.identification
+                                    .identification_certainty_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in identification_certainty_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.identification.identification_certainty" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.identification
+                                    .identification_certainty
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Sample Type:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Sample Type:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="sample_type_list && sample_type_list.length > 0 && occurrence_report_obj.identification.sample_type_id && !sample_type_list.map((d) => d.id).includes(occurrence_report_obj.identification.sample_type_id)">
-                            <input type="text" v-if="occurrence_report_obj.identification.sample_type"
+                            v-if="
+                                sample_type_list &&
+                                sample_type_list.length > 0 &&
+                                occurrence_report_obj.identification
+                                    .sample_type_id &&
+                                !sample_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.identification
+                                            .sample_type_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.identification
+                                        .sample_type
+                                "
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_report_obj.identification.sample_type + ' (Now Archived)'" disabled />
+                                :value="
+                                    occurrence_report_obj.identification
+                                        .sample_type + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change sample type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.identification.sample_type_id">
-                            <option v-for="option in sample_type_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.identification
+                                    .sample_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in sample_type_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.identification.sample_type" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.identification.sample_type
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Sample Destination:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Sample Destination:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="sample_dest_list && sample_dest_list.length > 0 && occurrence_report_obj.identification.sample_destination_id && !sample_dest_list.map((d) => d.id).includes(occurrence_report_obj.identification.sample_destination_id)">
-                            <input type="text" v-if="occurrence_report_obj.identification.sample_destination" class="form-control mb-3"
-                                :value="occurrence_report_obj.identification.sample_destination + ' (Now Archived)'" disabled />
+                            v-if="
+                                sample_dest_list &&
+                                sample_dest_list.length > 0 &&
+                                occurrence_report_obj.identification
+                                    .sample_destination_id &&
+                                !sample_dest_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.identification
+                                            .sample_destination_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.identification
+                                        .sample_destination
+                                "
+                                type="text"
+                                class="form-control mb-3"
+                                :value="
+                                    occurrence_report_obj.identification
+                                        .sample_destination + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change sample destination to:
                             </div>
                         </template>
-                        <select class="form-select"
-                        v-model="occurrence_report_obj.identification.sample_destination_id">
-                        <option v-for="option in sample_dest_list" :value="option.id" v-bind:key="option.id">
-                            {{ option.name }}
-                        </option>
-                    </select>
+                        <select
+                            v-model="
+                                occurrence_report_obj.identification
+                                    .sample_destination_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in sample_dest_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
+                                {{ option.name }}
+                            </option>
+                        </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly" v-model="occurrence_report_obj.identification.sample_destination" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.identification
+                                    .sample_destination
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Permit Type:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Permit Type:</label
+                >
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-                            v-if="permit_type_list && permit_type_list.length > 0 && occurrence_report_obj.identification.permit_type_id && !permit_type_list.map((d) => d.id).includes(occurrence_report_obj.identification.permit_type_id)">
-                            <input type="text" v-if="occurrence_report_obj.identification.permit_type"
+                            v-if="
+                                permit_type_list &&
+                                permit_type_list.length > 0 &&
+                                occurrence_report_obj.identification
+                                    .permit_type_id &&
+                                !permit_type_list
+                                    .map((d) => d.id)
+                                    .includes(
+                                        occurrence_report_obj.identification
+                                            .permit_type_id
+                                    )
+                            "
+                        >
+                            <input
+                                v-if="
+                                    occurrence_report_obj.identification
+                                        .permit_type
+                                "
+                                type="text"
                                 class="form-control mb-3"
-                                :value="occurrence_report_obj.identification.permit_type + ' (Now Archived)'"
-                                disabled />
+                                :value="
+                                    occurrence_report_obj.identification
+                                        .permit_type + ' (Now Archived)'
+                                "
+                                disabled
+                            />
                             <div class="mb-3 text-muted">
                                 Change permit type to:
                             </div>
                         </template>
-                        <select class="form-select" v-model="occurrence_report_obj.identification.permit_type_id">
-                            <option v-for="option in permit_type_list" :value="option.id" v-bind:key="option.id">
+                        <select
+                            v-model="
+                                occurrence_report_obj.identification
+                                    .permit_type_id
+                            "
+                            class="form-select"
+                        >
+                            <option
+                                v-for="option in permit_type_list"
+                                :key="option.id"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
-                        <input class="form-control" type="text" :disabled="isReadOnly"
-                            v-model="occurrence_report_obj.identification.permit_type" />
+                        <input
+                            v-model="
+                                occurrence_report_obj.identification.permit_type
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Permit ID:</label>
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="permit_id" placeholder=""
-                        v-model="occurrence_report_obj.identification.permit_id" />
+                    <input
+                        id="permit_id"
+                        v-model="occurrence_report_obj.identification.permit_id"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Sample Label/ Collector Number:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Sample Label/ Collector Number:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="collector_number"
-                        placeholder="" v-model="occurrence_report_obj.identification.collector_number" />
+                    <textarea
+                        id="collector_number"
+                        v-model="
+                            occurrence_report_obj.identification
+                                .collector_number
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Barcode/Catalog Number:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Barcode/Catalog Number:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="barcode_number"
-                        placeholder="" v-model="occurrence_report_obj.identification.barcode_number" />
+                    <textarea
+                        id="barcode_number"
+                        v-model="
+                            occurrence_report_obj.identification.barcode_number
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Identification Comments:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Identification Comments:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" type="text" row="2" class="form-control"
-                        id="identification_comment" placeholder=""
-                        v-model="occurrence_report_obj.identification.identification_comment" />
+                    <textarea
+                        id="identification_comment"
+                        v-model="
+                            occurrence_report_obj.identification
+                                .identification_comment
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingHabitatCompositionDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
-                    <button v-if="!updatingIdentificationDetails" :disabled="isReadOnly"
+                    <button
+                        v-if="!updatingIdentificationDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updateIdentificationDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updateIdentificationDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
@@ -220,30 +553,30 @@
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import PlantCount from './plant_count.vue'
-import AnimalObservation from './animal_observation.vue'
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import PlantCount from './plant_count.vue';
+import AnimalObservation from './animal_observation.vue';
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'OCRObservation',
+    components: {
+        FormSection,
+        PlantCount,
+        AnimalObservation,
+    },
     props: {
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -254,8 +587,10 @@ export default {
             animalObsBody: 'animalObsBody' + vm._uid,
             identificationBody: 'identificationBody' + vm._uid,
             //---to show fields related to Fauna
-            isFauna: vm.occurrence_report_obj.group_type === "fauna" ? true : false,
-            isFlora: vm.occurrence_report_obj.group_type === "flora" ? true : false,
+            isFauna:
+                vm.occurrence_report_obj.group_type === 'fauna' ? true : false,
+            isFlora:
+                vm.occurrence_report_obj.group_type === 'flora' ? true : false,
             //----list of values dictionary
             listOfValuesDict: {},
             //scientific_name_list: [],
@@ -266,12 +601,7 @@ export default {
             permit_type_list: [],
             updatingObservationDetails: false,
             updatingIdentificationDetails: false,
-        }
-    },
-    components: {
-        FormSection,
-        PlantCount,
-        AnimalObservation,
+        };
     },
     computed: {
         isReadOnly: function () {
@@ -279,131 +609,163 @@ export default {
             if (this.is_readonly) {
                 return this.is_readonly;
             }
-            return this.occurrence_report_obj.readonly
-        },
-    },
-    watch: {
-    },
-    methods: {
-        eventListeners: function () {
-        },
-        updateObservationDetails: function () {
-            let vm = this;
-            vm.updatingObservationDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_observation_details')), {
-                method: 'POST',
-                body: JSON.stringify(vm.occurrence_report_obj.observation_detail),
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                vm.updatingObservationDetails = false;
-                vm.occurrence_report_obj.observation_detail = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Observation details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                }).then((result) => {
-                    if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Observation details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-                vm.updatingObservationDetails = false;
-            });
-        },
-        updateIdentificationDetails: function () {
-            let vm = this;
-            vm.updatingIdentificationDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report_obj.id + '/update_identification_details')), {
-                method: 'POST',
-                body: JSON.stringify(vm.occurrence_report_obj.identification),
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                vm.updatingIdentificationDetails = false;
-                vm.occurrence_report_obj.identification = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Identification details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                }).then((result) => {
-                    if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Identification details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-                vm.updatingIdentificationDetails = false;
-            });
+            return this.occurrence_report_obj.readonly;
         },
     },
+    watch: {},
     created: async function () {
         let vm = this;
         //------fetch list of values
-        const response = await fetch(`/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_report_obj.group_type}`);
+        const response = await fetch(
+            `/api/occurrence/observation_list_of_values.json?group_type=${vm.occurrence_report_obj.group_type}`
+        );
         vm.listOfValuesDict = await response.json();
-        vm.observation_method_list = vm.listOfValuesDict.observation_method_list;
-        vm.observation_method_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.observation_method_list =
+            vm.listOfValuesDict.observation_method_list;
+        vm.observation_method_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
 
-        vm.identification_certainty_list = vm.listOfValuesDict.identification_certainty_list;
-        vm.identification_certainty_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.identification_certainty_list =
+            vm.listOfValuesDict.identification_certainty_list;
+        vm.identification_certainty_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.sample_type_list = vm.listOfValuesDict.sample_type_list;
-        vm.sample_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.sample_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.sample_dest_list = vm.listOfValuesDict.sample_dest_list;
-        vm.sample_dest_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.sample_dest_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.permit_type_list = vm.listOfValuesDict.permit_type_list;
-        vm.permit_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.permit_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
     },
     mounted: function () {
         let vm = this;
         vm.eventListeners();
     },
-}
+    methods: {
+        eventListeners: function () {},
+        updateObservationDetails: function () {
+            let vm = this;
+            vm.updatingObservationDetails = true;
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report_obj.id + '/update_observation_details'
+                ),
+                {
+                    method: 'POST',
+                    body: JSON.stringify(
+                        vm.occurrence_report_obj.observation_detail
+                    ),
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingObservationDetails = false;
+                    vm.occurrence_report_obj.observation_detail =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Observation details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((result) => {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
+                            vm.$router.go();
+                        }
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Observation details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingObservationDetails = false;
+                }
+            );
+        },
+        updateIdentificationDetails: function () {
+            let vm = this;
+            vm.updatingIdentificationDetails = true;
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report_obj.id +
+                        '/update_identification_details'
+                ),
+                {
+                    method: 'POST',
+                    body: JSON.stringify(
+                        vm.occurrence_report_obj.identification
+                    ),
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingIdentificationDetails = false;
+                    vm.occurrence_report_obj.identification =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Identification details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((result) => {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
+                            vm.$router.go();
+                        }
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Identification details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingIdentificationDetails = false;
+                }
+            );
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
@@ -427,13 +789,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
index 5ee2e7e3..6e0ad097 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
@@ -1,16 +1,24 @@
 <template lang="html">
     <div :id="'related_species'">
-
         <div class="row mb-3">
             <label for="" class="col-sm-3 control-label">NOMOS Lookup:</label>
-            <div class="col-sm-6" :id="select_scientific_name">
-                <select :disabled="isReadOnly" :id="scientific_name_lookup" :name="scientific_name_lookup"
-                    :ref="scientific_name_lookup" class="form-control" />
+            <div :id="select_scientific_name" class="col-sm-6">
+                <select
+                    :id="scientific_name_lookup"
+                    :ref="scientific_name_lookup"
+                    :disabled="isReadOnly"
+                    :name="scientific_name_lookup"
+                    class="form-control"
+                />
             </div>
             <div class="col-sm-12">
                 <div class="text-end">
-                    <button :disabled="isReadOnly || adding_species" type="button" class="btn btn-primary mb-2"
-                        @click.prevent="addRelatedSpecies">
+                    <button
+                        :disabled="isReadOnly || adding_species"
+                        type="button"
+                        class="btn btn-primary mb-2"
+                        @click.prevent="addRelatedSpecies"
+                    >
                         <i class="fa-solid fa-circle-plus"></i>
                         Add Related Species
                     </button>
@@ -19,21 +27,20 @@
         </div>
 
         <div>
-            <datatable ref="related_species_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                :dtHeaders="datatable_headers" />
+            <datatable
+                :id="datatable_id"
+                ref="related_species_datatable"
+                :dt-options="datatable_options"
+                :dt-headers="datatable_headers"
+            />
         </div>
     </div>
 </template>
 
 <script>
-import { v4 as uuid } from 'uuid'
-import datatable from '@/utils/vue/datatable.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { v4 as uuid } from 'uuid';
+import datatable from '@/utils/vue/datatable.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'TableRelatedSpecies',
@@ -43,23 +50,25 @@ export default {
     props: {
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         isReadOnly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data() {
         let vm = this;
         return {
-            scientific_name_lookup: 'scientific_name_lookup' + vm.occurrence_report_obj.id,
-            select_scientific_name: "select_scientific_name" + vm.occurrence_report_obj.id,
+            scientific_name_lookup:
+                'scientific_name_lookup' + vm.occurrence_report_obj.id,
+            select_scientific_name:
+                'select_scientific_name' + vm.occurrence_report_obj.id,
             selected_scientific_name: null,
             adding_species: false,
             uuid: 0,
             datatable_id: uuid(),
-        }
+        };
     },
     computed: {
         column_scientific_name: function () {
@@ -68,11 +77,11 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-            }
+            };
         },
         column_common_name: function () {
             return {
@@ -80,11 +89,11 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-            }
+            };
         },
         column_kingdom: function () {
             return {
@@ -92,11 +101,11 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-            }
+            };
         },
         column_action: function () {
             let vm = this;
@@ -105,27 +114,27 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (row, type, full) {
+                render: function (row, type, full) {
                     let links = '';
                     if (!vm.isReadOnly) {
                         links += `<a href='#' data-discard-species='${full.id}'>Remove</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
             let columns = [
                 vm.column_scientific_name,
                 vm.column_common_name,
                 vm.column_kingdom,
                 vm.column_action,
-            ]
+            ];
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 //serverSide: true,
@@ -133,26 +142,30 @@ export default {
                 ordering: true,
                 order: [[0, 'desc']],
                 ajax: {
-                    "url": "/api/occurrence_report/" + this.occurrence_report_obj.id + "/get_related_species/",
-                    "dataSrc": "",
+                    url:
+                        '/api/occurrence_report/' +
+                        this.occurrence_report_obj.id +
+                        '/get_related_species/',
+                    dataSrc: '',
                 },
                 dom: 'lBfrtip',
                 buttons: [],
                 columns: columns,
                 processing: true,
-                initComplete: function (settings, json) {
-                },
-            }
+                initComplete: function (settings, json) {},
+            };
         },
         datatable_headers: function () {
-            return [
-                'Scientific Name',
-                'Common Name',
-                'Kingdom',
-                'Action',
-            ]
+            return ['Scientific Name', 'Common Name', 'Kingdom', 'Action'];
         },
     },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.addEventListeners();
+        });
+    },
     methods: {
         reload: function () {
             let vm = this;
@@ -161,9 +174,14 @@ export default {
         addRelatedSpecies: function () {
             let vm = this;
             if (vm.selected_scientific_name && !vm.adding_species) {
-                vm.adding_species = true
-                fetch("/api/occurrence_report/" + this.occurrence_report_obj.id + '/add_related_species?species=' + vm.selected_scientific_name)
-                    .then((response) => {
+                vm.adding_species = true;
+                fetch(
+                    '/api/occurrence_report/' +
+                        this.occurrence_report_obj.id +
+                        '/add_related_species?species=' +
+                        vm.selected_scientific_name
+                ).then(
+                    (response) => {
                         swal.fire({
                             title: 'Added',
                             text: 'Related Species has been added',
@@ -175,105 +193,124 @@ export default {
                         vm.$refs.related_species_datatable.vmDataTable.ajax.reload();
                         vm.selected_scientific_name = null;
                         vm.adding_species = false;
-                        if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
                             vm.$router.go();
                         }
-                    }, (error) => {
+                    },
+                    (error) => {
                         console.log(error);
                         vm.adding_species = false;
-                    });
+                    }
+                );
             }
         },
         removeRelatedSpecies: function (id) {
             let vm = this;
             swal.fire({
-                title: "Remove Related Species",
-                text: "Are you sure you want to remove this Related Species?",
-                icon: "question",
+                title: 'Remove Related Species',
+                text: 'Are you sure you want to remove this Related Species?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Remove Related Species',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch("/api/occurrence_report/" + this.occurrence_report_obj.id + '/remove_related_species?species=' + id)
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Removed',
-                                text: 'Related Species has been removed',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.related_species_datatable.vmDataTable.ajax.reload();
-                            if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                                vm.$router.go();
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            '/api/occurrence_report/' +
+                                this.occurrence_report_obj.id +
+                                '/remove_related_species?species=' +
+                                id
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Removed',
+                                    text: 'Related Species has been removed',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.related_species_datatable.vmDataTable.ajax.reload();
+                                if (
+                                    vm.occurrence_report_obj
+                                        .processing_status == 'Unlocked'
+                                ) {
+                                    vm.$router.go();
+                                }
+                            },
+                            (error) => {
+                                console.log(error);
                             }
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-            });
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_scientific_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
+                        // results: function (data, page) { // parse the results into the format expected by Select2.
+                        //     // since we are using custom formatting functions we do not need to alter remote JSON data
+                        //     return {results: data};
+                        // },
                     },
-                    // results: function (data, page) { // parse the results into the format expected by Select2.
-                    //     // since we are using custom formatting functions we do not need to alter remote JSON data
-                    //     return {results: data};
-                    // },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.selected_scientific_name = data;
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.selected_scientific_name = null;
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.related_species_datatable.vmDataTable.on('click', 'a[data-discard-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-species');
-                vm.removeRelatedSpecies(id);
-            });
-        }
+            vm.$refs.related_species_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-species');
+                    vm.removeRelatedSpecies(id);
+                }
+            );
+        },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
index 4a7b4542..ba75eb70 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
@@ -1,25 +1,55 @@
 <template lang="html">
     <div id="section_details">
-        <modal transition="modal fade" @ok="ok()" @cancel="close()" :title="'OCR ' + ocrNumber + ' ' + sectionTypeDisplay" large>
+        <modal
+            transition="modal fade"
+            :title="'OCR ' + ocrNumber + ' ' + sectionTypeDisplay"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <FormSection :formCollapse="false" :label="sectionTypeDisplay">
+                    <FormSection
+                        :form-collapse="false"
+                        :label="sectionTypeDisplay"
+                    >
                         <div class="card-body card-collapse">
-                            <div v-for="(value,index) in sectionObjExpanded">
-                                <div v-if="value && index != 'id' ">
-                                    <div v-if="typeof value == 'object'" >
-                                        <div v-for="(o_value,o_index) in value" class="row mb-3">
-                                            <label class="col-sm-6 control-label">{{index}}.{{o_index}}:</label>
+                            <div v-for="(value, index) in sectionObjExpanded">
+                                <div v-if="value && index != 'id'">
+                                    <div v-if="typeof value == 'object'">
+                                        <div
+                                            v-for="(o_value, o_index) in value"
+                                            class="row mb-3"
+                                        >
+                                            <label
+                                                class="col-sm-6 control-label"
+                                                >{{ index }}.{{
+                                                    o_index
+                                                }}:</label
+                                            >
                                             <div class="col-sm-6">
-                                                <input :disabled="true" type="text" class="form-control" :value="o_value"/>
+                                                <input
+                                                    :disabled="true"
+                                                    type="text"
+                                                    class="form-control"
+                                                    :value="o_value"
+                                                />
                                             </div>
                                         </div>
                                     </div>
                                     <div v-else>
                                         <div class="row mb-3">
-                                            <label class="col-sm-6 control-label">{{index}}:</label>
+                                            <label
+                                                class="col-sm-6 control-label"
+                                                >{{ index }}:</label
+                                            >
                                             <div class="col-sm-6">
-                                            <textarea :disabled="true" type="text" class="form-control">{{value}}</textarea>
+                                                <textarea
+                                                    :disabled="true"
+                                                    type="text"
+                                                    class="form-control"
+                                                    >{{ value }}</textarea
+                                                >
                                             </div>
                                         </div>
                                     </div>
@@ -29,22 +59,26 @@
                     </FormSection>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="close">Close</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="close"
+                    >
+                        Close
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-  api_endpoints,
-  helpers
-}
-from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'SectionModal',
     components: {
@@ -59,16 +93,16 @@ export default {
         },
         sectionType: {
             type: String,
-            required:true,
+            required: true,
         },
         sectionTypeDisplay: {
             type: String,
-            required:true,
+            required: true,
         },
         ocrNumber: {
             type: String,
-            required:true,
-        }
+            required: true,
+        },
     },
     data: function () {
         let vm = this;
@@ -76,7 +110,13 @@ export default {
             isModalOpen: false,
             form: null,
             sectionObjExpanded: vm.sectionObj,
-        }
+        };
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.fetchSectionData();
+        });
     },
     methods: {
         close: function () {
@@ -84,23 +124,24 @@ export default {
             this.errors = false;
             $('.has-error').removeClass('has-error');
         },
-        fetchSectionData: function(){
+        fetchSectionData: function () {
             let vm = this;
             if (vm.sectionObj.occurrence_report_id !== undefined) {
-                fetch(api_endpoints.lookup_ocr_section_values(vm.sectionType,vm.sectionObj.occurrence_report_id))
-                .then(async (response) => {
-                    vm.sectionObjExpanded = await response.json();
-                },(error) => {
-                    console.log(error);
-                })
+                fetch(
+                    api_endpoints.lookup_ocr_section_values(
+                        vm.sectionType,
+                        vm.sectionObj.occurrence_report_id
+                    )
+                ).then(
+                    async (response) => {
+                        vm.sectionObjExpanded = await response.json();
+                    },
+                    (error) => {
+                        console.log(error);
+                    }
+                );
             }
         },
     },
-    mounted: function(){
-        let vm = this;
-        this.$nextTick(() => {
-            vm.fetchSectionData();
-        });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
index e9b6acd4..7e62350d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
@@ -1,17 +1,26 @@
-
 <template lang="html">
     <div id="ocr_threats">
-        <FormSection :formCollapse="false" label="Threats" :Index="threatBody">
-            <CollapsibleFilters component_title="Filters" ref="collapsible_filters"
-                @created="collapsible_component_mounted" class="mb-2">
+        <FormSection :form-collapse="false" label="Threats" :Index="threatBody">
+            <CollapsibleFilters
+                ref="collapsible_filters"
+                component_title="Filters"
+                class="mb-2"
+                @created="collapsible_component_mounted"
+            >
                 <div class="row">
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Category:</label>
-                            <select class="form-select" v-model="filterThreatCategory">
+                            <select
+                                v-model="filterThreatCategory"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name
-                                    }}
+                                <option
+                                    v-for="option in threat_category_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -19,9 +28,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Current Impact:</label>
-                            <select class="form-select" v-model="filterThreatCurrentImpact">
+                            <select
+                                v-model="filterThreatCurrentImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_current_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -30,9 +45,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Potential Impact:</label>
-                            <select class="form-select" v-model="filterThreatPotentialImpact">
+                            <select
+                                v-model="filterThreatPotentialImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_potential_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -41,9 +62,16 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Status:</label>
-                            <select class="form-select" v-model="filterThreatStatus">
+                            <select
+                                v-model="filterThreatStatus"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                                <option
+                                    v-for="option in threat_status_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -51,15 +79,25 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed From:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
-                                v-model="filterObservedFromDate">
+                            <input
+                                id="observed_from_date"
+                                v-model="filterObservedFromDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed To:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
-                                v-model="filterObservedToDate">
+                            <input
+                                id="observed_to_date"
+                                v-model="filterObservedToDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                 </div>
@@ -67,66 +105,81 @@
             <form class="form-horizontal" action="index.html" method="post">
                 <div class="col-sm-12">
                     <div class="text-end">
-                        <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                            @click.prevent="newThreat">
+                        <button
+                            :disabled="isReadOnly"
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newThreat"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Threat
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                        :dtHeaders="threats_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="threats_datatable"
+                        :dt-options="threats_options"
+                        :dt-headers="threats_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="ocr_threat_url">
+        <ThreatDetail
+            ref="threat_detail"
+            :url="ocr_threat_url"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ThreatDetail>
         <div v-if="ocrConservationThreatHistoryId">
-            <ConservationThreatHistory ref="ocr_conservation_threat_history" :key="ocrConservationThreatHistoryId"
-                :threat-id="ocrConservationThreatHistoryId" />
+            <ConservationThreatHistory
+                ref="ocr_conservation_threat_history"
+                :key="ocrConservationThreatHistoryId"
+                :threat-id="ocrConservationThreatHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
+import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import ConservationThreatHistory from '../../internal/occurrence/ocr_conservation_threat_history.vue';
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OCRThreats',
+    components: {
+        FormSection,
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        CollapsibleFilters,
+    },
     props: {
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_external: {
             type: Boolean,
             default: false,
-        }
+        },
     },
     data: function () {
         let vm = this;
         return {
             uuid: 0,
             ocrConservationThreatHistoryId: null,
-            threatBody: "threatBody" + vm._uid,
-            panelBody: "species-threats-" + vm._uid,
+            threatBody: 'threatBody' + vm._uid,
+            panelBody: 'species-threats-' + vm._uid,
             values: null,
             ocr_threat_url: api_endpoints.ocr_threat,
 
@@ -142,16 +195,25 @@ export default {
             threat_potential_impact_filter_list: [],
 
             threat_status_filter_list: [
-                { id: "active", name: "Active" },
-                { id: "removed", name: "Removed" },
+                { id: 'active', name: 'Active' },
+                { id: 'removed', name: 'Removed' },
             ],
 
-            threats_headers: ['Number', 'Category', 'Date Observed', 'Threat Agent', 'Comments', 'Threat Source',
-                'Current Impact', 'Potential Impact', 'Action'],
+            threats_headers: [
+                'Number',
+                'Category',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Threat Source',
+                'Current Impact',
+                'Potential Impact',
+                'Action',
+            ],
             threats_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -161,19 +223,25 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report_obj.id + '/threats'),
-                    "dataSrc": '',
-                    "data": function (d) {
-                        d.filter_threat_category = vm.filterThreatCategory
-                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                        d.filter_threat_status = vm.filterThreatStatus
-                        d.filter_observed_from_date = vm.filterObservedFromDate
-                        d.filter_observed_to_date = vm.filterObservedToDate
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.occurrence_report,
+                        vm.occurrence_report_obj.id + '/threats'
+                    ),
+                    dataSrc: '',
+                    data: function (d) {
+                        d.filter_threat_category = vm.filterThreatCategory;
+                        d.filter_threat_current_impact =
+                            vm.filterThreatCurrentImpact;
+                        d.filter_threat_potential_impact =
+                            vm.filterThreatPotentialImpact;
+                        d.filter_threat_status = vm.filterThreatStatus;
+                        d.filter_observed_from_date = vm.filterObservedFromDate;
+                        d.filter_observed_to_date = vm.filterObservedToDate;
                     },
                 },
                 order: [[0, 'desc']],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -183,8 +251,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -192,117 +260,130 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "threat_number",
+                        data: 'threat_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return "OCR" + full.occurrence_report + " - " + full.threat_number;
-                            }
-                            else {
-                                return '<s>' + "OCR" + full.occurrence_report + " - " + full.threat_number + '</s>'
+                                return (
+                                    'OCR' +
+                                    full.occurrence_report +
+                                    ' - ' +
+                                    full.threat_number
+                                );
+                            } else {
+                                return (
+                                    '<s>' +
+                                    'OCR' +
+                                    full.occurrence_report +
+                                    ' - ' +
+                                    full.threat_number +
+                                    '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "threat_category",
+                        data: 'threat_category',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_category;
-                            }
-                            else {
-                                return '<s>' + full.threat_category + '</s>'
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
                     },
                     {
-                        data: "date_observed",
+                        data: 'date_observed',
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
-                            }
-                            else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "threat_agent",
+                        data: 'threat_agent',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_agent;
-                            }
-                            else {
-                                return '<s>' + full.threat_agent + '</s>'
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "comment",
+                        data: 'comment',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.visible) {
                                 return type == 'export' ? value : result;
-                            }
-                            else {
-                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "source",
+                        data: 'source',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.source;
-                            }
-                            else {
-                                return '<s>' + full.source + '</s>'
+                            } else {
+                                return '<s>' + full.source + '</s>';
                             }
                         },
                     },
                     {
-                        data: "current_impact_name",
+                        data: 'current_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.current_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.current_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "potential_impact_name",
+                        data: 'potential_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.potential_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.potential_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (!vm.isReadOnly) {
@@ -310,9 +391,7 @@ export default {
                                     links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
                                     links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
-                                }
-
-                                else {
+                                } else {
                                     links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
                                 }
                             } else {
@@ -322,7 +401,7 @@ export default {
                                 links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
                             }
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -337,15 +416,8 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        FormSection,
-        datatable,
-        ThreatDetail,
-        ConservationThreatHistory,
-        CollapsibleFilters,
+            },
+        };
     },
     computed: {
         isReadOnly: function () {
@@ -353,19 +425,20 @@ export default {
             if (this.is_readonly) {
                 return this.is_readonly;
             }
-            return this.occurrence_report_obj.readonly
+            return this.occurrence_report_obj.readonly;
         },
         filterApplied: function () {
-            if (this.filterThreatCategory === 'all' &&
+            if (
+                this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
                 this.filterThreatStatus === 'all' &&
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
             ) {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
     },
@@ -373,7 +446,9 @@ export default {
         filterApplied: function () {
             if (this.$refs.collapsible_filters) {
                 // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
         filterThreatCategory: function () {
@@ -401,22 +476,37 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
         },
     },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
 
         fetchFilterLists: function () {
             let vm = this;
             //Category, Current Impact, Potential Impact (generic to all threats)
-            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
-                const data = await response.json();
-                vm.threat_category_filter_list = data["threat_category_lists"];
-                vm.threat_current_impact_filter_list = data["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
-            }, (error) => {
-                console.log(error);
-            })
+            fetch('/api/threat/threat_list_of_values/').then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.threat_category_filter_list =
+                        data['threat_category_lists'];
+                    vm.threat_current_impact_filter_list =
+                        data['current_impact_lists'];
+                    vm.threat_potential_impact_filter_list =
+                        data['potential_impact_lists'];
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         newThreat: function () {
             let vm = this;
@@ -432,7 +522,7 @@ export default {
                 potential_impact: '',
                 potential_threat_onset: '',
                 date_observed: null,
-            }
+            };
             this.$refs.threat_detail.threatObj = new_ocr_threat;
             this.$refs.threat_detail.threat_action = 'add';
             this.$refs.threat_detail.isModalOpen = true;
@@ -441,28 +531,40 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         historyThreat: function (id) {
@@ -475,9 +577,9 @@ export default {
         discardThreat: function (id) {
             let vm = this;
             swal.fire({
-                title: "Remove Threat",
-                text: "Are you sure you want to remove this Threat?",
-                icon: "question",
+                title: 'Remove Threat',
+                text: 'Are you sure you want to remove this Threat?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Remove Threat',
                 customClass: {
@@ -485,40 +587,52 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your threat has been removed',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            }).then((result) => {
-                                vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                                if (vm.occurrence_report_obj.processing_status == "Unlocked") {
-                                    vm.$router.go();
-                                }
-                            });
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.ocr_threat,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your threat has been removed',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                }).then((result) => {
+                                    vm.$refs.threats_datatable.vmDataTable.ajax.reload();
+                                    if (
+                                        vm.occurrence_report_obj
+                                            .processing_status == 'Unlocked'
+                                    ) {
+                                        vm.$router.go();
+                                    }
+                                });
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateThreat: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Threat",
-                text: "Are you sure you want to Reinstate this Threat?",
-                icon: "question",
+                title: 'Reinstate Threat',
+                text: 'Are you sure you want to Reinstate this Threat?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Threat',
                 customClass: {
@@ -526,11 +640,17 @@ export default {
                 },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
+                    fetch(
+                        helpers.add_endpoint_json(
+                            api_endpoints.ocr_threat,
+                            id + '/reinstate'
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: { 'Content-Type': 'application/json' },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your threat has been reinstated',
@@ -540,69 +660,94 @@ export default {
                                 },
                             }).then((result) => {
                                 vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                                if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+                                if (
+                                    vm.occurrence_report_obj
+                                        .processing_status == 'Unlocked'
+                                ) {
                                     vm.$router.go();
                                 }
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         updatedThreats() {
             let vm = this;
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
-            if (vm.occurrence_report_obj.processing_status == "Unlocked") {
+            if (vm.occurrence_report_obj.processing_status == 'Unlocked') {
                 vm.$router.go();
             }
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-edit-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-threat');
-                vm.editThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-threat');
-                vm.viewThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-threat');
-                vm.historyThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-threat');
+                    vm.editThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-threat');
+                    vm.viewThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-threat');
+                    vm.historyThreat(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-discard-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-threat');
-                vm.discardThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-threat');
+                    vm.discardThreat(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-reinstate-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-threat');
-                vm.reinstateThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-threat');
+                    vm.reinstateThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
index f96cd342..8dc0f6eb 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
@@ -1,290 +1,431 @@
 <template lang="html">
     <div id="plant_count">
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Plant Count Method:</label>
+            <label for="" class="col-sm-3 control-label"
+                >Plant Count Method:</label
+            >
             <div class="col-sm-9">
                 <template v-if="!isReadOnly">
                     <template
-                        v-if="plant_count_method_list && plant_count_method_list.length > 0 && plant_count.plant_count_method_id && !plant_count_method_list.map((d) => d.id).includes(plant_count.plant_count_method_id)">
-                        <input type="text" v-if="plant_count.plant_count_method" class="form-control mb-3"
-                            :value="plant_count.plant_count_method + ' (Now Archived)'" disabled />
+                        v-if="
+                            plant_count_method_list &&
+                            plant_count_method_list.length > 0 &&
+                            plant_count.plant_count_method_id &&
+                            !plant_count_method_list
+                                .map((d) => d.id)
+                                .includes(plant_count.plant_count_method_id)
+                        "
+                    >
+                        <input
+v-if="plant_count.plant_count_method" type="text" class="form-control mb-3"
+                            :value="
+                                plant_count.plant_count_method +
+                                ' (Now Archived)'
+                            "
+                            disabled
+                        />
                         <div class="mb-3 text-muted">
                             Change plant count method to:
                         </div>
                     </template>
-                    <select class="form-select" v-model="plant_count.plant_count_method_id">
-                        <option v-for="plant_count_method in plant_count_method_list" :value="plant_count_method.id"
-                            v-bind:key="plant_count_method.id">
+                    <select
+                        v-model="plant_count.plant_count_method_id"
+                        class="form-select"
+                    >
+                        <option
+v-for="plant_count_method in plant_count_method_list" :key="plant_count_method.id"
+                            :value="plant_count_method.id">
                             {{ plant_count_method.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
-                    <input class="form-control" type="text" :disabled="isReadOnly"
-                        v-model="plant_count.plant_count_method" />
+                    <input
+v-model="plant_count.plant_count_method" class="form-control" type="text"
+                        :disabled="isReadOnly" />
                 </template>
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Plant Count Accuracy:</label>
+            <label for="" class="col-sm-3 control-label"
+                >Plant Count Accuracy:</label
+            >
             <div class="col-sm-9">
                 <template v-if="!isReadOnly">
                     <template
-                        v-if="plant_count_accuracy_list && plant_count_accuracy_list.length > 0 && plant_count.plant_count_accuracy_id && !plant_count_accuracy_list.map((d) => d.id).includes(plant_count.plant_count_accuracy_id)">
-                        <input type="text" v-if="plant_count.plant_count_accuracy" class="form-control mb-3"
-                            :value="plant_count.plant_count_accuracy + ' (Now Archived)'" disabled />
+                        v-if="
+                            plant_count_accuracy_list &&
+                            plant_count_accuracy_list.length > 0 &&
+                            plant_count.plant_count_accuracy_id &&
+                            !plant_count_accuracy_list
+                                .map((d) => d.id)
+                                .includes(plant_count.plant_count_accuracy_id)
+                        "
+                    >
+                        <input
+v-if="plant_count.plant_count_accuracy" type="text" class="form-control mb-3"
+                            :value="
+                                plant_count.plant_count_accuracy +
+                                ' (Now Archived)'
+                            "
+                            disabled
+                        />
                         <div class="mb-3 text-muted">
                             Change plant count accuracy to:
                         </div>
                     </template>
-                    <select class="form-select" v-model="plant_count.plant_count_accuracy_id">
-                        <option v-for="plant_count_accuracy in plant_count_accuracy_list" :value="plant_count_accuracy.id"
-                            v-bind:key="plant_count_accuracy.id">
+                    <select
+                        v-model="plant_count.plant_count_accuracy_id"
+                        class="form-select"
+                    >
+                        <option
+v-for="plant_count_accuracy in plant_count_accuracy_list" :key="plant_count_accuracy.id"
+                            :value="plant_count_accuracy.id">
                             {{ plant_count_accuracy.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
-                    <input class="form-control" type="text" :disabled="isReadOnly"
-                        v-model="plant_count.plant_count_accuracy" />
+                    <input
+v-model="plant_count.plant_count_accuracy" class="form-control" type="text"
+                        :disabled="isReadOnly" />
                 </template>
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Counted Subject:</label>
+            <label for="" class="col-sm-3 control-label"
+                >Counted Subject:</label
+            >
             <div class="col-sm-9">
                 <template v-if="!isReadOnly">
                     <template
-                        v-if="counted_subject_list && counted_subject_list.length > 0 && plant_count.counted_subject_id && !counted_subject_list.map((d) => d.id).includes(plant_count.counted_subject_id)">
-                        <input type="text" v-if="plant_count.counted_subject" class="form-control mb-3"
-                            :value="plant_count.counted_subject + ' (Now Archived)'" disabled />
+                        v-if="
+                            counted_subject_list &&
+                            counted_subject_list.length > 0 &&
+                            plant_count.counted_subject_id &&
+                            !counted_subject_list
+                                .map((d) => d.id)
+                                .includes(plant_count.counted_subject_id)
+                        "
+                    >
+                        <input
+v-if="plant_count.counted_subject" type="text" class="form-control mb-3"
+                            :value="
+                                plant_count.counted_subject + ' (Now Archived)'
+                            "
+                            disabled
+                        />
                         <div class="mb-3 text-muted">
                             Change counted subject to:
                         </div>
                     </template>
-                    <select class="form-select" v-model="plant_count.counted_subject_id">
-                        <option v-for="counted_subject in counted_subject_list" :value="counted_subject.id"
-                            v-bind:key="counted_subject.id">
+                    <select
+                        v-model="plant_count.counted_subject_id"
+                        class="form-select"
+                    >
+                        <option
+v-for="counted_subject in counted_subject_list" :key="counted_subject.id"
+                            :value="counted_subject.id">
                             {{ counted_subject.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
-                    <input class="form-control" type="text" :disabled="isReadOnly"
-                        v-model="plant_count.counted_subject" />
+                    <input
+v-model="plant_count.counted_subject" class="form-control" type="text"
+                        :disabled="isReadOnly" />
                 </template>
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Plant Count Date: </label>
+            <label for="" class="col-sm-3 control-label"
+                >Plant Count Date:
+            </label>
             <div class="col-sm-9">
-                <input v-model="plant_count.count_date
-                    " :disabled="true" type="datetime-local" class="form-control" name="plant_count_date" />
+                <input
+v-model="plant_count.count_date
+                    :disabled="true"
+                    type="datetime-local"
+                    class="form-control"
+                    name="plant_count_date"
+                />
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Estimated Population Area(m<sup>2</sup>) :</label>
+            <label for="" class="col-sm-3 control-label"
+                >Estimated Population Area(m<sup>2</sup>) :</label
+            >
             <div class="col-sm-6">
-                <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="est_population_area"
-                    placeholder="" min="0" v-model="plant_count.estimated_population_area" />
+                <input
+id="est_population_area" v-model="plant_count.estimated_population_area" :disabled="isReadOnly" type="number"
+                    class="form-control ocr_number"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Condition of Plants:</label>
+            <label for="" class="col-sm-3 control-label"
+                >Condition of Plants:</label
+            >
             <div class="col-sm-9">
                 <template v-if="!isReadOnly">
                     <template
-                        v-if="plant_condition_list && plant_condition_list.length > 0 && plant_count.plant_condition_id && !plant_condition_list.map((d) => d.id).includes(plant_count.plant_condition_id)">
-                        <input type="text" v-if="plant_count.plant_condition" class="form-control mb-3"
-                            :value="plant_count.plant_condition + ' (Now Archived)'" disabled />
+                        v-if="
+                            plant_condition_list &&
+                            plant_condition_list.length > 0 &&
+                            plant_count.plant_condition_id &&
+                            !plant_condition_list
+                                .map((d) => d.id)
+                                .includes(plant_count.plant_condition_id)
+                        "
+                    >
+                        <input
+v-if="plant_count.plant_condition" type="text" class="form-control mb-3"
+                            :value="
+                                plant_count.plant_condition + ' (Now Archived)'
+                            "
+                            disabled
+                        />
                         <div class="mb-3 text-muted">
                             Change plant count accuracy to:
                         </div>
                     </template>
-                    <select class="form-select" v-model="plant_count.plant_condition_id">
-                        <option v-for="plant_condition in plant_condition_list" :value="plant_condition.id"
-                            v-bind:key="plant_condition.id">
+                    <select
+                        v-model="plant_count.plant_condition_id"
+                        class="form-select"
+                    >
+                        <option
+v-for="plant_condition in plant_condition_list" :key="plant_condition.id"
+                            :value="plant_condition.id">
                             {{ plant_condition.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
-                    <input class="form-control" type="text" :disabled="isReadOnly"
-                        v-model="plant_count.plant_condition" />
+                    <input
+v-model="plant_count.plant_condition" class="form-control" type="text"
+                        :disabled="isReadOnly" />
                 </template>
             </div>
         </div>
-        <label for="" class="col-lg-3 control-label fs-5 fw-bold">Plant Count - Detailed</label>
+        <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+            >Plant Count - Detailed</label
+        >
         <div class="row mb-3">
             <div class="col-sm-2">
-                <label class="form-check-label fw-bold" for="not-counted">Not Counted</label>
+                <label class="form-check-label fw-bold" for="not-counted"
+                    >Not Counted</label
+                >
             </div>
             <div class="col-sm-2">
-                <input type="checkbox" id="not-counted" v-model="plant_count.counted" true-value="false"
-                    false-value="true" @change="checkboxChanged">
+                <input
+id="not-counted" v-model="plant_count.counted" type="checkbox" true-value="false"
+                    false-value="true"
+                    @change="checkboxChanged"
+                />
             </div>
         </div>
         <div class="row mb-3">
-            <div class="col-sm-3">
-
-            </div>
-            <div class="col-sm-2 fw-bold">
-                Mature
-            </div>
-            <div class="col-sm-2 fw-bold">
-                Juvenile
-            </div>
-            <div class="col-sm-2 fw-bold">
-                Seedling
-            </div>
-            <div class="col-sm-2 fw-bold">
-                Unknown
-            </div>
+            <div class="col-sm-3"></div>
+            <div class="col-sm-2 fw-bold">Mature</div>
+            <div class="col-sm-2 fw-bold">Juvenile</div>
+            <div class="col-sm-2 fw-bold">Seedling</div>
+            <div class="col-sm-2 fw-bold">Unknown</div>
         </div>
         <div class="row mb-3">
-            <div class="col-sm-3 fw-bold">
-                Alive
-            </div>
+            <div class="col-sm-3 fw-bold">Alive</div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="alive_mature" placeholder="" min="0" v-model="plant_count.detailed_alive_mature" />
+                <input
+id="alive_mature" v-model="plant_count.detailed_alive_mature" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="plant_alive_juvenile" placeholder="" min="0" v-model="plant_count.detailed_alive_juvenile" />
+                <input
+id="plant_alive_juvenile" v-model="plant_count.detailed_alive_juvenile" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="alive_seedling" placeholder="" min="0" v-model="plant_count.detailed_alive_seedling" />
+                <input
+id="alive_seedling" v-model="plant_count.detailed_alive_seedling" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="alive_unknown" placeholder="" min="0" v-model="plant_count.detailed_alive_unknown" />
+                <input
+id="alive_unknown" v-model="plant_count.detailed_alive_unknown" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
         </div>
         <div class="row mb-3">
-            <div class="col-sm-3 fw-bold">
-                Dead
-            </div>
+            <div class="col-sm-3 fw-bold">Dead</div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="dead_mature" placeholder="" min="0" v-model="plant_count.detailed_dead_mature" />
+                <input
+id="dead_mature" v-model="plant_count.detailed_dead_mature" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="plant_dead_juvenile" placeholder="" min="0" v-model="plant_count.detailed_dead_juvenile" />
+                <input
+id="plant_dead_juvenile" v-model="plant_count.detailed_dead_juvenile" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="dead_seedling" placeholder="" min="0" v-model="plant_count.detailed_dead_seedling" />
+                <input
+id="dead_seedling" v-model="plant_count.detailed_dead_seedling" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
             <div class="col-sm-2">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control plant_count"
-                    id="dead_unknown" placeholder="" min="0" v-model="plant_count.detailed_dead_unknown" />
+                <input
+id="dead_unknown" v-model="plant_count.detailed_dead_unknown" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control plant_count" placeholder="" min="0" />
             </div>
         </div>
-        <label for="" class="col-lg-3 control-label fs-5 fw-bold">Plant Count - Simple</label>
+        <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+            >Plant Count - Simple</label
+        >
         <div class="row mb-3">
             <label for="" class="col-sm-3 control-label">Number alive :</label>
             <div class="col-sm-6">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control ocr_number"
-                    id="simple_alive" placeholder="" min="0" v-model="plant_count.simple_alive" />
+                <input
+id="simple_alive" v-model="plant_count.simple_alive" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control ocr_number" placeholder="" min="0" />
             </div>
         </div>
         <div class="row mb-3">
             <label for="" class="col-sm-3 control-label">Number dead :</label>
             <div class="col-sm-6">
-                <input :disabled="isReadOnly || not_counted" type="number" class="form-control ocr_number"
-                    id="simple_dead" placeholder="" min="0" v-model="plant_count.simple_dead" />
+                <input
+id="simple_dead" v-model="plant_count.simple_dead" :disabled="isReadOnly || not_counted"
+                    type="number" class="form-control ocr_number" placeholder="" min="0" />
             </div>
         </div>
-        <label for="" class="col-lg-3 control-label fs-5 fw-bold">Quadrats</label>
+        <label for="" class="col-lg-3 control-label fs-5 fw-bold"
+            >Quadrats</label
+        >
         <div class="row mb-3">
             <label class="col-sm-3 control-label">Quadrats Present?</label>
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="quadratsPresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="quadratsPresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.quadrats_present" value="true">&nbsp;
+                    <input
+id="quadratsPresentYes" v-model="plant_count.quadrats_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="quadratsPresentNo">No</label>
-                    <input :disabled="isReadOnly" id="quadratsPresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.quadrats_present" value="false">&nbsp;
+                    <input
+id="quadratsPresentNo" v-model="plant_count.quadrats_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
         <div class="row mb-3">
-            <label class="col-sm-3 control-label">Quadrats Data attached?</label>
+            <label class="col-sm-3 control-label"
+                >Quadrats Data attached?</label
+            >
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="quadratsDataYes">Yes</label>
-                    <input :disabled="isReadOnly" id="quadratsDataYes" class="form-check-input" type="radio"
-                        v-model="plant_count.quadrats_data_attached" value="true">&nbsp;
+                    <input
+id="quadratsDataYes" v-model="plant_count.quadrats_data_attached" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="quadratsDataNo">No</label>
-                    <input :disabled="isReadOnly" id="quadratsDataNo" class="form-check-input" type="radio"
-                        v-model="plant_count.quadrats_data_attached" value="false">&nbsp;
+                    <input
+id="quadratsDataNo" v-model="plant_count.quadrats_data_attached" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Number of quadrats surveyed :</label>
+            <label for="" class="col-sm-3 control-label"
+                >Number of quadrats surveyed :</label
+            >
             <div class="col-sm-6">
-                <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="quadrats_surveyed"
-                    placeholder="" min="0" v-model="plant_count.quadrats_surveyed" />
+                <input
+id="quadrats_surveyed" v-model="plant_count.quadrats_surveyed" :disabled="isReadOnly" type="number"
+                    class="form-control ocr_number"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Individual quadrat area (m<sup>2</sup>) :</label>
+            <label for="" class="col-sm-3 control-label"
+                >Individual quadrat area (m<sup>2</sup>) :</label
+            >
             <div class="col-sm-6">
-                <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="ind_quadrat_area"
-                    placeholder="" min="0" v-model="plant_count.individual_quadrat_area" />
+                <input
+id="ind_quadrat_area" v-model="plant_count.individual_quadrat_area" :disabled="isReadOnly" type="number"
+                    class="form-control ocr_number"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Total quadrat area (m<sup>2</sup>) :</label>
+            <label for="" class="col-sm-3 control-label"
+                >Total quadrat area (m<sup>2</sup>) :</label
+            >
             <div class="col-sm-6">
-                <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="tot_quadrat_area"
-                    placeholder="" min="0" v-model="plant_count.total_quadrat_area" />
+                <input
+id="tot_quadrat_area" v-model="plant_count.total_quadrat_area" :disabled="isReadOnly" type="number"
+                    class="form-control ocr_number"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Flowering plants % :</label>
+            <label for="" class="col-sm-3 control-label"
+                >Flowering plants % :</label
+            >
             <div class="col-sm-6">
-                <input :disabled="isReadOnly" type="number" class="form-control ocr_number" id="flow_plant_per"
-                    placeholder="" min="0" max="100" v-model="plant_count.flowering_plants_per" />
+                <input
+id="flow_plant_per" v-model="plant_count.flowering_plants_per" :disabled="isReadOnly" type="number"
+                    class="form-control ocr_number"
+                    placeholder=""
+                    min="0"
+                    max="100"
+                />
             </div>
         </div>
         <label for="" class="col-lg-3 control-label fs-5 fw-bold"></label>
         <div class="row mb-3">
-            <label class="col-sm-3 control-label">Clonal Reproduction present?</label>
+            <label class="col-sm-3 control-label"
+                >Clonal Reproduction present?</label
+            >
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="reprodPresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="reprodPresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.clonal_reproduction_present" value="true">&nbsp;
+                    <input
+id="reprodPresentYes" v-model="plant_count.clonal_reproduction_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="reprodPresentNo">No</label>
-                    <input :disabled="isReadOnly" id="reprodPresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.clonal_reproduction_present" value="false">&nbsp;
+                    <input
+id="reprodPresentNo" v-model="plant_count.clonal_reproduction_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
         <div class="row mb-3">
-            <label class="col-sm-3 control-label">Vegetative State present?</label>
+            <label class="col-sm-3 control-label"
+                >Vegetative State present?</label
+            >
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="vegStatePresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="vegStatePresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.vegetative_state_present" value="true">&nbsp;
+                    <input
+id="vegStatePresentYes" v-model="plant_count.vegetative_state_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="vegStatePresentNo">No</label>
-                    <input :disabled="isReadOnly" id="vegStatePresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.vegetative_state_present" value="false">&nbsp;
+                    <input
+id="vegStatePresentNo" v-model="plant_count.vegetative_state_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
@@ -293,13 +434,15 @@
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="flowerBudsPresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="flowerBudsPresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.flower_bud_present" value="true">&nbsp;
+                    <input
+id="flowerBudsPresentYes" v-model="plant_count.flower_bud_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="flowerBudsPresentNo">No</label>
-                    <input :disabled="isReadOnly" id="flowerBudsPresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.flower_bud_present" value="false">&nbsp;
+                    <input
+id="flowerBudsPresentNo" v-model="plant_count.flower_bud_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
@@ -308,28 +451,34 @@
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="flowerPresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="flowerPresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.flower_present" value="true">&nbsp;
+                    <input
+id="flowerPresentYes" v-model="plant_count.flower_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="flowerPresentNo">No</label>
-                    <input :disabled="isReadOnly" id="flowerPresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.flower_present" value="false">&nbsp;
+                    <input
+id="flowerPresentNo" v-model="plant_count.flower_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
         <div class="row mb-3">
-            <label class="col-sm-3 control-label">Immature Fruit present?</label>
+            <label class="col-sm-3 control-label"
+                >Immature Fruit present?</label
+            >
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="immFruitPresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="immFruitPresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.immature_fruit_present" value="true">&nbsp;
+                    <input
+id="immFruitPresentYes" v-model="plant_count.immature_fruit_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="immFruitPresentNo">No</label>
-                    <input :disabled="isReadOnly" id="immFruitPresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.immature_fruit_present" value="false">&nbsp;
+                    <input
+id="immFruitPresentNo" v-model="plant_count.immature_fruit_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
@@ -338,73 +487,95 @@
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="ripeFruitPresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="ripeFruitPresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.ripe_fruit_present" value="true">&nbsp;
+                    <input
+id="ripeFruitPresentYes" v-model="plant_count.ripe_fruit_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="ripeFruitPresentNo">No</label>
-                    <input :disabled="isReadOnly" id="ripeFruitPresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.ripe_fruit_present" value="false">&nbsp;
+                    <input
+id="ripeFruitPresentNo" v-model="plant_count.ripe_fruit_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
         <div class="row mb-3">
-            <label class="col-sm-3 control-label">Dehisced Fruit present?</label>
+            <label class="col-sm-3 control-label"
+                >Dehisced Fruit present?</label
+            >
             <div class="col">
                 <div class="form-check form-check-inline">
                     <label for="dehFruitPresentYes">Yes</label>
-                    <input :disabled="isReadOnly" id="dehFruitPresentYes" class="form-check-input" type="radio"
-                        v-model="plant_count.dehisced_fruit_present" value="true">&nbsp;
+                    <input
+id="dehFruitPresentYes" v-model="plant_count.dehisced_fruit_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="true">&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="dehFruitPresentNo">No</label>
-                    <input :disabled="isReadOnly" id="dehFruitPresentNo" class="form-check-input" type="radio"
-                        v-model="plant_count.dehisced_fruit_present" value="false">&nbsp;
+                    <input
+id="dehFruitPresentNo" v-model="plant_count.dehisced_fruit_present" :disabled="isReadOnly" class="form-check-input"
+                        type="radio" value="false">&nbsp;
                 </div>
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Pollinator Observations :</label>
+            <label for="" class="col-sm-3 control-label"
+                >Pollinator Observations :</label
+            >
             <div class="col-sm-9">
-                <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="pollinator_obs"
-                    placeholder="" v-model="plant_count.pollinator_observation" />
+                <textarea
+id="pollinator_obs" v-model="plant_count.pollinator_observation" :disabled="isReadOnly" type="text" row="2"
+                    class="form-control" placeholder="" />
             </div>
         </div>
         <div class="row mb-3">
-            <label for="" class="col-sm-3 control-label">Plant Count Comments :</label>
+            <label for="" class="col-sm-3 control-label"
+                >Plant Count Comments :</label
+            >
             <div class="col-sm-9">
-                <textarea :disabled="isReadOnly" type="text" row="2" class="form-control" id="plant_count_comment"
-                    placeholder="" v-model="plant_count.comment" />
+                <textarea
+id="plant_count_comment" v-model="plant_count.comment" :disabled="isReadOnly" type="text" row="2"
+                    class="form-control" placeholder="" />
             </div>
         </div>
         <div class="row mb-3">
             <div class="col-sm-12">
-                <span v-if="plant_count.copied_ocr" class="float-end"><b>Sourced from
-                        {{ plant_count.copied_ocr }}</b></span>
+                <span v-if="plant_count.copied_ocr" class="float-end"
+                    ><b>Sourced from {{ plant_count.copied_ocr }}</b></span
+                >
             </div>
         </div>
         <div class="row mb-3">
             <div class="col-sm-12">
-                <button v-if="!updatingPlantCountDetails" :disabled="isReadOnly"
-                    class="btn btn-primary btn-sm float-end" @click.prevent="updatePlantCountDetails()">Update</button>
-                <button v-else disabled class="float-end btn btn-primary">Updating <span
-                        class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    <span class="visually-hidden">Loading...</span></button>
+                <button
+v-if="!updatingPlantCountDetails" :disabled="isReadOnly"
+                    class="btn btn-primary btn-sm float-end"
+                    @click.prevent="updatePlantCountDetails()"
+                >
+                    Update
+                </button>
+                <button v-else disabled class="float-end btn btn-primary">
+                    Updating
+                    <span
+                        class="spinner-border spinner-border-sm"
+                        role="status"
+                        aria-hidden="true"
+                    ></span>
+                    <span class="visually-hidden">Loading...</span>
+                </button>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'PlantCount',
+    components: {
+        FormSection,
+    },
     props: {
         plant_count: {
             type: Object,
@@ -449,12 +620,42 @@ export default {
             not_counted: false,
         }
     },
-    components: {
-        FormSection,
-    },
-    computed: {
+    computed: {},
+    watch: {},
+    created: async function () {
+        let vm = this;
+        const response = await fetch(`/api/occurrence/plant_count_list_of_values.json`);
+        vm.listOfPlantValuesDict = await response.json();
+        vm.plant_count_method_list = vm.listOfPlantValuesDict.plant_count_method_list;
+        vm.plant_count_method_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.plant_count_accuracy_list = vm.listOfPlantValuesDict.plant_count_accuracy_list;
+        vm.plant_count_accuracy_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.plant_condition_list = vm.listOfPlantValuesDict.plant_condition_list;
+        vm.plant_condition_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+        vm.counted_subject_list = vm.listOfPlantValuesDict.counted_subject_list;
+        vm.counted_subject_list.splice(0, 0,
+            {
+                id: null,
+                name: null,
+            });
+
     },
-    watch: {
+    mounted: function () {
+        let vm = this;
+        //this.$emit('component-mounted');
+        vm.not_counted = !vm.plant_count.counted;
     },
     methods: {
         eventListeners: function () {
@@ -503,43 +704,7 @@ export default {
             });
         },
     },
-    created: async function () {
-        let vm = this;
-        const response = await fetch(`/api/occurrence/plant_count_list_of_values.json`);
-        vm.listOfPlantValuesDict = await response.json();
-        vm.plant_count_method_list = vm.listOfPlantValuesDict.plant_count_method_list;
-        vm.plant_count_method_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.plant_count_accuracy_list = vm.listOfPlantValuesDict.plant_count_accuracy_list;
-        vm.plant_count_accuracy_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.plant_condition_list = vm.listOfPlantValuesDict.plant_condition_list;
-        vm.plant_condition_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.counted_subject_list = vm.listOfPlantValuesDict.counted_subject_list;
-        vm.counted_subject_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-
-    },
-    mounted: function () {
-        let vm = this;
-        //this.$emit('component-mounted');
-        vm.not_counted = !vm.plant_count.counted;
-
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -563,13 +728,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
index c630174d..c50662d6 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
@@ -1,83 +1,174 @@
 <template lang="html">
     <div id="speciesOccurrence">
-        <FormSection :formCollapse="false" label="Occurrence" Index="occurrence">
+        <FormSection
+            :form-collapse="false"
+            label="Occurrence"
+            Index="occurrence"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label fw-bold">Occurrence Name: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-3 control-label fw-bold"
+                    >Occurrence Name: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <textarea class="form-control" :disabled="isReadOnly" rows="1" id="occurrence_name" placeholder=""
-                        v-model="occurrence_obj.occurrence_name" />
+                    <textarea
+                        id="occurrence_name"
+                        v-model="occurrence_obj.occurrence_name"
+                        class="form-control"
+                        :disabled="isReadOnly"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label fw-bold">Scientific Name: <span
-                        class="text-danger">*</span></label>
-                <div class="col-sm-9" :id="select_scientific_name">
-                    <select :disabled="isReadOnly" :id="scientific_name_lookup" :name="scientific_name_lookup"
-                        :ref="scientific_name_lookup" class="form-control" />
+                <label for="" class="col-sm-3 control-label fw-bold"
+                    >Scientific Name: <span class="text-danger">*</span></label
+                >
+                <div :id="select_scientific_name" class="col-sm-9">
+                    <select
+                        :id="scientific_name_lookup"
+                        :ref="scientific_name_lookup"
+                        :disabled="isReadOnly"
+                        :name="scientific_name_lookup"
+                        class="form-control"
+                    />
                 </div>
             </div>
             <div v-if="occurrence_obj.migrated_from_id" class="row mb-3">
-                    <label for="migrated_from_id" class="col-sm-3 control-label">Migrated From ID:</label>
-                    <div class="col-sm-9">
-                        <input id="migrated_from_id" :value="occurrence_obj.migrated_from_id" disabled
-                            type="text" class="form-control" />
-                    </div>
+                <label for="migrated_from_id" class="col-sm-3 control-label"
+                    >Migrated From ID:</label
+                >
+                <div class="col-sm-9">
+                    <input
+                        id="migrated_from_id"
+                        :value="occurrence_obj.migrated_from_id"
+                        disabled
+                        type="text"
+                        class="form-control"
+                    />
                 </div>
+            </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Common Name:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Common Name:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="true" class="form-control" rows="1" id="common_name" placeholder=""
-                        v-model="common_name" />
+                    <textarea
+                        id="common_name"
+                        v-model="common_name"
+                        :disabled="true"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Occurrence Source:</label>
-                <div v-for="source in occurrence_source_list" class="col-sm-auto">
-                    <input :disabled="isReadOnly" type="checkbox" v-model="occurrence_obj.occurrence_source"
-                        v-bind:value="source[0]" v-bind:id="source[1]">
+                <label for="" class="col-sm-3 control-label"
+                    >Occurrence Source:</label
+                >
+                <div
+                    v-for="source in occurrence_source_list"
+                    class="col-sm-auto"
+                >
+                    <input
+                        :id="source[1]"
+                        v-model="occurrence_obj.occurrence_source"
+                        :disabled="isReadOnly"
+                        type="checkbox"
+                        :value="source[0]"
+                    />
                     {{ source[1] }}
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Wild Status:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Wild Status:</label
+                >
                 <div class="col-sm-9">
                     <template
-                        v-if="wild_status_list && wild_status_list.length > 0 && !wild_status_list.map((d) => d.id).includes(occurrence_obj.wild_status)">
-                        <input type="text" v-if="occurrence_obj.wild_status_name" class="form-control mb-3"
-                            :value="occurrence_obj.wild_status_name + ' (Now Archived)'" disabled />
-                        <div v-if="occurrence_obj.wild_status" class="mb-3 text-muted">
+                        v-if="
+                            wild_status_list &&
+                            wild_status_list.length > 0 &&
+                            !wild_status_list
+                                .map((d) => d.id)
+                                .includes(occurrence_obj.wild_status)
+                        "
+                    >
+                        <input
+                            v-if="occurrence_obj.wild_status_name"
+                            type="text"
+                            class="form-control mb-3"
+                            :value="
+                                occurrence_obj.wild_status_name +
+                                ' (Now Archived)'
+                            "
+                            disabled
+                        />
+                        <div
+                            v-if="occurrence_obj.wild_status"
+                            class="mb-3 text-muted"
+                        >
                             Change wild status to:
                         </div>
                     </template>
-                    <select :disabled="isReadOnly" class="form-select" v-model="occurrence_obj.wild_status">
-                        <option :value="null" selected disabled>Select Wild Status</option>
-                        <option v-for="option in wild_status_list" :value="option.id" :key="option.id">
+                    <select
+                        v-model="occurrence_obj.wild_status"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option :value="null" selected disabled>
+                            Select Wild Status
+                        </option>
+                        <option
+                            v-for="option in wild_status_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
                 </div>
             </div>
             <div class="row mb-3">
-                <label class="col-sm-3 control-label" for="">Review Due Date:</label>
+                <label class="col-sm-3 control-label" for=""
+                    >Review Due Date:</label
+                >
                 <div class="col-sm-3">
-                    <input type="date" class="form-control" v-model="occurrence_obj.review_due_date"
-                        placeholder="DD/MM/YYYY">
+                    <input
+                        v-model="occurrence_obj.review_due_date"
+                        type="date"
+                        class="form-control"
+                        placeholder="DD/MM/YYYY"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Comments:</label>
                 <div class="col-sm-9">
-                    <textarea class="form-control" :disabled="isReadOnly" id="occurrence_comments" placeholder=""
-                        v-model="occurrence_obj.comment" rows="4" />
+                    <textarea
+                        id="occurrence_comments"
+                        v-model="occurrence_obj.comment"
+                        class="form-control"
+                        :disabled="isReadOnly"
+                        placeholder=""
+                        rows="4"
+                    />
                 </div>
             </div>
 
-            <ContactDatatable ref="contact_datatable" :occurrence_obj="occurrence_obj" :is-read-only="isReadOnly"
-                @refreshOccurrence="refreshOccurrence()">
+            <ContactDatatable
+                ref="contact_datatable"
+                :occurrence_obj="occurrence_obj"
+                :is-read-only="isReadOnly"
+                @refresh-occurrence="refreshOccurrence()"
+            >
             </ContactDatatable>
 
-            <RelatedReports :isReadOnly="isReadOnly" :occurrence_obj=occurrence_obj />
+            <RelatedReports
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+            />
         </FormSection>
     </div>
 </template>
@@ -85,68 +176,103 @@
 <script>
 import FormSection from '@/components/forms/section_toggle.vue';
 import ContactDatatable from './contact_datatable.vue';
-import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue'
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
+import { api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'SpeciesOccurrence',
+    components: {
+        FormSection,
+        RelatedReports,
+        ContactDatatable,
+    },
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
         let vm = this;
         return {
             scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
-            select_scientific_name: "select_scientific_name" + vm._uid,
-            select_wild_status: "select_wild_status" + vm._uid,
+            select_scientific_name: 'select_scientific_name' + vm._uid,
+            select_wild_status: 'select_wild_status' + vm._uid,
             common_name: null,
             occ_profile_dict: {},
             wild_status_list: [],
             occurrence_source_list: [],
-        }
+        };
     },
-    components: {
-        FormSection,
-        RelatedReports,
-        ContactDatatable,
+    computed: {
+        isReadOnly: function () {
+            return !this.occurrence_obj.can_user_edit;
+        },
+    },
+    watch: {},
+    created: async function () {
+        let vm = this;
+        //------fetch list of values according to action
+        let action = this.$route.query.action;
+        let dict_url =
+            action == 'view'
+                ? api_endpoints.occ_profile_dict +
+                  '?group_type=' +
+                  vm.occurrence_obj.group_type +
+                  '&action=' +
+                  action
+                : api_endpoints.occ_profile_dict +
+                  '?group_type=' +
+                  vm.occurrence_obj.group_type;
+        fetch(dict_url).then(
+            async (response) => {
+                vm.occ_profile_dict = await response.json();
+                vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
+                vm.occurrence_source_list =
+                    vm.occ_profile_dict.occurrence_source_list;
+                this.getSpeciesDisplay();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
     },
-    watch: {
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.eventListeners();
+            vm.initialiseScientificNameLookup();
+        });
     },
     methods: {
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_scientific_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.occurrence_obj.group_type_id,
-                            has_species: true,
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.occurrence_obj.group_type_id,
+                                has_species: true,
+                            };
+                            return query;
+                        },
+                        // results: function (data, page) { // parse the results into the format expected by Select2.
+                        //     // since we are using custom formatting functions we do not need to alter remote JSON data
+                        //     return {results: data};
+                        // },
                     },
-                    // results: function (data, page) { // parse the results into the format expected by Select2.
-                    //     // since we are using custom formatting functions we do not need to alter remote JSON data
-                    //     return {results: data};
-                    // },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.occurrence_obj.species = e.params.data.species_id;
@@ -154,17 +280,21 @@ export default {
                     vm.species_display = e.params.data.text;
                     vm.taxon_previous_name = e.params.data.taxon_previous_name;
                     vm.common_name = e.params.data.common_name;
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.occurrence_obj.species = null;
                     //vm.occurrence_obj.species_id = null
                     vm.species_display = '';
                     vm.taxon_previous_name = '';
                     vm.common_name = '';
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
@@ -172,51 +302,25 @@ export default {
         getSpeciesDisplay: function () {
             let vm = this;
             if (vm.occurrence_obj.species_taxonomy_id != null) {
-                let species_display_url = api_endpoints.species_display + "?taxon_id=" + vm.occurrence_obj.species_taxonomy_id
+                let species_display_url =
+                    api_endpoints.species_display +
+                    '?taxon_id=' +
+                    vm.occurrence_obj.species_taxonomy_id;
                 fetch(species_display_url).then(async (response) => {
-                        const data = await response.json();
-                        var newOption = new Option(data.name, data.id, false, true);
-                        $('#' + vm.scientific_name_lookup).append(newOption);
-                        vm.species_display = data.name
-                        vm.taxon_previous_name = data.taxon_previous_name
-                        vm.common_name = data.common_name
-                    })
+                    const data = await response.json();
+                    var newOption = new Option(data.name, data.id, false, true);
+                    $('#' + vm.scientific_name_lookup).append(newOption);
+                    vm.species_display = data.name;
+                    vm.taxon_previous_name = data.taxon_previous_name;
+                    vm.common_name = data.common_name;
+                });
             }
         },
         eventListeners: function () {
             let vm = this;
-
-        },
-    },
-    created: async function () {
-        let vm = this;
-        //------fetch list of values according to action
-        let action = this.$route.query.action;
-        let dict_url = action == "view" ? api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type + '&action=' + action :
-            api_endpoints.occ_profile_dict + '?group_type=' + vm.occurrence_obj.group_type
-        fetch(dict_url).then(async (response) => {
-            vm.occ_profile_dict = await response.json();
-            vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
-            vm.occurrence_source_list = vm.occ_profile_dict.occurrence_source_list;
-            this.getSpeciesDisplay();
-
-        }, (error) => {
-            console.log(error);
-        })
-    },
-    computed: {
-        isReadOnly: function () {
-            return !(this.occurrence_obj.can_user_edit);
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.eventListeners();
-            vm.initialiseScientificNameLookup();
-        });
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -240,13 +344,13 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
index f59ac4a3..8b60388f 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
@@ -1,28 +1,55 @@
 <template id="communities_occ_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-4">
-                    <div class="form-group" id="occurrence_name_lookup_form_group_id">
-                        <label for="occurrence_name_lookup">Name of Occurrence:</label>
-                        <select id="occurrence_name_lookup" name="occurrence_name_lookup" ref="occurrence_name_lookup"
-                            class="form-control" />
+                    <div
+                        id="occurrence_name_lookup_form_group_id"
+                        class="form-group"
+                    >
+                        <label for="occurrence_name_lookup"
+                            >Name of Occurrence:</label
+                        >
+                        <select
+                            id="occurrence_name_lookup"
+                            ref="occurrence_name_lookup"
+                            name="occurrence_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_occ_community_name">
-                        <label for="occ_community_name_lookup">Community Name:</label>
-                        <select id="occ_community_name_lookup" name="occ_community_name_lookup"
-                            ref="occ_community_name_lookup" class="form-control" />
+                    <div id="select_occ_community_name" class="form-group">
+                        <label for="occ_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="occ_community_name_lookup"
+                            ref="occ_community_name_lookup"
+                            name="occ_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_status">
+                    <div id="select_status" class="form-group">
                         <label for="occ_status_lookup">Status:</label>
-                        <select class="form-select" v-model="filterOCCCommunityStatus">
+                        <select
+                            v-model="filterOCCCommunityStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in proposal_status" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in proposal_status"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
@@ -31,37 +58,51 @@
 
         <div v-if="show_add_button" class="col-md-12">
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createCommunityOccurrence"><i
-                        class="fa-solid fa-circle-plus"></i> Add Community Occurrence</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createCommunityOccurrence"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Add Community
+                    Occurrence
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="community_occ_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="community_occ_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
             <div v-if="occurrenceHistoryId">
-                <OccurrenceReportHistory ref="occurrence_history" :key="occurrenceHistoryId"
-                    :occurrence-id="occurrenceHistoryId" />
+                <OccurrenceReportHistory
+                    ref="occurrence_history"
+                    :key="occurrenceHistoryId"
+                    :occurrence-id="occurrenceHistoryId"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import OccurrenceReportHistory from '../internal/occurrence/community_occurrence_history.vue';
 
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceReportCommunityTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        OccurrenceReportHistory,
+    },
     props: {
         level: {
             type: String,
@@ -69,24 +110,24 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         filterOCCCommunityOccurrenceName_cache: {
             type: String,
@@ -122,19 +163,38 @@ export default {
             datatable_id: 'occurrence-community-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterOCCCommunityOccurrenceName: sessionStorage.getItem(this.filterOCCCommunityOccurrenceName_cache) ?
-                sessionStorage.getItem(this.filterOCCCommunityOccurrenceName_cache) : 'all',
+            filterOCCCommunityOccurrenceName: sessionStorage.getItem(
+                this.filterOCCCommunityOccurrenceName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCCCommunityOccurrenceName_cache
+                  )
+                : 'all',
 
-            filterOCCCommunityName: sessionStorage.getItem(this.filterOCCCommunityName_cache) ?
-                sessionStorage.getItem(this.filterOCCCommunityName_cache) : 'all',
+            filterOCCCommunityName: sessionStorage.getItem(
+                this.filterOCCCommunityName_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCCommunityName_cache)
+                : 'all',
 
-            filterOCCCommunityStatus: sessionStorage.getItem(this.filterOCCCommunityStatus_cache) ?
-                sessionStorage.getItem(this.filterOCCCommunityStatus_cache) : 'all',
+            filterOCCCommunityStatus: sessionStorage.getItem(
+                this.filterOCCCommunityStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCCommunityStatus_cache)
+                : 'all',
 
-            filterOCCFromCommunityDueDate: sessionStorage.getItem(this.filterOCCFromCommunityDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCCFromCommunityDueDate_cache) : '',
-            filterOCCToCommunityDueDate: sessionStorage.getItem(this.filterOCCToCommunityDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCCToCommunityDueDate_cache) : '',
+            filterOCCFromCommunityDueDate: sessionStorage.getItem(
+                this.filterOCCFromCommunityDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCCFromCommunityDueDate_cache
+                  )
+                : '',
+            filterOCCToCommunityDueDate: sessionStorage.getItem(
+                this.filterOCCToCommunityDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCToCommunityDueDate_cache)
+                : '',
 
             filterListsCommunity: {},
             occurrence_list: [],
@@ -155,67 +215,35 @@ export default {
             ],
 
             proposal_status: [],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        OccurrenceReportHistory,
-    },
-    watch: {
-        filterOCCCommunityOccurrenceName: function () {
-            let vm = this;
-            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCCommunityOccurrenceName_cache, vm.filterOCCCommunityOccurrenceName);
-        },
-        filterOCCCommunityName: function () {
-            let vm = this;
-            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCCommunityName_cache, vm.filterOCCCommunityName);
-        },
-        filterOCCCommunityStatus: function () {
-            let vm = this;
-            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCCommunityStatus_cache, vm.filterOCCCommunityStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
-        filterOCCFromCommunityDueDate: function () {
-            let vm = this;
-            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFromCommunityDueDate_cache, vm.filterOCCFromCommunityDueDate);
-        },
-        filterOCCToCommunityDueDate: function () {
-            let vm = this;
-            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCToCommunityDueDate_cache, vm.filterOCCToCommunityDueDate);
-        },
+        };
     },
     computed: {
         show_add_button: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.OCCURRENCE_APPROVERS);
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.OCCURRENCE_APPROVERS
+                )
+            );
         },
         filterApplied: function () {
-            if (this.filterOCCCommunityOccurrenceName === 'all' &&
+            if (
+                this.filterOCCCommunityOccurrenceName === 'all' &&
                 this.filterOCCCommunityName === 'all' &&
                 this.filterOCCCommunityStatus === 'all' &&
                 this.filterOCCFromCommunityDueDate === '' &&
-                this.filterOCCToCommunityDueDate === '') {
-                return false
+                this.filterOCCToCommunityDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_external: function () {
             return this.level == 'external';
         },
         is_internal: function () {
-            return this.level == 'internal'
+            return this.level == 'internal';
         },
         is_referral: function () {
             return this.level == 'referral';
@@ -229,120 +257,131 @@ export default {
         },
         datatable_headers: function () {
             if (this.is_internal) {
-                return ['ID', 'Number', 'Name of Occurrence', 'Community Name', 'Wild Status', 'Number of Reports', 'Migrated From ID', 'Review Due', 'Status', 'Action']
+                return [
+                    'ID',
+                    'Number',
+                    'Name of Occurrence',
+                    'Community Name',
+                    'Wild Status',
+                    'Number of Reports',
+                    'Migrated From ID',
+                    'Review Due',
+                    'Status',
+                    'Action',
+                ];
             }
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             return {
-                data: "occurrence_number",
+                data: 'occurrence_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_number",
-            }
+                name: 'occurrence_number',
+            };
         },
         column_occurrence_name: function () {
             return {
-                data: "occurrence_name",
+                data: 'occurrence_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_name",
-                'render': function (data, type, full) {
+                name: 'occurrence_name',
+                render: function (data, type, full) {
                     if (full.occurrence_name) {
                         let value = full.occurrence_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-            }
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.community_name) {
                         let value = full.community_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-                name: "community__taxonomy__community_name",
-            }
+                name: 'community__taxonomy__community_name',
+            };
         },
         column_number_of_reports: function () {
             return {
-                data: "number_of_reports",
+                data: 'number_of_reports',
                 orderable: true,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_migrated_from_id: function () {
             return {
-                data: "migrated_from_id",
+                data: 'migrated_from_id',
                 orderable: false,
                 searchable: true,
-            }
+            };
         },
         column_wild_status: function () {
             return {
-                data: "wild_status",
+                data: 'wild_status',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_review_due_date: function () {
             return {
-                data: "review_due_date",
+                data: 'review_due_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "review_due_date",
-            }
+                name: 'review_due_date',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status_display",
+                data: 'processing_status_display',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.processing_status_display) {
                         return full.processing_status_display;
                     }
-                    return ''
+                    return '';
                 },
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (vm.is_internal) {
                         if (full.can_user_edit) {
                             if (full.processing_status == 'discarded') {
@@ -360,13 +399,13 @@ export default {
                         links += `<a href='#' data-history-occurrence='${full.id}'>History</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
-            let columns = []
-            let search = null
+            let vm = this;
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -375,7 +414,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -384,9 +423,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             if (vm.is_internal) {
                 columns = [
                     vm.column_id,
@@ -399,44 +438,52 @@ export default {
                     vm.column_review_due_date,
                     vm.column_status,
                     vm.column_action,
-                ]
-                search = true
+                ];
+                search = true;
             }
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 1 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
 
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_occurrence_name = vm.filterOCCCommunityOccurrenceName;
+                        d.filter_occurrence_name =
+                            vm.filterOCCCommunityOccurrenceName;
                         d.filter_community_name = vm.filterOCCCommunityName;
                         d.filter_status = vm.filterOCCCommunityStatus;
-                        d.filter_from_due_date = vm.filterOCCFromCommunityDueDate;
+                        d.filter_from_due_date =
+                            vm.filterOCCFromCommunityDueDate;
                         d.filter_to_due_date = vm.filterOCCToCommunityDueDate;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -448,9 +495,123 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCCCommunityOccurrenceName: function () {
+            let vm = this;
+            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCCommunityOccurrenceName_cache,
+                vm.filterOCCCommunityOccurrenceName
+            );
+        },
+        filterOCCCommunityName: function () {
+            let vm = this;
+            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCCommunityName_cache,
+                vm.filterOCCCommunityName
+            );
+        },
+        filterOCCCommunityStatus: function () {
+            let vm = this;
+            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCCommunityStatus_cache,
+                vm.filterOCCCommunityStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+        filterOCCFromCommunityDueDate: function () {
+            let vm = this;
+            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFromCommunityDueDate_cache,
+                vm.filterOCCFromCommunityDueDate
+            );
+        },
+        filterOCCToCommunityDueDate: function () {
+            let vm = this;
+            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCToCommunityDueDate_cache,
+                vm.filterOCCToCommunityDueDate
+            );
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseOccurrenceNameLookup();
+            vm.initialiseCommunityNameLookup();
+            vm.addEventListeners();
 
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterOCCCommunityOccurrenceName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCCCommunityOccurrenceName') !=
+                    null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterOCCCommunityOccurrenceNameText'
+                    ),
+                    vm.filterOCCCommunityOccurrenceName,
+                    false,
+                    true
+                );
+                $('#occ_occurrence_lookup').append(newOption);
+                //$('#scientific_name_lookup').append(newOption).trigger('change');
+            }
+            if (
+                sessionStorage.getItem('filterOCCCommunityName') != 'all' &&
+                sessionStorage.getItem('filterOCCCommunityName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCCCommunityNameText'),
+                    vm.filterOCCCommunityName,
+                    false,
+                    true
+                );
+                $('#occ_community_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -461,103 +622,133 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseOccurrenceNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occurrence_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#occurrence_name_lookup_form_group_id"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Occurrence Name",
-                ajax: {
-                    url: api_endpoints.occurrence_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.occurrence_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#occurrence_name_lookup_form_group_id'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Occurrence Name',
+                    ajax: {
+                        url: api_endpoints.occurrence_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.text;
                     vm.filterOCCCommunityOccurrenceName = data;
-                    sessionStorage.setItem("filterOCCCommunityOccurrenceNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCCCommunityOccurrenceNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCCCommunityOccurrenceName = 'all';
-                    sessionStorage.setItem("filterOCCCommunityOccurrenceNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occurrence_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterOCCCommunityOccurrenceNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occurrence_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occ_community_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_occ_community_name"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.occ_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_occ_community_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCCCommunityName = data;
-                    sessionStorage.setItem("filterOCCCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCCCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCCCommunityName = 'all';
-                    sessionStorage.setItem("filterOCCCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occ_community_name_lookup-results"]')
+                    sessionStorage.setItem('filterOCCCommunityNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occ_community_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Community Values object
-            fetch(api_endpoints.community_filter_dict + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsCommunity = await response.json();
-                vm.occurrence_list = vm.filterListsCommunity.occurrence_list;
-                vm.community_name_list = vm.filterListsCommunity.community_name_list;
-                vm.status_list = vm.filterListsCommunity.status_list;
-                vm.submissions_from_list = vm.filterListsCommunity.submissions_from_list;
-                vm.submissions_to_list = vm.filterListsCommunity.submissions_to_list;
-                vm.proposal_status = vm.internal_status.slice().sort((a, b) => {
-                    return a.name.trim().localeCompare(b.name.trim());
-                });
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.community_filter_dict +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsCommunity = await response.json();
+                    vm.occurrence_list =
+                        vm.filterListsCommunity.occurrence_list;
+                    vm.community_name_list =
+                        vm.filterListsCommunity.community_name_list;
+                    vm.status_list = vm.filterListsCommunity.status_list;
+                    vm.submissions_from_list =
+                        vm.filterListsCommunity.submissions_from_list;
+                    vm.submissions_to_list =
+                        vm.filterListsCommunity.submissions_to_list;
+                    vm.proposal_status = vm.internal_status
+                        .slice()
+                        .sort((a, b) => {
+                            return a.name.trim().localeCompare(b.name.trim());
+                        });
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createCommunityOccurrence: async function () {
             swal.fire({
                 title: `Add ${this.group_type_name} Occurrence`,
-                text: "Are you sure you want to add a new community occurrence?",
-                icon: "question",
+                text: 'Are you sure you want to add a new community occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Occurrence',
                 reverseButtons: true,
@@ -567,12 +758,12 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newCommunityOCCId = null
+                    let newCommunityOCCId = null;
                     try {
                         const createUrl = api_endpoints.occurrence;
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.group_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -584,8 +775,7 @@ export default {
                         if (data) {
                             newCommunityOCCId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                         if (this.is_internal) {
                             return err;
@@ -601,46 +791,57 @@ export default {
         discardOCC: function (occurrence_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Occurrence",
-                text: "Are you sure you want to discard this occurrence?",
-                icon: "question",
+                title: 'Discard Occurrence',
+                text: 'Are you sure you want to discard this occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Occurrence',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_occ_proposal(occurrence_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The occurrence has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_occ_proposal(occurrence_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The occurrence has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateOCC: function (occurrence_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Occurrence",
-                text: "Are you sure you want to reinstate this occurrence?",
-                icon: "question",
+                title: 'Reinstate Occurrence',
+                text: 'Are you sure you want to reinstate this occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Occurrence',
                 customClass: {
@@ -648,82 +849,80 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.reinstate_occ_proposal(occurrence_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your report has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_occ_proposal(occurrence_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your report has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.community_occ_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.community_occ_datatable.vmDataTable.on('click', 'a[data-discard-occ-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-occ-proposal');
-                vm.discardOCC(id);
-            });
-            vm.$refs.community_occ_datatable.vmDataTable.on('click', 'a[data-reinstate-occ-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-occ-proposal');
-                vm.reinstateOCC(id);
-            });
-            vm.$refs.community_occ_datatable.vmDataTable.on('click', 'a[data-history-occurrence]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-occurrence');
-                vm.historyDocument(id);
-            });
-            vm.$refs.community_occ_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.community_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-occ-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-occ-proposal');
+                    vm.discardOCC(id);
+                }
+            );
+            vm.$refs.community_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-occ-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-occ-proposal');
+                    vm.reinstateOCC(id);
+                }
+            );
+            vm.$refs.community_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-occurrence]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-occurrence');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.community_occ_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseOccurrenceNameLookup();
-            vm.initialiseCommunityNameLookup();
-            vm.addEventListeners();
-
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterOCCCommunityOccurrenceName") != 'all' && sessionStorage.getItem("filterOCCCommunityOccurrenceName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterOCCCommunityOccurrenceNameText"), vm.filterOCCCommunityOccurrenceName, false, true);
-                $('#occ_occurrence_lookup').append(newOption);
-                //$('#scientific_name_lookup').append(newOption).trigger('change');
-            }
-            if (sessionStorage.getItem("filterOCCCommunityName") != 'all' && sessionStorage.getItem("filterOCCCommunityName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterOCCCommunityNameText"), vm.filterOCCCommunityName, false, true);
-                $('#occ_community_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
index 5e0e936e..bba3e104 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
@@ -1,29 +1,58 @@
 <template id="occurrence-fauna-dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-4">
-                    <div class="form-group" id="occurrence_name_lookup_form_group_id">
-                        <label for="occurrence_name_lookup">Name of Occurrence:</label>
-                        <select id="occurrence_name_lookup" name="occurrence_name_lookup" ref="occurrence_name_lookup"
-                            class="form-control" />
+                    <div
+                        id="occurrence_name_lookup_form_group_id"
+                        class="form-group"
+                    >
+                        <label for="occurrence_name_lookup"
+                            >Name of Occurrence:</label
+                        >
+                        <select
+                            id="occurrence_name_lookup"
+                            ref="occurrence_name_lookup"
+                            name="occurrence_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_scientific_name_by_groupname_occ">
-                        <label for="occ_scientific_name_lookup_by_groupname">Scientific Name:</label>
-                        <select id="occ_scientific_name_lookup_by_groupname"
-                            name="occ_scientific_name_lookup_by_groupname" ref="occ_scientific_name_lookup_by_groupname"
-                            class="form-control" />
+                    <div
+                        id="select_scientific_name_by_groupname_occ"
+                        class="form-group"
+                    >
+                        <label for="occ_scientific_name_lookup_by_groupname"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="occ_scientific_name_lookup_by_groupname"
+                            ref="occ_scientific_name_lookup_by_groupname"
+                            name="occ_scientific_name_lookup_by_groupname"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_status">
+                    <div id="select_status" class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterOCCFaunaStatus">
+                        <select
+                            v-model="filterOCCFaunaStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in proposal_status" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in proposal_status"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
@@ -32,39 +61,50 @@
 
         <div v-if="show_add_button" class="col-md-12">
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFaunaOccurrence"><i
-                        class="fa-solid fa-circle-plus"></i> Add Fauna Occurrence</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFaunaOccurrence"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Add Fauna Occurrence
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="fauna_occ_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="fauna_occ_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
         <div v-if="occurrenceHistoryId">
-            <OccurrenceHistory ref="occurrence_history" :key="occurrenceHistoryId"
-                :occurrence-id="occurrenceHistoryId" />
+            <OccurrenceHistory
+                ref="occurrence_history"
+                :key="occurrenceHistoryId"
+                :occurrence-id="occurrenceHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import OccurrenceHistory from '../internal/occurrence/species_occurrence_history.vue';
 
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceFaunaDashboard',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        OccurrenceHistory,
+    },
     props: {
         level: {
             type: String,
@@ -72,29 +112,29 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         // for adding agendaitems for the meeting_obj.id
         meeting_obj: {
             type: Object,
-            required: false
+            required: false,
         },
         filterOCCFaunaOccurrenceName_cache: {
             type: String,
@@ -130,19 +170,38 @@ export default {
             datatable_id: 'occurrence-fauna-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterOCCFaunaOccurrenceName: sessionStorage.getItem(this.filterOCCFaunaOccurrenceName_cache) ?
-                sessionStorage.getItem(this.filterOCCFaunaOccurrenceName_cache) : 'all',
+            filterOCCFaunaOccurrenceName: sessionStorage.getItem(
+                this.filterOCCFaunaOccurrenceName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCCFaunaOccurrenceName_cache
+                  )
+                : 'all',
 
-            filterOCCFaunaScientificName: sessionStorage.getItem(this.filterOCCFaunaScientificName_cache) ?
-                sessionStorage.getItem(this.filterOCCFaunaScientificName_cache) : 'all',
+            filterOCCFaunaScientificName: sessionStorage.getItem(
+                this.filterOCCFaunaScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCCFaunaScientificName_cache
+                  )
+                : 'all',
 
-            filterOCCFaunaStatus: sessionStorage.getItem(this.filterOCCFaunaStatus_cache) ?
-                sessionStorage.getItem(this.filterOCCFaunaStatus_cache) : 'all',
+            filterOCCFaunaStatus: sessionStorage.getItem(
+                this.filterOCCFaunaStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCFaunaStatus_cache)
+                : 'all',
 
-            filterOCCFromFaunaDueDate: sessionStorage.getItem(this.filterOCCFromFaunaDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCCFromFaunaDueDate_cache) : '',
-            filterOCCToFaunaDueDate: sessionStorage.getItem(this.filterOCCToFaunaDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCCToFaunaDueDate_cache) : '',
+            filterOCCFromFaunaDueDate: sessionStorage.getItem(
+                this.filterOCCFromFaunaDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCFromFaunaDueDate_cache)
+                : '',
+            filterOCCToFaunaDueDate: sessionStorage.getItem(
+                this.filterOCCToFaunaDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCToFaunaDueDate_cache)
+                : '',
 
             filterListsSpecies: {},
             occurrence_list: [],
@@ -161,67 +220,35 @@ export default {
             ],
 
             proposal_status: [],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        OccurrenceHistory,
-    },
-    watch: {
-        filterOCCFaunaOccurrenceName: function () {
-            let vm = this;
-            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFaunaOccurrenceName_cache, vm.filterOCCFaunaOccurrenceName);
-        },
-        filterOCCFaunaScientificName: function () {
-            let vm = this;
-            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFaunaScientificName_cache, vm.filterOCCFaunaScientificName);
-        },
-        filterOCCFaunaStatus: function () {
-            let vm = this;
-            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFaunaStatus_cache, vm.filterOCCFaunaStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
-        filterOCCFromFaunaDueDate: function () {
-            let vm = this;
-            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFromFaunaDueDate_cache, vm.filterOCCFromFaunaDueDate);
-        },
-        filterOCCToFaunaDueDate: function () {
-            let vm = this;
-            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCToFaunaDueDate_cache, vm.filterOCCToFaunaDueDate);
-        },
+        };
     },
     computed: {
         show_add_button: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.OCCURRENCE_APPROVERS);
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.OCCURRENCE_APPROVERS
+                )
+            );
         },
         filterApplied: function () {
-            if (this.filterOCCFaunaOccurrenceName === 'all' &&
+            if (
+                this.filterOCCFaunaOccurrenceName === 'all' &&
                 this.filterOCCFaunaScientificName === 'all' &&
                 this.filterOCCFaunaStatus === 'all' &&
                 this.filterOCCFromFaunaDueDate === '' &&
-                this.filterOCCToFaunaDueDate === '') {
-                return false
+                this.filterOCCToFaunaDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_external: function () {
             return this.level == 'external';
         },
         is_internal: function () {
-            return this.level == 'internal'
+            return this.level == 'internal';
         },
         addFaunaOCCVisibility: function () {
             let visibility = false;
@@ -232,109 +259,120 @@ export default {
         },
         datatable_headers: function () {
             if (this.is_internal) {
-                return ['ID', 'Number', 'Name of Occurrence', 'Scientific Name', 'Wild Status', 'Number of Reports', 'Migrated From ID', 'Review Due', 'Status', 'Action']
+                return [
+                    'ID',
+                    'Number',
+                    'Name of Occurrence',
+                    'Scientific Name',
+                    'Wild Status',
+                    'Number of Reports',
+                    'Migrated From ID',
+                    'Review Due',
+                    'Status',
+                    'Action',
+                ];
             }
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-            }
+            };
         },
         column_number: function () {
             return {
-                data: "occurrence_number",
+                data: 'occurrence_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_occurrence_name: function () {
             return {
-                data: "occurrence_name",
+                data: 'occurrence_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_name",
-                'render': function (data, type, full) {
+                name: 'occurrence_name',
+                render: function (data, type, full) {
                     if (full.occurrence_name) {
                         let value = full.occurrence_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-            }
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.scientific_name) {
                         let value = full.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-                name: "species__taxonomy__scientific_name",
-            }
+                name: 'species__taxonomy__scientific_name',
+            };
         },
         column_wild_status: function () {
             return {
-                data: "wild_status",
+                data: 'wild_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "wild_status__name",
-            }
+                name: 'wild_status__name',
+            };
         },
         column_number_of_reports: function () {
             return {
-                data: "number_of_reports",
+                data: 'number_of_reports',
                 orderable: false,
                 searchable: false,
-            }
+            };
         },
         column_migrated_from_id: function () {
             return {
-                data: "migrated_from_id",
+                data: 'migrated_from_id',
                 orderable: false,
                 searchable: true,
-            }
+            };
         },
         column_review_due_date: function () {
             return {
-                data: "review_due_date",
+                data: 'review_due_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "review_due_date",
-            }
+                name: 'review_due_date',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status_display",
+                data: 'processing_status_display',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (vm.is_internal) {
                         if (full.can_user_edit) {
                             if (full.processing_status == 'discarded') {
@@ -352,14 +390,14 @@ export default {
                         links += `<a href='#' data-history-occurrence='${full.id}'>History</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -368,7 +406,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -377,9 +415,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             if (vm.is_internal) {
                 columns = [
                     vm.column_id,
@@ -392,44 +430,52 @@ export default {
                     vm.column_review_due_date,
                     vm.column_status,
                     vm.column_action,
-                ]
-                search = true
+                ];
+                search = true;
             }
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 1 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
 
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_occurrence_name = vm.filterOCCFaunaOccurrenceName;
-                        d.filter_scientific_name = vm.filterOCCFaunaScientificName;
+                        d.filter_occurrence_name =
+                            vm.filterOCCFaunaOccurrenceName;
+                        d.filter_scientific_name =
+                            vm.filterOCCFaunaScientificName;
                         d.filter_status = vm.filterOCCFaunaStatus;
                         d.filter_from_due_date = vm.filterOCCFromFaunaDueDate;
                         d.filter_to_due_date = vm.filterOCCToFaunaDueDate;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -441,9 +487,118 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCCFaunaOccurrenceName: function () {
+            let vm = this;
+            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFaunaOccurrenceName_cache,
+                vm.filterOCCFaunaOccurrenceName
+            );
+        },
+        filterOCCFaunaScientificName: function () {
+            let vm = this;
+            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFaunaScientificName_cache,
+                vm.filterOCCFaunaScientificName
+            );
+        },
+        filterOCCFaunaStatus: function () {
+            let vm = this;
+            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFaunaStatus_cache,
+                vm.filterOCCFaunaStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+        filterOCCFromFaunaDueDate: function () {
+            let vm = this;
+            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFromFaunaDueDate_cache,
+                vm.filterOCCFromFaunaDueDate
+            );
+        },
+        filterOCCToFaunaDueDate: function () {
+            let vm = this;
+            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCToFaunaDueDate_cache,
+                vm.filterOCCToFaunaDueDate
+            );
+        },
+    },
+
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseOccurrenceLookupName();
+            vm.initialiseScientificNameLookup();
+            vm.addEventListeners();
 
+            if (
+                sessionStorage.getItem('filterOCCFaunaOccurrenceName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCCFaunaOccurrenceName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCCFaunaOccurrenceNameText'),
+                    vm.filterOCCFaunaOccurrenceName,
+                    false,
+                    true
+                );
+                $('#occ_occurrence_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCCFaunaScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCCFaunaScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCCFaunaScientificNameText'),
+                    vm.filterOCCFaunaScientificName,
+                    false,
+                    true
+                );
+                $('#occ_scientific_name_lookup_by_groupname').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -454,104 +609,138 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseOccurrenceLookupName: function () {
             let vm = this;
-            $(vm.$refs.occurrence_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#occurrence_name_lookup_form_group_id"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Occurrence Name",
-                ajax: {
-                    url: api_endpoints.occurrence_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.occurrence_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#occurrence_name_lookup_form_group_id'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Occurrence Name',
+                    ajax: {
+                        url: api_endpoints.occurrence_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.text;
                     vm.filterOCCFaunaOccurrenceName = data;
-                    sessionStorage.setItem("filterOCCFaunaOccurrenceNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCCFaunaOccurrenceNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCCFaunaOccurrenceName = 'all';
-                    sessionStorage.setItem("filterOCCFaunaOccurrenceNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occurrence_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterOCCFaunaOccurrenceNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occurrence_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occ_scientific_name_lookup_by_groupname).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_scientific_name_by_groupname_occ"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.occ_scientific_name_lookup_by_groupname)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $(
+                        '#select_scientific_name_by_groupname_occ'
+                    ),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCCFaunaScientificName = data;
-                    sessionStorage.setItem("filterOCCFaunaScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCCFaunaScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCCFaunaScientificName = 'all';
-                    sessionStorage.setItem("filterOCCFaunaScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occ_scientific_name_lookup_by_groupname-results"]')
+                    sessionStorage.setItem(
+                        'filterOCCFaunaScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occ_scientific_name_lookup_by_groupname-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.status_list = vm.filterListsSpecies.status_list;
-                vm.submissions_from_list = vm.filterListsSpecies.submissions_from_list;
-                vm.submissions_to_list = vm.filterListsSpecies.submissions_to_list;
-                vm.proposal_status = vm.internal_status.slice().sort((a, b) => {
-                    return a.name.trim().localeCompare(b.name.trim());
-                });
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.status_list = vm.filterListsSpecies.status_list;
+                    vm.submissions_from_list =
+                        vm.filterListsSpecies.submissions_from_list;
+                    vm.submissions_to_list =
+                        vm.filterListsSpecies.submissions_to_list;
+                    vm.proposal_status = vm.internal_status
+                        .slice()
+                        .sort((a, b) => {
+                            return a.name.trim().localeCompare(b.name.trim());
+                        });
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createFaunaOccurrence: async function () {
             swal.fire({
                 title: `Add ${this.group_type_name} Occurrence`,
-                text: "Are you sure you want to add a new fauna occurrence?",
-                icon: "question",
+                text: 'Are you sure you want to add a new fauna occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Occurrence',
                 reverseButtons: true,
@@ -561,12 +750,12 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFaunaOCRId = null
+                    let newFaunaOCRId = null;
                     try {
                         const createUrl = api_endpoints.occurrence;
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.group_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -578,8 +767,7 @@ export default {
                         if (data) {
                             newFaunaOCRId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                         if (this.is_internal) {
                             return err;
@@ -595,9 +783,9 @@ export default {
         discardOCC: function (occurrence_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Occurrence",
-                text: "Are you sure you want to discard this occurrence?",
-                icon: "question",
+                title: 'Discard Occurrence',
+                text: 'Are you sure you want to discard this occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Occurrence',
                 customClass: {
@@ -605,36 +793,47 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_occ_proposal(occurrence_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your report has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_occ_proposal(occurrence_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your report has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateOCC: function (occurrence_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Occurrence",
-                text: "Are you sure you want to reinstate this occurrence?",
-                icon: "question",
+                title: 'Reinstate Occurrence',
+                text: 'Are you sure you want to reinstate this occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Occurrence',
                 customClass: {
@@ -642,77 +841,78 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.reinstate_occ_proposal(occurrence_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your report has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_occ_proposal(occurrence_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your report has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_occ_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.fauna_occ_datatable.vmDataTable.on('click', 'a[data-discard-occ-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-occ-proposal');
-                vm.discardOCC(id);
-            });
-            vm.$refs.fauna_occ_datatable.vmDataTable.on('click', 'a[data-reinstate-occ-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-occ-proposal');
-                vm.reinstateOCC(id);
-            });
-            vm.$refs.fauna_occ_datatable.vmDataTable.on('click', 'a[data-history-occurrence]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-occurrence');
-                vm.historyDocument(id);
-            });
-            vm.$refs.fauna_occ_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.fauna_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-occ-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-occ-proposal');
+                    vm.discardOCC(id);
+                }
+            );
+            vm.$refs.fauna_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-occ-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-occ-proposal');
+                    vm.reinstateOCC(id);
+                }
+            );
+            vm.$refs.fauna_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-occurrence]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-occurrence');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.fauna_occ_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseOccurrenceLookupName();
-            vm.initialiseScientificNameLookup();
-            vm.addEventListeners();
-
-            if (sessionStorage.getItem("filterOCCFaunaOccurrenceName") != 'all' && sessionStorage.getItem("filterOCCFaunaOccurrenceName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCCFaunaOccurrenceNameText"), vm.filterOCCFaunaOccurrenceName, false, true);
-                $('#occ_occurrence_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCCFaunaScientificName") != 'all' && sessionStorage.getItem("filterOCCFaunaScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCCFaunaScientificNameText"), vm.filterOCCFaunaScientificName, false, true);
-                $('#occ_scientific_name_lookup_by_groupname').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
index 293496ff..20cb8232 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
@@ -1,29 +1,58 @@
 <template id="occurrence-flora-dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-4">
-                    <div class="form-group" id="occurrence_name_lookup_form_group_id">
-                        <label for="occurrence_name_lookup">Name of Occurrence:</label>
-                        <select id="occurrence_name_lookup" name="occurrence_name_lookup" ref="occurrence_name_lookup"
-                            class="form-control" />
+                    <div
+                        id="occurrence_name_lookup_form_group_id"
+                        class="form-group"
+                    >
+                        <label for="occurrence_name_lookup"
+                            >Name of Occurrence:</label
+                        >
+                        <select
+                            id="occurrence_name_lookup"
+                            ref="occurrence_name_lookup"
+                            name="occurrence_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_scientific_name_by_groupname_occ">
-                        <label for="occ_scientific_name_lookup_by_groupname">Scientific Name:</label>
-                        <select id="occ_scientific_name_lookup_by_groupname"
-                            name="occ_scientific_name_lookup_by_groupname" ref="occ_scientific_name_lookup_by_groupname"
-                            class="form-control" />
+                    <div
+                        id="select_scientific_name_by_groupname_occ"
+                        class="form-group"
+                    >
+                        <label for="occ_scientific_name_lookup_by_groupname"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="occ_scientific_name_lookup_by_groupname"
+                            ref="occ_scientific_name_lookup_by_groupname"
+                            name="occ_scientific_name_lookup_by_groupname"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_status">
+                    <div id="select_status" class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterOCCFloraStatus">
+                        <select
+                            v-model="filterOCCFloraStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in proposal_status" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in proposal_status"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
@@ -32,39 +61,50 @@
 
         <div v-if="show_add_button" class="col-md-12">
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFloraOccurrence"><i
-                        class="fa-solid fa-circle-plus"></i> Add Flora Occurrence</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFloraOccurrence"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Add Flora Occurrence
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_occ_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_occ_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
         <div v-if="occurrenceHistoryId">
-            <OccurrenceHistory ref="occurrence_history" :key="occurrenceHistoryId"
-                :occurrence-id="occurrenceHistoryId" />
+            <OccurrenceHistory
+                ref="occurrence_history"
+                :key="occurrenceHistoryId"
+                :occurrence-id="occurrenceHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import OccurrenceHistory from '../internal/occurrence/species_occurrence_history.vue';
 
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceFloraDashboard',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        OccurrenceHistory,
+    },
     props: {
         level: {
             type: String,
@@ -72,29 +112,29 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         // for adding agendaitems for the meeting_obj.id
         meeting_obj: {
             type: Object,
-            required: false
+            required: false,
         },
         filterOCCFloraOccurrenceName_cache: {
             type: String,
@@ -130,19 +170,38 @@ export default {
             datatable_id: 'occurrence-flora-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterOCCFloraOccurrenceName: sessionStorage.getItem(this.filterOCCFloraOccurrenceName_cache) ?
-                sessionStorage.getItem(this.filterOCCFloraOccurrenceName_cache) : 'all',
+            filterOCCFloraOccurrenceName: sessionStorage.getItem(
+                this.filterOCCFloraOccurrenceName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCCFloraOccurrenceName_cache
+                  )
+                : 'all',
 
-            filterOCCFloraScientificName: sessionStorage.getItem(this.filterOCCFloraScientificName_cache) ?
-                sessionStorage.getItem(this.filterOCCFloraScientificName_cache) : 'all',
+            filterOCCFloraScientificName: sessionStorage.getItem(
+                this.filterOCCFloraScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCCFloraScientificName_cache
+                  )
+                : 'all',
 
-            filterOCCFloraStatus: sessionStorage.getItem(this.filterOCCFloraStatus_cache) ?
-                sessionStorage.getItem(this.filterOCCFloraStatus_cache) : 'all',
+            filterOCCFloraStatus: sessionStorage.getItem(
+                this.filterOCCFloraStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCFloraStatus_cache)
+                : 'all',
 
-            filterOCCFromFloraDueDate: sessionStorage.getItem(this.filterOCCFromFloraDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCCFromFloraDueDate_cache) : '',
-            filterOCCToFloraDueDate: sessionStorage.getItem(this.filterOCCToFloraDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCCToFloraDueDate_cache) : '',
+            filterOCCFromFloraDueDate: sessionStorage.getItem(
+                this.filterOCCFromFloraDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCFromFloraDueDate_cache)
+                : '',
+            filterOCCToFloraDueDate: sessionStorage.getItem(
+                this.filterOCCToFloraDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCCToFloraDueDate_cache)
+                : '',
 
             filterListsSpecies: {},
             occurrence_list: [],
@@ -161,67 +220,35 @@ export default {
             ],
 
             proposal_status: [],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        OccurrenceHistory,
-    },
-    watch: {
-        filterOCCFloraOccurrenceName: function () {
-            let vm = this;
-            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFloraOccurrenceName_cache, vm.filterOCCFloraOccurrenceName);
-        },
-        filterOCCFloraScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFloraScientificName_cache, vm.filterOCCFloraScientificName);
-        },
-        filterOCCFloraStatus: function () {
-            let vm = this;
-            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFloraStatus_cache, vm.filterOCCFloraStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
-        filterOCCFromFloraDueDate: function () {
-            let vm = this;
-            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCFromFloraDueDate_cache, vm.filterOCCFromFloraDueDate);
-        },
-        filterOCCToFloraDueDate: function () {
-            let vm = this;
-            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCCToFloraDueDate_cache, vm.filterOCCToFloraDueDate);
-        },
+        };
     },
     computed: {
         show_add_button: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.OCCURRENCE_APPROVERS);
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.OCCURRENCE_APPROVERS
+                )
+            );
         },
         filterApplied: function () {
-            if (this.filterOCCFloraOccurrenceName === 'all' &&
+            if (
+                this.filterOCCFloraOccurrenceName === 'all' &&
                 this.filterOCCFloraScientificName === 'all' &&
                 this.filterOCCFloraStatus === 'all' &&
                 this.filterOCCFromFloraDueDate === '' &&
-                this.filterOCCToFloraDueDate === '') {
-                return false
+                this.filterOCCToFloraDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_external: function () {
             return this.level == 'external';
         },
         is_internal: function () {
-            return this.level == 'internal'
+            return this.level == 'internal';
         },
         addFloraOCCVisibility: function () {
             let visibility = false;
@@ -232,110 +259,121 @@ export default {
         },
         datatable_headers: function () {
             if (this.is_internal) {
-                return ['ID', 'Number', 'Name of Occurrrence', 'Scientific Name', 'Wild Status', 'Number of Reports', 'Migrated From ID', 'Review Due', 'Status', 'Action']
+                return [
+                    'ID',
+                    'Number',
+                    'Name of Occurrrence',
+                    'Scientific Name',
+                    'Wild Status',
+                    'Number of Reports',
+                    'Migrated From ID',
+                    'Review Due',
+                    'Status',
+                    'Action',
+                ];
             }
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-            }
+            };
         },
         column_number: function () {
             return {
-                data: "occurrence_number",
+                data: 'occurrence_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_number"
-            }
+                name: 'occurrence_number',
+            };
         },
         column_name: function () {
             return {
-                data: "occurrence_name",
+                data: 'occurrence_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_name",
-                'render': function (data, type, full) {
+                name: 'occurrence_name',
+                render: function (data, type, full) {
                     if (full.occurrence_name) {
                         let value = full.occurrence_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-            }
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.scientific_name) {
                         let value = full.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-                name: "species__taxonomy__scientific_name",
-            }
+                name: 'species__taxonomy__scientific_name',
+            };
         },
         column_wild_status: function () {
             return {
-                data: "wild_status",
+                data: 'wild_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "wild_status__name",
-            }
+                name: 'wild_status__name',
+            };
         },
         column_number_of_reports: function () {
             return {
-                data: "number_of_reports",
+                data: 'number_of_reports',
                 orderable: false,
                 searchable: false,
-            }
+            };
         },
         column_migrated_from_id: function () {
             return {
-                data: "migrated_from_id",
+                data: 'migrated_from_id',
                 orderable: false,
                 searchable: true,
-            }
+            };
         },
         column_review_due_date: function () {
             return {
-                data: "review_due_date",
+                data: 'review_due_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "review_due_date",
-            }
+                name: 'review_due_date',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status_display",
+                data: 'processing_status_display',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (vm.is_internal) {
                         if (full.can_user_edit) {
                             if (full.processing_status == 'discarded') {
@@ -353,14 +391,14 @@ export default {
                         links += `<a href='#' data-history-occurrence='${full.id}'>History</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -369,7 +407,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -378,9 +416,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             if (vm.is_internal) {
                 columns = [
                     vm.column_id,
@@ -393,44 +431,52 @@ export default {
                     vm.column_review_due_date,
                     vm.column_status,
                     vm.column_action,
-                ]
-                search = true
+                ];
+                search = true;
             }
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 1 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
 
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
-                        d.filter_occurrence_name = vm.filterOCCFloraOccurrenceName;
-                        d.filter_scientific_name = vm.filterOCCFloraScientificName;
+                        d.filter_occurrence_name =
+                            vm.filterOCCFloraOccurrenceName;
+                        d.filter_scientific_name =
+                            vm.filterOCCFloraScientificName;
                         d.filter_status = vm.filterOCCFloraStatus;
                         d.filter_from_due_date = vm.filterOCCFromFloraDueDate;
                         d.filter_to_due_date = vm.filterOCCToFloraDueDate;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -442,9 +488,118 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCCFloraOccurrenceName: function () {
+            let vm = this;
+            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFloraOccurrenceName_cache,
+                vm.filterOCCFloraOccurrenceName
+            );
+        },
+        filterOCCFloraScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFloraScientificName_cache,
+                vm.filterOCCFloraScientificName
+            );
+        },
+        filterOCCFloraStatus: function () {
+            let vm = this;
+            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFloraStatus_cache,
+                vm.filterOCCFloraStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+        filterOCCFromFloraDueDate: function () {
+            let vm = this;
+            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCFromFloraDueDate_cache,
+                vm.filterOCCFromFloraDueDate
+            );
+        },
+        filterOCCToFloraDueDate: function () {
+            let vm = this;
+            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCCToFloraDueDate_cache,
+                vm.filterOCCToFloraDueDate
+            );
+        },
+    },
+
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseOccurrenceNameLookup();
+            vm.initialiseScientificNameLookup();
+            vm.addEventListeners();
 
+            if (
+                sessionStorage.getItem('filterOCCFloraOccurrenceName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCCFloraOccurrenceName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCCFloraOccurrenceNameText'),
+                    vm.filterOCCFloraOccurrenceName,
+                    false,
+                    true
+                );
+                $('#occurrence_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCCFloraScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCCFloraScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCCFloraScientificNameText'),
+                    vm.filterOCCFloraScientificName,
+                    false,
+                    true
+                );
+                $('#occ_scientific_name_lookup_by_groupname').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -455,106 +610,140 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseOccurrenceNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occurrence_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#occurrence_name_lookup_form_group_id"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Name of Occurrence",
-                ajax: {
-                    url: api_endpoints.occurrence_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.occurrence_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#occurrence_name_lookup_form_group_id'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Name of Occurrence',
+                    ajax: {
+                        url: api_endpoints.occurrence_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.text;
                     vm.filterOCCFloraOccurrenceName = data;
-                    sessionStorage.setItem("filterOCCFloraOccurrenceNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCCFloraOccurrenceNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCCFloraOccurrenceName = 'all';
-                    sessionStorage.setItem("filterOCCFloraOccurrenceNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occurrence_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterOCCFloraOccurrenceNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occurrence_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occ_scientific_name_lookup_by_groupname).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_scientific_name_by_groupname_occ"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.occ_scientific_name_lookup_by_groupname)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $(
+                        '#select_scientific_name_by_groupname_occ'
+                    ),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCCFloraScientificName = data;
-                    sessionStorage.setItem("filterOCCFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCCFloraScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCCFloraScientificName = 'all';
-                    sessionStorage.setItem("filterOCCFloraScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occ_scientific_name_lookup_by_groupname-results"]')
+                    sessionStorage.setItem(
+                        'filterOCCFloraScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occ_scientific_name_lookup_by_groupname-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.status_list = vm.filterListsSpecies.status_list;
-                vm.submissions_from_list = vm.filterListsSpecies.submissions_from_list;
-                vm.submissions_to_list = vm.filterListsSpecies.submissions_to_list;
-                // vm.filterConservationCategory();
-                // vm.filterDistrict();
-                vm.proposal_status = vm.internal_status.slice().sort((a, b) => {
-                    return a.name.trim().localeCompare(b.name.trim());
-                });
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.status_list = vm.filterListsSpecies.status_list;
+                    vm.submissions_from_list =
+                        vm.filterListsSpecies.submissions_from_list;
+                    vm.submissions_to_list =
+                        vm.filterListsSpecies.submissions_to_list;
+                    // vm.filterConservationCategory();
+                    // vm.filterDistrict();
+                    vm.proposal_status = vm.internal_status
+                        .slice()
+                        .sort((a, b) => {
+                            return a.name.trim().localeCompare(b.name.trim());
+                        });
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createFloraOccurrence: async function () {
             swal.fire({
                 title: `Add ${this.group_type_name} Occurrence`,
-                text: "Are you sure you want to add a new flora occurrence?",
-                icon: "question",
+                text: 'Are you sure you want to add a new flora occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Occurrence',
                 reverseButtons: true,
@@ -564,12 +753,12 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFloraOCRId = null
+                    let newFloraOCRId = null;
                     try {
                         const createUrl = api_endpoints.occurrence;
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.group_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -581,8 +770,7 @@ export default {
                         if (data) {
                             newFloraOCRId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                         if (this.is_internal) {
                             return err;
@@ -598,9 +786,9 @@ export default {
         discardOCC: function (occurrence_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Occurrence",
-                text: "Are you sure you want to discard this occurrence?",
-                icon: "question",
+                title: 'Discard Occurrence',
+                text: 'Are you sure you want to discard this occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Report',
                 customClass: {
@@ -608,36 +796,47 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_occ_proposal(occurrence_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The occurrence has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_occ_proposal(occurrence_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The occurrence has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateOCC: function (occurrence_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Occurrence",
-                text: "Are you sure you want to reinstate this occurrence?",
-                icon: "question",
+                title: 'Reinstate Occurrence',
+                text: 'Are you sure you want to reinstate this occurrence?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Report',
                 customClass: {
@@ -645,77 +844,78 @@ export default {
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.reinstate_occ_proposal(occurrence_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'The occurrence has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_occ_proposal(occurrence_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'The occurrence has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_occ_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.flora_occ_datatable.vmDataTable.on('click', 'a[data-discard-occ-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-occ-proposal');
-                vm.discardOCC(id);
-            });
-            vm.$refs.flora_occ_datatable.vmDataTable.on('click', 'a[data-reinstate-occ-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-occ-proposal');
-                vm.reinstateOCC(id);
-            });
-            vm.$refs.flora_occ_datatable.vmDataTable.on('click', 'a[data-history-occurrence]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-occurrence');
-                vm.historyDocument(id);
-            });
-            vm.$refs.flora_occ_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-occ-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-occ-proposal');
+                    vm.discardOCC(id);
+                }
+            );
+            vm.$refs.flora_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-occ-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-occ-proposal');
+                    vm.reinstateOCC(id);
+                }
+            );
+            vm.$refs.flora_occ_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-occurrence]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-occurrence');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.flora_occ_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseOccurrenceNameLookup();
-            vm.initialiseScientificNameLookup();
-            vm.addEventListeners();
-
-            if (sessionStorage.getItem("filterOCCFloraOccurrenceName") != 'all' && sessionStorage.getItem("filterOCCFloraOccurrenceName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCCFloraOccurrenceNameText"), vm.filterOCCFloraOccurrenceName, false, true);
-                $('#occurrence_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCCFloraScientificName") != 'all' && sessionStorage.getItem("filterOCCFloraScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCCFloraScientificNameText"), vm.filterOCCFloraScientificName, false, true);
-                $('#occ_scientific_name_lookup_by_groupname').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
index d950dc34..67555b31 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
@@ -1,28 +1,49 @@
 <template id="communities_ocr_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-4">
-                    <div class="form-group" id="select_occurrence">
+                    <div id="select_occurrence" class="form-group">
                         <label for="ocr_occurrence_lookup">Occurrence:</label>
-                        <select id="ocr_occurrence_lookup" name="ocr_occurrence_lookup" ref="ocr_occurrence_lookup"
-                            class="form-control" />
+                        <select
+                            id="ocr_occurrence_lookup"
+                            ref="ocr_occurrence_lookup"
+                            name="ocr_occurrence_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_ocr_community_name">
-                        <label for="ocr_community_name_lookup">Community Name:</label>
-                        <select id="ocr_community_name_lookup" name="ocr_community_name_lookup"
-                            ref="ocr_community_name_lookup" class="form-control" />
+                    <div id="select_ocr_community_name" class="form-group">
+                        <label for="ocr_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="ocr_community_name_lookup"
+                            ref="ocr_community_name_lookup"
+                            name="ocr_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_status">
+                    <div id="select_status" class="form-group">
                         <label for="ocr_status_lookup">Status:</label>
-                        <select class="form-select" v-model="filterOCRCommunityStatus">
+                        <select
+                            v-model="filterOCRCommunityStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -30,29 +51,49 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Observation Date Range:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observation_from_date"
-                            v-model="filterOCRCommunityObservationFromDate">
+                        <input
+                            id="observation_from_date"
+                            v-model="filterOCRCommunityObservationFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observation_from_date"
-                            v-model="filterOCRCommunityObservationToDate">
+                        <input
+                            id="observation_from_date"
+                            v-model="filterOCRCommunityObservationToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Submitted Date Range:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="submitted_from_date"
-                            v-model="filterOCRCommunitySubmittedFromDate">
+                        <input
+                            id="submitted_from_date"
+                            v-model="filterOCRCommunitySubmittedFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="submitted_from_date"
-                            v-model="filterOCRCommunitySubmittedToDate">
+                        <input
+                            id="submitted_from_date"
+                            v-model="filterOCRCommunitySubmittedToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
@@ -60,39 +101,58 @@
 
         <div v-if="addCommunityOCRVisibility" class="col-md-12">
             <div class="text-end">
-                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence-report/bulk_import/?group_type=community`"><i
-                    class="bi bi-download pe-2"></i>Bulk Import</a>
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createCommunityOccurrenceReport"><i
-                        class="fa-solid fa-circle-plus"></i> Add Community Occurrence Report</button>
+                <a
+                    type="button"
+                    role="button"
+                    class="btn btn-primary mb-2 me-2"
+                    :href="`/internal/occurrence-report/bulk_import/?group_type=community`"
+                    ><i class="bi bi-download pe-2"></i>Bulk Import</a
+                >
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createCommunityOccurrenceReport"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Add Community
+                    Occurrence Report
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="community_ocr_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="community_ocr_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
             <div v-if="occurrenceReportHistoryId">
-                <OccurrenceReportHistory ref="occurrence_report_history" :key="occurrenceReportHistoryId"
-                    :occurrence-report-id="occurrenceReportHistoryId" />
+                <OccurrenceReportHistory
+                    ref="occurrence_report_history"
+                    :key="occurrenceReportHistoryId"
+                    :occurrence-report-id="occurrenceReportHistoryId"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import OccurrenceReportHistory from '../internal/occurrence/community_occurrence_report_history.vue';
 
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceReportCommunityTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        OccurrenceReportHistory,
+    },
     props: {
         level: {
             type: String,
@@ -100,24 +160,24 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         filterOCRCommunityOccurrence_cache: {
             type: String,
@@ -173,31 +233,70 @@ export default {
             datatable_id: 'community_ocr-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterOCRCommunityOccurrence: sessionStorage.getItem(this.filterOCRCommunityOccurrence_cache) ?
-                sessionStorage.getItem(this.filterOCRCommunityOccurrence_cache) : 'all',
+            filterOCRCommunityOccurrence: sessionStorage.getItem(
+                this.filterOCRCommunityOccurrence_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRCommunityOccurrence_cache
+                  )
+                : 'all',
 
-            filterOCRCommunityName: sessionStorage.getItem(this.filterOCRCommunityName_cache) ?
-                sessionStorage.getItem(this.filterOCRCommunityName_cache) : 'all',
+            filterOCRCommunityName: sessionStorage.getItem(
+                this.filterOCRCommunityName_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRCommunityName_cache)
+                : 'all',
 
-            filterOCRCommunityStatus: sessionStorage.getItem(this.filterOCRCommunityStatus_cache) ?
-                sessionStorage.getItem(this.filterOCRCommunityStatus_cache) : 'all',
+            filterOCRCommunityStatus: sessionStorage.getItem(
+                this.filterOCRCommunityStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRCommunityStatus_cache)
+                : 'all',
 
-            filterOCRCommunityObservationFromDate: sessionStorage.getItem(this.filterOCRCommunityObservationFromDate_cache) ?
-                sessionStorage.getItem(this.filterOCRCommunityObservationFromDate_cache) : '',
+            filterOCRCommunityObservationFromDate: sessionStorage.getItem(
+                this.filterOCRCommunityObservationFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRCommunityObservationFromDate_cache
+                  )
+                : '',
 
-            filterOCRCommunityObservationToDate: sessionStorage.getItem(this.filterOCRCommunityObservationToDate_cache) ?
-                sessionStorage.getItem(this.filterOCRCommunityObservationToDate_cache) : '',
+            filterOCRCommunityObservationToDate: sessionStorage.getItem(
+                this.filterOCRCommunityObservationToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRCommunityObservationToDate_cache
+                  )
+                : '',
 
-            filterOCRCommunitySubmittedFromDate: sessionStorage.getItem(this.filterOCRCommunitySubmittedFromDate_cache) ?
-                sessionStorage.getItem(this.filterOCRCommunitySubmittedFromDate_cache) : '',
+            filterOCRCommunitySubmittedFromDate: sessionStorage.getItem(
+                this.filterOCRCommunitySubmittedFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRCommunitySubmittedFromDate_cache
+                  )
+                : '',
 
-            filterOCRCommunitySubmittedToDate: sessionStorage.getItem(this.filterOCRCommunitySubmittedToDate_cache) ?
-                sessionStorage.getItem(this.filterOCRCommunitySubmittedToDate_cache) : '',
+            filterOCRCommunitySubmittedToDate: sessionStorage.getItem(
+                this.filterOCRCommunitySubmittedToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRCommunitySubmittedToDate_cache
+                  )
+                : '',
 
-            filterOCRFromCommunityDueDate: sessionStorage.getItem(this.filterOCRFromCommunityDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFromCommunityDueDate_cache) : '',
-            filterOCRToCommunityDueDate: sessionStorage.getItem(this.filterOCRToCommunityDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCRToCommunityDueDate_cache) : '',
+            filterOCRFromCommunityDueDate: sessionStorage.getItem(
+                this.filterOCRFromCommunityDueDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFromCommunityDueDate_cache
+                  )
+                : '',
+            filterOCRToCommunityDueDate: sessionStorage.getItem(
+                this.filterOCRToCommunityDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRToCommunityDueDate_cache)
+                : '',
 
             filterListsCommunity: {},
             occurrence_list: [],
@@ -216,70 +315,12 @@ export default {
                 { value: 'approved', name: 'Approved' },
                 { value: 'declined', name: 'Declined' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        OccurrenceReportHistory,
-    },
-    watch: {
-        filterOCRCommunityOccurrence: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRCommunityOccurrence_cache, vm.filterOCRCommunityOccurrence);
-        },
-        filterOCRCommunityName: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRCommunityName_cache, vm.filterOCRCommunityName);
-        },
-        filterOCRCommunityStatus: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRCommunityStatus_cache, vm.filterOCRCommunityStatus);
-        },
-        filterOCRCommunityObservationFromDate: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRCommunityObservationFromDate_cache, vm.filterOCRCommunityObservationFromDate);
-        },
-        filterOCRCommunityObservationToDate: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRCommunityObservationToDate_cache, vm.filterOCRCommunityObservationToDate);
-        },
-        filterOCRCommunitySubmittedFromDate: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRCommunitySubmittedFromDate_cache, vm.filterOCRCommunitySubmittedFromDate);
-        },
-        filterOCRCommunitySubmittedToDate: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRCommunitySubmittedToDate_cache, vm.filterOCRCommunitySubmittedToDate);
-        },
-        filterOCRFromCommunityDueDate: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFromCommunityDueDate_cache, vm.filterOCRFromCommunityDueDate);
-        },
-        filterOCRToCommunityDueDate: function () {
-            let vm = this;
-            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRToCommunityDueDate_cache, vm.filterOCRToCommunityDueDate);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterOCRCommunityOccurrence === 'all' &&
+            if (
+                this.filterOCRCommunityOccurrence === 'all' &&
                 this.filterOCRCommunityName === 'all' &&
                 this.filterOCRCommunityStatus === 'all' &&
                 this.filterOCRCommunityObservationFromDate === '' &&
@@ -287,140 +328,159 @@ export default {
                 this.filterOCRCommunitySubmittedFromDate === '' &&
                 this.filterOCRCommunitySubmittedToDate === '' &&
                 this.filterOCRFromCommunityDueDate === '' &&
-                this.filterOCRToCommunityDueDate === '') {
-                return false
+                this.filterOCRToCommunityDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         addCommunityOCRVisibility: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS);
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.INTERNAL_CONTRIBUTORS
+                )
+            );
         },
         datatable_headers: function () {
-            return ['ID', 'Number', 'Occurrence', 'Community Name', 'Observation Date', 'Main Observer', 'Migrated From ID', 'Submitted on', 'Submitter', 'Status', 'Action']
+            return [
+                'ID',
+                'Number',
+                'Occurrence',
+                'Community Name',
+                'Observation Date',
+                'Main Observer',
+                'Migrated From ID',
+                'Submitted on',
+                'Submitter',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             let vm = this;
             return {
-                data: "occurrence_report_number",
+                data: 'occurrence_report_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    let value = full.occurrence_report_number
+                render: function (data, type, full) {
+                    let value = full.occurrence_report_number;
                     if (full.is_new_contributor) {
-                        value += ' <span class="badge bg-warning">New Contributor</span>'
+                        value +=
+                            ' <span class="badge bg-warning">New Contributor</span>';
                     }
-                    return value
+                    return value;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_occurrence: function () {
             return {
-                data: "occurrence_name",
+                data: 'occurrence_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.occurrence_name) {
                         return full.occurrence_name;
                     }
-                    return 'NOT SET'
+                    return 'NOT SET';
                 },
-                name: "occurrence__occurrence_number",
-            }
+                name: 'occurrence__occurrence_number',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.community_name) {
                         let value = full.community_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-                name: "community__taxonomy__community_name",
-            }
+                name: 'community__taxonomy__community_name',
+            };
         },
         column_observation_date_time: function () {
             return {
-                data: "observation_date",
+                data: 'observation_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "observation_date",
-            }
+                name: 'observation_date',
+            };
         },
         column_main_observer: function () {
             return {
-                data: "main_observer",
+                data: 'main_observer',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                name: "main_observer",
+                name: 'main_observer',
                 render: function (data, type, full) {
                     return full.main_observer;
-                }
-            }
+                },
+            };
         },
         column_migrated_from_id: function () {
             return {
-                data: "migrated_from_id",
+                data: 'migrated_from_id',
                 orderable: false,
                 searchable: true,
-            }
+            };
         },
         column_lodgement_date: function () {
             return {
-                data: "lodgement_date",
+                data: 'lodgement_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "lodgement_date",
-            }
+                name: 'lodgement_date',
+            };
         },
         column_submitter: function () {
             return {
-                data: "submitter",
+                data: 'submitter',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                name: "submitter__first_name, submitter__last_name",
-            }
+                name: 'submitter__first_name, submitter__last_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status_display",
+                data: 'processing_status_display',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (full.internal_user_edit) {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
@@ -429,24 +489,22 @@ export default {
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                         }
-                    }
-                    else {
+                    } else {
                         if (full.can_user_assess || full.can_user_approve) {
                             links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Process</a><br/>`;
-                        }
-                        else {
+                        } else {
                             links += `<a href='/internal/occurrence-report/${full.id}?action=view'>View</a><br/>`;
                         }
                         links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
-            let columns = []
-            let search = null
+            let vm = this;
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -455,7 +513,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -464,9 +522,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             columns = [
                 vm.column_number,
                 vm.column_id,
@@ -479,44 +537,55 @@ export default {
                 vm.column_submitter,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = true
+            ];
+            search = true;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 1 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "data": function (d) {
+                    url: this.url,
+                    dataSrc: 'data',
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
                         d.filter_occurrence = vm.filterOCRCommunityOccurrence;
                         d.filter_community_name = vm.filterOCRCommunityName;
                         d.filter_status = vm.filterOCRCommunityStatus;
-                        d.filter_observation_from_date = vm.filterOCRCommunityObservationFromDate;
-                        d.filter_observation_to_date = vm.filterOCRCommunityObservationToDate;
-                        d.filter_submitted_from_date = vm.filterOCRCommunitySubmittedFromDate;
-                        d.filter_submitted_to_date = vm.filterOCRCommunitySubmittedToDate;
-                        d.filter_from_due_date = vm.filterOCRFromCommunityDueDate;
+                        d.filter_observation_from_date =
+                            vm.filterOCRCommunityObservationFromDate;
+                        d.filter_observation_to_date =
+                            vm.filterOCRCommunityObservationToDate;
+                        d.filter_submitted_from_date =
+                            vm.filterOCRCommunitySubmittedFromDate;
+                        d.filter_submitted_to_date =
+                            vm.filterOCRCommunitySubmittedToDate;
+                        d.filter_from_due_date =
+                            vm.filterOCRFromCommunityDueDate;
                         d.filter_to_due_date = vm.filterOCRToCommunityDueDate;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -528,8 +597,159 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCRCommunityOccurrence: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRCommunityOccurrence_cache,
+                vm.filterOCRCommunityOccurrence
+            );
+        },
+        filterOCRCommunityName: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRCommunityName_cache,
+                vm.filterOCRCommunityName
+            );
+        },
+        filterOCRCommunityStatus: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRCommunityStatus_cache,
+                vm.filterOCRCommunityStatus
+            );
+        },
+        filterOCRCommunityObservationFromDate: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRCommunityObservationFromDate_cache,
+                vm.filterOCRCommunityObservationFromDate
+            );
+        },
+        filterOCRCommunityObservationToDate: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRCommunityObservationToDate_cache,
+                vm.filterOCRCommunityObservationToDate
+            );
+        },
+        filterOCRCommunitySubmittedFromDate: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRCommunitySubmittedFromDate_cache,
+                vm.filterOCRCommunitySubmittedFromDate
+            );
+        },
+        filterOCRCommunitySubmittedToDate: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRCommunitySubmittedToDate_cache,
+                vm.filterOCRCommunitySubmittedToDate
+            );
+        },
+        filterOCRFromCommunityDueDate: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFromCommunityDueDate_cache,
+                vm.filterOCRFromCommunityDueDate
+            );
+        },
+        filterOCRToCommunityDueDate: function () {
+            let vm = this;
+            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRToCommunityDueDate_cache,
+                vm.filterOCRToCommunityDueDate
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseOccurrenceLookup();
+            vm.initialiseCommunityNameLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterOCRCommunityOccurrence') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCRCommunityOccurrence') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRCommunityOccurrenceText'),
+                    vm.filterOCRCommunityOccurrence,
+                    false,
+                    true
+                );
+                $('#ocr_occurrence_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCRCommunityName') != 'all' &&
+                sessionStorage.getItem('filterOCRCommunityName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRCommunityNameText'),
+                    vm.filterOCRCommunityName,
+                    false,
+                    true
+                );
+                $('#ocr_community_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -540,115 +760,139 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseOccurrenceLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_occurrence_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_occurrence"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Occurrence",
-                ajax: {
-                    url: api_endpoints.community_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.ocr_occurrence_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_occurrence'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Occurrence',
+                    ajax: {
+                        url: api_endpoints.community_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRCommunityOccurrence = data;
-                    sessionStorage.setItem("filterOCRCommunityOccurrenceText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRCommunityOccurrenceText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRCommunityOccurrence = 'all';
-                    sessionStorage.setItem("filterOCRCommunityOccurrenceText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_occurrence_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterOCRCommunityOccurrenceText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_occurrence_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_community_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_ocr_community_name"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.ocr_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_ocr_community_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRCommunityName = data;
-                    sessionStorage.setItem("filterOCRCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRCommunityName = 'all';
-                    sessionStorage.setItem("filterOCRCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_community_name_lookup-results"]')
+                    sessionStorage.setItem('filterOCRCommunityNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_community_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Community Values object
-            fetch(api_endpoints.community_filter_dict).then(async (response) => {
-                vm.filterListsCommunity = await response.json();
-                vm.occurrence_list = vm.filterListsCommunity.occurrence_list;
-                vm.community_name_list = vm.filterListsCommunity.community_name_list;
-                vm.status_list = vm.filterListsCommunity.status_list;
-                vm.submissions_from_list = vm.filterListsCommunity.submissions_from_list;
-                vm.submissions_to_list = vm.filterListsCommunity.submissions_to_list;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(api_endpoints.community_filter_dict).then(
+                async (response) => {
+                    vm.filterListsCommunity = await response.json();
+                    vm.occurrence_list =
+                        vm.filterListsCommunity.occurrence_list;
+                    vm.community_name_list =
+                        vm.filterListsCommunity.community_name_list;
+                    vm.status_list = vm.filterListsCommunity.status_list;
+                    vm.submissions_from_list =
+                        vm.filterListsCommunity.submissions_from_list;
+                    vm.submissions_to_list =
+                        vm.filterListsCommunity.submissions_to_list;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createCommunityOccurrenceReport: async function () {
             swal.fire({
                 title: `Add ${this.group_type_name} Occurrence Report`,
-                text: "Are you sure you want to add a new occurrence report?",
-                icon: "question",
+                text: 'Are you sure you want to add a new occurrence report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Occurrence Report',
                 reverseButtons: true,
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newCommunityOCRId = null
+                    let newCommunityOCRId = null;
                     try {
-                        const createUrl = api_endpoints.occurrence_report + "/";
+                        const createUrl = api_endpoints.occurrence_report + '/';
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.group_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -660,8 +904,7 @@ export default {
                         if (data) {
                             newCommunityOCRId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -674,122 +917,140 @@ export default {
         discardOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Report",
-                text: "Are you sure you want to discard this report?",
-                icon: "question",
+                title: 'Discard Report',
+                text: 'Are you sure you want to discard this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your report has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_ocr_proposal(
+                                occurrence_report_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your report has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Report",
-                text: "Are you sure you want to reinstate this report?",
-                icon: "question",
+                title: 'Reinstate Report',
+                text: 'Are you sure you want to reinstate this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your report has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_ocr_proposal(
+                                occurrence_report_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your report has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.community_ocr_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.community_ocr_datatable.vmDataTable.on('click', 'a[data-discard-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-ocr-proposal');
-                vm.discardOCRProposal(id);
-            });
-            vm.$refs.community_ocr_datatable.vmDataTable.on('click', 'a[data-reinstate-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-ocr-proposal');
-                vm.reinstateOCRProposal(id);
-            });
-            vm.$refs.community_ocr_datatable.vmDataTable.on('click', 'a[data-history-occurrence-report]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-occurrence-report');
-                vm.historyDocument(id);
-            });
-            vm.$refs.community_ocr_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.community_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-ocr-proposal');
+                    vm.discardOCRProposal(id);
+                }
+            );
+            vm.$refs.community_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-ocr-proposal');
+                    vm.reinstateOCRProposal(id);
+                }
+            );
+            vm.$refs.community_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-occurrence-report]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-occurrence-report');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.community_ocr_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseOccurrenceLookup();
-            vm.initialiseCommunityNameLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterOCRCommunityOccurrence") != 'all' && sessionStorage.getItem("filterOCRCommunityOccurrence") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRCommunityOccurrenceText"), vm.filterOCRCommunityOccurrence, false, true);
-                $('#ocr_occurrence_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCRCommunityName") != 'all' && sessionStorage.getItem("filterOCRCommunityName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRCommunityNameText"), vm.filterOCRCommunityName, false, true);
-                $('#ocr_community_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
index 98645d0a..7b42f8d8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
@@ -1,29 +1,52 @@
 <template id="species_fauna_ocr_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-4">
-                    <div class="form-group" id="select_occurrence">
+                    <div id="select_occurrence" class="form-group">
                         <label for="ocr_occurrence_lookup">Occurrence:</label>
-                        <select id="ocr_occurrence_lookup" name="ocr_occurrence_lookup" ref="ocr_occurrence_lookup"
-                            class="form-control" />
+                        <select
+                            id="ocr_occurrence_lookup"
+                            ref="ocr_occurrence_lookup"
+                            name="ocr_occurrence_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_scientific_name_by_groupname">
-                        <label for="ocr_scientific_name_lookup_by_groupname">Scientific Name:</label>
-                        <select id="ocr_scientific_name_lookup_by_groupname"
-                            name="ocr_scientific_name_lookup_by_groupname" ref="ocr_scientific_name_lookup_by_groupname"
-                            class="form-control" />
+                    <div
+                        id="select_scientific_name_by_groupname"
+                        class="form-group"
+                    >
+                        <label for="ocr_scientific_name_lookup_by_groupname"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="ocr_scientific_name_lookup_by_groupname"
+                            ref="ocr_scientific_name_lookup_by_groupname"
+                            name="ocr_scientific_name_lookup_by_groupname"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_status">
+                    <div id="select_status" class="form-group">
                         <label for="ocr_status_lookup">Status:</label>
-                        <select class="form-select" v-model="filterOCRFaunaStatus">
+                        <select
+                            v-model="filterOCRFaunaStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -31,69 +54,106 @@
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for="">Observation Date Range:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observation_from_date"
-                            v-model="filterOCRFaunaObservationFromDate">
+                        <input
+                            id="observation_from_date"
+                            v-model="filterOCRFaunaObservationFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observation_from_date"
-                            v-model="filterOCRFaunaObservationToDate">
+                        <input
+                            id="observation_from_date"
+                            v-model="filterOCRFaunaObservationToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for="">Submitted Date Range:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="submitted_from_date"
-                            v-model="filterOCRFaunaSubmittedFromDate">
+                        <input
+                            id="submitted_from_date"
+                            v-model="filterOCRFaunaSubmittedFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="submitted_from_date"
-                            v-model="filterOCRFaunaSubmittedToDate">
+                        <input
+                            id="submitted_from_date"
+                            v-model="filterOCRFaunaSubmittedToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
         <div v-if="addFaunaOCRVisibility" class="col-md-12">
             <div class="text-end">
-                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence-report/bulk_import/?group_type=fauna`"><i
-                    class="bi bi-download pe-2"></i>Bulk Import</a>
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFaunaOccurrenceReport"><i
-                        class="fa-solid fa-circle-plus"></i> Add Fauna Occurrence Report</button>
+                <a
+                    type="button"
+                    role="button"
+                    class="btn btn-primary mb-2 me-2"
+                    :href="`/internal/occurrence-report/bulk_import/?group_type=fauna`"
+                    ><i class="bi bi-download pe-2"></i>Bulk Import</a
+                >
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFaunaOccurrenceReport"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Add Fauna Occurrence
+                    Report
+                </button>
             </div>
         </div>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="fauna_ocr_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="fauna_ocr_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
             <div v-if="occurrenceReportHistoryId">
-                <OccurrenceReportHistory ref="occurrence_report_history" :key="occurrenceReportHistoryId"
-                    :occurrence-report-id="occurrenceReportHistoryId" />
+                <OccurrenceReportHistory
+                    ref="occurrence_report_history"
+                    :key="occurrenceReportHistoryId"
+                    :occurrence-report-id="occurrenceReportHistoryId"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import OccurrenceReportHistory from '../internal/occurrence/species_occurrence_report_history.vue';
 
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceReportFaunaTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        OccurrenceReportHistory,
+    },
     props: {
         level: {
             type: String,
@@ -101,24 +161,24 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         filterOCRFaunaOccurrence_cache: {
             type: String,
@@ -174,31 +234,68 @@ export default {
             datatable_id: 'species_fauna_ocr-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterOCRFaunaOccurrence: sessionStorage.getItem(this.filterOCRFaunaOccurrence_cache) ?
-                sessionStorage.getItem(this.filterOCRFaunaOccurrence_cache) : 'all',
+            filterOCRFaunaOccurrence: sessionStorage.getItem(
+                this.filterOCRFaunaOccurrence_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRFaunaOccurrence_cache)
+                : 'all',
 
-            filterOCRFaunaScientificName: sessionStorage.getItem(this.filterOCRFaunaScientificName_cache) ?
-                sessionStorage.getItem(this.filterOCRFaunaScientificName_cache) : 'all',
+            filterOCRFaunaScientificName: sessionStorage.getItem(
+                this.filterOCRFaunaScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFaunaScientificName_cache
+                  )
+                : 'all',
 
-            filterOCRFaunaStatus: sessionStorage.getItem(this.filterOCRFaunaStatus_cache) ?
-                sessionStorage.getItem(this.filterOCRFaunaStatus_cache) : 'all',
+            filterOCRFaunaStatus: sessionStorage.getItem(
+                this.filterOCRFaunaStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRFaunaStatus_cache)
+                : 'all',
 
-            filterOCRFaunaObservationFromDate: sessionStorage.getItem(this.filterOCRFaunaObservationFromDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFaunaObservationFromDate_cache) : '',
+            filterOCRFaunaObservationFromDate: sessionStorage.getItem(
+                this.filterOCRFaunaObservationFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFaunaObservationFromDate_cache
+                  )
+                : '',
 
-            filterOCRFaunaObservationToDate: sessionStorage.getItem(this.filterOCRFaunaObservationToDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFaunaObservationToDate_cache) : '',
+            filterOCRFaunaObservationToDate: sessionStorage.getItem(
+                this.filterOCRFaunaObservationToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFaunaObservationToDate_cache
+                  )
+                : '',
 
-            filterOCRFaunaSubmittedFromDate: sessionStorage.getItem(this.filterOCRFaunaSubmittedFromDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFaunaSubmittedFromDate_cache) : '',
+            filterOCRFaunaSubmittedFromDate: sessionStorage.getItem(
+                this.filterOCRFaunaSubmittedFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFaunaSubmittedFromDate_cache
+                  )
+                : '',
 
-            filterOCRFaunaSubmittedToDate: sessionStorage.getItem(this.filterOCRFaunaSubmittedToDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFaunaSubmittedToDate_cache) : '',
+            filterOCRFaunaSubmittedToDate: sessionStorage.getItem(
+                this.filterOCRFaunaSubmittedToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFaunaSubmittedToDate_cache
+                  )
+                : '',
 
-            filterOCRFromFaunaDueDate: sessionStorage.getItem(this.filterOCRFromFaunaDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFromFaunaDueDate_cache) : '',
-            filterOCRToFaunaDueDate: sessionStorage.getItem(this.filterOCRToFaunaDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCRToFaunaDueDate_cache) : '',
+            filterOCRFromFaunaDueDate: sessionStorage.getItem(
+                this.filterOCRFromFaunaDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRFromFaunaDueDate_cache)
+                : '',
+            filterOCRToFaunaDueDate: sessionStorage.getItem(
+                this.filterOCRToFaunaDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRToFaunaDueDate_cache)
+                : '',
 
             filterListsSpecies: {},
             occurrence_list: [],
@@ -217,70 +314,12 @@ export default {
                 { value: 'approved', name: 'Approved' },
                 { value: 'declined', name: 'Declined' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        OccurrenceReportHistory,
-    },
-    watch: {
-        filterOCRFaunaOccurrence: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFaunaOccurrence_cache, vm.filterOCRFaunaOccurrence);
-        },
-        filterOCRFaunaScientificName: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFaunaScientificName_cache, vm.filterOCRFaunaScientificName);
-        },
-        filterOCRFaunaStatus: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFaunaStatus_cache, vm.filterOCRFaunaStatus);
-        },
-        filterOCRFaunaObservationFromDate: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFaunaObservationFromDate_cache, vm.filterOCRFaunaObservationFromDate);
-        },
-        filterOCRFaunaObservationToDate: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFaunaObservationToDate_cache, vm.filterOCRFaunaObservationToDate);
-        },
-        filterOCRFaunaSubmittedFromDate: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFaunaSubmittedFromDate_cache, vm.filterOCRFaunaSubmittedFromDate);
-        },
-        filterOCRFaunaSubmittedToDate: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFaunaSubmittedToDate_cache, vm.filterOCRFaunaSubmittedToDate);
-        },
-        filterOCRFromFaunaDueDate: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFromFaunaDueDate_cache, vm.filterOCRFromFaunaDueDate);
-        },
-        filterOCRToFaunaDueDate: function () {
-            let vm = this;
-            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRToFaunaDueDate_cache, vm.filterOCRToFaunaDueDate);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterOCRFaunaOccurrence === 'all' &&
+            if (
+                this.filterOCRFaunaOccurrence === 'all' &&
                 this.filterOCRFaunaScientificName === 'all' &&
                 this.filterOCRFaunaStatus === 'all' &&
                 this.filterOCRFaunaObservationFromDate === '' &&
@@ -288,140 +327,159 @@ export default {
                 this.filterOCRFaunaSubmittedFromDate === '' &&
                 this.filterOCRFaunaSubmittedToDate === '' &&
                 this.filterOCRFromFaunaDueDate === '' &&
-                this.filterOCRToFaunaDueDate === '') {
-                return false
+                this.filterOCRToFaunaDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         addFaunaOCRVisibility: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS);
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.INTERNAL_CONTRIBUTORS
+                )
+            );
         },
         datatable_headers: function () {
-            return ['ID', 'Number', 'Occurrence', 'Scientific Name', 'Observation Date', 'Main Observer', 'Migrated From ID', 'Submitted on', 'Submitter', 'Status', 'Action']
+            return [
+                'ID',
+                'Number',
+                'Occurrence',
+                'Scientific Name',
+                'Observation Date',
+                'Main Observer',
+                'Migrated From ID',
+                'Submitted on',
+                'Submitter',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             let vm = this;
             return {
-                data: "occurrence_report_number",
+                data: 'occurrence_report_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    let value = full.occurrence_report_number
+                render: function (data, type, full) {
+                    let value = full.occurrence_report_number;
                     if (full.is_new_contributor) {
-                        value += ' <span class="badge bg-warning">New Contributor</span>'
+                        value +=
+                            ' <span class="badge bg-warning">New Contributor</span>';
                     }
-                    return value
+                    return value;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_occurrence: function () {
             return {
-                data: "occurrence_name",
+                data: 'occurrence_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.occurrence_name) {
                         return full.occurrence_name;
                     }
-                    return 'NOT SET'
+                    return 'NOT SET';
                 },
-                name: "occurrence__occurrence_number",
-            }
+                name: 'occurrence__occurrence_number',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.scientific_name) {
                         let value = full.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-                name: "species__taxonomy__scientific_name",
-            }
+                name: 'species__taxonomy__scientific_name',
+            };
         },
         column_observation_date_time: function () {
             return {
-                data: "observation_date",
+                data: 'observation_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "observation_date",
-            }
+                name: 'observation_date',
+            };
         },
         column_main_observer: function () {
             return {
-                data: "main_observer",
+                data: 'main_observer',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                name: "main_observer",
+                name: 'main_observer',
                 render: function (data, type, full) {
                     return full.main_observer;
-                }
-            }
+                },
+            };
         },
         column_migrated_from_id: function () {
             return {
-                data: "migrated_from_id",
+                data: 'migrated_from_id',
                 orderable: false,
                 searchable: true,
-            }
+            };
         },
         column_lodgement_date: function () {
             return {
-                data: "lodgement_date",
+                data: 'lodgement_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "lodgement_date",
-            }
+                name: 'lodgement_date',
+            };
         },
         column_submitter: function () {
             return {
-                data: "submitter",
+                data: 'submitter',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                name: "submitter__first_name, submitter__last_name",
-            }
+                name: 'submitter__first_name, submitter__last_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status_display",
+                data: 'processing_status_display',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (full.internal_user_edit) {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
@@ -430,24 +488,22 @@ export default {
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                         }
-                    }
-                    else {
+                    } else {
                         if (full.can_user_assess || full.can_user_approve) {
                             links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Process</a><br/>`;
-                        }
-                        else {
+                        } else {
                             links += `<a href='/internal/occurrence-report/${full.id}?action=view'>View</a><br/>`;
                         }
                         links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
-            let columns = []
-            let search = null
+            let vm = this;
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -456,7 +512,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -465,9 +521,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             columns = [
                 vm.column_id,
                 vm.column_number,
@@ -480,46 +536,57 @@ export default {
                 vm.column_submitter,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = true
+            ];
+            search = true;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 1 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
 
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
                         d.filter_occurrence = vm.filterOCRFaunaOccurrence;
-                        d.filter_scientific_name = vm.filterOCRFaunaScientificName;
+                        d.filter_scientific_name =
+                            vm.filterOCRFaunaScientificName;
                         d.filter_status = vm.filterOCRFaunaStatus;
-                        d.filter_observation_from_date = vm.filterOCRFaunaObservationFromDate;
-                        d.filter_observation_to_date = vm.filterOCRFaunaObservationToDate;
-                        d.filter_submitted_from_date = vm.filterOCRFaunaSubmittedFromDate;
-                        d.filter_submitted_to_date = vm.filterOCRFaunaSubmittedToDate;
+                        d.filter_observation_from_date =
+                            vm.filterOCRFaunaObservationFromDate;
+                        d.filter_observation_to_date =
+                            vm.filterOCRFaunaObservationToDate;
+                        d.filter_submitted_from_date =
+                            vm.filterOCRFaunaSubmittedFromDate;
+                        d.filter_submitted_to_date =
+                            vm.filterOCRFaunaSubmittedToDate;
                         d.filter_from_due_date = vm.filterOCRFromFaunaDueDate;
                         d.filter_to_due_date = vm.filterOCRToFaunaDueDate;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -531,8 +598,159 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCRFaunaOccurrence: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFaunaOccurrence_cache,
+                vm.filterOCRFaunaOccurrence
+            );
+        },
+        filterOCRFaunaScientificName: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFaunaScientificName_cache,
+                vm.filterOCRFaunaScientificName
+            );
+        },
+        filterOCRFaunaStatus: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFaunaStatus_cache,
+                vm.filterOCRFaunaStatus
+            );
+        },
+        filterOCRFaunaObservationFromDate: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFaunaObservationFromDate_cache,
+                vm.filterOCRFaunaObservationFromDate
+            );
+        },
+        filterOCRFaunaObservationToDate: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFaunaObservationToDate_cache,
+                vm.filterOCRFaunaObservationToDate
+            );
+        },
+        filterOCRFaunaSubmittedFromDate: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFaunaSubmittedFromDate_cache,
+                vm.filterOCRFaunaSubmittedFromDate
+            );
+        },
+        filterOCRFaunaSubmittedToDate: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFaunaSubmittedToDate_cache,
+                vm.filterOCRFaunaSubmittedToDate
+            );
+        },
+        filterOCRFromFaunaDueDate: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFromFaunaDueDate_cache,
+                vm.filterOCRFromFaunaDueDate
+            );
+        },
+        filterOCRToFaunaDueDate: function () {
+            let vm = this;
+            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRToFaunaDueDate_cache,
+                vm.filterOCRToFaunaDueDate
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseOccurrenceLookup();
+            vm.initialiseScientificNameLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterOCRFaunaOccurrence') != 'all' &&
+                sessionStorage.getItem('filterOCRFaunaOccurrence') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRFaunaOccurrenceText'),
+                    vm.filterOCRFaunaOccurrence,
+                    false,
+                    true
+                );
+                $('#ocr_occurrence_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCRFaunaScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCRFaunaScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRFaunaScientificNameText'),
+                    vm.filterOCRFaunaScientificName,
+                    false,
+                    true
+                );
+                $('#ocr_scientific_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -543,116 +761,143 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseOccurrenceLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_occurrence_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_occurrence"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Occurrence",
-                ajax: {
-                    url: api_endpoints.species_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.ocr_occurrence_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_occurrence'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Occurrence',
+                    ajax: {
+                        url: api_endpoints.species_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFaunaOccurrence = data;
-                    sessionStorage.setItem("filterOCRFaunaOccurrenceText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRFaunaOccurrenceText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRFaunaOccurrence = 'all';
-                    sessionStorage.setItem("filterOCRFaunaOccurrenceText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_occurrence_lookup-results"]')
+                    sessionStorage.setItem('filterOCRFaunaOccurrenceText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_occurrence_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_scientific_name_lookup_by_groupname).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_scientific_name_by_groupname"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.ocr_scientific_name_lookup_by_groupname)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_scientific_name_by_groupname'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFaunaScientificName = data;
-                    sessionStorage.setItem("filterOCRFaunaScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRFaunaScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRFaunaScientificName = 'all';
-                    sessionStorage.setItem("filterOCRFaunaScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_scientific_name_lookup_by_groupname-results"]')
+                    sessionStorage.setItem(
+                        'filterOCRFaunaScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_scientific_name_lookup_by_groupname-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.status_list = vm.filterListsSpecies.status_list;
-                vm.submissions_from_list = vm.filterListsSpecies.submissions_from_list;
-                vm.submissions_to_list = vm.filterListsSpecies.submissions_to_list;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.status_list = vm.filterListsSpecies.status_list;
+                    vm.submissions_from_list =
+                        vm.filterListsSpecies.submissions_from_list;
+                    vm.submissions_to_list =
+                        vm.filterListsSpecies.submissions_to_list;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createFaunaOccurrenceReport: async function () {
             swal.fire({
                 title: `Add ${this.group_type_name} Occurrence Report`,
-                text: "Are you sure you want to add a new occurrence report?",
-                icon: "question",
+                text: 'Are you sure you want to add a new occurrence report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Occurrence Report',
                 reverseButtons: true,
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFaunaOCRId = null
+                    let newFaunaOCRId = null;
                     try {
-                        const createUrl = api_endpoints.occurrence_report + "/";
+                        const createUrl = api_endpoints.occurrence_report + '/';
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.group_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -664,8 +909,7 @@ export default {
                         if (data) {
                             newFaunaOCRId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -678,124 +922,142 @@ export default {
         discardOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Report",
-                text: "Are you sure you want to discard this report?",
-                icon: "question",
+                title: 'Discard Report',
+                text: 'Are you sure you want to discard this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your report has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_ocr_proposal(
+                                occurrence_report_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your report has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Report",
-                text: "Are you sure you want to reinstate this report?",
-                icon: "question",
+                title: 'Reinstate Report',
+                text: 'Are you sure you want to reinstate this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your report has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_ocr_proposal(
+                                occurrence_report_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your report has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_ocr_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.fauna_ocr_datatable.vmDataTable.on('click', 'a[data-discard-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-ocr-proposal');
-                vm.discardOCRProposal(id);
-            });
-            vm.$refs.fauna_ocr_datatable.vmDataTable.on('click', 'a[data-reinstate-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-ocr-proposal');
-                vm.reinstateOCRProposal(id);
-            });
-            vm.$refs.fauna_ocr_datatable.vmDataTable.on('click', 'a[data-history-occurrence-report]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-occurrence-report');
-                vm.historyDocument(id);
-            });
-            vm.$refs.fauna_ocr_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.fauna_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-ocr-proposal');
+                    vm.discardOCRProposal(id);
+                }
+            );
+            vm.$refs.fauna_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-ocr-proposal');
+                    vm.reinstateOCRProposal(id);
+                }
+            );
+            vm.$refs.fauna_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-occurrence-report]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-occurrence-report');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.fauna_ocr_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseOccurrenceLookup();
-            vm.initialiseScientificNameLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterOCRFaunaOccurrence") != 'all' && sessionStorage.getItem("filterOCRFaunaOccurrence") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRFaunaOccurrenceText"), vm.filterOCRFaunaOccurrence, false, true);
-                $('#ocr_occurrence_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCRFaunaScientificName") != 'all' && sessionStorage.getItem("filterOCRFaunaScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRFaunaScientificNameText"), vm.filterOCRFaunaScientificName, false, true);
-                $('#ocr_scientific_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -823,7 +1085,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -848,7 +1112,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
index faa4aef6..276791be 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
@@ -1,29 +1,52 @@
 <template id="species_flora_ocr_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-4">
-                    <div class="form-group" id="select_occurrence">
+                    <div id="select_occurrence" class="form-group">
                         <label for="ocr_occurrence_lookup">Occurrence:</label>
-                        <select id="ocr_occurrence_lookup" name="ocr_occurrence_lookup" ref="ocr_occurrence_lookup"
-                            class="form-control" />
+                        <select
+                            id="ocr_occurrence_lookup"
+                            ref="ocr_occurrence_lookup"
+                            name="ocr_occurrence_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_scientific_name_by_groupname">
-                        <label for="ocr_scientific_name_lookup_by_groupname">Scientific Name:</label>
-                        <select id="ocr_scientific_name_lookup_by_groupname"
-                            name="ocr_scientific_name_lookup_by_groupname" ref="ocr_scientific_name_lookup_by_groupname"
-                            class="form-control" />
+                    <div
+                        id="select_scientific_name_by_groupname"
+                        class="form-group"
+                    >
+                        <label for="ocr_scientific_name_lookup_by_groupname"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="ocr_scientific_name_lookup_by_groupname"
+                            ref="ocr_scientific_name_lookup_by_groupname"
+                            name="ocr_scientific_name_lookup_by_groupname"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_status">
+                    <div id="select_status" class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterOCRFloraStatus">
+                        <select
+                            v-model="filterOCRFloraStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -31,70 +54,107 @@
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for="">Observation Date Range:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observation_from_date"
-                            v-model="filterOCRFloraObservationFromDate">
+                        <input
+                            id="observation_from_date"
+                            v-model="filterOCRFloraObservationFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observation_from_date"
-                            v-model="filterOCRFloraObservationToDate">
+                        <input
+                            id="observation_from_date"
+                            v-model="filterOCRFloraObservationToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for="">Submitted Date Range:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="submitted_from_date"
-                            v-model="filterOCRFloraSubmittedFromDate">
+                        <input
+                            id="submitted_from_date"
+                            v-model="filterOCRFloraSubmittedFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="submitted_from_date"
-                            v-model="filterOCRFloraSubmittedToDate">
+                        <input
+                            id="submitted_from_date"
+                            v-model="filterOCRFloraSubmittedToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
         <div v-if="addFloraOCRVisibility" class="col-md-12">
             <div class="text-end">
-                <a type="button" role="button" class="btn btn-primary mb-2 me-2" :href="`/internal/occurrence-report/bulk_import/?group_type=flora`"><i
-                        class="bi bi-download pe-2"></i>Bulk Import</a>
+                <a
+                    type="button"
+                    role="button"
+                    class="btn btn-primary mb-2 me-2"
+                    :href="`/internal/occurrence-report/bulk_import/?group_type=flora`"
+                    ><i class="bi bi-download pe-2"></i>Bulk Import</a
+                >
 
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFloraOccurrenceReport"><i
-                        class="fa-solid fa-circle-plus"></i> Add Flora Occurrence Report</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFloraOccurrenceReport"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Add Flora Occurrence
+                    Report
+                </button>
             </div>
         </div>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_ocr_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_ocr_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
             <div v-if="occurrenceReportHistoryId">
-                <OccurrenceReportHistory ref="occurrence_report_history" :key="occurrenceReportHistoryId"
-                    :occurrence-report-id="occurrenceReportHistoryId" />
+                <OccurrenceReportHistory
+                    ref="occurrence_report_history"
+                    :key="occurrenceReportHistoryId"
+                    :occurrence-report-id="occurrenceReportHistoryId"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import OccurrenceReportHistory from '../internal/occurrence/species_occurrence_report_history.vue';
 
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceReportFloraTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        OccurrenceReportHistory,
+    },
     props: {
         level: {
             type: String,
@@ -102,29 +162,29 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         // for adding agendaitems for the meeting_obj.id
         meeting_obj: {
             type: Object,
-            required: false
+            required: false,
         },
         filterOCRFloraOccurrence_cache: {
             type: String,
@@ -180,31 +240,68 @@ export default {
             datatable_id: 'species_flora_or-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterOCRFloraOccurrence: sessionStorage.getItem(this.filterOCRFloraOccurrence_cache) ?
-                sessionStorage.getItem(this.filterOCRFloraOccurrence_cache) : 'all',
+            filterOCRFloraOccurrence: sessionStorage.getItem(
+                this.filterOCRFloraOccurrence_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRFloraOccurrence_cache)
+                : 'all',
 
-            filterOCRFloraScientificName: sessionStorage.getItem(this.filterOCRFloraScientificName_cache) ?
-                sessionStorage.getItem(this.filterOCRFloraScientificName_cache) : 'all',
+            filterOCRFloraScientificName: sessionStorage.getItem(
+                this.filterOCRFloraScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFloraScientificName_cache
+                  )
+                : 'all',
 
-            filterOCRFloraStatus: sessionStorage.getItem(this.filterOCRFloraStatus_cache) ?
-                sessionStorage.getItem(this.filterOCRFloraStatus_cache) : 'all',
+            filterOCRFloraStatus: sessionStorage.getItem(
+                this.filterOCRFloraStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRFloraStatus_cache)
+                : 'all',
 
-            filterOCRFloraObservationFromDate: sessionStorage.getItem(this.filterOCRFloraObservationFromDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFloraObservationFromDate_cache) : '',
+            filterOCRFloraObservationFromDate: sessionStorage.getItem(
+                this.filterOCRFloraObservationFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFloraObservationFromDate_cache
+                  )
+                : '',
 
-            filterOCRFloraObservationToDate: sessionStorage.getItem(this.filterOCRFloraObservationToDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFloraObservationToDate_cache) : '',
+            filterOCRFloraObservationToDate: sessionStorage.getItem(
+                this.filterOCRFloraObservationToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFloraObservationToDate_cache
+                  )
+                : '',
 
-            filterOCRFloraSubmittedFromDate: sessionStorage.getItem(this.filterOCRFloraSubmittedFromDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFloraSubmittedFromDate_cache) : '',
+            filterOCRFloraSubmittedFromDate: sessionStorage.getItem(
+                this.filterOCRFloraSubmittedFromDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFloraSubmittedFromDate_cache
+                  )
+                : '',
 
-            filterOCRFloraSubmittedToDate: sessionStorage.getItem(this.filterOCRFloraSubmittedToDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFloraSubmittedToDate_cache) : '',
+            filterOCRFloraSubmittedToDate: sessionStorage.getItem(
+                this.filterOCRFloraSubmittedToDate_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRFloraSubmittedToDate_cache
+                  )
+                : '',
 
-            filterOCRFromFloraDueDate: sessionStorage.getItem(this.filterOCRFromFloraDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCRFromFloraDueDate_cache) : '',
-            filterOCRToFloraDueDate: sessionStorage.getItem(this.filterOCRToFloraDueDate_cache) ?
-                sessionStorage.getItem(this.filterOCRToFloraDueDate_cache) : '',
+            filterOCRFromFloraDueDate: sessionStorage.getItem(
+                this.filterOCRFromFloraDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRFromFloraDueDate_cache)
+                : '',
+            filterOCRToFloraDueDate: sessionStorage.getItem(
+                this.filterOCRToFloraDueDate_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRToFloraDueDate_cache)
+                : '',
 
             filterListsSpecies: {},
             occurrence_list: [],
@@ -222,70 +319,12 @@ export default {
                 { value: 'approved', name: 'Approved' },
                 { value: 'declined', name: 'Declined' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        OccurrenceReportHistory,
-    },
-    watch: {
-        filterOCRFloraOccurrence: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFloraOccurrence_cache, vm.filterOCRFloraOccurrence);
-        },
-        filterOCRFloraScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFloraScientificName_cache, vm.filterOCRFloraScientificName);
-        },
-        filterOCRFloraStatus: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFloraStatus_cache, vm.filterOCRFloraStatus);
-        },
-        filterOCRFloraObservationFromDate: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFloraObservationFromDate_cache, vm.filterOCRFloraObservationFromDate);
-        },
-        filterOCRFloraObservationToDate: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFloraObservationToDate_cache, vm.filterOCRFloraObservationToDate);
-        },
-        filterOCRFloraSubmittedFromDate: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFloraSubmittedFromDate_cache, vm.filterOCRFloraSubmittedFromDate);
-        },
-        filterOCRFloraSubmittedToDate: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFloraSubmittedToDate_cache, vm.filterOCRFloraSubmittedToDate);
-        },
-        filterOCRFromFloraDueDate: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRFromFloraDueDate_cache, vm.filterOCRFromFloraDueDate);
-        },
-        filterOCRToFloraDueDate: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRToFloraDueDate_cache, vm.filterOCRToFloraDueDate);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterOCRFloraOccurrence === 'all' &&
+            if (
+                this.filterOCRFloraOccurrence === 'all' &&
                 this.filterOCRFloraScientificName === 'all' &&
                 this.filterOCRFloraStatus === 'all' &&
                 this.filterOCRFloraObservationFromDate === '' &&
@@ -293,138 +332,157 @@ export default {
                 this.filterOCRFloraSubmittedFromDate === '' &&
                 this.filterOCRFloraSubmittedToDate === '' &&
                 this.filterOCRFromFloraDueDate === '' &&
-                this.filterOCRToFloraDueDate === '') {
-                return false
+                this.filterOCRToFloraDueDate === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         addFloraOCRVisibility: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.INTERNAL_CONTRIBUTORS);
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.INTERNAL_CONTRIBUTORS
+                )
+            );
         },
         datatable_headers: function () {
-            return ['ID', 'Number', 'Occurrence', 'Scientific Name', 'Observation Date', 'Main Observer', 'Migrated From ID', 'Submitted on', 'Submitter', 'Status', 'Action']
+            return [
+                'ID',
+                'Number',
+                'Occurrence',
+                'Scientific Name',
+                'Observation Date',
+                'Main Observer',
+                'Migrated From ID',
+                'Submitted on',
+                'Submitter',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             return {
-                data: "occurrence_report_number",
+                data: 'occurrence_report_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    let value = full.occurrence_report_number
+                render: function (data, type, full) {
+                    let value = full.occurrence_report_number;
                     if (full.is_new_contributor) {
-                        value += ' <span class="badge bg-warning">New Contributor</span>'
+                        value +=
+                            ' <span class="badge bg-warning">New Contributor</span>';
                     }
-                    return value
+                    return value;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_occurrence: function () {
             return {
-                data: "occurrence_name",
+                data: 'occurrence_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.occurrence_name) {
                         return full.occurrence_name;
                     }
-                    return 'NOT SET'
+                    return 'NOT SET';
                 },
-                name: "occurrence__occurrence_number",
-            }
+                name: 'occurrence__occurrence_number',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.scientific_name) {
                         let value = full.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return type == 'export' ? value : result;
                     }
-                    return ''
+                    return '';
                 },
-                name: "species__taxonomy__scientific_name",
-            }
+                name: 'species__taxonomy__scientific_name',
+            };
         },
         column_observation_date_time: function () {
             return {
-                data: "observation_date",
+                data: 'observation_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "observation_date",
-            }
+                name: 'observation_date',
+            };
         },
         column_main_observer: function () {
             return {
-                data: "main_observer",
+                data: 'main_observer',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                name: "main_observer",
+                name: 'main_observer',
                 render: function (data, type, full) {
                     return full.main_observer;
-                }
-            }
+                },
+            };
         },
         column_lodgement_date: function () {
             return {
-                data: "lodgement_date",
+                data: 'lodgement_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "lodgement_date",
-            }
+                name: 'lodgement_date',
+            };
         },
         column_migrated_from_id: function () {
             return {
-                data: "migrated_from_id",
+                data: 'migrated_from_id',
                 orderable: false,
                 searchable: true,
-            }
+            };
         },
         column_submitter: function () {
             return {
-                data: "submitter",
+                data: 'submitter',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                name: "submitter__first_name, submitter__last_name",
-            }
+                name: 'submitter__first_name, submitter__last_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status_display",
+                data: 'processing_status_display',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
             return {
-                data: "internal_user_edit",
+                data: 'internal_user_edit',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (full.internal_user_edit) {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
@@ -433,24 +491,22 @@ export default {
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                             links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                         }
-                    }
-                    else {
+                    } else {
                         if (full.can_user_assess || full.can_user_approve) {
                             links += `<a href='/internal/occurrence-report/${full.id}?action=edit'>Process</a><br/>`;
-                        }
-                        else {
+                        } else {
                             links += `<a href='/internal/occurrence-report/${full.id}?action=view'>View</a><br/>`;
                         }
                         links += `<a href='#' data-history-occurrence-report='${full.id}'>History</a><br>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
-            let columns = []
-            let search = null
+            let vm = this;
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -459,7 +515,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -468,9 +524,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             columns = [
                 vm.column_id,
                 vm.column_number,
@@ -483,44 +539,55 @@ export default {
                 vm.column_submitter,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = true
+            ];
+            search = true;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 1 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "data": function (d) {
+                    url: this.url,
+                    dataSrc: 'data',
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
                         d.filter_occurrence = vm.filterOCRFloraOccurrence;
-                        d.filter_scientific_name = vm.filterOCRFloraScientificName;
+                        d.filter_scientific_name =
+                            vm.filterOCRFloraScientificName;
                         d.filter_status = vm.filterOCRFloraStatus;
-                        d.filter_observation_from_date = vm.filterOCRFloraObservationFromDate;
-                        d.filter_observation_to_date = vm.filterOCRFloraObservationToDate;
-                        d.filter_submitted_from_date = vm.filterOCRFloraSubmittedFromDate;
-                        d.filter_submitted_to_date = vm.filterOCRFloraSubmittedToDate;
+                        d.filter_observation_from_date =
+                            vm.filterOCRFloraObservationFromDate;
+                        d.filter_observation_to_date =
+                            vm.filterOCRFloraObservationToDate;
+                        d.filter_submitted_from_date =
+                            vm.filterOCRFloraSubmittedFromDate;
+                        d.filter_submitted_to_date =
+                            vm.filterOCRFloraSubmittedToDate;
                         d.filter_from_due_date = vm.filterOCRFromFloraDueDate;
                         d.filter_to_due_date = vm.filterOCRToFloraDueDate;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -532,8 +599,159 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCRFloraOccurrence: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFloraOccurrence_cache,
+                vm.filterOCRFloraOccurrence
+            );
+        },
+        filterOCRFloraScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFloraScientificName_cache,
+                vm.filterOCRFloraScientificName
+            );
+        },
+        filterOCRFloraStatus: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFloraStatus_cache,
+                vm.filterOCRFloraStatus
+            );
+        },
+        filterOCRFloraObservationFromDate: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFloraObservationFromDate_cache,
+                vm.filterOCRFloraObservationFromDate
+            );
+        },
+        filterOCRFloraObservationToDate: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFloraObservationToDate_cache,
+                vm.filterOCRFloraObservationToDate
+            );
+        },
+        filterOCRFloraSubmittedFromDate: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFloraSubmittedFromDate_cache,
+                vm.filterOCRFloraSubmittedFromDate
+            );
+        },
+        filterOCRFloraSubmittedToDate: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFloraSubmittedToDate_cache,
+                vm.filterOCRFloraSubmittedToDate
+            );
+        },
+        filterOCRFromFloraDueDate: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRFromFloraDueDate_cache,
+                vm.filterOCRFromFloraDueDate
+            );
+        },
+        filterOCRToFloraDueDate: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRToFloraDueDate_cache,
+                vm.filterOCRToFloraDueDate
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseOccurrenceLookup();
+            vm.initialiseScientificNameLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterOCRFloraOccurrence') != 'all' &&
+                sessionStorage.getItem('filterOCRFloraOccurrence') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRFloraOccurrenceText'),
+                    vm.filterOCRFloraOccurrence,
+                    false,
+                    true
+                );
+                $('#ocr_occurrence_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCRFloraScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCRFloraScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRFloraScientificNameText'),
+                    vm.filterOCRFloraScientificName,
+                    false,
+                    true
+                );
+                $('#ocr_scientific_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -544,116 +762,143 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseOccurrenceLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_occurrence_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_occurrence"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Occurrence",
-                ajax: {
-                    url: api_endpoints.occurrence_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.ocr_occurrence_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_occurrence'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Occurrence',
+                    ajax: {
+                        url: api_endpoints.occurrence_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFloraOccurrence = data;
-                    sessionStorage.setItem("filterOCRFloraOccurrenceText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRFloraOccurrenceText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRFloraOccurrence = 'all';
-                    sessionStorage.setItem("filterOCRFloraOccurrenceText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_occurrence_lookup-results"]')
+                    sessionStorage.setItem('filterOCRFloraOccurrenceText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_occurrence_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_scientific_name_lookup_by_groupname).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_scientific_name_by_groupname"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.ocr_scientific_name_lookup_by_groupname)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_scientific_name_by_groupname'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFloraScientificName = data;
-                    sessionStorage.setItem("filterOCRFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRFloraScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRFloraScientificName = 'all';
-                    sessionStorage.setItem("filterOCRFloraScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_scientific_name_lookup_by_groupname-results"]')
+                    sessionStorage.setItem(
+                        'filterOCRFloraScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_scientific_name_lookup_by_groupname-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.status_list = vm.filterListsSpecies.status_list;
-                vm.submissions_from_list = vm.filterListsSpecies.submissions_from_list;
-                vm.submissions_to_list = vm.filterListsSpecies.submissions_to_list;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.occurrence_list = vm.filterListsSpecies.occurrence_list;
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.status_list = vm.filterListsSpecies.status_list;
+                    vm.submissions_from_list =
+                        vm.filterListsSpecies.submissions_from_list;
+                    vm.submissions_to_list =
+                        vm.filterListsSpecies.submissions_to_list;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createFloraOccurrenceReport: async function () {
             swal.fire({
                 title: `Add ${this.group_type_name} Occurrence Report`,
-                text: "Are you sure you want to add a new occurrence report?",
-                icon: "question",
+                text: 'Are you sure you want to add a new occurrence report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Occurrence Report',
                 reverseButtons: true,
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFloraOCRId = null
+                    let newFloraOCRId = null;
                     try {
-                        const createUrl = api_endpoints.occurrence_report + "/";
+                        const createUrl = api_endpoints.occurrence_report + '/';
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
-                        payload.internal_application = true
+                        payload.group_type_id = this.group_type_id;
+                        payload.internal_application = true;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -665,8 +910,7 @@ export default {
                         if (data) {
                             newFloraOCRId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -679,124 +923,142 @@ export default {
         discardOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Report",
-                text: "Are you sure you want to discard this report?",
-                icon: "question",
+                title: 'Discard Report',
+                text: 'Are you sure you want to discard this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your report has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_ocr_proposal(
+                                occurrence_report_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your report has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Report",
-                text: "Are you sure you want to reinstate this report?",
-                icon: "question",
+                title: 'Reinstate Report',
+                text: 'Are you sure you want to reinstate this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your report has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_ocr_proposal(
+                                occurrence_report_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your report has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_ocr_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.flora_ocr_datatable.vmDataTable.on('click', 'a[data-discard-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-ocr-proposal');
-                vm.discardOCRProposal(id);
-            });
-            vm.$refs.flora_ocr_datatable.vmDataTable.on('click', 'a[data-reinstate-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-ocr-proposal');
-                vm.reinstateOCRProposal(id);
-            });
-            vm.$refs.flora_ocr_datatable.vmDataTable.on('click', 'a[data-history-occurrence-report]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-occurrence-report');
-                vm.historyDocument(id);
-            });
-            vm.$refs.flora_ocr_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-ocr-proposal');
+                    vm.discardOCRProposal(id);
+                }
+            );
+            vm.$refs.flora_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-ocr-proposal');
+                    vm.reinstateOCRProposal(id);
+                }
+            );
+            vm.$refs.flora_ocr_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-occurrence-report]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-occurrence-report');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.flora_ocr_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseOccurrenceLookup();
-            vm.initialiseScientificNameLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterOCRFloraOccurrence") != 'all' && sessionStorage.getItem("filterOCRFloraOccurrence") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRFloraOccurrenceText"), vm.filterOCRFloraOccurrence, false, true);
-                $('#ocr_occurrence_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCRFloraScientificName") != 'all' && sessionStorage.getItem("filterOCRFloraScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRFloraScientificNameText"), vm.filterOCRFloraScientificName, false, true);
-                $('#ocr_scientific_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -824,7 +1086,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -849,7 +1113,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
index 419cae67..e81e94ef 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
@@ -1,28 +1,51 @@
 <template id="ocr_external_referrals_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="ocr_ref_scientific_name_lookup">Scientific Name:</label>
-                        <select id="ocr_ref_scientific_name_lookup" name="ocr_ref_scientific_name_lookup"
-                            ref="ocr_ref_scientific_name_lookup" class="form-control" />
+                        <label for="ocr_ref_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="ocr_ref_scientific_name_lookup"
+                            ref="ocr_ref_scientific_name_lookup"
+                            name="ocr_ref_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="ocr_referrals_community_name_lookup">Community Name:</label>
-                        <select id="ocr_referrals_community_name_lookup" name="ocr_referrals_community_name_lookup"
-                            ref="ocr_referrals_community_name_lookup" class="form-control" />
+                        <label for="ocr_referrals_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="ocr_referrals_community_name_lookup"
+                            ref="ocr_referrals_community_name_lookup"
+                            name="ocr_referrals_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSRefFloraApplicationStatus">
+                        <select
+                            v-model="filterCSRefFloraApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -32,30 +55,32 @@
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_ocr_ref_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_ocr_ref_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OCRExternalReferralsTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+    },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         filterCSRefFloraScientificName_cache: {
             type: String,
@@ -78,141 +103,141 @@ export default {
         return {
             datatable_id: 'ocr_external_ref-datatable-' + vm._uid,
 
-            filterCSRefFloraScientificName: sessionStorage.getItem(this.filterCSRefFloraScientificName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraScientificName_cache) : 'all',
+            filterCSRefFloraScientificName: sessionStorage.getItem(
+                this.filterCSRefFloraScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraScientificName_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraCommunityName: sessionStorage.getItem(this.filterCSRefFloraCommunityName_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraCommunityName_cache) : 'all',
+            filterCSRefFloraCommunityName: sessionStorage.getItem(
+                this.filterCSRefFloraCommunityName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraCommunityName_cache
+                  )
+                : 'all',
 
-            filterCSRefFloraApplicationStatus: sessionStorage.getItem(this.filterCSRefFloraApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSRefFloraApplicationStatus_cache) : 'all',
+            filterCSRefFloraApplicationStatus: sessionStorage.getItem(
+                this.filterCSRefFloraApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSRefFloraApplicationStatus_cache
+                  )
+                : 'all',
 
             processing_statuses: [
                 { value: 'with_referral', name: 'Awaiting' },
                 { value: 'completed', name: 'Completed' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-    },
-    watch: {
-        filterCSRefFloraScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraScientificName_cache, vm.filterCSRefFloraScientificName);
-        },
-        filterCSRefFloraCommunityName: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraCommunityName_cache, vm.filterCSRefFloraCommunityName);
-        },
-        filterCSRefFloraApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_ref_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSRefFloraApplicationStatus_cache, vm.filterCSRefFloraApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterCSRefFloraScientificName === 'all' &&
+            if (
+                this.filterCSRefFloraScientificName === 'all' &&
                 this.filterCSRefFloraCommunityName === 'all' &&
-                this.filterCSRefFloraApplicationStatus === 'all') {
-                return false
+                this.filterCSRefFloraApplicationStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         datatable_headers: function () {
-            return ['Number', 'Species', 'Scientific Name', 'Community Name', 'Status', 'Action']
+            return [
+                'Number',
+                'Species',
+                'Scientific Name',
+                'Community Name',
+                'Status',
+                'Action',
+            ];
         },
         column_number: function () {
             return {
-                data: "occurrence_report_number",
+                data: 'occurrence_report_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let tick = '';
                     if (full.can_be_processed) {
-                        tick = "<i class='fa fa-exclamation-circle ms-2' style='color:#FFBF00'></i>";
-                    }
-                    else {
-                        tick = "<i class='fa fa-check-circle ms-2' style='color:green'></i>";
+                        tick =
+                            "<i class='fa fa-exclamation-circle ms-2' style='color:#FFBF00'></i>";
+                    } else {
+                        tick =
+                            "<i class='fa fa-check-circle ms-2' style='color:green'></i>";
                     }
                     return full.occurrence_report_number + tick;
                 },
-                name: "occurrence_report__id, occurrence_report__occurrence_report_number",
-            }
+                name: 'occurrence_report__id, occurrence_report__occurrence_report_number',
+            };
         },
         column_group_type: function () {
             return {
-                data: "group_type",
+                data: 'group_type',
                 orderable: true,
                 searchable: true,
                 visible: true,
                 render: function (data, type, full) {
                     return `<span class="text-capitalize">${full.group_type}</span>`;
                 },
-            }
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "occurrence_report__species__taxonomy__scientific_name",
-            }
+                name: 'occurrence_report__species__taxonomy__scientific_name',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "occurrence_report__community__taxonomy__community_name",
-            }
+                name: 'occurrence_report__community__taxonomy__community_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let links = '';
-                    links += full.can_be_processed ? `<a href='/external/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/external/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
+                    links += full.can_be_processed
+                        ? `<a href='/external/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>`
+                        : `<a href='/external/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
-            }
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
             let columns = [
                 vm.column_number,
@@ -221,7 +246,7 @@ export default {
                 vm.column_community_name,
                 vm.column_status,
                 vm.column_action,
-            ]
+            ];
             let buttons = [
                 {
                     extend: 'excel',
@@ -229,8 +254,8 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> Excel',
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
+                        columns: ':not(.no-export)',
+                    },
                 },
                 {
                     extend: 'csv',
@@ -238,42 +263,51 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> CSV',
                     className: 'btn btn-primary rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
-                }
-            ]
+                        columns: ':not(.no-export)',
+                    },
+                },
+            ];
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: true,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1 , className: 'no-export'},
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
-                    "data": function (d) {
-                        d.filter_scientific_name = vm.filterCSRefFloraScientificName;
-                        d.filter_community_name = vm.filterCSRefFloraCommunityName;
-                        d.filter_application_status = vm.filterCSRefFloraApplicationStatus;
-                    }
+                    data: function (d) {
+                        d.filter_scientific_name =
+                            vm.filterCSRefFloraScientificName;
+                        d.filter_community_name =
+                            vm.filterCSRefFloraCommunityName;
+                        d.filter_application_status =
+                            vm.filterCSRefFloraApplicationStatus;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -285,115 +319,203 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSRefFloraScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraScientificName_cache,
+                vm.filterCSRefFloraScientificName
+            );
+        },
+        filterCSRefFloraCommunityName: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraCommunityName_cache,
+                vm.filterCSRefFloraCommunityName
+            );
+        },
+        filterCSRefFloraApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_ref_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSRefFloraApplicationStatus_cache,
+                vm.filterCSRefFloraApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommunityNameLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterCSRefFloraScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFloraScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterCSRefFloraScientificNameText'
+                    ),
+                    vm.filterCSRefFloraScientificName,
+                    false,
+                    true
+                );
+                $('#ocr_ref_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSRefFloraCommunityName') !=
+                    'all' &&
+                sessionStorage.getItem('filterCSRefFloraCommunityName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSRefFloraCommunityNameText'),
+                    vm.filterCSRefFloraCommunityName,
+                    false,
+                    true
+                );
+                $('#ocr_referrals_community_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_ref_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            ocr_referral: true,
-                        }
-                        return query;
+            $(vm.$refs.ocr_ref_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                ocr_referral: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraScientificName = data;
-                    sessionStorage.setItem("filterCSRefFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraScientificName = 'all';
-                    sessionStorage.setItem("filterCSRefFloraScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_ref_scientific_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFloraScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_ref_scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_referrals_community_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.communities_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.ocr_referrals_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.communities_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraCommunityName = data;
-                    sessionStorage.setItem("filterCSRefFloraCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSRefFloraCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSRefFloraCommunityName = 'all';
-                    sessionStorage.setItem("filterCSRefFloraCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_referrals_community_name_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterCSRefFloraCommunityNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_referrals_community_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.flora_ocr_ref_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_ocr_ref_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommunityNameLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterCSRefFloraScientificName") != 'all' && sessionStorage.getItem("filterCSRefFloraScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraScientificNameText"), vm.filterCSRefFloraScientificName, false, true);
-                $('#ocr_ref_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSRefFloraCommunityName") != 'all' && sessionStorage.getItem("filterCSRefFloraCommunityName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCSRefFloraCommunityNameText"), vm.filterCSRefFloraCommunityName, false, true);
-                $('#ocr_referrals_community_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
index 731f4d24..4d3a27a9 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
@@ -1,36 +1,74 @@
 <template id="species_flora_ocr_referrals_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-4">
-                    <div class="form-group" id="ocr_referrals_select_occurrence">
-                        <label for="ocr_referrals_occurrence_lookup">Occurrence:</label>
-                        <select id="ocr_referrals_occurrence_lookup" name="ocr_referrals_occurrence_lookup"
-                            ref="ocr_referrals_occurrence_lookup" class="form-control" />
+                    <div
+                        id="ocr_referrals_select_occurrence"
+                        class="form-group"
+                    >
+                        <label for="ocr_referrals_occurrence_lookup"
+                            >Occurrence:</label
+                        >
+                        <select
+                            id="ocr_referrals_occurrence_lookup"
+                            ref="ocr_referrals_occurrence_lookup"
+                            name="ocr_referrals_occurrence_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div v-if="group_type_name == 'community'" class="col-md-4">
-                    <div class="form-group" id="select_ocr_referrals_community_name">
-                        <label for="ocr_referrals_community_name_lookup">Community Name:</label>
-                        <select id="ocr_referrals_community_name_lookup" name="ocr_referrals_community_name_lookup"
-                            ref="ocr_referrals_community_name_lookup" class="form-control" />
+                    <div
+                        id="select_ocr_referrals_community_name"
+                        class="form-group"
+                    >
+                        <label for="ocr_referrals_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="ocr_referrals_community_name_lookup"
+                            ref="ocr_referrals_community_name_lookup"
+                            name="ocr_referrals_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div v-else class="col-md-4">
-                    <div class="form-group" id="ocr_referrals_select_scientific_name_by_groupname">
-                        <label for="ocr_referrals_scientific_name_lookup_by_groupname">Scientific Name:</label>
-                        <select id="ocr_referrals_scientific_name_lookup_by_groupname"
+                    <div
+                        id="ocr_referrals_select_scientific_name_by_groupname"
+                        class="form-group"
+                    >
+                        <label
+                            for="ocr_referrals_scientific_name_lookup_by_groupname"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="ocr_referrals_scientific_name_lookup_by_groupname"
+                            ref="ocr_referrals_scientific_name_lookup_by_groupname"
                             name="ocr_referrals_scientific_name_lookup_by_groupname"
-                            ref="ocr_referrals_scientific_name_lookup_by_groupname" class="form-control" />
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-4">
-                    <div class="form-group" id="select_status">
+                    <div id="select_status" class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterOCRReferralsStatus">
+                        <select
+                            v-model="filterOCRReferralsStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
@@ -39,26 +77,29 @@
         </CollapsibleFilters>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_ocr_referrals_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_ocr_referrals_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceReportFloraTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+    },
     props: {
         level: {
             type: String,
@@ -66,24 +107,24 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         filterOCRReferralsOccurrence_cache: {
             type: String,
@@ -112,173 +153,171 @@ export default {
             uuid: 0,
             occurrenceReportHistoryId: null,
             datatable_id: 'species_flora_ocr_referrals_datatable_' + vm._uid,
-            filterOCRReferralsOccurrence: sessionStorage.getItem(this.filterOCRReferralsOccurrence_cache) ?
-                sessionStorage.getItem(this.filterOCRReferralsOccurrence_cache) : 'all',
-            filterOCRReferralsScientificName: sessionStorage.getItem(this.filterOCRReferralsScientificName_cache) ?
-                sessionStorage.getItem(this.filterOCRReferralsScientificName_cache) : 'all',
-            filterOCRReferralsName: sessionStorage.getItem(this.filterOCRReferralsName_cache) ?
-                sessionStorage.getItem(this.filterOCRReferralsName_cache) : 'all',
-            filterOCRReferralsStatus: sessionStorage.getItem(this.filterOCRReferralsStatus_cache) ?
-                sessionStorage.getItem(this.filterOCRReferralsStatus_cache) : 'all',
+            filterOCRReferralsOccurrence: sessionStorage.getItem(
+                this.filterOCRReferralsOccurrence_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRReferralsOccurrence_cache
+                  )
+                : 'all',
+            filterOCRReferralsScientificName: sessionStorage.getItem(
+                this.filterOCRReferralsScientificName_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterOCRReferralsScientificName_cache
+                  )
+                : 'all',
+            filterOCRReferralsName: sessionStorage.getItem(
+                this.filterOCRReferralsName_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRReferralsName_cache)
+                : 'all',
+            filterOCRReferralsStatus: sessionStorage.getItem(
+                this.filterOCRReferralsStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRReferralsStatus_cache)
+                : 'all',
             processing_statuses: [
                 { value: 'with_referral', name: 'Awaiting' },
                 { value: 'completed', name: 'Completed' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-    },
-    watch: {
-        filterOCRReferralsOccurrence: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-            sessionStorage.setItem(vm.filterOCRReferralsOccurrence_cache, vm.filterOCRReferralsOccurrence);
-        },
-        filterOCRReferralsScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-            sessionStorage.setItem(vm.filterOCRReferralsScientificName_cache, vm.filterOCRReferralsScientificName);
-        },
-        filterOCRReferralsName: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-            sessionStorage.setItem(vm.filterOCRReferralsName_cache, vm.filterOCRReferralsName);
-        },
-        filterOCRReferralsStatus: function () {
-            let vm = this;
-            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-            sessionStorage.setItem(vm.filterOCRReferralsStatus_cache, vm.filterOCRReferralsStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterOCRReferralsOccurrence === 'all' &&
+            if (
+                this.filterOCRReferralsOccurrence === 'all' &&
                 this.filterOCRReferralsScientificName === 'all' &&
                 this.filterOCRReferralsName === 'all' &&
-                this.filterOCRReferralsStatus === 'all') {
-                return false
+                this.filterOCRReferralsStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         datatable_headers: function () {
-            let headers = ['ID', 'Number', 'Occurrence', 'Scientific Name', 'Submission date/time', 'Submitter', 'Status', 'Action']
+            let headers = [
+                'ID',
+                'Number',
+                'Occurrence',
+                'Scientific Name',
+                'Submission date/time',
+                'Submitter',
+                'Status',
+                'Action',
+            ];
             if (this.group_type_name == 'community') {
-                headers.splice(3, 1, 'Community Name')
+                headers.splice(3, 1, 'Community Name');
             }
-            return headers
+            return headers;
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-            }
+            };
         },
         column_number: function () {
             let vm = this;
             return {
-                data: "occurrence_report_number",
+                data: 'occurrence_report_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     let tick = '';
                     if (full.can_be_processed) {
-                        tick = " <i class='fa fa-exclamation-circle' style='color:#FFBF00'></i>";
-                    }
-                    else {
-                        tick = " <i class='fa fa-check-circle' style='color:green'></i>";
+                        tick =
+                            " <i class='fa fa-exclamation-circle' style='color:#FFBF00'></i>";
+                    } else {
+                        tick =
+                            " <i class='fa fa-check-circle' style='color:green'></i>";
                     }
                     return full.occurrence_report_number + tick;
                 },
-                name: "occurrence_report__occurrence_report_number",
-            }
+                name: 'occurrence_report__occurrence_report_number',
+            };
         },
         column_occurrence: function () {
             return {
-                data: "occurrence_name",
+                data: 'occurrence_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.occurrence_name) {
                         return full.occurrence_name;
                     }
-                    return 'NOT SET'
+                    return 'NOT SET';
                 },
-                name: "occurrence_report__occurrence__occurrence_number",
-            }
+                name: 'occurrence_report__occurrence__occurrence_number',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_report__species__taxonomy__scientific_name",
-            }
+                name: 'occurrence_report__species__taxonomy__scientific_name',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_report__community__taxonomy__community_name",
-            }
+                name: 'occurrence_report__community__taxonomy__community_name',
+            };
         },
         column_submission_date_time: function () {
             return {
-                data: "reported_date",
+                data: 'reported_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "occurrence_report__reported_date",
-            }
+                name: 'occurrence_report__reported_date',
+            };
         },
         column_submitter: function () {
             return {
-                data: "submitter",
+                data: 'submitter',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
-                    links += full.can_be_processed ? `<a href='/internal/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>` : `<a href='/internal/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
+                render: function (data, type, full) {
+                    let links = '';
+                    links += full.can_be_processed
+                        ? `<a href='/internal/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>Process</a><br/>`
+                        : `<a href='/internal/occurrence-report/${full.occurrence_report_id}/referral/${full.id}'>View</a><br/>`;
                     return links;
                 },
-            }
+            };
         },
         datatable_options: function () {
-            let vm = this
-            let search = null
+            let vm = this;
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -286,8 +325,8 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> Excel',
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
+                        columns: ':not(.no-export)',
+                    },
                 },
                 {
                     extend: 'csv',
@@ -295,10 +334,10 @@ export default {
                     text: '<i class="fa-solid fa-download"></i> CSV',
                     className: 'btn btn-primary rounded',
                     exportOptions: {
-                        columns: ':not(.no-export)'
-                    }
-                }
-            ]
+                        columns: ':not(.no-export)',
+                    },
+                },
+            ];
 
             let columns = [
                 vm.column_id,
@@ -309,44 +348,55 @@ export default {
                 vm.column_submitter,
                 vm.column_status,
                 vm.column_action,
-            ]
+            ];
 
             if (this.group_type_name == 'community') {
-                columns.splice(3, 1, vm.column_community_name)
+                columns.splice(3, 1, vm.column_community_name);
             }
 
-            search = true
+            search = true;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
-                    { responsivePriority: 1, targets: 0, className: 'no-export' },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 1,
+                        targets: 0,
+                        className: 'no-export',
+                    },
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "data": function (d) {
+                    url: this.url,
+                    dataSrc: 'data',
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
                         d.filter_occurrence = vm.filterOCRReferralsOccurrence;
-                        d.filter_scientific_name = vm.filterOCRReferralsScientificName;
+                        d.filter_scientific_name =
+                            vm.filterOCRReferralsScientificName;
                         d.filter_community_name = vm.filterOCRReferralsName;
                         d.filter_status = vm.filterOCRReferralsStatus;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -358,8 +408,122 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCRReferralsOccurrence: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            );
+            sessionStorage.setItem(
+                vm.filterOCRReferralsOccurrence_cache,
+                vm.filterOCRReferralsOccurrence
+            );
+        },
+        filterOCRReferralsScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            );
+            sessionStorage.setItem(
+                vm.filterOCRReferralsScientificName_cache,
+                vm.filterOCRReferralsScientificName
+            );
+        },
+        filterOCRReferralsName: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            );
+            sessionStorage.setItem(
+                vm.filterOCRReferralsName_cache,
+                vm.filterOCRReferralsName
+            );
+        },
+        filterOCRReferralsStatus: function () {
+            let vm = this;
+            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            );
+            sessionStorage.setItem(
+                vm.filterOCRReferralsStatus_cache,
+                vm.filterOCRReferralsStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
+            }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseOccurrenceLookup();
+            if (vm.group_type_name == 'community') {
+                vm.initialiseCommunityNameLookup();
+            } else {
+                vm.initialiseScientificNameLookup();
             }
-        }
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterOCRReferralsOccurrence') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCRReferralsOccurrence') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRReferralsOccurrenceText'),
+                    vm.filterOCRReferralsOccurrence,
+                    false,
+                    true
+                );
+                $('#ocr_referrals_occurrence_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCRReferralsScientificName') !=
+                    'all' &&
+                sessionStorage.getItem('filterOCRReferralsScientificName') !=
+                    null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem(
+                        'filterOCRReferralsScientificNameText'
+                    ),
+                    vm.filterOCRReferralsScientificName,
+                    false,
+                    true
+                );
+                $('#ocr_referrals_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCRReferralsName') != 'all' &&
+                sessionStorage.getItem('filterOCRReferralsName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRReferralsNameText'),
+                    vm.filterOCRReferralsName,
+                    false,
+                    true
+                );
+                $('#ocr_referrals_community_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -370,154 +534,155 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseOccurrenceLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_referrals_occurrence_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#ocr_referrals_select_occurrence"),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Occurrence",
-                ajax: {
-                    url: api_endpoints.occurrence_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.ocr_referrals_occurrence_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#ocr_referrals_select_occurrence'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Occurrence',
+                    ajax: {
+                        url: api_endpoints.occurrence_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRReferralsOccurrence = data;
-                    sessionStorage.setItem("filterOCRReferralsOccurrenceText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRReferralsOccurrenceText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRReferralsOccurrence = 'all';
-                    sessionStorage.setItem("filterOCRReferralsOccurrenceText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_referrals_occurrence_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterOCRReferralsOccurrenceText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_referrals_occurrence_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_referrals_scientific_name_lookup_by_groupname).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#ocr_referrals_select_scientific_name_by_groupname"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.ocr_referrals_scientific_name_lookup_by_groupname)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $(
+                        '#ocr_referrals_select_scientific_name_by_groupname'
+                    ),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRReferralsScientificName = data;
-                    sessionStorage.setItem("filterOCRReferralsScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRReferralsScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRReferralsScientificName = 'all';
-                    sessionStorage.setItem("filterOCRReferralsScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_referrals_scientific_name_lookup_by_groupname-results"]')
+                    sessionStorage.setItem(
+                        'filterOCRReferralsScientificNameText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_referrals_scientific_name_lookup_by_groupname-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_referrals_community_name_lookup).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#select_ocr_referrals_community_name"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.community_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.ocr_referrals_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#select_ocr_referrals_community_name'),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.community_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRReferralsName = data;
-                    sessionStorage.setItem("filterOCRReferralsNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRReferralsNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRReferralsName = 'all';
-                    sessionStorage.setItem("filterOCRReferralsNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_referrals_community_name_lookup-results"]')
+                    sessionStorage.setItem('filterOCRReferralsNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_referrals_community_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_ocr_referrals_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseOccurrenceLookup();
-            if (vm.group_type_name == 'community') {
-                vm.initialiseCommunityNameLookup();
-            } else {
-                vm.initialiseScientificNameLookup();
-            }
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterOCRReferralsOccurrence") != 'all' && sessionStorage.getItem("filterOCRReferralsOccurrence") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRReferralsOccurrenceText"), vm.filterOCRReferralsOccurrence, false, true);
-                $('#ocr_referrals_occurrence_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCRReferralsScientificName") != 'all' && sessionStorage.getItem("filterOCRReferralsScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRReferralsScientificNameText"), vm.filterOCRReferralsScientificName, false, true);
-                $('#ocr_referrals_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCRReferralsName") != 'all' && sessionStorage.getItem("filterOCRReferralsName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRReferralsNameText"), vm.filterOCRReferralsName, false, true);
-                $('#ocr_referrals_community_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/reinstate_image.vue b/boranga/frontend/boranga/src/components/common/reinstate_image.vue
index c37dff7a..4b4005ab 100644
--- a/boranga/frontend/boranga/src/components/common/reinstate_image.vue
+++ b/boranga/frontend/boranga/src/components/common/reinstate_image.vue
@@ -1,14 +1,30 @@
 <template>
     <div id="ReinstateImage">
-        <modal transition="modal fade" @ok="ok()" @cancel="close()" :title="title" :showOK="false" cancelText="Close"
-            large>
+        <modal
+            transition="modal fade"
+            :title="title"
+            :show-o-k="false"
+            cancel-text="Close"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <template v-if="images && images.length">
-                <div id="image-preview" class="container d-flex align-items-center justify-content-center"
-                    style="min-height:350px;">
-                    <img v-if="selected_image" :src="selected_image.url" alt="image" class="img-thumbnail w-50">
+                <div
+                    id="image-preview"
+                    class="container d-flex align-items-center justify-content-center"
+                    style="min-height: 350px"
+                >
+                    <img
+                        v-if="selected_image"
+                        :src="selected_image.url"
+                        alt="image"
+                        class="img-thumbnail w-50"
+                    />
                 </div>
                 <alert type="info">
-                    <i class="bi bi-info-circle-fill"></i> Click a row in the table below to preview the image
+                    <i class="bi bi-info-circle-fill"></i> Click a row in the
+                    table below to preview the image
                 </alert>
                 <table class="table table-sm table-hover">
                     <thead>
@@ -19,14 +35,39 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="image in images" @click="selected_image = image" role="button"
-                            :class="selected_image == image ? 'selected-row' : ''">
-                            <td><i class="bi bi-image me-3"></i> {{ image.filename }}</td>
-                            <td>{{ new Date(image.uploaded_date).toLocaleDateString() }} at {{ new
-                                Date(image.uploaded_date).toLocaleTimeString() }}</td>
+                        <tr
+                            v-for="image in images"
+                            role="button"
+                            :class="
+                                selected_image == image ? 'selected-row' : ''
+                            "
+                            @click="selected_image = image"
+                        >
                             <td>
-                                <button @click="confirmReinstateImage(image)" class="btn btn-primary btn-sm"><i
-                                        class="bi bi-box-arrow-in-down-left"></i> Reinstate</button>
+                                <i class="bi bi-image me-3"></i>
+                                {{ image.filename }}
+                            </td>
+                            <td>
+                                {{
+                                    new Date(
+                                        image.uploaded_date
+                                    ).toLocaleDateString()
+                                }}
+                                at
+                                {{
+                                    new Date(
+                                        image.uploaded_date
+                                    ).toLocaleTimeString()
+                                }}
+                            </td>
+                            <td>
+                                <button
+                                    class="btn btn-primary btn-sm"
+                                    @click="confirmReinstateImage(image)"
+                                >
+                                    <i class="bi bi-box-arrow-in-down-left"></i>
+                                    Reinstate
+                                </button>
                             </td>
                         </tr>
                     </tbody>
@@ -34,7 +75,8 @@
             </template>
             <template v-else>
                 <alert type="info">
-                    <i class="bi bi-exclamation-triangle-fill"></i> No images to reinstate
+                    <i class="bi bi-exclamation-triangle-fill"></i> No images to
+                    reinstate
                 </alert>
             </template>
         </modal>
@@ -42,19 +84,23 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 
 export default {
     name: 'ReinstateImage',
+    components: {
+        modal,
+        alert,
+    },
     props: {
         title: {
             type: String,
-            default: 'Reinstate Image'
+            default: 'Reinstate Image',
         },
         imageHistoryUrl: {
             type: String,
-            required: true
+            required: true,
         },
     },
     emits: ['reinstateImage'],
@@ -65,16 +111,15 @@ export default {
             selected_image: null,
         };
     },
-    components: {
-        modal,
-        alert
-    },
     watch: {
         isModalOpen: function (value) {
             if (value) {
                 this.fetchImageHistory();
             }
-        }
+        },
+    },
+    created() {
+        this.fetchImageHistory();
     },
     methods: {
         close: function () {
@@ -82,8 +127,8 @@ export default {
         },
         fetchImageHistory: function () {
             fetch(this.imageHistoryUrl)
-                .then(response => response.json())
-                .then(data => {
+                .then((response) => response.json())
+                .then((data) => {
                     this.images = data;
                     if (this.images && this.images.length) {
                         this.selected_image = this.images[0];
@@ -116,14 +161,11 @@ export default {
             this.$emit('reinstateImage', image);
         },
     },
-    created() {
-        this.fetchImageHistory();
-    },
-}
+};
 </script>
 
 <style>
 .selected-row {
-    background: rgba(51, 170, 51, .5);
+    background: rgba(51, 170, 51, 0.5);
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
index 266ebf8b..10da7fed 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
@@ -1,214 +1,472 @@
 <template lang="html">
     <div id="threat_detail">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large>
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="threatForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
-                        <alert v-if="change_warning && !isReadOnly" type="warning"><strong>{{ change_warning }}</strong>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
+                        <alert
+                            v-if="change_warning && !isReadOnly"
+                            type="warning"
+                            ><strong>{{ change_warning }}</strong>
                         </alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Category:</label>
+                                        <label class="control-label pull-left"
+                                            >Category:</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template v-if="!isReadOnly">
                                             <template
-                                                v-if="threat_category_list && threat_category_list.length > 0 && threatObj.threat_category_id && !threat_category_list.map((d) => d.id).includes(threatObj.threat_category_id)">
-                                                <input type="text" v-if="threatObj.threat_category"
+                                                v-if="
+                                                    threat_category_list &&
+                                                    threat_category_list.length >
+                                                        0 &&
+                                                    threatObj.threat_category_id &&
+                                                    !threat_category_list
+                                                        .map((d) => d.id)
+                                                        .includes(
+                                                            threatObj.threat_category_id
+                                                        )
+                                                "
+                                            >
+                                                <input
+                                                    v-if="
+                                                        threatObj.threat_category
+                                                    "
+                                                    type="text"
                                                     class="form-control mb-3"
-                                                    :value="threatObj.threat_category + ' (Now Archived)'" disabled />
+                                                    :value="
+                                                        threatObj.threat_category +
+                                                        ' (Now Archived)'
+                                                    "
+                                                    disabled
+                                                />
                                                 <div class="mb-3 text-muted">
                                                     Change threat category to:
                                                 </div>
                                             </template>
-                                            <select class="form-select" v-model="threatObj.threat_category_id">
-                                                <option v-for="category in threat_category_list" :value="category.id"
-                                                    v-bind:key="category.id">
+                                            <select
+                                                v-model="
+                                                    threatObj.threat_category_id
+                                                "
+                                                class="form-select"
+                                            >
+                                                <option
+                                                    v-for="category in threat_category_list"
+                                                    :key="category.id"
+                                                    :value="category.id"
+                                                >
                                                     {{ category.name }}
                                                 </option>
                                             </select>
                                         </template>
                                         <template v-else>
-                                            <input type="text" class="form-control" readonly
-                                                v-model="threatObj.threat_category" />
+                                            <input
+                                                v-model="
+                                                    threatObj.threat_category
+                                                "
+                                                type="text"
+                                                class="form-control"
+                                                readonly
+                                            />
                                         </template>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Threat Agent:</label>
+                                        <label class="control-label pull-left"
+                                            >Threat Agent:</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template v-if="!isReadOnly">
                                             <template
-                                                v-if="threat_agent_list && threat_agent_list.length > 0 && threatObj.threat_agent_id && !threat_agent_list.map((d) => d.id).includes(threatObj.threat_agent_id)">
-                                                <input type="text" v-if="threatObj.threat_agent"
+                                                v-if="
+                                                    threat_agent_list &&
+                                                    threat_agent_list.length >
+                                                        0 &&
+                                                    threatObj.threat_agent_id &&
+                                                    !threat_agent_list
+                                                        .map((d) => d.id)
+                                                        .includes(
+                                                            threatObj.threat_agent_id
+                                                        )
+                                                "
+                                            >
+                                                <input
+                                                    v-if="
+                                                        threatObj.threat_agent
+                                                    "
+                                                    type="text"
                                                     class="form-control mb-3"
-                                                    :value="threatObj.threat_agent + ' (Now Archived)'" disabled />
+                                                    :value="
+                                                        threatObj.threat_agent +
+                                                        ' (Now Archived)'
+                                                    "
+                                                    disabled
+                                                />
                                                 <div class="mb-3 text-muted">
                                                     Change threat agent to:
                                                 </div>
                                             </template>
-                                            <select class="form-select" v-model="threatObj.threat_agent_id">
-                                                <option v-for="agent in threat_agent_list" :value="agent.id"
-                                                    v-bind:key="agent.id">
+                                            <select
+                                                v-model="
+                                                    threatObj.threat_agent_id
+                                                "
+                                                class="form-select"
+                                            >
+                                                <option
+                                                    v-for="agent in threat_agent_list"
+                                                    :key="agent.id"
+                                                    :value="agent.id"
+                                                >
                                                     {{ agent.name }}
                                                 </option>
                                             </select>
                                         </template>
                                         <template v-else>
-                                            <input type="text" class="form-control" readonly
-                                                v-model="threatObj.threat_agent" />
+                                            <input
+                                                v-model="threatObj.threat_agent"
+                                                type="text"
+                                                class="form-control"
+                                                readonly
+                                            />
                                         </template>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Threat Comments:</label>
+                                        <label class="control-label pull-left"
+                                            >Threat Comments:</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea :disabled="isReadOnly" class="form-control"
-                                            v-model="threatObj.comment"></textarea>
+                                        <textarea
+                                            v-model="threatObj.comment"
+                                            :disabled="isReadOnly"
+                                            class="form-control"
+                                        ></textarea>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Current Impact:</label>
+                                        <label class="control-label pull-left"
+                                            >Current Impact:</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template v-if="!isReadOnly">
                                             <template
-                                                v-if="current_impact_list && current_impact_list.length > 0 && threatObj.current_impact && !current_impact_list.map((d) => d.id).includes(threatObj.current_impact)">
-                                                <input type="text" v-if="threatObj.current_impact_name"
+                                                v-if="
+                                                    current_impact_list &&
+                                                    current_impact_list.length >
+                                                        0 &&
+                                                    threatObj.current_impact &&
+                                                    !current_impact_list
+                                                        .map((d) => d.id)
+                                                        .includes(
+                                                            threatObj.current_impact
+                                                        )
+                                                "
+                                            >
+                                                <input
+                                                    v-if="
+                                                        threatObj.current_impact_name
+                                                    "
+                                                    type="text"
                                                     class="form-control mb-3"
-                                                    :value="threatObj.current_impact_name + ' (Now Archived)'"
-                                                    disabled />
+                                                    :value="
+                                                        threatObj.current_impact_name +
+                                                        ' (Now Archived)'
+                                                    "
+                                                    disabled
+                                                />
                                                 <div class="mb-3 text-muted">
                                                     Change current impact to:
                                                 </div>
                                             </template>
-                                            <template v-if="current_impact_list && current_impact_list.length > 0">
-                                                <div v-for="current_impact in current_impact_list"
-                                                    class="form-check form-check-inline ">
-                                                    <input :disabled="isReadOnly" type="radio" class="form-check-input"
-                                                        :value="current_impact.id"
+                                            <template
+                                                v-if="
+                                                    current_impact_list &&
+                                                    current_impact_list.length >
+                                                        0
+                                                "
+                                            >
+                                                <div
+                                                    v-for="current_impact in current_impact_list"
+                                                    class="form-check form-check-inline"
+                                                >
+                                                    <input
                                                         :id="'current_impact_' + current_impact.id"
-                                                        v-bind:key="current_impact.id"
-                                                        v-model="threatObj.current_impact" />
-                                                    <label :for="'current_impact_' + current_impact.id">{{
-                                                        current_impact.name
-                                                    }}</label>
+                                                        :key="current_impact.id"
+                                                        v-model="
+                                                            threatObj.current_impact
+                                                        "
+                                                        :disabled="isReadOnly"
+                                                        type="radio"
+                                                        class="form-check-input"
+                                                        "
+                                                        :value="
+                                                            current_impact.id
+                                                        "
+                                                    />
+                                                    <label
+                                                        :for="
+                                                            'current_impact_' +
+                                                            current_impact.id
+                                                        "
+                                                        >{{
+                                                            current_impact.name
+                                                        }}</label
+                                                    >
                                                 </div>
                                             </template>
                                             <template v-else>
-                                                <div>There are no current impact options available</div>
+                                                <div>
+                                                    There are no current impact
+                                                    options available
+                                                </div>
                                             </template>
                                         </template>
                                         <template v-else>
-                                            <input class="form-control" type="text" :disabled="isReadOnly"
-                                                v-model="threatObj.current_impact_name" />
+                                            <input
+                                                v-model="
+                                                    threatObj.current_impact_name
+                                                "
+                                                class="form-control"
+                                                type="text"
+                                                :disabled="isReadOnly"
+                                            />
                                         </template>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Potential Impact:</label>
+                                        <label class="control-label pull-left"
+                                            >Potential Impact:</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template v-if="!isReadOnly">
                                             <template
-                                                v-if="potential_impact_list && potential_impact_list.length > 0 && threatObj.potential_impact && !potential_impact_list.map((d) => d.id).includes(threatObj.potential_impact)">
-                                                <input type="text" v-if="threatObj.potential_impact_name"
+                                                v-if="
+                                                    potential_impact_list &&
+                                                    potential_impact_list.length >
+                                                        0 &&
+                                                    threatObj.potential_impact &&
+                                                    !potential_impact_list
+                                                        .map((d) => d.id)
+                                                        .includes(
+                                                            threatObj.potential_impact
+                                                        )
+                                                "
+                                            >
+                                                <input
+                                                    v-if="
+                                                        threatObj.potential_impact_name
+                                                    "
+                                                    type="text"
                                                     class="form-control mb-3"
-                                                    :value="threatObj.potential_impact_name + ' (Now Archived)'"
-                                                    disabled />
+                                                    :value="
+                                                        threatObj.potential_impact_name +
+                                                        ' (Now Archived)'
+                                                    "
+                                                    disabled
+                                                />
                                                 <div class="mb-3 text-muted">
                                                     Change potential impact to:
                                                 </div>
                                             </template>
-                                            <template v-if="potential_impact_list && potential_impact_list.length > 0">
-                                                <div v-for="potential_impact in potential_impact_list"
-                                                    class="form-check form-check-inline ">
-                                                    <input :disabled="isReadOnly" type="radio" class="form-check-input"
-                                                        :value="potential_impact.id"
+                                            <template
+                                                v-if="
+                                                    potential_impact_list &&
+                                                    potential_impact_list.length >
+                                                        0
+                                                "
+                                            >
+                                                <div
+                                                    v-for="potential_impact in potential_impact_list"
+                                                    class="form-check form-check-inline"
+                                                >
+                                                    <input
                                                         :id="'potential_impact_' + potential_impact.id"
-                                                        v-bind:key="potential_impact.id"
-                                                        v-model="threatObj.potential_impact" />
-                                                    <label :for="'potential_impact_' + potential_impact.id">{{
-                                                        potential_impact.name
-                                                    }}</label>
+                                                        :key="
+                                                            potential_impact.id
+                                                        "
+                                                        v-model="
+                                                            threatObj.potential_impact
+                                                        "
+                                                        :disabled="isReadOnly"
+                                                        type="radio"
+                                                        class="form-check-input"
+                                                        :value="potential_impact.id"
+                                                    />
+                                                    <label
+                                                        :for="
+                                                            'potential_impact_' +
+                                                            potential_impact.id
+                                                        "
+                                                        >{{
+                                                            potential_impact.name
+                                                        }}</label
+                                                    >
                                                 </div>
                                             </template>
                                             <template v-else>
-                                                <div>There are no potential impact options available</div>
+                                                <div>
+                                                    There are no potential
+                                                    impact options available
+                                                </div>
                                             </template>
                                         </template>
                                         <template v-else>
-                                            <input class="form-control" type="text" :disabled="isReadOnly"
-                                                v-model="threatObj.potential_impact_name" />
+                                            <input
+                                                v-model="
+                                                    threatObj.potential_impact_name
+                                                "
+                                                class="form-control"
+                                                type="text"
+                                                :disabled="isReadOnly"
+                                            />
                                         </template>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Potential Threat Onset:</label>
+                                        <label class="control-label pull-left"
+                                            >Potential Threat Onset:</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
                                         <template v-if="!isReadOnly">
                                             <template
-                                                v-if="potential_threat_onset_list && potential_threat_onset_list.length > 0 && threatObj.potential_threat_onset && !potential_threat_onset_list.map((d) => d.id).includes(threatObj.potential_threat_onset)">
-                                                <input type="text" v-if="threatObj.potential_threat_onset_name"
+                                                v-if="
+                                                    potential_threat_onset_list &&
+                                                    potential_threat_onset_list.length >
+                                                        0 &&
+                                                    threatObj.potential_threat_onset &&
+                                                    !potential_threat_onset_list
+                                                        .map((d) => d.id)
+                                                        .includes(
+                                                            threatObj.potential_threat_onset
+                                                        )
+                                                "
+                                            >
+                                                <input
+                                                    v-if="
+                                                        threatObj.potential_threat_onset_name
+                                                    "
+                                                    type="text"
                                                     class="form-control mb-3"
-                                                    :value="threatObj.potential_threat_onset_name + ' (Now Archived)'"
-                                                    disabled />
+                                                    :value="
+                                                        threatObj.potential_threat_onset_name +
+                                                        ' (Now Archived)'
+                                                    "
+                                                    disabled
+                                                />
                                                 <div class="mb-3 text-muted">
-                                                    Change potential threat onset to:
+                                                    Change potential threat
+                                                    onset to:
                                                 </div>
                                             </template>
                                             <template
-                                                v-if="potential_threat_onset_list && potential_threat_onset_list.length > 0">
-                                                <div v-for="potential_threat_onset in potential_threat_onset_list"
-                                                    class="form-check form-check-inline ">
-                                                    <input :disabled="isReadOnly" type="radio" class="form-check-input"
-                                                        :value="potential_threat_onset.id"
+                                                v-if="
+                                                    potential_threat_onset_list &&
+                                                    potential_threat_onset_list.length >
+                                                        0
+                                                "
+                                            >
+                                                <div
+                                                    v-for="potential_threat_onset in potential_threat_onset_list"
+                                                    class="form-check form-check-inline"
+                                                >
+                                                    <input
                                                         :id="'potential_threat_onset_' + potential_threat_onset.id"
-                                                        v-bind:key="potential_threat_onset.id"
-                                                        v-model="threatObj.potential_threat_onset" />
+                                                        :key="
+                                                            potential_threat_onset.id
+                                                        "
+                                                        v-model="
+                                                            threatObj.potential_threat_onset
+                                                        "
+                                                        :disabled="isReadOnly"
+                                                        type="radio"
+                                                        class="form-check-input"
+                                                        :value="potential_threat_onset.id"
+                                                    />
                                                     <label
-                                                        :for="'potential_threat_onset_' + potential_threat_onset.id">{{
+                                                        :for="
+                                                            'potential_threat_onset_' +
+                                                            potential_threat_onset.id
+                                                        "
+                                                        >{{
                                                             potential_threat_onset.name
-                                                        }}</label>
+                                                        }}</label
+                                                    >
                                                 </div>
                                             </template>
                                             <template v-else>
-                                                <div>There are no potential threat onset options available</div>
+                                                <div>
+                                                    There are no potential
+                                                    threat onset options
+                                                    available
+                                                </div>
                                             </template>
                                         </template>
                                         <template v-else>
-                                            <input class="form-control" type="text" :disabled="isReadOnly"
-                                                v-model="threatObj.potential_threat_onset_name" />
+                                            <input
+                                                v-model="
+                                                    threatObj.potential_threat_onset_name
+                                                "
+                                                class="form-control"
+                                                type="text"
+                                                :disabled="isReadOnly"
+                                            />
                                         </template>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Threat Source:</label>
+                                        <label class="control-label pull-left"
+                                            >Threat Source:</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <input type="text" class="form-control" readonly v-model="threatObj.source" />
+                                        <input
+                                            v-model="threatObj.source"
+                                            type="text"
+                                            class="form-control"
+                                            readonly
+                                        />
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label for="" class="control-label pull-left">Date observed: </label>
+                                        <label
+                                            for=""
+                                            class="control-label pull-left"
+                                            >Date observed:
+                                        </label>
                                     </div>
                                     <div class="col-sm-9">
-                                        <input :disabled="isReadOnly" type="date" class="form-control"
-                                            name="date_observed" ref="date_observed"
-                                            v-model="threatObj.date_observed" />
+                                        <input
+                                            ref="date_observed"
+                                            v-model="threatObj.date_observed"
+                                            :disabled="isReadOnly"
+                                            type="date" class="form-control"
+                                            name="date_observed"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -216,46 +474,91 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <template v-if="threat_action != 'view'">
-                    <template v-if="threat_id">
-                        <button type="button" v-if="updatingThreat" disabled class="btn btn-primary" @click="ok">
-                            Updating <span class="spinner-border spinner-border-sm" role="status"
-                                aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span></button>
-                        <button type="button" v-else class="btn btn-primary" @click="ok">Update</button>
-                    </template>
-                    <template v-else>
-                        <button type="button" v-if="addingThreat" disabled class="btn btn-primary" @click="ok">Adding
-                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span></button>
-                        <button type="button" v-else class="btn btn-primary" @click="ok">Add Threat</button>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <template v-if="threat_action != 'view'">
+                        <template v-if="threat_id">
+                            <button
+                                v-if="updatingThreat"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Updating
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Update
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button
+                                v-if="addingThreat"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Adding
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Add Threat
+                            </button>
+                        </template>
                     </template>
-                </template>
-            </div>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers } from '@/utils/hooks.js';
 export default {
-    name: 'Threat-Detail',
+    name: 'ThreatDetail',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         change_warning: {
             type: String,
-            required: false
+            required: false,
         },
     },
     data: function () {
@@ -280,7 +583,7 @@ export default {
             successString: '',
             success: false,
             validDate: false,
-        }
+        };
     },
     computed: {
         showError: function () {
@@ -289,16 +592,47 @@ export default {
         },
         title: function () {
             var action = this.threat_action;
-            if (typeof action === "string" && action.length > 0) {
-                var capitalizedAction = action.charAt(0).toUpperCase() + action.slice(1);
-                return capitalizedAction + " Threat";
+            if (typeof action === 'string' && action.length > 0) {
+                var capitalizedAction =
+                    action.charAt(0).toUpperCase() + action.slice(1);
+                return capitalizedAction + ' Threat';
             } else {
-                return "Invalid threat action"; // Or handle the error in an appropriate way
+                return 'Invalid threat action'; // Or handle the error in an appropriate way
             }
         },
         isReadOnly: function () {
-            return this.threat_action === "view" ? true : false;
-        }
+            return this.threat_action === 'view' ? true : false;
+        },
+    },
+    created: async function () {
+        let response = await fetch('/api/threat/threat_list_of_values/');
+        let threat_list_of_values_res = {};
+        const data = await response.json();
+        Object.assign(threat_list_of_values_res, data);
+        this.threat_category_list =
+            threat_list_of_values_res.active_threat_category_lists;
+        this.threat_category_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        this.current_impact_list =
+            threat_list_of_values_res.active_current_impact_lists;
+        this.potential_impact_list =
+            threat_list_of_values_res.active_potential_impact_lists;
+        this.potential_threat_onset_list =
+            threat_list_of_values_res.potential_threat_onset_lists; // Returns only active potential threat onsets
+        this.threat_agent_list = threat_list_of_values_res.threat_agent_lists;
+        this.threat_agent_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.threatForm;
+        this.$nextTick(() => {
+            vm.eventListeners();
+        });
     },
     methods: {
         ok: function () {
@@ -365,33 +699,5 @@ export default {
             let vm = this;
         }
     },
-    created: async function () {
-        let response = await fetch('/api/threat/threat_list_of_values/');
-        let threat_list_of_values_res = {};
-        const data = await response.json();
-        Object.assign(threat_list_of_values_res, data);
-        this.threat_category_list = threat_list_of_values_res.active_threat_category_lists;
-        this.threat_category_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        this.current_impact_list = threat_list_of_values_res.active_current_impact_lists;
-        this.potential_impact_list = threat_list_of_values_res.active_potential_impact_lists;
-        this.potential_threat_onset_list = threat_list_of_values_res.potential_threat_onset_lists; // Returns only active potential threat onsets
-        this.threat_agent_list = threat_list_of_values_res.threat_agent_lists;
-        this.threat_agent_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.threatForm;
-        this.$nextTick(() => {
-            vm.eventListeners();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue b/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue
index 49b71152..75cb17cc 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/basic_conservation_status.vue
@@ -1,70 +1,144 @@
 <template>
-    <FormSection :formCollapse="false" label="Conservation Status" Index="conservationstatus">
+    <FormSection
+        :form-collapse="false"
+        label="Conservation Status"
+        Index="conservationstatus"
+    >
         <form>
-            <div class="row mb-3" v-if="is_internal">
-                <label for="conservation_status_number" class="col-sm-4 col-form-label">Conservation Status
-                    Number:</label>
+            <div v-if="is_internal" class="row mb-3">
+                <label
+                    for="conservation_status_number"
+                    class="col-sm-4 col-form-label"
+                    >Conservation Status Number:</label
+                >
                 <div class="col-sm-8">
-                    <a :href="`/internal/conservation-status/${conservation_status.id}`" target="_blank"
-                        class="btn btn-primary">{{
-                            conservation_status.conservation_status_number }}<i
-                            class="bi bi-box-arrow-up-right ps-2"></i></a>
+                    <a
+                        :href="`/internal/conservation-status/${conservation_status.id}`"
+                        target="_blank"
+                        class="btn btn-primary"
+                        >{{ conservation_status.conservation_status_number
+                        }}<i class="bi bi-box-arrow-up-right ps-2"></i
+                    ></a>
                 </div>
             </div>
             <fieldset disabled>
-                <div class="row mb-3" v-if="conservation_status.wa_legislative_list">
-                    <label for="wa_legislative_list" class="col-sm-4 col-form-label">WA Legislative List</label>
+                <div
+                    v-if="conservation_status.wa_legislative_list"
+                    class="row mb-3"
+                >
+                    <label
+                        for="wa_legislative_list"
+                        class="col-sm-4 col-form-label"
+                        >WA Legislative List</label
+                    >
                     <div class="col-sm-8">
-                        <input class="form-control" id="wa_legislative_list"
-                            :value="conservation_status.wa_legislative_list" />
+                        <input
+                            id="wa_legislative_list"
+                            class="form-control"
+                            :value="conservation_status.wa_legislative_list"
+                        />
                     </div>
                 </div>
-                <div class="row mb-3" v-if="conservation_status.wa_legislative_category">
-                    <label for="wa_legislative_category" class="col-sm-4 col-form-label">WA Legislative Category</label>
+                <div
+                    v-if="conservation_status.wa_legislative_category"
+                    class="row mb-3"
+                >
+                    <label
+                        for="wa_legislative_category"
+                        class="col-sm-4 col-form-label"
+                        >WA Legislative Category</label
+                    >
                     <div class="col-sm-8">
-                        <input class="form-control" id="wa_legislative_category"
-                            :value="conservation_status.wa_legislative_category" />
+                        <input
+                            id="wa_legislative_category"
+                            class="form-control"
+                            :value="conservation_status.wa_legislative_category"
+                        />
                     </div>
                 </div>
-                <div class="row mb-3" v-if="conservation_status.wa_priority_category">
-                    <label for="wa_priority_category" class="col-sm-4 col-form-label">WA Priority Category</label>
+                <div
+                    v-if="conservation_status.wa_priority_category"
+                    class="row mb-3"
+                >
+                    <label
+                        for="wa_priority_category"
+                        class="col-sm-4 col-form-label"
+                        >WA Priority Category</label
+                    >
                     <div class="col-sm-8">
-                        <input class="form-control" id="wa_priority_category"
-                            :value="conservation_status.wa_priority_category" />
+                        <input
+                            id="wa_priority_category"
+                            class="form-control"
+                            :value="conservation_status.wa_priority_category"
+                        />
                     </div>
                 </div>
-                <div class="row mb-3" v-if="conservation_status.commonwealth_conservation_category">
-                    <label for="commonwealth_conservation_category" class="col-sm-4 col-form-label">Commonwealth
-                        Conservation
-                        List</label>
+                <div
+                    v-if="
+                        conservation_status.commonwealth_conservation_category
+                    "
+                    class="row mb-3"
+                >
+                    <label
+                        for="commonwealth_conservation_category"
+                        class="col-sm-4 col-form-label"
+                        >Commonwealth Conservation List</label
+                    >
                     <div class="col-sm-8">
-                        <input class="form-control" id="commonwealth_conservation_category"
-                            :value="conservation_status.commonwealth_conservation_category" />
+                        <input
+                            id="commonwealth_conservation_category"
+                            class="form-control"
+                            :value="
+                                conservation_status.commonwealth_conservation_category
+                            "
+                        />
                     </div>
                 </div>
-                <div class="row mb-3" v-if="conservation_status.other_conservation_assessment">
-                    <label for="other_conservation_assessment" class="col-sm-4 col-form-label">Other
-                        Conservation Assessment</label>
+                <div
+                    v-if="conservation_status.other_conservation_assessment"
+                    class="row mb-3"
+                >
+                    <label
+                        for="other_conservation_assessment"
+                        class="col-sm-4 col-form-label"
+                        >Other Conservation Assessment</label
+                    >
                     <div class="col-sm-8">
-                        <input class="form-control" id="other_conservation_assessment"
-                            :value="conservation_status.other_conservation_assessment" />
+                        <input
+                            id="other_conservation_assessment"
+                            class="form-control"
+                            :value="
+                                conservation_status.other_conservation_assessment
+                            "
+                        />
                     </div>
                 </div>
-                <div class="row pb-3 mb-3 border-bottom" v-if="conservation_status.conservation_criteria">
-                    <label for="conservation_criteria" class="col-sm-4 col-form-label">Conservation Criteria</label>
+                <div
+                    v-if="conservation_status.conservation_criteria"
+                    class="row pb-3 mb-3 border-bottom"
+                >
+                    <label
+                        for="conservation_criteria"
+                        class="col-sm-4 col-form-label"
+                        >Conservation Criteria</label
+                    >
                     <div class="col-sm-8">
-                        <input class="form-control" id="conservation_criteria"
-                            :value="conservation_status.conservation_criteria" />
+                        <input
+                            id="conservation_criteria"
+                            class="form-control"
+                            :value="conservation_status.conservation_criteria"
+                        />
                     </div>
                 </div>
                 <div class="row mt-3 mb-1">
-                    <label for="" class="col-sm-4 col-form-label">Conservation Status under
-                        review?</label>
+                    <label for="" class="col-sm-4 col-form-label"
+                        >Conservation Status under review?</label
+                    >
                     <div class="col-sm-8 d-flex align-items-center">
-                        <template v-if="conservation_status.under_review">Yes</template>
-                        <template v-else>
-                            No
-                        </template>
+                        <template v-if="conservation_status.under_review"
+                            >Yes</template
+                        >
+                        <template v-else> No </template>
                     </div>
                 </div>
             </fieldset>
@@ -76,19 +150,19 @@
 import FormSection from '@/components/forms/section_toggle.vue';
 
 export default {
-    name: "BasicConservationStatus",
+    name: 'BasicConservationStatus',
+    components: {
+        FormSection,
+    },
     props: {
         conservation_status: {
             type: Object,
-            default: null
+            default: null,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
-    components: {
-        FormSection
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
index 5224fc27..fdd87c9c 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
@@ -1,60 +1,79 @@
 <template lang="html">
     <div id="community_documents">
-        <FormSection :formCollapse="false" label="Documents" Index="documents">
-            <alert type="warning"><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload Management or Recovery Plans here</alert>
+        <FormSection :form-collapse="false" label="Documents" Index="documents">
+            <alert type="warning"
+                ><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload
+                Management or Recovery Plans here</alert
+            >
             <form class="form-horizontal" action="index.html" method="post">
                 <div v-if="!species_community.readonly" class="col-sm-12">
                     <div class="text-end">
-                        <button type="button" class="btn btn-primary mb-2 " @click.prevent="newDocument">
+                        <button
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newDocument"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Document
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                        :dtHeaders="documents_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="documents_datatable"
+                        :dt-options="documents_options"
+                        :dt-headers="documents_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <DocumentDetail ref="document_detail" @refreshFromResponse="refreshFromResponse" :url="community_document_url"
-            :is_internal="is_internal"></DocumentDetail>
+        <DocumentDetail
+            ref="document_detail"
+            :url="community_document_url"
+            :is_internal="is_internal"
+            @refresh-from-response="refreshFromResponse"
+        ></DocumentDetail>
         <div v-if="communityDocumentHistoryId">
-            <CommunityDocumentHistory ref="community_document_history" :key="communityDocumentHistoryId"
-                :document-id="communityDocumentHistoryId" :community-id="species_community.id" />
+            <CommunityDocumentHistory
+                ref="community_document_history"
+                :key="communityDocumentHistoryId"
+                :document-id="communityDocumentHistoryId"
+                :community-id="species_community.id"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
-import DocumentDetail from '../add_document.vue'
+import DocumentDetail from '../add_document.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import CommunityDocumentHistory from '../../internal/species_communities/community_document_history.vue';
 
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'CommunityDocuments',
+    components: {
+        alert,
+        FormSection,
+        datatable,
+        DocumentDetail,
+        CommunityDocumentHistory,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -62,14 +81,22 @@ export default {
         return {
             uuid: 0,
             communityDocumentHistoryId: null,
-            panelBody: "community-documents-" + vm._uid,
+            panelBody: 'community-documents-' + vm._uid,
             values: null,
             community_document_url: api_endpoints.community_documents,
-            documents_headers: ['Number', 'Category', 'Sub Category', 'Document', 'Description', 'Date/Time', 'Action'],
+            documents_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
             documents_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -79,11 +106,15 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.community, vm.species_community.id + '/documents'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.community,
+                        vm.species_community.id + '/documents'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -93,8 +124,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -102,111 +133,137 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "document_number",
+                        data: 'document_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_number;
-                            }
-                            else {
-                                return '<s>' + full.document_number + '</s>'
+                            } else {
+                                return '<s>' + full.document_number + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "document_category_name",
+                        data: 'document_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "document_sub_category_name",
+                        data: 'document_sub_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_sub_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_sub_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "name",
+                        data: 'name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.active) {
                                 let value = full.name;
-                                let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                links += '<span><a href="' + full._file + '" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
                             } else {
                                 let value = full.name;
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                links += type == 'export' ? value : '<s>' + result + '</s>';
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
                             }
                             return links;
                         },
-
                     },
                     {
-                        data: "description",
+                        data: 'description',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.active) {
                                 return type == 'export' ? value : result;
                             } else {
-                                return type == 'export' ? value : '<s>' + result + '</s>';
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "uploaded_date",
+                        data: 'uploaded_date',
                         mRender: function (data, type, full) {
                             if (full.active) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
                             } else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY HH:mm') + '</s>' : '';
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (!vm.is_readonly) {
                                 if (full.active) {
                                     links += `<a href='#${full.id}' data-edit-document='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-document='${full.id}'>Discard</a><br>`;
-                                }
-                                else {
+                                } else {
                                     links += `<a href='#' data-reinstate-document='${full.id}'>Reinstate</a><br>`;
                                 }
                             }
                             links += `<a href='#' data-history-document='${full.id}'>History</a><br>`;
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -221,20 +278,16 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        alert,
-        FormSection,
-        datatable,
-        DocumentDetail,
-        CommunityDocumentHistory,
-    },
-    computed: {
+            },
+        };
     },
-    watch: {
-
+    computed: {},
+    watch: {},
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         newDocument: function () {
@@ -248,7 +301,7 @@ export default {
                 document_category: '',
                 document_sub_category: '',
                 uploaded_date: null,
-            }
+            };
             this.$refs.document_detail.documentObj = new_document_another;
             this.$refs.document_detail.uploaded_document = [];
             this.$refs.document_detail.document_action = 'add';
@@ -260,17 +313,29 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            fetch(helpers.add_endpoint_json(api_endpoints.community_documents, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.document_detail.documentObj = data;
-                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [data];
-                //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(data.document_category);
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(api_endpoints.community_documents, id)
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.document_detail.documentObj = data;
+                    this.$refs.document_detail.documentObj.uploaded_date =
+                        data.uploaded_date != null &&
+                        data.uploaded_date != undefined
+                            ? moment(data.uploaded_date).format(
+                                  'yyyy-MM-DDTHH:mm'
+                              )
+                            : '';
+                    this.$refs.document_detail.uploaded_document = [data];
+                    //-----this method is called as it wasn't fetching subcategory
+                    this.$refs.document_detail.fetchSubCategory(
+                        data.document_category
+                    );
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             //this.$refs.document_detail.fetchCommunityDocument(id);
             this.$refs.document_detail.isModalOpen = true;
         },
@@ -284,122 +349,157 @@ export default {
         discardDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Document",
-                text: "Are you sure you want to discard this Document?",
-                icon: "question",
+                title: 'Discard Document',
+                text: 'Are you sure you want to discard this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Document',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.community_documents, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The document has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.community_documents,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The document has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Document",
-                text: "Are you sure you want to Reinstate this Document?",
-                icon: "question",
+                title: 'Reinstate Document',
+                text: 'Are you sure you want to Reinstate this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Document',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.community_documents, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your document has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.community_documents,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your document has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         updatedDocuments() {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-edit-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-document');
-                vm.editDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-history-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-document');
-                vm.historyDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-document');
+                    vm.editDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-document');
+                    vm.historyDocument(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-discard-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-document');
-                vm.discardDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-document');
+                    vm.discardDocument(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-reinstate-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-document');
-                vm.reinstateDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-document');
+                    vm.reinstateDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.documents_datatable !== undefined) { this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
index ef4caf88..d9aedaaa 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
@@ -1,14 +1,25 @@
 <template lang="html">
     <div id="community_occ_threats">
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Threat Source:</label>
-                        <select class="form-select" v-model="filterThreatSource">
+                        <select
+                            v-model="filterThreatSource"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_source_filter_list" :value="option">{{ option }}
+                            <option
+                                v-for="option in threat_source_filter_list"
+                                :value="option"
+                            >
+                                {{ option }}
                             </option>
                         </select>
                     </div>
@@ -16,9 +27,16 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Category:</label>
-                        <select class="form-select" v-model="filterThreatCategory">
+                        <select
+                            v-model="filterThreatCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name }}
+                            <option
+                                v-for="option in threat_category_filter_list"
+                                :value="option.id"
+                            >
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -26,9 +44,15 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Current Impact:</label>
-                        <select class="form-select" v-model="filterThreatCurrentImpact">
+                        <select
+                            v-model="filterThreatCurrentImpact"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                            <option
+                                v-for="option in threat_current_impact_filter_list"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
@@ -37,9 +61,15 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Potential Impact:</label>
-                        <select class="form-select" v-model="filterThreatPotentialImpact">
+                        <select
+                            v-model="filterThreatPotentialImpact"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                            <option
+                                v-for="option in threat_potential_impact_filter_list"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
@@ -48,9 +78,16 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterThreatStatus">
+                        <select
+                            v-model="filterThreatStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                            <option
+                                v-for="option in threat_status_filter_list"
+                                :value="option.id"
+                            >
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -58,52 +95,72 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed From:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
-                            v-model="filterObservedFromDate">
+                        <input
+                            id="observed_from_date"
+                            v-model="filterObservedFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed To:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
-                            v-model="filterObservedToDate">
+                        <input
+                            id="observed_to_date"
+                            v-model="filterObservedToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
         <div>
-            <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                :dtHeaders="threats_headers" />
+            <datatable
+                :id="panelBody"
+                ref="threats_datatable"
+                :dt-options="threats_options"
+                :dt-headers="threats_headers"
+            />
         </div>
 
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url">
+        <ThreatDetail
+            ref="threat_detail"
+            :url="occ_threat_url"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ThreatDetail>
         <div v-if="occConservationThreatHistoryId">
-            <ConservationThreatHistory ref="occ_conservation_threat_history" :key="occConservationThreatHistoryId"
-                :threat-id="occConservationThreatHistoryId" />
+            <ConservationThreatHistory
+                ref="occ_conservation_threat_history"
+                :key="occConservationThreatHistoryId"
+                :threat-id="occConservationThreatHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
+import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import ConservationThreatHistory from '../../internal/occurrence/occ_conservation_threat_history.vue';
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OCCThreats',
+    components: {
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        CollapsibleFilters,
+    },
     props: {
         community_obj: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -112,8 +169,8 @@ export default {
             uuid: 0,
             occConservationThreatHistoryId: null,
             showExisting: false,
-            threatBody: "threatBody" + vm._uid,
-            panelBody: "community-threats-" + vm._uid,
+            threatBody: 'threatBody' + vm._uid,
+            panelBody: 'community-threats-' + vm._uid,
             values: null,
             occ_threat_url: api_endpoints.occ_threat,
 
@@ -131,16 +188,26 @@ export default {
             threat_potential_impact_filter_list: [],
 
             threat_status_filter_list: [
-                { id: "active", name: "Active" },
-                { id: "removed", name: "Removed" },
+                { id: 'active', name: 'Active' },
+                { id: 'removed', name: 'Removed' },
             ],
 
-            threats_headers: ['Number', 'Original Report', 'Category', 'Date Observed', 'Threat Agent', 'Comments',
-                'Current Impact', 'Potential Impact', 'Threat Source', 'Action'],
+            threats_headers: [
+                'Number',
+                'Original Report',
+                'Category',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Current Impact',
+                'Potential Impact',
+                'Threat Source',
+                'Action',
+            ],
             threats_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -150,20 +217,26 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.community, vm.community_obj.id + '/occurrence_threats'),
-                    "dataSrc": '',
-                    "data": function (d) {
-                        d.filter_threat_source = vm.filterThreatSource
-                        d.filter_threat_category = vm.filterThreatCategory
-                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                        d.filter_threat_status = vm.filterThreatStatus
-                        d.filter_observed_from_date = vm.filterObservedFromDate
-                        d.filter_observed_to_date = vm.filterObservedToDate
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.community,
+                        vm.community_obj.id + '/occurrence_threats'
+                    ),
+                    dataSrc: '',
+                    data: function (d) {
+                        d.filter_threat_source = vm.filterThreatSource;
+                        d.filter_threat_category = vm.filterThreatCategory;
+                        d.filter_threat_current_impact =
+                            vm.filterThreatCurrentImpact;
+                        d.filter_threat_potential_impact =
+                            vm.filterThreatPotentialImpact;
+                        d.filter_threat_status = vm.filterThreatStatus;
+                        d.filter_observed_from_date = vm.filterObservedFromDate;
+                        d.filter_observed_to_date = vm.filterObservedToDate;
                     },
                 },
                 oorder: [[0, 'desc']],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -173,8 +246,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -182,146 +255,156 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "threat_number",
+                        data: 'threat_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return "OCC" + full.occurrence + " - " + full.threat_number;
-                            }
-                            else {
-                                return '<s>' + "OCC" + full.occurrence + " - " + full.threat_number + '</s>'
+                                return (
+                                    'OCC' +
+                                    full.occurrence +
+                                    ' - ' +
+                                    full.threat_number
+                                );
+                            } else {
+                                return (
+                                    '<s>' +
+                                    'OCC' +
+                                    full.occurrence +
+                                    ' - ' +
+                                    full.threat_number +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "original_report",
+                        data: 'original_report',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible && full.original_report != null) {
-                                return full.original_report + " - " + full.original_threat;
-                            }
-                            else {
-                                return ""
+                                return (
+                                    full.original_report +
+                                    ' - ' +
+                                    full.original_threat
+                                );
+                            } else {
+                                return '';
                             }
                         },
-
                     },
                     {
-                        data: "threat_category",
+                        data: 'threat_category',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_category;
-                            }
-                            else {
-                                return '<s>' + full.threat_category + '</s>'
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "date_observed",
+                        data: 'date_observed',
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
-                            else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
-                            }
-                        }
+                        },
                     },
                     {
-                        data: "threat_agent",
+                        data: 'threat_agent',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_agent;
-                            }
-                            else {
-                                return '<s>' + full.threat_agent + '</s>'
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "comment",
+                        data: 'comment',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.visible) {
                                 return type == 'export' ? value : result;
-                            }
-                            else {
-                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "current_impact_name",
+                        data: 'current_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.current_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.current_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "potential_impact_name",
+                        data: 'potential_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.potential_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.potential_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "source",
+                        data: 'source',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.source;
-                            }
-                            else {
-                                return '<s>' + full.source + '</s>'
+                            } else {
+                                return '<s>' + full.source + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.visible) {
                                 links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
                                 links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
-                            }
-                            else {
+                            } else {
                                 links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
                             }
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -336,18 +419,13 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        datatable,
-        ThreatDetail,
-        ConservationThreatHistory,
-        CollapsibleFilters,
+            },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterThreatSource === 'all' &&
+            if (
+                this.filterThreatSource === 'all' &&
                 this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
@@ -355,9 +433,9 @@ export default {
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
             ) {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
     },
@@ -365,7 +443,9 @@ export default {
         filterApplied: function () {
             if (this.$refs.collapsible_filters) {
                 // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
         filterThreatSource: function () {
@@ -397,44 +477,72 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
         },
     },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
 
         fetchFilterLists: function () {
             let vm = this;
 
             //Threat Source filter list (specific to instance)
-            fetch(helpers.add_endpoint_json(api_endpoints.community, vm.community_obj.id + '/occurrence_threat_source_list')).then(async (response) => {
-                vm.threat_source_filter_list = await response.json();
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.community,
+                    vm.community_obj.id + '/occurrence_threat_source_list'
+                )
+            ).then(
+                async (response) => {
+                    vm.threat_source_filter_list = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
 
             //Category, Current Impact, Potential Impact (generic to all threats)
-            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
-                const data = await response.json();
-                vm.threat_category_filter_list = data["threat_category_lists"];
-                vm.threat_current_impact_filter_list = data["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
-            }, (error) => {
-                console.log(error);
-            })
-
+            fetch('/api/threat/threat_list_of_values/').then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.threat_category_filter_list =
+                        data['threat_category_lists'];
+                    vm.threat_current_impact_filter_list =
+                        data['current_impact_lists'];
+                    vm.threat_potential_impact_filter_list =
+                        data['potential_impact_lists'];
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         viewThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         historyThreat: function (id) {
@@ -449,35 +557,43 @@ export default {
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-threat');
-                vm.viewThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-threat');
-                vm.historyThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-threat');
+                    vm.viewThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-threat');
+                    vm.historyThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
index 545cbdc0..85749f46 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
@@ -1,96 +1,241 @@
 <template lang="html">
     <div id="community">
-        <FormSection :formCollapse="false" label="Taxonomy" Index="taxonomy">
+        <FormSection :form-collapse="false" label="Taxonomy" Index="taxonomy">
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label" :class="isReadOnly ? '' : 'fw-bold'">Community Name: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 control-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >Community Name:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="1" id="community_name" placeholder=""
-                        v-model="species_community.taxonomy_details.community_name" />
+                    <textarea
+                        id="community_name"
+                        v-model="
+                            species_community.taxonomy_details.community_name
+                        "
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-if="species_community.renamed_from" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Renamed From:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Renamed From:</label
+                >
                 <div class="col-sm-7">
-                    <textarea :disabled="true" class="form-control" rows="1" id="renamed_from" placeholder=""
-                        :value="`${species_community.renamed_from.community_number} - ${species_community.renamed_from.community_name}`" />
-
+                    <textarea
+                        id="renamed_from"
+                        :disabled="true"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                        :value="`${species_community.renamed_from.community_number} - ${species_community.renamed_from.community_name}`"
+                    />
                 </div>
                 <div class="col-sm-2">
-                    <a class="btn btn-primary" role="button" target="_blank"
-                        :href="`/internal/species-communities/${species_community.renamed_from.id}?group_type_name=${species_community.group_type}`">
-                        <i class="bi bi-box-arrow-up-right"></i> {{ species_community.renamed_from.community_number }}
+                    <a
+                        class="btn btn-primary"
+                        role="button"
+                        target="_blank"
+                        :href="`/internal/species-communities/${species_community.renamed_from.id}?group_type_name=${species_community.group_type}`"
+                    >
+                        <i class="bi bi-box-arrow-up-right"></i>
+                        {{ species_community.renamed_from.community_number }}
                     </a>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label" :class="isReadOnly ? '' : 'fw-bold'">Community ID: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 control-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >Community ID:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="community_migrated_id"
-                        placeholder="" v-model="species_community.taxonomy_details.community_migrated_id" />
+                    <input
+                        id="community_migrated_id"
+                        v-model="
+                            species_community.taxonomy_details
+                                .community_migrated_id
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.taxonomy_details.community_description)" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Community Description:</label>
+            <div
+                v-if="
+                    showField(
+                        species_community.taxonomy_details.community_description
+                    )
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-3 control-label"
+                    >Community Description:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="2" id="community_description"
-                        placeholder="" v-model="species_community.taxonomy_details.community_description" />
+                    <textarea
+                        id="community_description"
+                        v-model="
+                            species_community.taxonomy_details
+                                .community_description
+                        "
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.taxonomy_details.previous_name)" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Previous Name:</label>
+            <div
+                v-if="
+                    showField(species_community.taxonomy_details.previous_name)
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-3 control-label"
+                    >Previous Name:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" id="community_previous_name" placeholder=""
-                        v-model="species_community.taxonomy_details.previous_name" />
+                    <textarea
+                        id="community_previous_name"
+                        v-model="
+                            species_community.taxonomy_details.previous_name
+                        "
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.taxonomy_details.name_authority)" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Name Authority:</label>
+            <div
+                v-if="
+                    showField(species_community.taxonomy_details.name_authority)
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-3 control-label"
+                    >Name Authority:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" rows="1" class="form-control" id="name_authority" placeholder=""
-                        v-model="species_community.taxonomy_details.name_authority" />
+                    <textarea
+                        id="name_authority"
+                        v-model="
+                            species_community.taxonomy_details.name_authority
+                        "
+                        :disabled="isReadOnly"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.taxonomy_details.name_comments)" class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Name Comments:</label>
+            <div
+                v-if="
+                    showField(species_community.taxonomy_details.name_comments)
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-3 control-label"
+                    >Name Comments:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" id="community_comment" placeholder=""
-                        v-model="species_community.taxonomy_details.name_comments" />
+                    <textarea
+                        id="community_comment"
+                        v-model="
+                            species_community.taxonomy_details.name_comments
+                        "
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
-        <FormSection v-if="distribution_public || is_internal" :formCollapse="false" label="Distribution"
-            Index="distribution">
+        <FormSection
+            v-if="distribution_public || is_internal"
+            :form-collapse="false"
+            label="Distribution"
+            Index="distribution"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label" :class="isReadOnly ? '' : 'fw-bold'">Distribution: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 control-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >Distribution:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="1" id="distribution" placeholder=""
-                        v-model="species_community.distribution.distribution" />
+                    <textarea
+                        id="distribution"
+                        v-model="species_community.distribution.distribution"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label" :class="isReadOnly ? '' : 'fw-bold'">Region: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 control-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >Region:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" v-model="species_community.regions"
-                        ref="regions_select">
-                        <option value="" selected disabled>Select region</option>
-                        <option v-for="option in region_list" :value="option.value" :key="option.value">
+                    <select
+                        ref="regions_select"
+                        v-model="species_community.regions"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option value="" selected disabled>
+                            Select region
+                        </option>
+                        <option
+                            v-for="option in region_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
                 </div>
             </div>
             <div v-if="species_community.regions" class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label" :class="isReadOnly ? '' : 'fw-bold'">District: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 col-form-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >District:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" v-model="species_community.districts"
-                        ref="districts_select">
-                        <option value="" selected disabled>Select district</option>
-                        <option v-for="option in district_list" :value="option.value" v-bind:key="option.value">
+                    <select
+                        ref="districts_select"
+                        v-model="species_community.districts"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option value="" selected disabled>
+                            Select district
+                        </option>
+                        <option
+                            v-for="option in district_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
@@ -98,137 +243,364 @@
             </div>
             <template v-if="show_calculated_distribution_fields">
                 <div class="row mb-3 border-top pt-3">
-                    <label for="" class="col-sm-5 col-form-label">Number of Occurrences:</label>
+                    <label for="" class="col-sm-5 col-form-label"
+                        >Number of Occurrences:</label
+                    >
                     <div class="col-sm-4">
-                        <input v-if="species_community.distribution.noo_auto" :disabled="isNOOReadOnly" type="number"
-                            class="form-control" id="no_of_occurrences" placeholder=""
-                            v-model="species_community.occurrence_count" />
-                        <input v-else :disabled="isNOOReadOnly" type="number" class="form-control"
-                            id="no_of_occurrences" placeholder="" ref="number_of_occurrences"
-                            v-model="species_community.distribution.number_of_occurrences" />
+                        <input
+                            v-if="species_community.distribution.noo_auto"
+                            id="no_of_occurrences"
+                            v-model="species_community.occurrence_count"
+                            :disabled="isNOOReadOnly"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
+                        <input
+                            v-else
+                            id="no_of_occurrences"
+                            ref="number_of_occurrences"
+                            v-model="
+                                species_community.distribution
+                                    .number_of_occurrences
+                            "
+                            :disabled="isNOOReadOnly"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
-                    <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
+                    <div
+                        v-if="!isReadOnly"
+                        class="col-sm-3 d-flex align-items-center"
+                    >
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                                id="noo_auto" @click="switchNOO('true')"
-                                v-model="species_community.distribution.noo_auto">
+                            <input
+                                id="noo_auto"
+                                v-model="
+                                    species_community.distribution.noo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="true"
+                                class="form-check-input"
+                                @click="switchNOO('true')"
+                            />
                             <label class="form-check-label">auto</label>
                         </div>
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="false" @click="switchNOO('false')"
-                                class="form-check-input" id="noo_manual"
-                                v-model="species_community.distribution.noo_auto">
+                            <input
+                                id="noo_manual"
+                                v-model="
+                                    species_community.distribution.noo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="false"
+                                class="form-check-input"
+                                @click="switchNOO('false')"
+                            />
                             <label class="form-check-label">manual</label>
                         </div>
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-5 col-form-label">Extent of Occurrences:
-                        <HelpText v-if="species_community.distribution.eoo_auto"
-                            section_id="communities_extent_of_occurrences" />
+                    <label for="" class="col-sm-5 col-form-label"
+                        >Extent of Occurrences:
+                        <HelpText
+                            v-if="species_community.distribution.eoo_auto"
+                            section_id="communities_extent_of_occurrences"
+                        />
                     </label>
                     <div class="col-sm-4">
                         <div class="input-group">
-                            <input v-if="species_community.distribution.eoo_auto" :disabled="isEOOReadOnly"
-                                type="number" class="form-control" id="extent_of_occurrence" placeholder=""
-                                v-model="species_community.area_occurrence_convex_hull_km2" />
-                            <input v-else :disabled="isEOOReadOnly" type="number" class="form-control"
-                                id="extent_of_occurrence" ref="extent_of_occurrence" placeholder=""
-                                v-model="species_community.distribution.extent_of_occurrences" />
-                            <span class="input-group-text" id="area_of_occupancy_km2-addon">km&#xb2;</span>
+                            <input
+                                v-if="species_community.distribution.eoo_auto"
+                                id="extent_of_occurrence"
+                                v-model="
+                                    species_community.area_occurrence_convex_hull_km2
+                                "
+                                :disabled="isEOOReadOnly"
+                                type="number"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <input
+                                v-else
+                                id="extent_of_occurrence"
+                                ref="extent_of_occurrence"
+                                v-model="
+                                    species_community.distribution
+                                        .extent_of_occurrences
+                                "
+                                :disabled="isEOOReadOnly"
+                                type="number"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <span
+                                id="area_of_occupancy_km2-addon"
+                                class="input-group-text"
+                                >km&#xb2;</span
+                            >
                         </div>
                     </div>
-                    <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
+                    <div
+                        v-if="!isReadOnly"
+                        class="col-sm-3 d-flex align-items-center"
+                    >
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                                id="eoo_auto" @click="switchEOO('true')"
-                                v-model="species_community.distribution.eoo_auto">
+                            <input
+                                id="eoo_auto"
+                                v-model="
+                                    species_community.distribution.eoo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="true"
+                                class="form-check-input"
+                                @click="switchEOO('true')"
+                            />
                             <label class="form-check-label">auto</label>
                         </div>
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input"
-                                id="eoo_manual" @click="switchEOO('false')"
-                                v-model="species_community.distribution.eoo_auto">
+                            <input
+                                id="eoo_manual"
+                                v-model="
+                                    species_community.distribution.eoo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="false"
+                                class="form-check-input"
+                                @click="switchEOO('false')"
+                            />
                             <label class="form-check-label">manual</label>
                         </div>
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-5 col-form-label">Area of Occupancy:</label>
+                    <label for="" class="col-sm-5 col-form-label"
+                        >Area of Occupancy:</label
+                    >
                     <div class="col-sm-4">
                         <div class="input-group">
-                            <input :disabled="isReadOnly" type="number" class="form-control" id="area_of_occupany"
-                                placeholder="" v-model="species_community.distribution.area_of_occupancy" />
-                            <span class="input-group-text" id="area_of_occupancy-addon">2km x 2km</span>
+                            <input
+                                id="area_of_occupany"
+                                v-model="
+                                    species_community.distribution
+                                        .area_of_occupancy
+                                "
+                                :disabled="isReadOnly"
+                                type="number"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <span
+                                id="area_of_occupancy-addon"
+                                class="input-group-text"
+                                >2km x 2km</span
+                            >
                         </div>
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-5 col-form-label">Actual Area of Occupancy:
-                        <HelpText v-if="species_community.distribution.aoo_actual_auto"
-                            section_id="communities_actual_area_of_occupancy" />
+                    <label for="" class="col-sm-5 col-form-label"
+                        >Actual Area of Occupancy:
+                        <HelpText
+                            v-if="
+                                species_community.distribution.aoo_actual_auto
+                            "
+                            section_id="communities_actual_area_of_occupancy"
+                        />
                     </label>
                     <div class="col-sm-4">
                         <div class="input-group">
-                            <input v-if="species_community.distribution.aoo_actual_auto" :disabled="isAOOActualReadOnly"
-                                type="number" step="any" class="form-control" id="area_of_occupancy_actual"
-                                placeholder="" v-model="species_community.area_of_occupancy_km2" area-describedby="" />
-                            <input v-else :disabled="isAOOActualReadOnly" type="number" step="any" class="form-control"
-                                id="area_of_occupancy_actual" ref="area_of_occupancy_actual" placeholder=""
-                                v-model="species_community.distribution.area_of_occupancy_actual" />
-                            <span class="input-group-text" id="area_of_occupancy_km2-addon">km&#xb2;</span>
+                            <input
+                                v-if="
+                                    species_community.distribution
+                                        .aoo_actual_auto
+                                "
+                                id="area_of_occupancy_actual"
+                                v-model="
+                                    species_community.area_of_occupancy_km2
+                                "
+                                :disabled="isAOOActualReadOnly"
+                                type="number"
+                                step="any"
+                                class="form-control"
+                                placeholder=""
+                                area-describedby=""
+                            />
+                            <input
+                                v-else
+                                id="area_of_occupancy_actual"
+                                ref="area_of_occupancy_actual"
+                                v-model="
+                                    species_community.distribution
+                                        .area_of_occupancy_actual
+                                "
+                                :disabled="isAOOActualReadOnly"
+                                type="number"
+                                step="any"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <span
+                                id="area_of_occupancy_km2-addon"
+                                class="input-group-text"
+                                >km&#xb2;</span
+                            >
                         </div>
                     </div>
-                    <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
+                    <div
+                        v-if="!isReadOnly"
+                        class="col-sm-3 d-flex align-items-center"
+                    >
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                                id="aoo_actual_auto" @click="switchAOOActual('true')"
-                                v-model="species_community.distribution.aoo_actual_auto">
+                            <input
+                                id="aoo_actual_auto"
+                                v-model="
+                                    species_community.distribution
+                                        .aoo_actual_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="true"
+                                class="form-check-input"
+                                @click="switchAOOActual('true')"
+                            />
                             <label class="form-check-label">auto</label>
                         </div>
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input"
-                                id="aoo_actual_manual" @click="switchAOOActual('false')"
-                                v-model="species_community.distribution.aoo_actual_auto">
+                            <input
+                                id="aoo_actual_manual"
+                                v-model="
+                                    species_community.distribution
+                                        .aoo_actual_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="false"
+                                class="form-check-input"
+                                @click="switchAOOActual('false')"
+                            />
                             <label class="form-check-label">manual</label>
                         </div>
                     </div>
                 </div>
             </template>
-            <div v-if="showField(species_community.distribution.number_of_iucn_locations)" class="row mb-3">
-                <label for="" class="col-sm-5 control-label">Number of IUCN Locations:</label>
+            <div
+                v-if="
+                    showField(
+                        species_community.distribution.number_of_iucn_locations
+                    )
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-5 control-label"
+                    >Number of IUCN Locations:</label
+                >
                 <div class="col-sm-4">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="no_of_iucn_locations"
-                        placeholder="" v-model="species_community.distribution.number_of_iucn_locations" />
+                    <input
+                        id="no_of_iucn_locations"
+                        v-model="
+                            species_community.distribution
+                                .number_of_iucn_locations
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.distribution.community_original_area)" class="row mb-3">
-                <label for="" class="col-sm-5 control-label">Community Original Area (ha):</label>
+            <div
+                v-if="
+                    showField(
+                        species_community.distribution.community_original_area
+                    )
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-5 control-label"
+                    >Community Original Area (ha):</label
+                >
                 <div class="col-sm-4">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="community_original_area"
-                        placeholder="" v-model="species_community.distribution.community_original_area" />
+                    <input
+                        id="community_original_area"
+                        v-model="
+                            species_community.distribution
+                                .community_original_area
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.distribution.community_original_area_accuracy)" class="row mb-3">
-                <label for="" class="col-sm-5 control-label">Community Original Area (+/- ha) Accuracy:</label>
+            <div
+                v-if="
+                    showField(
+                        species_community.distribution
+                            .community_original_area_accuracy
+                    )
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-5 control-label"
+                    >Community Original Area (+/- ha) Accuracy:</label
+                >
                 <div class="col-sm-4">
-                    <input :disabled="isReadOnly" type="number" class="form-control"
-                        id="community_original_area_accuracy" placeholder=""
-                        v-model="species_community.distribution.community_original_area_accuracy" />
+                    <input
+                        id="community_original_area_accuracy"
+                        v-model="
+                            species_community.distribution
+                                .community_original_area_accuracy
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.distribution.community_original_area_reference)" class="row mb-3">
-                <label for="" class="col-sm-5 control-label">Community Original Area (ha) Reference:</label>
+            <div
+                v-if="
+                    showField(
+                        species_community.distribution
+                            .community_original_area_reference
+                    )
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-5 control-label"
+                    >Community Original Area (ha) Reference:</label
+                >
                 <div class="col-sm-4">
-                    <input :disabled="isReadOnly" type="text" class="form-control"
-                        id="community_original_area_reference" placeholder=""
-                        v-model="species_community.distribution.community_original_area_reference" />
+                    <input
+                        id="community_original_area_reference"
+                        v-model="
+                            species_community.distribution
+                                .community_original_area_reference
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
         <BasicConservationStatus
-            v-if="species_community.conservation_status && (conservation_status_public || is_internal)"
-            :conservation_status="species_community.conservation_status" :is_internal="is_internal" />
+            v-if="
+                species_community.conservation_status &&
+                (conservation_status_public || is_internal)
+            "
+            :conservation_status="species_community.conservation_status"
+            :is_internal="is_internal"
+        />
         <!-- <FormSection v-if="conservation_attributes_public || is_internal" :formCollapse="false"
             label="Conservation Attributes" Index="conservation_attributes">
             <div class="row mb-3">
@@ -348,75 +720,189 @@
                 </div>
             </div>
         </FormSection> -->
-        <FormSection v-if="is_internal" :formCollapse="false" label="General" Index="general">
+        <FormSection
+            v-if="is_internal"
+            :form-collapse="false"
+            label="General"
+            Index="general"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Department File Numbers:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Department File Numbers:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="department_file_numbers"
-                        placeholder="" v-model="species_community.department_file_numbers" />
+                    <input
+                        id="department_file_numbers"
+                        v-model="species_community.department_file_numbers"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="last_data_curration_date" class="col-sm-3 control-label">Last data curation date: </label>
+                <label
+                    for="last_data_curration_date"
+                    class="col-sm-3 control-label"
+                    >Last data curation date:
+                </label>
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="date" class="form-control" name="last_data_curration_date"
-                        ref="last_data_curration_date" @change="checkDate()"
-                        v-model="species_community.last_data_curration_date" />
+                    <input
+                        ref="last_data_curration_date"
+                        v-model="species_community.last_data_curration_date"
+                        :disabled="isReadOnly"
+                        type="date"
+                        class="form-control"
+                        name="last_data_curration_date"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="conservation_plan_exists" class="col-sm-3 control-label">Conservation Plan Exists: </label>
+                <label
+                    for="conservation_plan_exists"
+                    class="col-sm-3 control-label"
+                    >Conservation Plan Exists:
+                </label>
                 <div class="col-sm-9">
-                    <label for="conservation_plan_exists" class="me-2">No</label>
-                    <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input me-2"
-                        id="conservation_plan_exists" v-model="species_community.conservation_plan_exists">
-                    <label for="conservation_plan_exists" class="me-2">Yes</label>
-                    <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                        id="conservation_plan_exists" v-model="species_community.conservation_plan_exists">
+                    <label for="conservation_plan_exists" class="me-2"
+                        >No</label
+                    >
+                    <input
+                        id="conservation_plan_exists"
+                        v-model="species_community.conservation_plan_exists"
+                        :disabled="isReadOnly"
+                        type="radio"
+                        :value="false"
+                        class="form-check-input me-2"
+                    />
+                    <label for="conservation_plan_exists" class="me-2"
+                        >Yes</label
+                    >
+                    <input
+                        id="conservation_plan_exists"
+                        v-model="species_community.conservation_plan_exists"
+                        :disabled="isReadOnly"
+                        type="radio"
+                        :value="true"
+                        class="form-check-input"
+                    />
                 </div>
             </div>
-            <div v-if="species_community.conservation_plan_exists" class="row mb-3">
-                <label for="conservation_plan_reference" class="col-sm-3 control-label">Conservation Plan Reference /
-                    Location: </label>
+            <div
+                v-if="species_community.conservation_plan_exists"
+                class="row mb-3"
+            >
+                <label
+                    for="conservation_plan_reference"
+                    class="col-sm-3 control-label"
+                    >Conservation Plan Reference / Location:
+                </label>
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" name="conservation_plan_reference"
-                        ref="conservation_plan_reference" @change="checkDate()"
-                        v-model="species_community.conservation_plan_reference" />
+                    <input
+                        ref="conservation_plan_reference"
+                        v-model="species_community.conservation_plan_reference"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        name="conservation_plan_reference"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Comment:</label>
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="3" id="comment" placeholder=""
-                        v-model="species_community.comment" />
+                    <textarea
+                        id="comment"
+                        v-model="species_community.comment"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
-        <FormSection v-if="is_internal" :formCollapse="false" label="Publishing" Index="publishing">
+        <FormSection
+            v-if="is_internal"
+            :form-collapse="false"
+            label="Publishing"
+            Index="publishing"
+        >
             <div class="row mb-3">
-                <label for="distribution_publishing" class="col-sm-3 control-label">Distribution: </label>
+                <label
+                    for="distribution_publishing"
+                    class="col-sm-3 control-label"
+                    >Distribution:
+                </label>
                 <div class="col-sm-9">
-                    <label for="distribution_publishing" class="me-2">Private</label>
-                    <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="false"
-                        class="form-check-input me-2" id="distribution_publishing"
-                        v-model="species_community.publishing_status.distribution_public">
-                    <label for="distribution_publishing" class="me-2">Public</label>
-                    <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="true"
-                        class="form-check-input" id="distribution_publishing"
-                        v-model="species_community.publishing_status.distribution_public">
+                    <label for="distribution_publishing" class="me-2"
+                        >Private</label
+                    >
+                    <input
+                        id="distribution_publishing"
+                        v-model="
+                            species_community.publishing_status
+                                .distribution_public
+                        "
+                        :disabled="isReadOnly || !isPublic || !isActive"
+                        type="radio"
+                        :value="false"
+                        class="form-check-input me-2"
+                    />
+                    <label for="distribution_publishing" class="me-2"
+                        >Public</label
+                    >
+                    <input
+                        id="distribution_publishing"
+                        v-model="
+                            species_community.publishing_status
+                                .distribution_public
+                        "
+                        :disabled="isReadOnly || !isPublic || !isActive"
+                        type="radio"
+                        :value="true"
+                        class="form-check-input"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="conservation_status_publishing" class="col-sm-3 control-label">Conservation Status: </label>
+                <label
+                    for="conservation_status_publishing"
+                    class="col-sm-3 control-label"
+                    >Conservation Status:
+                </label>
                 <div class="col-sm-9">
-                    <label for="conservation_status_publishing" class="me-2">Private</label>
-                    <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="false"
-                        class="form-check-input me-2" id="conservation_status_publishing"
-                        v-model="species_community.publishing_status.conservation_status_public">
-                    <label for="conservation_status_publishing" class="me-2">Public</label>
-                    <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="true"
-                        class="form-check-input" id="conservation_status_publishing"
-                        v-model="species_community.publishing_status.conservation_status_public">
+                    <label for="conservation_status_publishing" class="me-2"
+                        >Private</label
+                    >
+                    <input
+                        id="conservation_status_publishing"
+                        v-model="
+                            species_community.publishing_status
+                                .conservation_status_public
+                        "
+                        :disabled="isReadOnly || !isPublic || !isActive"
+                        type="radio"
+                        :value="false"
+                        class="form-check-input me-2"
+                    />
+                    <label for="conservation_status_publishing" class="me-2"
+                        >Public</label
+                    >
+                    <input
+                        id="conservation_status_publishing"
+                        v-model="
+                            species_community.publishing_status
+                                .conservation_status_public
+                        "
+                        :disabled="isReadOnly || !isPublic || !isActive"
+                        type="radio"
+                        :value="true"
+                        class="form-check-input"
+                    />
                 </div>
             </div>
             <!-- <div class="row mb-3">
@@ -434,26 +920,53 @@
                 </div>
             </div> -->
             <div class="row mb-3">
-                <label for="threats_publishing" class="col-sm-3 control-label">Threats: </label>
+                <label for="threats_publishing" class="col-sm-3 control-label"
+                    >Threats:
+                </label>
                 <div class="col-sm-9">
                     <label for="threats_publishing" class="me-2">Private</label>
-                    <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="false"
-                        class="form-check-input me-2" id="threats_publishing"
-                        v-model="species_community.publishing_status.threats_public">
+                    <input
+                        id="threats_publishing"
+                        v-model="
+                            species_community.publishing_status.threats_public
+                        "
+                        :disabled="isReadOnly || !isPublic || !isActive"
+                        type="radio"
+                        :value="false"
+                        class="form-check-input me-2"
+                    />
                     <label for="threats_publishing" class="me-2">Public</label>
-                    <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="true"
-                        class="form-check-input" id="threats_publishing"
-                        v-model="species_community.publishing_status.threats_public">
+                    <input
+                        id="threats_publishing"
+                        v-model="
+                            species_community.publishing_status.threats_public
+                        "
+                        :disabled="isReadOnly || !isPublic || !isActive"
+                        type="radio"
+                        :value="true"
+                        class="form-check-input"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingPublishing" :disabled="isReadOnly || !isPublic || !isActive"
+                    <button
+                        v-if="!updatingPublishing"
+                        :disabled="isReadOnly || !isPublic || !isActive"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updatePublishingDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updatePublishingDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
@@ -461,35 +974,34 @@
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
 import BasicConservationStatus from './basic_conservation_status.vue';
 import HelpText from '@/components/common/help_text.vue';
 
-import {
-    api_endpoints,
-    helpers
-}
-
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'Community',
+    components: {
+        FormSection,
+        BasicConservationStatus,
+        HelpText,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         species_community_original: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -504,53 +1016,67 @@ export default {
             district_list: [],
             filtered_district_list: [],
             minimum_fire_interval_range: false,
-            interval_choice: [{ id: 1, name: 'year/s' },
-            { id: 2, name: 'month/s' }
+            interval_choice: [
+                { id: 1, name: 'year/s' },
+                { id: 2, name: 'month/s' },
             ],
             errors: {
-                minimum_fire_interval_error: null
+                minimum_fire_interval_error: null,
             },
-        }
-    },
-    components: {
-        FormSection,
-        BasicConservationStatus,
-        HelpText,
+        };
     },
     computed: {
         distribution_public: function () {
-            return this.isPublic && this.species_community.publishing_status.distribution_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status.distribution_public
+            );
         },
         conservation_status_public: function () {
-            return this.isPublic && this.species_community.publishing_status.conservation_status_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status
+                    .conservation_status_public
+            );
         },
         conservation_attributes_public: function () {
-            return this.isPublic && this.species_community.publishing_status.conservation_attributes_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status
+                    .conservation_attributes_public
+            );
         },
         isReadOnly: function () {
             if (this.is_readonly) {
                 return true;
             }
             let action = this.$route.query.action;
-            if (action === "edit" && this.species_community && this.species_community.user_edit_mode) {
+            if (
+                action === 'edit' &&
+                this.species_community &&
+                this.species_community.user_edit_mode
+            ) {
                 return false;
-            }
-            else {
+            } else {
                 return this.species_community.readonly;
             }
         },
         isActive: function () {
-            return this.species_community.processing_status === "Active" ? true : false;
+            return this.species_community.processing_status === 'Active'
+                ? true
+                : false;
         },
         isPublic: function () {
-            return this.isActive && this.species_community.publishing_status.community_public ? true : false;
+            return this.isActive &&
+                this.species_community.publishing_status.community_public
+                ? true
+                : false;
         },
         isNOOReadOnly: function () {
             let vm = this;
             if (vm.species_community.distribution.noo_auto === true) {
                 return true;
-            }
-            else {
+            } else {
                 return vm.isReadOnly;
             }
         },
@@ -558,8 +1084,7 @@ export default {
             let vm = this;
             if (vm.species_community.distribution.eoo_auto === true) {
                 return true;
-            }
-            else {
+            } else {
                 return vm.isReadOnly;
             }
         },
@@ -567,101 +1092,185 @@ export default {
             let vm = this;
             if (vm.species_community.distribution.aoo_actual_auto === true) {
                 return true;
-            }
-            else {
+            } else {
                 return vm.isReadOnly;
             }
         },
         minFireIntervalMonthsComputed: function () {
-            const totalMonths = parseInt(this.species_community.conservation_attributes.minimum_fire_interval_from);
-            const intervalChoice = this.species_community.conservation_attributes.minimum_fire_interval_choice;
+            const totalMonths = parseInt(
+                this.species_community.conservation_attributes
+                    .minimum_fire_interval_from
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes
+                    .minimum_fire_interval_choice;
 
             if (totalMonths > 12 && intervalChoice == 2) {
                 const years = Math.floor(totalMonths / 12);
                 const months = totalMonths % 12;
-                return years + " year/s " + months + " month/s";
-            }
-            else {
-                return ""
+                return years + ' year/s ' + months + ' month/s';
+            } else {
+                return '';
             }
         },
         show_calculated_distribution_fields: function () {
-            return this.is_internal || (this.species_community.distribution.noo_auto && this.species_community.occurrence_count > 0
-                || !this.species_community.distribution.noo_auto && this.species_community.distribution.number_of_occurrences > 0)
+            return (
+                this.is_internal ||
+                (this.species_community.distribution.noo_auto &&
+                    this.species_community.occurrence_count > 0) ||
+                (!this.species_community.distribution.noo_auto &&
+                    this.species_community.distribution.number_of_occurrences >
+                        0)
+            );
         },
     },
     watch: {
-        "species_community.distribution.number_of_iucn_locations": function (newVal) {
+        'species_community.distribution.number_of_iucn_locations': function (
+            newVal
+        ) {
             let vm = this;
-            if (newVal == "") {
-                vm.species_community.distribution.number_of_iucn_locations = null;
+            if (newVal == '') {
+                vm.species_community.distribution.number_of_iucn_locations =
+                    null;
             }
         },
-        "species_community.distribution.community_original_area": function (newVal) {
+        'species_community.distribution.community_original_area': function (
+            newVal
+        ) {
             let vm = this;
-            if (newVal == "") {
-                vm.species_community.distribution.community_original_area = null;
+            if (newVal == '') {
+                vm.species_community.distribution.community_original_area =
+                    null;
             }
         },
-        "species_community.distribution.community_original_area_accuracy": function (newVal) {
-            let vm = this;
-            if (newVal == "") {
-                vm.species_community.distribution.community_original_area_accuracy = null;
+        'species_community.distribution.community_original_area_accuracy':
+            function (newVal) {
+                let vm = this;
+                if (newVal == '') {
+                    vm.species_community.distribution.community_original_area_accuracy =
+                        null;
+                }
+            },
+        'species_community.distribution.community_original_area_reference':
+            function (newVal) {
+                let vm = this;
+                if (newVal == '') {
+                    vm.species_community.distribution.community_original_area_reference =
+                        null;
+                }
+            },
+    },
+    created: async function () {
+        let vm = this;
+        //----set the distribution field values if auto onload
+        if (vm.species_community.distribution) {
+            if (vm.species_community.distribution.noo_auto == true) {
+                vm.species_community.distribution.number_of_occurrences =
+                    vm.species_community.distribution.cal_number_of_occurrences;
             }
-        },
-        "species_community.distribution.community_original_area_reference": function (newVal) {
-            let vm = this;
-            if (newVal == "") {
-                vm.species_community.distribution.community_original_area_reference = null;
+            if (vm.species_community.distribution.eoo_auto == true) {
+                vm.species_community.distribution.extent_of_occurrences =
+                    vm.species_community.distribution.cal_extent_of_occurrences;
             }
-        },
+            if (vm.species_community.distribution.aoo_actual_auto == true) {
+                vm.species_community.distribution.area_of_occupancy_actual =
+                    vm.species_community.distribution.cal_area_of_occupancy_actual;
+            }
+        }
+        if (vm.species_community.conservation_attributes) {
+            if (
+                vm.species_community.conservation_attributes
+                    .minimum_fire_interval_to != null &&
+                vm.species_community.conservation_attributes
+                    .minimum_fire_interval_to != '' &&
+                vm.species_community.conservation_attributes
+                    .minimum_fire_interval_to != undefined
+            ) {
+                vm.minimum_fire_interval_range = true;
+            }
+        }
+        //------fetch list of values
+        const response = await fetch('/api/community_profile_dict/');
+        vm.community_profile_dict = await response.json();
+        vm.post_fire_habitatat_interactions_list =
+            vm.community_profile_dict.post_fire_habitatat_interactions_list;
+        vm.post_fire_habitatat_interactions_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.fetchRegions();
+    },
+    mounted: function () {
+        let vm = this;
+        vm.initialiseRegionSelect();
+        vm.initialiseDistrictSelect();
     },
     methods: {
         showField(fieldValue) {
             if (!this.isReadOnly) {
-                return true
+                return true;
             }
             return this.isReadOnly && fieldValue;
         },
         updatePublishing(data) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.community, (vm.species_community.id + '/update_publishing_status')), {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: data
-            }).then(async (response) => {
-                vm.updatingPublishing = false;
-                vm.species_community.publishing_status = await response.json();
-                vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Publishing settings have been updated',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Publishing settings cannot be updated because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.community,
+                    vm.species_community.id + '/update_publishing_status'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingPublishing = false;
-            });
+                    body: data,
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingPublishing = false;
+                    vm.species_community.publishing_status =
+                        await response.json();
+                    vm.species_community_original.publishing_status =
+                        helpers.copyObject(
+                            vm.species_community.publishing_status
+                        );
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Publishing settings have been updated',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Publishing settings cannot be updated because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingPublishing = false;
+                }
+            );
         },
         updatePublishingDetails: function () {
             let vm = this;
             vm.updatingPublishing = true;
             //if not already public, we make it public (notify user first)
             //but only if it is active
-            if (helpers.checkForChange(vm.species_community_original.publishing_status, vm.species_community.publishing_status)) {
+            if (
+                helpers.checkForChange(
+                    vm.species_community_original.publishing_status,
+                    vm.species_community.publishing_status
+                )
+            ) {
                 swal.fire({
                     title: 'Error',
                     text: 'No changes made',
@@ -671,10 +1280,11 @@ export default {
                     },
                 });
                 vm.updatingPublishing = false;
-            }
-            else if (vm.isPublic && vm.isActive) {
+            } else if (vm.isPublic && vm.isActive) {
                 //send just publishing form data
-                let data = JSON.stringify(vm.species_community.publishing_status)
+                let data = JSON.stringify(
+                    vm.species_community.publishing_status
+                );
                 vm.updatePublishing(data);
             } else {
                 swal.fire({
@@ -694,11 +1304,13 @@ export default {
                     this.species_community.district_id = null; //-----to remove the previous selection
                 }
                 this.filtered_district_list = [];
-                this.filtered_district_list = [{
-                    id: null,
-                    name: "",
-                    region_id: null,
-                }];
+                this.filtered_district_list = [
+                    {
+                        id: null,
+                        name: '',
+                        region_id: null,
+                    },
+                ];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
                     if (choice.region_id === this.species_community.region_id) {
@@ -710,18 +1322,28 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            fetch(api_endpoints.regions).then(async (response) => {
-                vm.api_regions = await response.json();
-                for (var i = 0; i < vm.api_regions.length; i++) {
-                    this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
-                }
-                // vm.setProposalData2(this.regions);
-                if (vm.species_community.regions) {
-                    vm.chainedSelectDistricts(vm.species_community.regions, "fetch");
+            fetch(api_endpoints.regions).then(
+                async (response) => {
+                    vm.api_regions = await response.json();
+                    for (var i = 0; i < vm.api_regions.length; i++) {
+                        this.region_list.push({
+                            text: vm.api_regions[i].name,
+                            value: vm.api_regions[i].id,
+                            districts: vm.api_regions[i].districts,
+                        });
+                    }
+                    // vm.setProposalData2(this.regions);
+                    if (vm.species_community.regions) {
+                        vm.chainedSelectDistricts(
+                            vm.species_community.regions,
+                            'fetch'
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            })
+            );
         },
         searchList: function (id, search_list) {
             /* Searches for dictionary in list */
@@ -734,16 +1356,22 @@ export default {
         },
         chainedSelectDistricts: function (regions, action, deselect_region_id) {
             let vm = this;
-            if (action != "fetch") {
+            if (action != 'fetch') {
                 vm.species_community.districts = []; //-----to remove the previous selection
             }
             vm.district_list = [];
             if (regions) {
                 for (let r of regions) {
-                    var api_districts = this.searchList(r, vm.region_list).districts;
+                    var api_districts = this.searchList(
+                        r,
+                        vm.region_list
+                    ).districts;
                     if (api_districts.length > 0) {
                         for (var i = 0; i < api_districts.length; i++) {
-                            this.district_list.push({ text: api_districts[i].name, value: api_districts[i].id });
+                            this.district_list.push({
+                                text: api_districts[i].name,
+                                value: api_districts[i].id,
+                            });
                         }
                     }
                 }
@@ -751,36 +1379,44 @@ export default {
         },
         initialiseRegionSelect: function () {
             let vm = this;
-            $(vm.$refs.regions_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Region",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.regions_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Region',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "select");
-                }).
-                on("select2:unselect", function (e) {
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'select'
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "deselect");
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'deselect'
+                    );
                 });
         },
         initialiseDistrictSelect: function () {
             let vm = this;
-            $(vm.$refs.districts_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select District",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.districts_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select District',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
                 });
@@ -788,45 +1424,61 @@ export default {
         checkDate: function () {
             let vm = this;
             if (vm.$refs.last_data_curration_date.value) {
-                vm.species_community.last_data_curration_date = vm.$refs.last_data_curration_date.value;
-            }
-            else {
+                vm.species_community.last_data_curration_date =
+                    vm.$refs.last_data_curration_date.value;
+            } else {
                 vm.species_community.last_data_curration_date = null;
             }
         },
         eventListeners: function () {
             let vm = this;
 
-            var date = new Date()
-            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+            var date = new Date();
+            var today = new Date(
+                date.getFullYear(),
+                date.getMonth(),
+                date.getDate()
+            );
         },
         handleMinimumFireIntervalRange: function (e) {
             if (this.minimum_fire_interval_range == false) {
-                this.species_community.conservation_attributes.minimum_fire_interval_to = null;
+                this.species_community.conservation_attributes.minimum_fire_interval_to =
+                    null;
             }
         },
         validateMinimumFireIntervalRange: function () {
-            const rangeFrom = parseInt(this.species_community.conservation_attributes.minimum_fire_interval_from);
-            const rangeTo = parseInt(this.species_community.conservation_attributes.minimum_fire_interval_to);
-            const intervalChoice = this.species_community.conservation_attributes.minimum_fire_interval_choice;
-            if ((rangeFrom != null || rangeTo != null) && intervalChoice == null) {
-                this.errors.minimum_fire_interval_error = "Please select years/months";
-            }
-            else if (rangeFrom >= rangeTo) {
-                this.errors.minimum_fire_interval_error = "Please enter a valid range";
-            }
-            else {
-                this.errors.minimum_fire_interval_error = "";
+            const rangeFrom = parseInt(
+                this.species_community.conservation_attributes
+                    .minimum_fire_interval_from
+            );
+            const rangeTo = parseInt(
+                this.species_community.conservation_attributes
+                    .minimum_fire_interval_to
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes
+                    .minimum_fire_interval_choice;
+            if (
+                (rangeFrom != null || rangeTo != null) &&
+                intervalChoice == null
+            ) {
+                this.errors.minimum_fire_interval_error =
+                    'Please select years/months';
+            } else if (rangeFrom >= rangeTo) {
+                this.errors.minimum_fire_interval_error =
+                    'Please enter a valid range';
+            } else {
+                this.errors.minimum_fire_interval_error = '';
             }
         },
         switchNOO: function (value) {
             let vm = this;
             var selectedValue = value;
-            if (selectedValue === "true") {
+            if (selectedValue === 'true') {
                 swal.fire({
-                    title: "Changing from Manual to Auto",
-                    text: "If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.",
-                    icon: "info",
+                    title: 'Changing from Manual to Auto',
+                    text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
+                    icon: 'info',
                     showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
@@ -834,24 +1486,29 @@ export default {
                         confirmButton: 'btn btn-primary',
                     },
                     reverseButtons: true,
-                }).then((swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        document.getElementById("noo_auto").checked = true;
-                        document.getElementById("noo_manual").checked = false;
-                        vm.species_community.distribution.noo_auto = true
-                    } else if (swalresult.dismiss === swal.DismissReason.cancel) {
-                        document.getElementById("noo_manual").checked = true;
-                        document.getElementById("noo_auto").checked = false;
-                        vm.species_community.distribution.noo_auto = false
+                }).then(
+                    (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            document.getElementById('noo_auto').checked = true;
+                            document.getElementById('noo_manual').checked =
+                                false;
+                            vm.species_community.distribution.noo_auto = true;
+                        } else if (
+                            swalresult.dismiss === swal.DismissReason.cancel
+                        ) {
+                            document.getElementById('noo_manual').checked =
+                                true;
+                            document.getElementById('noo_auto').checked = false;
+                            vm.species_community.distribution.noo_auto = false;
+                        }
+                    },
+                    (error) => {
+                        console.error('Error:', error);
                     }
-
-                }, (error) => {
-                    console.error('Error:', error);
-                });
-            }
-            else {
-                document.getElementById("noo_manual").checked = true;
-                document.getElementById("noo_auto").checked = false;
+                );
+            } else {
+                document.getElementById('noo_manual').checked = true;
+                document.getElementById('noo_auto').checked = false;
                 vm.species_community.distribution.noo_auto = false;
                 vm.$nextTick(() => {
                     vm.$refs.number_of_occurrences.focus();
@@ -861,11 +1518,11 @@ export default {
         switchEOO: function (value) {
             let vm = this;
             var selectedValue = value;
-            if (selectedValue === "true") {
+            if (selectedValue === 'true') {
                 swal.fire({
-                    title: "Changing from Manual to Auto",
-                    text: "If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.",
-                    icon: "info",
+                    title: 'Changing from Manual to Auto',
+                    text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
+                    icon: 'info',
                     showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
@@ -873,32 +1530,37 @@ export default {
                         confirmButton: 'btn btn-primary',
                     },
                     reverseButtons: true,
-                }).then((swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        // set EOO field to calculted_EOO vale
-                        document.getElementById("eoo_auto").checked = true;
-                        document.getElementById("eoo_manual").checked = false;
-                        // set eoo to true to fire the change of value so the EOO input box readonly
-                        vm.species_community.distribution.eoo_auto = true;
-                        vm.$nextTick(() => {
-                            vm.enablePopovers();
-                        });
-                    } else if (swalresult.dismiss === swal.DismissReason.cancel) {
-                        document.getElementById("eoo_manual").checked = true;
-                        document.getElementById("eoo_auto").checked = false;
-                        // set eoo to false to fire the change of value so the EOO input box will be editable
-                        vm.species_community.distribution.eoo_auto = false;
-                        //Otherwise revert back to its manual value if swal cancelled
+                }).then(
+                    (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            // set EOO field to calculted_EOO vale
+                            document.getElementById('eoo_auto').checked = true;
+                            document.getElementById('eoo_manual').checked =
+                                false;
+                            // set eoo to true to fire the change of value so the EOO input box readonly
+                            vm.species_community.distribution.eoo_auto = true;
+                            vm.$nextTick(() => {
+                                vm.enablePopovers();
+                            });
+                        } else if (
+                            swalresult.dismiss === swal.DismissReason.cancel
+                        ) {
+                            document.getElementById('eoo_manual').checked =
+                                true;
+                            document.getElementById('eoo_auto').checked = false;
+                            // set eoo to false to fire the change of value so the EOO input box will be editable
+                            vm.species_community.distribution.eoo_auto = false;
+                            //Otherwise revert back to its manual value if swal cancelled
+                        }
+                    },
+                    (error) => {
+                        console.error('Error:', error);
                     }
-
-                }, (error) => {
-                    console.error('Error:', error);
-                });
-            }
-            else {
+                );
+            } else {
                 // set EOO value to null if manual selected
-                document.getElementById("eoo_manual").checked = true;
-                document.getElementById("eoo_auto").checked = false;
+                document.getElementById('eoo_manual').checked = true;
+                document.getElementById('eoo_auto').checked = false;
                 // set eoo to false to fire the change of value so the EOO input box will be editable
                 vm.species_community.distribution.eoo_auto = false;
                 vm.$nextTick(() => {
@@ -909,11 +1571,11 @@ export default {
         switchAOOActual: function (value) {
             let vm = this;
             var selectedValue = value;
-            if (selectedValue === "true") {
+            if (selectedValue === 'true') {
                 swal.fire({
-                    title: "Changing from Manual to Auto",
-                    text: "If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.",
-                    icon: "info",
+                    title: 'Changing from Manual to Auto',
+                    text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
+                    icon: 'info',
                     showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
@@ -921,32 +1583,41 @@ export default {
                         confirmButton: 'btn btn-primary',
                     },
                     reverseButtons: true,
-                }).then((swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        // set AOOActual field to calculted_AOOActual vale
-                        document.getElementById("aoo_actual_auto").checked = true;
-                        document.getElementById("aoo_actual_manual").checked = false;
-                        // set aoo_actual to true to fire the change of value so the AOOActual input box readonly
-                        vm.species_community.distribution.aoo_actual_auto = true;
-                        vm.$nextTick(() => {
-                            vm.enablePopovers();
-                        });
-                    } else if (swalresult.dismiss === swal.DismissReason.cancel) {
-                        document.getElementById("aoo_actual_manual").checked = true;
-                        document.getElementById("aoo_actual_auto").checked = false;
-                        // set eoo to false to fire the change of value so the EOO input box will be editable
-                        vm.species_community.distribution.aoo_actual_auto = false;
-                        //Otherwise revert back to its manual value if swal cancelled
+                }).then(
+                    (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            // set AOOActual field to calculted_AOOActual vale
+                            document.getElementById('aoo_actual_auto').checked =
+                                true;
+                            document.getElementById(
+                                'aoo_actual_manual'
+                            ).checked = false;
+                            // set aoo_actual to true to fire the change of value so the AOOActual input box readonly
+                            vm.species_community.distribution.aoo_actual_auto = true;
+                            vm.$nextTick(() => {
+                                vm.enablePopovers();
+                            });
+                        } else if (
+                            swalresult.dismiss === swal.DismissReason.cancel
+                        ) {
+                            document.getElementById(
+                                'aoo_actual_manual'
+                            ).checked = true;
+                            document.getElementById('aoo_actual_auto').checked =
+                                false;
+                            // set eoo to false to fire the change of value so the EOO input box will be editable
+                            vm.species_community.distribution.aoo_actual_auto = false;
+                            //Otherwise revert back to its manual value if swal cancelled
+                        }
+                    },
+                    (error) => {
+                        console.error('Error:', error);
                     }
-
-                }, (error) => {
-                    console.error('Error:', error);
-                });
-            }
-            else {
+                );
+            } else {
                 // set AOOActual value to null if manual selected
-                document.getElementById("aoo_actual_manual").checked = true;
-                document.getElementById("aoo_actual_auto").checked = false;
+                document.getElementById('aoo_actual_manual').checked = true;
+                document.getElementById('aoo_actual_auto').checked = false;
                 // set aoo_actual to false to fire the change of value so the AOOActual input box will be editable
                 vm.species_community.distribution.aoo_actual_auto = false;
                 vm.$nextTick(() => {
@@ -955,44 +1626,7 @@ export default {
             }
         },
     },
-    created: async function () {
-        let vm = this;
-        //----set the distribution field values if auto onload
-        if (vm.species_community.distribution) {
-            if (vm.species_community.distribution.noo_auto == true) {
-                vm.species_community.distribution.number_of_occurrences = vm.species_community.distribution.cal_number_of_occurrences;
-            }
-            if (vm.species_community.distribution.eoo_auto == true) {
-                vm.species_community.distribution.extent_of_occurrences = vm.species_community.distribution.cal_extent_of_occurrences;
-            }
-            if (vm.species_community.distribution.aoo_actual_auto == true) {
-                vm.species_community.distribution.area_of_occupancy_actual = vm.species_community.distribution.cal_area_of_occupancy_actual;
-            }
-        }
-        if (vm.species_community.conservation_attributes) {
-            if (vm.species_community.conservation_attributes.minimum_fire_interval_to != null &&
-                vm.species_community.conservation_attributes.minimum_fire_interval_to != "" &&
-                vm.species_community.conservation_attributes.minimum_fire_interval_to != undefined) {
-                vm.minimum_fire_interval_range = true;
-            }
-        }
-        //------fetch list of values
-        const response = await fetch('/api/community_profile_dict/');
-        vm.community_profile_dict = await response.json();
-        vm.post_fire_habitatat_interactions_list = vm.community_profile_dict.post_fire_habitatat_interactions_list;
-        vm.post_fire_habitatat_interactions_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.fetchRegions();
-    },
-    mounted: function () {
-        let vm = this;
-        vm.initialiseRegionSelect();
-        vm.initialiseDistrictSelect();
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -1016,7 +1650,7 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
index 2e4d5f65..d1cb2da1 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
@@ -1,16 +1,26 @@
 <template lang="html">
     <div id="community_threats">
-        <FormSection :formCollapse="false" label="Threats" Index="threats">
-            <CollapsibleFilters component_title="Filters" ref="collapsible_filters"
-                @created="collapsible_component_mounted" class="mb-2">
+        <FormSection :form-collapse="false" label="Threats" Index="threats">
+            <CollapsibleFilters
+                ref="collapsible_filters"
+                component_title="Filters"
+                class="mb-2"
+                @created="collapsible_component_mounted"
+            >
                 <div class="row">
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Category:</label>
-                            <select class="form-select" v-model="filterThreatCategory">
+                            <select
+                                v-model="filterThreatCategory"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name
-                                    }}
+                                <option
+                                    v-for="option in threat_category_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -18,9 +28,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Current Impact:</label>
-                            <select class="form-select" v-model="filterThreatCurrentImpact">
+                            <select
+                                v-model="filterThreatCurrentImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_current_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -29,9 +45,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Potential Impact:</label>
-                            <select class="form-select" v-model="filterThreatPotentialImpact">
+                            <select
+                                v-model="filterThreatPotentialImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_potential_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -40,9 +62,16 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Status:</label>
-                            <select class="form-select" v-model="filterThreatStatus">
+                            <select
+                                v-model="filterThreatStatus"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                                <option
+                                    v-for="option in threat_status_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -50,93 +79,133 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed From:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
-                                v-model="filterObservedFromDate">
+                            <input
+                                id="observed_from_date"
+                                v-model="filterObservedFromDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed To:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
-                                v-model="filterObservedToDate">
+                            <input
+                                id="observed_to_date"
+                                v-model="filterObservedToDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                 </div>
             </CollapsibleFilters>
             <form class="form-horizontal" action="index.html" method="post">
-                <div v-if="!species_community.readonly && is_internal" class="col-sm-12">
+                <div
+                    v-if="!species_community.readonly && is_internal"
+                    class="col-sm-12"
+                >
                     <div class="text-end">
-                        <button type="button" class="btn btn-primary mb-2 " @click.prevent="newThreat">
+                        <button
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newThreat"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Threat
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                        :dtHeaders="threats_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="threats_datatable"
+                        :dt-options="threats_options"
+                        :dt-headers="threats_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <FormSection v-if="is_internal" :formCollapse="false" label="Occurrence Threats" :Index="occThreatBody">
+        <FormSection
+            v-if="is_internal"
+            :form-collapse="false"
+            label="Occurrence Threats"
+            :Index="occThreatBody"
+        >
             <CommunityOCCThreats :community_obj="species_community" />
         </FormSection>
 
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="threat_url"
-            :change_warning="changeWarning">
+        <ThreatDetail
+            ref="threat_detail"
+            :url="threat_url"
+            :change_warning="changeWarning"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ThreatDetail>
         <div v-if="conservationThreatHistoryId">
-            <ConservationThreatHistory ref="conservation_threat_history" :key="conservationThreatHistoryId"
-                :threat-id="conservationThreatHistoryId" />
+            <ConservationThreatHistory
+                ref="conservation_threat_history"
+                :key="conservationThreatHistoryId"
+                :threat-id="conservationThreatHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import ThreatDetail from './add_threat.vue'
+import ThreatDetail from './add_threat.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import ConservationThreatHistory from '../../internal/species_communities/conservation_threat_history.vue';
 import CommunityOCCThreats from '@/components/common/species_communities/community_occ_threats.vue';
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'CommunityThreats',
+    components: {
+        FormSection,
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        CommunityOCCThreats,
+        CollapsibleFilters,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
         let vm = this;
         let url = '';
         if (vm.is_internal) {
-            url = helpers.add_endpoint_json(api_endpoints.community, vm.species_community.id + '/threats')
+            url = helpers.add_endpoint_json(
+                api_endpoints.community,
+                vm.species_community.id + '/threats'
+            );
         } else {
-            url = helpers.add_endpoint_json("/api/external_community/", vm.species_community.id + '/threats')
+            url = helpers.add_endpoint_json(
+                '/api/external_community/',
+                vm.species_community.id + '/threats'
+            );
         }
         return {
             uuid: 0,
             conservationThreatHistoryId: null,
-            panelBody: "community-threats-" + vm._uid,
+            panelBody: 'community-threats-' + vm._uid,
             values: null,
-            occThreatBody: "occThreatBody" + vm._uid,
+            occThreatBody: 'occThreatBody' + vm._uid,
             threat_url: api_endpoints.threat,
 
             filterThreatCategory: 'all',
@@ -151,16 +220,25 @@ export default {
             threat_potential_impact_filter_list: [],
 
             threat_status_filter_list: [
-                { id: "active", name: "Active" },
-                { id: "removed", name: "Removed" },
+                { id: 'active', name: 'Active' },
+                { id: 'removed', name: 'Removed' },
             ],
 
-            threats_headers: ['Number', 'Category', 'Date Observed', 'Threat Agent', 'Comments',
-                'Current Impact', 'Potential Impact', 'Threat Source', 'Action'],
+            threats_headers: [
+                'Number',
+                'Category',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Current Impact',
+                'Potential Impact',
+                'Threat Source',
+                'Action',
+            ],
             threats_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -170,19 +248,22 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": url,
-                    "dataSrc": '',
-                    "data": function (d) {
-                        d.filter_threat_category = vm.filterThreatCategory
-                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                        d.filter_threat_status = vm.filterThreatStatus
-                        d.filter_observed_from_date = vm.filterObservedFromDate
-                        d.filter_observed_to_date = vm.filterObservedToDate
+                    url: url,
+                    dataSrc: '',
+                    data: function (d) {
+                        d.filter_threat_category = vm.filterThreatCategory;
+                        d.filter_threat_current_impact =
+                            vm.filterThreatCurrentImpact;
+                        d.filter_threat_potential_impact =
+                            vm.filterThreatPotentialImpact;
+                        d.filter_threat_status = vm.filterThreatStatus;
+                        d.filter_observed_from_date = vm.filterObservedFromDate;
+                        d.filter_observed_to_date = vm.filterObservedToDate;
                     },
                 },
                 order: [[0, 'desc']],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -192,8 +273,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -201,121 +282,129 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "threat_number",
+                        data: 'threat_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return "C" + full.community + " - " + full.threat_number;
-                            }
-                            else {
-                                return '<s>C' + full.community + " - " + full.threat_number + '</s>'
+                                return (
+                                    'C' +
+                                    full.community +
+                                    ' - ' +
+                                    full.threat_number
+                                );
+                            } else {
+                                return (
+                                    '<s>C' +
+                                    full.community +
+                                    ' - ' +
+                                    full.threat_number +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "threat_category",
+                        data: 'threat_category',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_category;
-                            }
-                            else {
-                                return '<s>' + full.threat_category + '</s>'
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "date_observed",
+                        data: 'date_observed',
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
-                            }
-                            else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "threat_agent",
+                        data: 'threat_agent',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_agent;
-                            }
-                            else {
-                                return '<s>' + full.threat_agent + '</s>'
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "comment",
+                        data: 'comment',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.visible) {
                                 return type == 'export' ? value : result;
-                            }
-                            else {
-                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "current_impact_name",
+                        data: 'current_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.current_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.current_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "potential_impact_name",
+                        data: 'potential_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.potential_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.potential_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "source",
+                        data: 'source',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.source;
-                            }
-                            else {
-                                return '<s>' + full.source + '</s>'
+                            } else {
+                                return '<s>' + full.source + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (vm.is_internal) {
@@ -324,8 +413,7 @@ export default {
                                     if (full.visible) {
                                         links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
                                         links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
-                                    }
-                                    else {
+                                    } else {
                                         links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
                                     }
                                 }
@@ -334,7 +422,7 @@ export default {
                                 links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
                             }
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -349,25 +437,18 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        FormSection,
-        datatable,
-        ThreatDetail,
-        ConservationThreatHistory,
-        CommunityOCCThreats,
-        CollapsibleFilters,
+            },
+        };
     },
     computed: {
         changeWarning: function () {
-            if (this.species_community.publishing_status.community_public &&
+            if (
+                this.species_community.publishing_status.community_public &&
                 this.species_community.publishing_status.threats_public
             )
-                return "Adding or updating a threat will set the Community record to Private."
+                return 'Adding or updating a threat will set the Community record to Private.';
             else {
-                return null
+                return null;
             }
         },
         isReadOnly: function () {
@@ -377,16 +458,17 @@ export default {
             }
         },
         filterApplied: function () {
-            if (this.filterThreatCategory === 'all' &&
+            if (
+                this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
                 this.filterThreatStatus === 'all' &&
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
             ) {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
     },
@@ -394,7 +476,9 @@ export default {
         filterApplied: function () {
             if (this.$refs.collapsible_filters) {
                 // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
         filterThreatCategory: function () {
@@ -422,22 +506,37 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
         },
     },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
 
         fetchFilterLists: function () {
             let vm = this;
             //Category, Current Impact, Potential Impact (generic to all threats)
-            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
-                const data = await response.json();
-                vm.threat_category_filter_list = data["threat_category_lists"];
-                vm.threat_current_impact_filter_list = data["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
-            }, (error) => {
-                console.log(error);
-            })
+            fetch('/api/threat/threat_list_of_values/').then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.threat_category_filter_list =
+                        data['threat_category_lists'];
+                    vm.threat_current_impact_filter_list =
+                        data['current_impact_lists'];
+                    vm.threat_potential_impact_filter_list =
+                        data['potential_impact_lists'];
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         newThreat: function () {
             let vm = this;
@@ -453,7 +552,7 @@ export default {
                 potential_impact: '',
                 potential_threat_onset: '',
                 date_observed: null,
-            }
+            };
             this.$refs.threat_detail.threatObj = new_community_threat_another;
             this.$refs.threat_detail.threat_action = 'add';
             this.$refs.threat_detail.isModalOpen = true;
@@ -462,28 +561,40 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         historyThreat: function (id) {
@@ -499,91 +610,117 @@ export default {
         },
         discardThreat: function (id) {
             let vm = this;
-            let public_message = ""
-            if (vm.species_community.publishing_status.community_public &&
+            let public_message = '';
+            if (
+                vm.species_community.publishing_status.community_public &&
                 vm.species_community.publishing_status.threats_public
             ) {
-                public_message = " Doing so will make the Species Record Private"
+                public_message =
+                    ' Doing so will make the Species Record Private';
             }
             swal.fire({
-                title: "Remove Threat",
-                text: "Are you sure you want to remove this Threat?" + public_message,
-                icon: "question",
+                title: 'Remove Threat',
+                text:
+                    'Are you sure you want to remove this Threat?' +
+                    public_message,
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Remove Threat',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your threat has been removed',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                            vm.refreshSpeciesCommunity();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.threat,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your threat has been removed',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.threats_datatable.vmDataTable.ajax.reload();
+                                vm.refreshSpeciesCommunity();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateThreat: function (id) {
             let vm = this;
-            let public_message = ""
-            if (vm.species_community.publishing_status.community_public &&
+            let public_message = '';
+            if (
+                vm.species_community.publishing_status.community_public &&
                 vm.species_community.publishing_status.threats_public
             ) {
-                public_message = " Doing so will make the Species Record Private"
+                public_message =
+                    ' Doing so will make the Species Record Private';
             }
             swal.fire({
-                title: "Reinstate Threat",
-                text: "Are you sure you want to Reinstate this Threat?" + public_message,
-                icon: "question",
+                title: 'Reinstate Threat',
+                text:
+                    'Are you sure you want to Reinstate this Threat?' +
+                    public_message,
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Threat',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your threat has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                            vm.refreshSpeciesCommunity();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.threat,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your threat has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.threats_datatable.vmDataTable.ajax.reload();
+                                vm.refreshSpeciesCommunity();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         updatedThreats() {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
@@ -591,52 +728,72 @@ export default {
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-edit-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-threat');
-                vm.editThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-threat');
-                vm.viewThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-threat');
-                vm.historyThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-threat');
+                    vm.editThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-threat');
+                    vm.viewThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-threat');
+                    vm.historyThreat(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-discard-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-threat');
-                vm.discardThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-threat');
+                    vm.discardThreat(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-reinstate-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-threat');
-                vm.reinstateThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-threat');
+                    vm.reinstateThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue b/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
index fa22511e..49422333 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
@@ -1,25 +1,53 @@
 <template lang="html">
-<div class="row" id="userInfo">
-    <div class="col-sm-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Related Items <small></small>
-                <a class="panelClicker" :href="'#'+lBody" data-toggle="collapse"  data-parent="#userInfo" expanded="true" :aria-controls="lBody">
-                <span class="glyphicon glyphicon-chevron-up pull-right "></span>
-                </a>
-                </h3>
-            </div>
-            <div class="panel-body collapse in" :id="lBody">
-                <div class="" >
-                    <div class="form-horizontal col-sm-12 borderDecoration">
-
-                        <div class="form-group">
-                            <div class="row">
-                                <div class="col-sm-3">
-                                    <label class="control-label pull-left"  for="Name">Some related items data</label>
-                                </div>
-                                <div class="col-sm-9" style="margin-bottom: 5px; width:53% !important">
-                                    <input type="text" class="form-control" name="Some species data" placeholder="" :disabled="species_community.readonly" >
+    <div id="userInfo" class="row">
+        <div class="col-sm-12">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">
+                        Related Items <small></small>
+                        <a
+                            class="panelClicker"
+                            :href="'#' + lBody"
+                            data-toggle="collapse"
+                            data-parent="#userInfo"
+                            expanded="true"
+                            :aria-controls="lBody"
+                        >
+                            <span
+                                class="glyphicon glyphicon-chevron-up pull-right"
+                            ></span>
+                        </a>
+                    </h3>
+                </div>
+                <div :id="lBody" class="panel-body collapse in">
+                    <div class="">
+                        <div class="form-horizontal col-sm-12 borderDecoration">
+                            <div class="form-group">
+                                <div class="row">
+                                    <div class="col-sm-3">
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Some related items data</label
+                                        >
+                                    </div>
+                                    <div
+                                        class="col-sm-9"
+                                        style="
+                                            margin-bottom: 5px;
+                                            width: 53% !important;
+                                        "
+                                    >
+                                        <input
+                                            type="text"
+                                            class="form-control"
+                                            name="Some species data"
+                                            placeholder=""
+                                            :disabled="
+                                                species_community.readonly
+                                            "
+                                        />
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -28,81 +56,73 @@
             </div>
         </div>
     </div>
-
-</div>
 </template>
 
 <script>
-
-import {
-  api_endpoints,
-  helpers
-}
-from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
-        props:{
-            species_community:{
-                type: Object,
-                required:true
-            }
+    components: {},
+    props: {
+        species_community: {
+            type: Object,
+            required: true,
         },
-        data:function () {
+    },
+    data: function () {
+        let vm = this;
+        return {
+            pBody: 'pBody' + vm._uid,
+            lBody: 'lBody' + vm._uid,
+            iBody: 'iBody' + vm._uid,
+            mBody: 'mBody' + vm._uid,
+            oBody: 'oBody' + vm._uid,
+            cBody: 'cBody' + vm._uid,
+            dBody: 'dBody' + vm._uid,
+            values: null,
+            datepickerOptions: {
+                format: 'DD/MM/YYYY',
+                showClear: true,
+                useCurrent: false,
+                keepInvalid: true,
+                allowInputToggle: true,
+            },
+        };
+    },
+    computed: {},
+    watch: {},
+    mounted: function () {
+        let vm = this;
+    },
+    methods: {
+        eventListeners: function () {
             let vm = this;
-            return{
-                pBody: 'pBody'+vm._uid,
-                lBody: 'lBody'+vm._uid,
-                iBody: 'iBody'+vm._uid,
-                mBody: 'mBody'+vm._uid,
-                oBody: 'oBody'+vm._uid,
-                cBody: 'cBody'+vm._uid,
-                dBody: 'dBody'+vm._uid,
-                values:null,
-                datepickerOptions:{
-                    format: 'DD/MM/YYYY',
-                    showClear:true,
-                    useCurrent:false,
-                    keepInvalid:true,
-                    allowInputToggle:true,
-                },
-            }
-        },
-        components: {
-        },
-        computed: {
-        },
-        watch:{
-
-        },
-        methods:{
-            eventListeners:function (){
-                let vm=this;
 
-                var date= new Date()
-                var today= new Date(date.getFullYear(), date.getMonth(), date.getDate());
-
-                },
+            var date = new Date();
+            var today = new Date(
+                date.getFullYear(),
+                date.getMonth(),
+                date.getDate()
+            );
         },
-        mounted: function(){
-            let vm = this;
-        }
-    }
+    },
+};
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
index 50b3bd9b..eee2fef0 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
@@ -1,36 +1,62 @@
 <template lang="html">
     <div id="addCombineSpecies">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large
-            id="myAddSpeciesToCombineModal">
+        <modal
+            id="myAddSpeciesToCombineModal"
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="addSpeciesToCombine">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label">Species:</label>
-                                <div class="col-sm-9" :id="select_scientific_name">
-                                    <select :id="scientific_name_lookup" :name="scientific_name_lookup"
-                                        :ref="scientific_name_lookup" class="form-control" />
+                                <label for="" class="col-sm-3 control-label"
+                                    >Species:</label
+                                >
+                                <div
+                                    :id="select_scientific_name"
+                                    class="col-sm-9"
+                                >
+                                    <select
+                                        :id="scientific_name_lookup"
+                                        :ref="scientific_name_lookup"
+                                        :name="scientific_name_lookup"
+                                        class="form-control"
+                                    />
                                 </div>
                             </div>
                         </div>
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <button class="btn btn-primary" @click.prevent="ok()">Confirm Selection</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button class="btn btn-primary" @click.prevent="ok()">
+                        Confirm Selection
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
     name: 'AddCombineSpecies',
     components: {
@@ -47,12 +73,12 @@ export default {
             species_list: [],
             combineSpeciesId: null,
             scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
-            select_scientific_name: "select_scientific_name" + vm._uid,
-        }
+            select_scientific_name: 'select_scientific_name' + vm._uid,
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         showError: function () {
             var vm = this;
@@ -62,16 +88,26 @@ export default {
             return 'Select Species To Combine';
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.addSpeciesToCombine;
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+        });
+    },
     methods: {
         ok: function () {
             let vm = this;
             vm.form = document.forms.addSpeciesToCombine;
             if ($(vm.form).valid()) {
-                vm.addSpeciesToCombineList()
+                vm.addSpeciesToCombineList();
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             this.isModalOpen = false;
@@ -80,92 +116,95 @@ export default {
         addSpeciesToCombineList: function () {
             let vm = this;
             try {
-                fetch(`/api/species/${vm.combineSpeciesId}/internal_species.json`).then(async (response) => {
-                    const data = await response.json();
-                    let species_obj = data.species_obj;
-                    // user should not able select the same ID if already exists in the array to combine
-                    let hasSpecies = false;
-                    for (const species of vm.$parent.original_species_combine_list) {
-                        if (species.id === species_obj.id) {
-                            hasSpecies = true;
+                fetch(
+                    `/api/species/${vm.combineSpeciesId}/internal_species.json`
+                ).then(
+                    async (response) => {
+                        const data = await response.json();
+                        let species_obj = data.species_obj;
+                        // user should not able select the same ID if already exists in the array to combine
+                        let hasSpecies = false;
+                        for (const species of vm.$parent
+                            .original_species_combine_list) {
+                            if (species.id === species_obj.id) {
+                                hasSpecies = true;
+                            }
                         }
-                    }
-                    if (hasSpecies == true) {
-                        swal.fire({
-                            title: "Please fix following errors",
-                            text: "Species To combine already exists",
-                            icon: 'error',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        })
-                    }
-                    else {
-                        vm.$parent.original_species_combine_list.push(species_obj); //--temp species_obj
-                        $(vm.$refs[vm.scientific_name_lookup]).val(null).trigger('change');
-                    }
-                },
-                    err => {
+                        if (hasSpecies == true) {
+                            swal.fire({
+                                title: 'Please fix following errors',
+                                text: 'Species To combine already exists',
+                                icon: 'error',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            });
+                        } else {
+                            vm.$parent.original_species_combine_list.push(
+                                species_obj
+                            ); //--temp species_obj
+                            $(vm.$refs[vm.scientific_name_lookup])
+                                .val(null)
+                                .trigger('change');
+                        }
+                    },
+                    (err) => {
                         console.log(err);
-                    });
-            }
-            catch (err) {
+                    }
+                );
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
                 }
             }
-            this.close()
+            this.close();
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_scientific_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Species",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.$parent.species_community.group_type_id,
-                            has_species: true,
-                            active_only: true,
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Species',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id:
+                                    vm.$parent.species_community.group_type_id,
+                                has_species: true,
+                                active_only: true,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     // let data = e.params.data.id;
                     let data = e.params.data.species_id;
-                    vm.combineSpeciesId = data
-                }).
-                on("select2:unselect", function (e) {
+                    vm.combineSpeciesId = data;
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.combineSpeciesId = ''
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                    vm.combineSpeciesId = '';
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.addSpeciesToCombine;
-    },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-        });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
index 6d77e2dc..baa78376 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
@@ -1,300 +1,379 @@
 <template lang="html">
     <div id="species_combine_documents">
-        <FormSection :formCollapse="false" label="Documents" :Index="documentBody">
+        <FormSection
+            :form-collapse="false"
+            label="Documents"
+            :Index="documentBody"
+        >
             <form class="form-horizontal" action="index.html" method="post">
                 <div class="col-sm-12 form-check form-check-inline">
-                    <input class="form-check-input" type="radio" :id="'doc_select_all'+species_original.id" name="documentSelect" value="selectAll" @click="selectDocumentOption($event)"/>
-                    <label class="form-check-label">Copy all documents from Species {{species_original.species_number}}</label>
+                    <input
+                        :id="'doc_select_all' + species_original.id"
+                        class="form-check-input"
+                        type="radio"
+                        name="documentSelect"
+                        value="selectAll"
+                        @click="selectDocumentOption($event)"
+                    />
+                    <label class="form-check-label"
+                        >Copy all documents from Species
+                        {{ species_original.species_number }}</label
+                    >
                 </div>
                 <div class="col-sm-12 form-check form-check-inline mb-3">
-                    <input class="form-check-input" type="radio" :id="'doc_select_individual'+species_original.id" name="documentSelect" value="individual" @click="selectDocumentOption($event)"/>
+                    <input
+                        :id="'doc_select_individual' + species_original.id"
+                        class="form-check-input"
+                        type="radio"
+                        name="documentSelect"
+                        value="individual"
+                        @click="selectDocumentOption($event)"
+                    />
                     <label class="form-check-label">Decide per document</label>
                 </div>
                 <div>
-                    <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                    :dtHeaders="documents_headers"/>
+                    <datatable
+                        :id="panelBody"
+                        ref="documents_datatable"
+                        :dt-options="documents_options"
+                        :dt-headers="documents_headers"
+                    />
                 </div>
             </form>
         </FormSection>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-from '@/utils/hooks'
-
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
-        name: 'SpeciesCombineDocuments',
-        props:{
-            species_community:{
-                type: Object,
-                required:true
-            },
-            species_original:{
-                type: Object,
-                required:true
-            },
+    name: 'SpeciesCombineDocuments',
+    components: {
+        FormSection,
+        datatable,
+    },
+    props: {
+        species_community: {
+            type: Object,
+            required: true,
         },
-        data:function () {
-            let vm = this;
-            return{
-                uuid:0,
-                documentBody: 'documentBody' + vm._uid,
-                panelBody: "species-combine-documents-"+vm._uid,
-                values:null,
-                // to store all the documents of original on first load.
-                original_species_documents:[],
-                species_document_url: api_endpoints.species_documents,
-                documents_headers:['Number','Category', 'Sub Category','Document','Description','Date/Time','Action'],
-                documents_options:{
-                    autowidth: true,
-                    language:{
-                        processing: constants.DATATABLE_PROCESSING_HTML
+        species_original: {
+            type: Object,
+            required: true,
+        },
+    },
+    data: function () {
+        let vm = this;
+        return {
+            uuid: 0,
+            documentBody: 'documentBody' + vm._uid,
+            panelBody: 'species-combine-documents-' + vm._uid,
+            values: null,
+            // to store all the documents of original on first load.
+            original_species_documents: [],
+            species_document_url: api_endpoints.species_documents,
+            documents_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
+            documents_options: {
+                autowidth: true,
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
+                },
+                responsive: true,
+                searching: true,
+                //  to show the "workflow Status","Action" columns always in the last position
+                columnDefs: [
+                    { responsivePriority: 1, targets: 0 },
+                    { responsivePriority: 2, targets: -1 },
+                ],
+                ajax: {
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.species,
+                        vm.species_original.id + '/documents'
+                    ),
+                    dataSrc: '',
+                },
+                order: [],
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
+                buttons: [
+                    {
+                        extend: 'excel',
+                        title: 'Boranga Species Combine Documents Excel Export',
+                        text: '<i class="fa-solid fa-download"></i> Excel',
+                        className: 'btn btn-primary me-2 rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    responsive: true,
-                    searching: true,
-                     //  to show the "workflow Status","Action" columns always in the last position
-                    columnDefs: [
-                        { responsivePriority: 1, targets: 0 },
-                        { responsivePriority: 2, targets: -1 },
-                    ],
-                    ajax:{
-                        "url": helpers.add_endpoint_json(api_endpoints.species,vm.species_original.id+'/documents'),
-                        "dataSrc": ''
+                    {
+                        extend: 'csv',
+                        title: 'Boranga Species Combine Documents CSV Export',
+                        text: '<i class="fa-solid fa-download"></i> CSV',
+                        className: 'btn btn-primary rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    order: [],
-                    dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
-                    buttons:[
-                        {
-                            extend: 'excel',
-                            title: 'Boranga Species Combine Documents Excel Export',
-                            text: '<i class="fa-solid fa-download"></i> Excel',
-                            className: 'btn btn-primary me-2 rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                ],
+                columns: [
+                    {
+                        data: 'document_number',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return full.document_number;
+                            } else {
+                                return '<s>' + full.document_number + '</s>';
                             }
                         },
-                        {
-                            extend: 'csv',
-                            title: 'Boranga Species Combine Documents CSV Export',
-                            text: '<i class="fa-solid fa-download"></i> CSV',
-                            className: 'btn btn-primary rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                    },
+                    {
+                        data: 'document_category_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return full.document_category_name;
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
-                    ],
-                    columns: [
-                        {
-                            data: "document_number",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.active)
-                                {
-                                    return full.document_number;
-                                }
-                                else{
-                                    return '<s>'+ full.document_number + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "document_category_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.active){
-                                    return full.document_category_name;
-                                }
-                                else{
-                                    return '<s>'+ full.document_category_name + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "document_sub_category_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.active){
-                                    return full.document_sub_category_name;
-                                }
-                                else{
-                                    return '<s>'+ full.document_sub_category_name + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'document_sub_category_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return full.document_sub_category_name;
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
+                            }
                         },
-                        {
-                            data: "name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                let links='';
-                                if(full.active){
-                                    let value = full.name;
-                                    let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                    links+='<span><a href="'+ full._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                                }else{
-                                    let value = full.name;
-                                    let result = helpers.dtPopover(value, 30, 'hover');
-                                    links += type == 'export' ? value : '<s>' + result + '</s>';
-                                }
-                                return links;
-                            },
-
+                    },
+                    {
+                        data: 'name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            let links = '';
+                            if (full.active) {
+                                let value = full.name;
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
+                            } else {
+                                let value = full.name;
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
+                            }
+                            return links;
                         },
-                        {
-                            data: "description",
-                            orderable: true,
-                            searchable: true,
-                            'render': function(value, type, full){
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                if(full.active){
-                                    return type=='export' ? value : result;
-                                }else{
-                                    return type=='export' ? value : '<s>'+ result + '</s>';
-                                }
-                            },
+                    },
+                    {
+                        data: 'description',
+                        orderable: true,
+                        searchable: true,
+                        render: function (value, type, full) {
+                            let result = helpers.dtPopover(value, 30, 'hover');
+                            if (full.active) {
+                                return type == 'export' ? value : result;
+                            } else {
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
+                            }
                         },
-                        {
-                            data: "uploaded_date",
-                            mRender:function (data,type,full){
-                                if(full.active){
-                                    return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm'):'';
-                                }else{
-                                    return data != '' && data != null ? '<s>'+ moment(data).format('DD/MM/YYYY HH:mm') + '</s>':'';
-                                }
+                    },
+                    {
+                        data: 'uploaded_date',
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
                         },
-                        {
-                            data: "id",
-                            mRender:function (data,type,full){
-                                // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
-                                if(!vm.original_species_documents.includes(full.id)){
-                                    vm.original_species_documents.push(full.id)
-                                };
+                    },
+                    {
+                        data: 'id',
+                        mRender: function (data, type, full) {
+                            // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
+                            if (
+                                !vm.original_species_documents.includes(full.id)
+                            ) {
+                                vm.original_species_documents.push(full.id);
+                            }
 
-                                if(vm.species_community.documents.includes(full.id)){
-                                    return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}"  checked>`;
-                                }
-                                else{
-                                    return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}">`;
-                                }
+                            if (
+                                vm.species_community.documents.includes(full.id)
+                            ) {
+                                return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}"  checked>`;
+                            } else {
+                                return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}">`;
                             }
                         },
-                    ],
-                    processing:true,
-                    drawCallback: function() {
+                    },
+                ],
+                processing: true,
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
-                        helpers.enablePopovers();
-                        // another option to fix the responsive table overflow css on tab switch
-                        setTimeout(function (){
-                            vm.adjust_table_width();
-                        },100);
-                    },
+                initComplete: function () {
+                    helpers.enablePopovers();
+                    // another option to fix the responsive table overflow css on tab switch
+                    setTimeout(function () {
+                        vm.adjust_table_width();
+                    }, 100);
+                },
+            },
+        };
+    },
+    computed: {},
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            if (
+                vm.species_original.document_selection !== undefined &&
+                vm.species_original.document_selection !== null
+            ) {
+                if (vm.species_original.document_selection === 'selectAll') {
+                    document.getElementById(
+                        'doc_select_all' + vm.species_original.id
+                    ).checked = true;
+                } else {
+                    document.getElementById(
+                        'doc_select_individual' + vm.species_original.id
+                    ).checked = true;
                 }
             }
-        },
-        components: {
-            FormSection,
-            datatable,
-        },
-        computed: {
-        },
-        methods:{
-            selectDocumentOption(e){
-                let vm=this;
-                //--fetch the value of selected radio btn
-                let selected_option=e.target.value;
-                //----set the selected value to the original species object so as to get the data when tab is reloaded/refreshed
-                vm.species_original.document_selection = selected_option;
+            vm.addEventListeners();
+        });
+    },
+    methods: {
+        selectDocumentOption(e) {
+            let vm = this;
+            //--fetch the value of selected radio btn
+            let selected_option = e.target.value;
+            //----set the selected value to the original species object so as to get the data when tab is reloaded/refreshed
+            vm.species_original.document_selection = selected_option;
 
-                if(selected_option == "selectAll"){
-                    //---first need to delete the original_species_documents from the new_arr if added from the "Decide individual" option to avoid duplication
-                    vm.species_community.documents = vm.species_community.documents.filter(x => vm.original_species_documents.indexOf(x) == -1);  //--"filter" used to delete one array from another
-                    //-- copy all original species documents to new species documents array
-                    //---use '...' spread operator to add one arr elemnents to other
-                    vm.species_community.documents.push(...vm.original_species_documents);
-                    this.$refs.documents_datatable.vmDataTable.ajax.reload();
-                }
-                else if(selected_option == "individual"){
-                    //----empty only the current original species array from the new species array as will contain other original combine species document_id's as well
-                    vm.species_community.documents = vm.species_community.documents.filter(x => vm.original_species_documents.indexOf(x) == -1); //--"filter" used to delete one array from another
-                    // vm.species_community.documents=[];
-                    this.$refs.documents_datatable.vmDataTable.ajax.reload();
-                }
-            },
-            addEventListeners:function (){
-                let vm=this;
-                vm.$refs.documents_datatable.vmDataTable.on('click', 'input[data-add-document]', function(e) {
+            if (selected_option == 'selectAll') {
+                //---first need to delete the original_species_documents from the new_arr if added from the "Decide individual" option to avoid duplication
+                vm.species_community.documents =
+                    vm.species_community.documents.filter(
+                        (x) => vm.original_species_documents.indexOf(x) == -1
+                    ); //--"filter" used to delete one array from another
+                //-- copy all original species documents to new species documents array
+                //---use '...' spread operator to add one arr elemnents to other
+                vm.species_community.documents.push(
+                    ...vm.original_species_documents
+                );
+                this.$refs.documents_datatable.vmDataTable.ajax.reload();
+            } else if (selected_option == 'individual') {
+                //----empty only the current original species array from the new species array as will contain other original combine species document_id's as well
+                vm.species_community.documents =
+                    vm.species_community.documents.filter(
+                        (x) => vm.original_species_documents.indexOf(x) == -1
+                    ); //--"filter" used to delete one array from another
+                // vm.species_community.documents=[];
+                this.$refs.documents_datatable.vmDataTable.ajax.reload();
+            }
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'input[data-add-document]',
+                function (e) {
                     //e.preventDefault();
                     let id = $(this).attr('data-add-document');
                     let chkbox = $(this).attr('id');
-                    if($("#"+chkbox).is(':checked')== true){
-                        if(!vm.species_community.documents.includes(id)){
+                    if ($('#' + chkbox).is(':checked') == true) {
+                        if (!vm.species_community.documents.includes(id)) {
                             vm.species_community.documents.push(parseInt(id));
                         }
-                    }
-                    else{
-                        let doc_arr=vm.species_community.documents;
+                    } else {
+                        let doc_arr = vm.species_community.documents;
                         //---remove document id from array (for this arr.splice is used)
                         var index = doc_arr.indexOf(id);
-                        vm.species_community.documents.splice(index,1);
+                        vm.species_community.documents.splice(index, 1);
                     }
-                });
-                vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
                     helpers.enablePopovers();
-                });
-            },
-            adjust_table_width: function(){
-                if (this.$refs.documents_datatable !== undefined) {this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc();}
-            },
-        },
-        mounted: function(){
-            let vm = this;
-            this.$nextTick(() => {
-                if(vm.species_original.document_selection !== undefined && vm.species_original.document_selection !== null){
-
-                    if(vm.species_original.document_selection === "selectAll"){
-                        document.getElementById('doc_select_all'+vm.species_original.id).checked=true;
-                    }
-                    else{
-                        document.getElementById('doc_select_individual'+vm.species_original.id).checked=true;
-                    }
                 }
-                vm.addEventListeners();
-            });
+            );
         },
-
-    }
+        adjust_table_width: function () {
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
index 9ac2ba94..eb8e5a64 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
@@ -1,271 +1,583 @@
 <template lang="html">
     <div id="species_combine_profile">
-        <FormSection :formCollapse="false" label="Taxonomy" :Index="taxonBody">
+        <FormSection :form-collapse="false" label="Taxonomy" :Index="taxonBody">
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Scientific Name:</label>
-                <div class="col-sm-8" :id="select_scientific_name">
-                    <select :disabled="isReadOnly" :id="scientific_name_lookup" :name="scientific_name_lookup"
-                        :ref="scientific_name_lookup" class="form-control" />
+                <label for="" class="col-sm-3 control-label"
+                    >Scientific Name:</label
+                >
+                <div :id="select_scientific_name" class="col-sm-8">
+                    <select
+                        :id="scientific_name_lookup"
+                        :ref="scientific_name_lookup"
+                        :disabled="isReadOnly"
+                        :name="scientific_name_lookup"
+                        class="form-control"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label"></label>
                 <div class="col-sm-8">
-                    <textarea disabled class="form-control" rows="3" id="species_display" v-model="species_display" />
+                    <textarea
+                        id="species_display"
+                        v-model="species_display"
+                        disabled
+                        class="form-control"
+                        rows="3"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Common Name:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Common Name:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="2" id="common_name" placeholder=""
-                        v-model="common_name" />
+                    <textarea
+                        id="common_name"
+                        v-model="common_name"
+                        :disabled="true"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Taxon Name ID:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Taxon Name ID:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="true" type="text" class="form-control" id="taxon_name_id" placeholder=""
-                        v-model="taxon_name_id" />
+                    <input
+                        id="taxon_name_id"
+                        v-model="taxon_name_id"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                     <!-- gives error for the below when new species created as no taxonomy id is present -->
                     <!-- <input :disabled="true" type="text" class="form-control" id="taxon_name_id" placeholder=""
                     v-model="species_communities.taxonomy_details.taxon_name_id"/> -->
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Previous Name:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Previous Name:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="true" type="text" class="form-control" id="previous_name" placeholder=""
-                        v-model="taxon_previous_name" />
+                    <input
+                        id="previous_name"
+                        v-model="taxon_previous_name"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Phylogenetic Group:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Phylogenetic Group:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="1" id="phylogenetic_group" placeholder=""
-                        v-model="phylogenetic_group" />
+                    <textarea
+                        id="phylogenetic_group"
+                        v-model="phylogenetic_group"
+                        :disabled="true"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Family:</label>
                 <div class="col-sm-8">
-                    <textarea :disabled="true" rows="1" class="form-control" id="family" placeholder=""
-                        v-model="family" />
+                    <textarea
+                        id="family"
+                        v-model="family"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Genus:</label>
                 <div class="col-sm-8">
-                    <textarea :disabled="true" rows="1" class="form-control" id="genus" placeholder=""
-                        v-model="genus" />
+                    <textarea
+                        id="genus"
+                        v-model="genus"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Name Authority:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Name Authority:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" rows="1" class="form-control" id="name_authority" placeholder=""
-                        v-model="name_authority" />
+                    <textarea
+                        id="name_authority"
+                        v-model="name_authority"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Name names comments:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Name names comments:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="3" id="comment" placeholder=""
-                        v-model="name_comments" />
+                    <textarea
+                        id="comment"
+                        v-model="name_comments"
+                        :disabled="true"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
-        <FormSection :formCollapse="false" label="Distribution" :Index="distributionBody">
+        <FormSection
+            :form-collapse="false"
+            label="Distribution"
+            :Index="distributionBody"
+        >
             <div class="row mb-3">
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Distribution:</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Distribution:</label
+                    >
                     <div class="col-sm-8">
-                        <textarea :disabled="true" type="text" class="form-control" placeholder=""
-                            v-model="species.distribution.distribution" />
+                        <textarea
+                            v-model="species.distribution.distribution"
+                            :disabled="true"
+                            type="text"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                     <div class="col-sm-1">
-                        <input class="form-check-input" type="checkbox" name="distribution_chk"
+                        <input
                             :id="'distribution' + species.id"
-                            @change="checkDistributionInput('distribution_chk', 'distribution' + species.id, 'distribution', species.distribution.distribution)" />
+                            class="form-check-input"
+                            type="checkbox"
+                            name="distribution_chk"
+                            @change="
+                                checkDistributionInput(
+                                    'distribution_chk',
+                                    'distribution' + species.id,
+                                    'distribution',
+                                    species.distribution.distribution
+                                )
+                            "
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Distribution:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Distribution:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="1" id="distribution" placeholder=""
-                        v-model="species_community.distribution.distribution" />
+                    <textarea
+                        id="distribution"
+                        v-model="species_community.distribution.distribution"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Region:</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Region:</label
+                    >
                     <div class="col-sm-8">
-                        <label for="" class="control-label">{{ getselectedRegionNames(species) }}</label>
+                        <label for="" class="control-label">{{
+                            getselectedRegionNames(species)
+                        }}</label>
                     </div>
                     <div class="col-sm-1">
                         <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                        <input class="form-check-input" type="checkbox" :id="'regions_select_chk' + species.id"
-                            @change="checkRegionDistrictInput('regions_select_chk' + species.id, 'regions', species, 'regions_select')" />
+                        <input
+                            :id="'regions_select_chk' + species.id"
+                            class="form-check-input"
+                            type="checkbox"
+                            @change="
+                                checkRegionDistrictInput(
+                                    'regions_select_chk' + species.id,
+                                    'regions',
+                                    species,
+                                    'regions_select'
+                                )
+                            "
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Region:</label>
-                <div class="col-sm-8" :id="select_regions">
-                    <select :disabled="isReadOnly" style="width:100%;" class="form-select input-sm"
-                        v-model="species_community.regions" ref="regions_select">
-                        <option value="" selected disabled>Select region</option>
-                        <option v-for="option in region_list" :value="option.value" :key="option.value">
+                <div :id="select_regions" class="col-sm-8">
+                    <select
+                        ref="regions_select"
+                        v-model="species_community.regions"
+                        :disabled="isReadOnly"
+                        style="width: 100%"
+                        class="form-select input-sm"
+                    >
+                        <option value="" selected disabled>
+                            Select region
+                        </option>
+                        <option
+                            v-for="option in region_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} District:</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} District:</label
+                    >
                     <div class="col-sm-8">
-                        <label for="" class="control-label">{{ getselectedDistrictNames(species) }}</label>
+                        <label for="" class="control-label">{{
+                            getselectedDistrictNames(species)
+                        }}</label>
                     </div>
                     <div class="col-sm-1">
                         <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                        <input class="form-check-input" type="checkbox" :id="'districts_select_chk' + species.id"
-                            @change="checkRegionDistrictInput('districts_select_chk' + species.id, 'districts', species, 'districts_select')" />
+                        <input
+                            :id="'districts_select_chk' + species.id"
+                            class="form-check-input"
+                            type="checkbox"
+                            @change="
+                                checkRegionDistrictInput(
+                                    'districts_select_chk' + species.id,
+                                    'districts',
+                                    species,
+                                    'districts_select'
+                                )
+                            "
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">District:</label>
-                <div class="col-sm-8" :id="select_districts">
-                    <select :disabled="isReadOnly" class="form-select" v-model="species_community.districts"
-                        ref="districts_select">
-                        <option value="" selected disabled>Select district</option>
-                        <option v-for="option in district_list" :value="option.value" v-bind:key="option.value">
+                <div :id="select_districts" class="col-sm-8">
+                    <select
+                        ref="districts_select"
+                        v-model="species_community.districts"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option value="" selected disabled>
+                            Select district
+                        </option>
+                        <option
+                            v-for="option in district_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Number of
-                        Occurrences:</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Number of
+                        Occurrences:</label
+                    >
                     <div class="col-sm-8">
-                        <input :disabled="true" type="number" class="form-control" id="no_of_occurrences_orig"
-                            placeholder="" v-model="species.distribution.number_of_occurrences" />
+                        <input
+                            id="no_of_occurrences_orig"
+                            v-model="species.distribution.number_of_occurrences"
+                            :disabled="true"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Number of Occurrences:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Number of Occurrences:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="no_of_occurrences"
-                        placeholder="" v-model="species_community.distribution.number_of_occurrences" />
+                    <input
+                        id="no_of_occurrences"
+                        v-model="
+                            species_community.distribution.number_of_occurrences
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-3">
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="true" class="noo_auto form-check-input"
-                            name="noo_auto" v-model="species_community.distribution.noo_auto">
+                        <input
+                            v-model="species_community.distribution.noo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="true"
+                            class="noo_auto form-check-input"
+                            name="noo_auto"
+                        />
                         <label class="form-check-label">auto</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="false" class="noo_auto form-check-input"
-                            name="noo_auto" v-model="species_community.distribution.noo_auto">
+                        <input
+                            v-model="species_community.distribution.noo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="false"
+                            class="noo_auto form-check-input"
+                            name="noo_auto"
+                        />
                         <label class="form-check-label">manual</label>
                     </div>
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Extent of Occurrences
-                        (km2):</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Extent of Occurrences
+                        (km2):</label
+                    >
                     <div class="col-sm-8">
-                        <input :disabled="true" type="number" class="form-control" id="extent_of_occurrence_orig"
-                            placeholder="" v-model="species.distribution.extent_of_occurrences" />
+                        <input
+                            id="extent_of_occurrence_orig"
+                            v-model="species.distribution.extent_of_occurrences"
+                            :disabled="true"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Extent of Occurrence (km2):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Extent of Occurrence (km2):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="extent_of_occurrence"
-                        placeholder="" v-model="species_community.distribution.extent_of_occurrences" />
+                    <input
+                        id="extent_of_occurrence"
+                        v-model="
+                            species_community.distribution.extent_of_occurrences
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-3">
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="true" class="eoo_auto form-check-input"
-                            name="eoo_auto" v-model="species_community.distribution.eoo_auto">
+                        <input
+                            v-model="species_community.distribution.eoo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="true"
+                            class="eoo_auto form-check-input"
+                            name="eoo_auto"
+                        />
                         <label class="form-check-label">auto</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="false" class="eoo_auto form-check-input"
-                            name="eoo_auto" v-model="species_community.distribution.eoo_auto">
+                        <input
+                            v-model="species_community.distribution.eoo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="false"
+                            class="eoo_auto form-check-input"
+                            name="eoo_auto"
+                        />
                         <label class="form-check-label">manual</label>
                     </div>
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Actual Area of
-                        Occupancy<br>(km2):</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Actual Area of
+                        Occupancy<br />(km2):</label
+                    >
                     <div class="col-sm-8">
-                        <input :disabled="true" type="number" class="form-control" id="area_of_occupancy_actual_orig"
-                            placeholder="" v-model="species.distribution.area_of_occupancy_actual" />
+                        <input
+                            id="area_of_occupancy_actual_orig"
+                            v-model="
+                                species.distribution.area_of_occupancy_actual
+                            "
+                            :disabled="true"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Actual Area of Occupancy<br>(km2):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Actual Area of Occupancy<br />(km2):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="area_of_occupancy_actual"
-                        placeholder="" v-model="species_community.distribution.area_of_occupancy_actual" />
+                    <input
+                        id="area_of_occupancy_actual"
+                        v-model="
+                            species_community.distribution
+                                .area_of_occupancy_actual
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-3">
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="true" class="aoo_actual_auto form-check-input"
-                            name="aoo_actual_auto" v-model="species_community.distribution.aoo_actual_auto">
+                        <input
+                            v-model="
+                                species_community.distribution.aoo_actual_auto
+                            "
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="true"
+                            class="aoo_actual_auto form-check-input"
+                            name="aoo_actual_auto"
+                        />
                         <label class="form-check-label">auto</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="false"
-                            class="aoo_actual_auto form-check-input" name="aoo_actual_auto"
-                            v-model="species_community.distribution.aoo_actual_auto">
+                        <input
+                            v-model="
+                                species_community.distribution.aoo_actual_auto
+                            "
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="false"
+                            class="aoo_actual_auto form-check-input"
+                            name="aoo_actual_auto"
+                        />
                         <label class="form-check-label">manual</label>
                     </div>
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Area of
-                        Occupancy<br>(km2):</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Area of Occupancy<br />(km2):</label
+                    >
                     <div class="col-sm-8">
-                        <input :disabled="true" type="number" class="form-control" id="area_of_occupany_orig"
-                            placeholder="" v-model="species.distribution.area_of_occupancy" />
+                        <input
+                            id="area_of_occupany_orig"
+                            v-model="species.distribution.area_of_occupancy"
+                            :disabled="true"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Area of Occupancy<br>(2km x 2km):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Area of Occupancy<br />(2km x 2km):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="area_of_occupany"
-                        placeholder="" v-model="species_community.distribution.area_of_occupancy" />
+                    <input
+                        id="area_of_occupany"
+                        v-model="
+                            species_community.distribution.area_of_occupancy
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Number of IUCN
-                        Locations:</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Number of IUCN
+                        Locations:</label
+                    >
                     <div class="col-sm-8">
-                        <input :disabled="true" type="number" class="form-control" id="no_of_iucn_locations"
-                            placeholder="" v-model="species.distribution.number_of_iucn_locations" />
+                        <input
+                            id="no_of_iucn_locations"
+                            v-model="
+                                species.distribution.number_of_iucn_locations
+                            "
+                            :disabled="true"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Number of IUCN Locations:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Number of IUCN Locations:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="no_of_iucn_locations"
-                        placeholder="" v-model="species_community.distribution.number_of_iucn_locations" />
+                    <input
+                        id="no_of_iucn_locations"
+                        v-model="
+                            species_community.distribution
+                                .number_of_iucn_locations
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
@@ -1240,59 +1552,129 @@
             </div>
 
         </FormSection> -->
-        <FormSection :formCollapse="false" label="General" :Index="generalBody">
+        <FormSection
+            :form-collapse="false"
+            label="General"
+            :Index="generalBody"
+        >
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Department File
-                        Numbers:</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Department File
+                        Numbers:</label
+                    >
                     <div class="col-sm-8">
-                        <input :disabled="true" type="text" class="form-control" id="department_file_numbers"
-                            placeholder="" v-model="species.department_file_numbers" />
+                        <input
+                            id="department_file_numbers"
+                            v-model="species.department_file_numbers"
+                            :disabled="true"
+                            type="text"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
                     <div class="col-sm-1">
                         <!-- checkInput(checkbox_name,checkbox_id , v-model object attribute of this field) -->
-                        <input class="form-check-input" type="checkbox" name="dept_file_chk"
+                        <input
                             :id="'dept_file_chk' + species.id"
-                            @change="checkDistributionInput('dept_file_chk', 'dept_file_chk' + species.id, 'department_file_numbers', species.department_file_numbers)" />
+                            class="form-check-input"
+                            type="checkbox"
+                            name="dept_file_chk"
+                            @change="
+                                checkDistributionInput(
+                                    'dept_file_chk',
+                                    'dept_file_chk' + species.id,
+                                    'department_file_numbers',
+                                    species.department_file_numbers
+                                )
+                            "
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Department File Numbers:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Department File Numbers:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="department_file_numbers"
-                        placeholder="" v-model="species_community.department_file_numbers" />
+                    <input
+                        id="department_file_numbers"
+                        v-model="species_community.department_file_numbers"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Last data curration date: </label>
+                <label for="" class="col-sm-3 control-label"
+                    >Last data curration date:
+                </label>
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="date" class="form-control" name="last_data_curration_date"
-                        ref="last_data_curration_date" @change="checkDate()"
-                        v-model="species_community.last_data_curration_date" />
+                    <input
+                        ref="last_data_curration_date"
+                        v-model="species_community.last_data_curration_date"
+                        :disabled="isReadOnly"
+                        type="date"
+                        class="form-control"
+                        name="last_data_curration_date"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div>
-                <div class="row mb-3" v-for="(species, index) in original_species_combine_list">
-                    <label for="" class="col-sm-3 control-label">{{ species.species_number }} Comment:</label>
+                <div
+                    v-for="(species, index) in original_species_combine_list"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-3 control-label"
+                        >{{ species.species_number }} Comment:</label
+                    >
                     <div class="col-sm-8">
-                        <textarea :disabled="true" class="form-control" rows="3" id="comment" placeholder=""
-                            v-model="species.comment" />
+                        <textarea
+                            id="comment"
+                            v-model="species.comment"
+                            :disabled="true"
+                            class="form-control"
+                            rows="3"
+                            placeholder=""
+                        />
                     </div>
                     <div class="col-sm-1">
                         <!-- checkInput(checkbox_name,checkbox_id , v-model object attribute of this field, value) -->
-                        <input class="form-check-input" type="checkbox" name="comment_chk"
+                        <input
                             :id="'comment_chk' + species.id"
-                            @change="checkCommentInput('comment_chk', 'comment_chk' + species.id, 'comment', species.comment)" />
+                            class="form-check-input"
+                            type="checkbox"
+                            name="comment_chk"
+                            @change="
+                                checkCommentInput(
+                                    'comment_chk',
+                                    'comment_chk' + species.id,
+                                    'comment',
+                                    species.comment
+                                )
+                            "
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Comment:</label>
                 <div class="col-sm-8">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="3" id="comment" placeholder=""
-                        v-model="species_community.comment" />
+                    <textarea
+                        id="comment"
+                        v-model="species_community.comment"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
@@ -1300,44 +1682,50 @@
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'SpeciesCombineProfile',
+    components: {
+        FormSection,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         original_species_combine_list: {
             type: Array,
-            required: true
+            required: true,
         },
     },
     data: function () {
         let vm = this;
         return {
-            scientific_name_lookup: 'scientific_name_lookup' + vm.species_community.id,
-            select_scientific_name: "select_scientific_name" + vm.species_community.id,
-            select_flowering_period: "select_flowering_period" + vm.species_community.id,
-            select_flowering_period_readonly: "select_flowering_period_readonly" + vm.species_community.id,
-            select_fruiting_period: "select_fruiting_period" + vm.species_community.id,
-            select_fruiting_period_readonly: "select_fruiting_period_readonly" + vm.species_community.id,
-            select_breeding_period: "select_breeding_period" + vm.species_community.id,
-            select_breeding_period_readonly: "select_breeding_period_readonly" + vm.species_community.id,
-            select_regions: "select_regions" + vm.species_community.id,
-            select_districts: "select_districts" + vm.species_community.id,
+            scientific_name_lookup:
+                'scientific_name_lookup' + vm.species_community.id,
+            select_scientific_name:
+                'select_scientific_name' + vm.species_community.id,
+            select_flowering_period:
+                'select_flowering_period' + vm.species_community.id,
+            select_flowering_period_readonly:
+                'select_flowering_period_readonly' + vm.species_community.id,
+            select_fruiting_period:
+                'select_fruiting_period' + vm.species_community.id,
+            select_fruiting_period_readonly:
+                'select_fruiting_period_readonly' + vm.species_community.id,
+            select_breeding_period:
+                'select_breeding_period' + vm.species_community.id,
+            select_breeding_period_readonly:
+                'select_breeding_period_readonly' + vm.species_community.id,
+            select_regions: 'select_regions' + vm.species_community.id,
+            select_districts: 'select_districts' + vm.species_community.id,
             taxonBody: 'taxonBody' + vm._uid,
             distributionBody: 'distributionBody' + vm._uid,
             conservationBody: 'conservationBody' + vm._uid,
             generalBody: 'generalBody' + vm._uid,
             //---to show fields related to Fauna
-            isFauna: vm.species_community.group_type === "fauna" ? true : false,
+            isFauna: vm.species_community.group_type === 'fauna' ? true : false,
             //----list of values dictionary
             species_profile_dict: {},
             //scientific_name_list: [],
@@ -1358,80 +1746,168 @@ export default {
             genus: null,
             name_authority: null,
             name_comments: null,
-            period_list: [{ id: 1, name: 'January' },
-            { id: 2, name: 'February' },
-            { id: 3, name: 'March' },
-            { id: 4, name: 'April' },
-            { id: 5, name: 'May' },
-            { id: 6, name: 'June' },
-            { id: 7, name: 'July' },
-            { id: 8, name: 'August' },
-            { id: 9, name: 'September' },
-            { id: 10, name: 'October' },
-            { id: 11, name: 'November' },
-            { id: 12, name: 'December' },
+            period_list: [
+                { id: 1, name: 'January' },
+                { id: 2, name: 'February' },
+                { id: 3, name: 'March' },
+                { id: 4, name: 'April' },
+                { id: 5, name: 'May' },
+                { id: 6, name: 'June' },
+                { id: 7, name: 'July' },
+                { id: 8, name: 'August' },
+                { id: 9, name: 'September' },
+                { id: 10, name: 'October' },
+                { id: 11, name: 'November' },
+                { id: 12, name: 'December' },
             ],
             minimum_fire_interval_range_new: false,
             average_lifespan_range_new: false,
             generation_length_range_new: false,
             time_to_maturity_range_new: false,
-            interval_choice: [{ id: 1, name: 'year/s' },
-            { id: 2, name: 'month/s' }
+            interval_choice: [
+                { id: 1, name: 'year/s' },
+                { id: 2, name: 'month/s' },
             ],
             errors: {
                 minimum_fire_interval_error: null,
                 average_lifespan_error: null,
                 generation_length_error: null,
-                time_to_maturity_error: null
-            }
-        }
-    },
-    components: {
-        FormSection,
+                time_to_maturity_error: null,
+            },
+        };
     },
     computed: {
         isReadOnly: function () {
             let action = this.$route.query.action;
-            if (action === "edit" && this.species_community && this.species_community.user_edit_mode) {
+            if (
+                action === 'edit' &&
+                this.species_community &&
+                this.species_community.user_edit_mode
+            ) {
                 return false;
-            }
-            else {
+            } else {
                 return this.species_community.readonly;
             }
         },
     },
     watch: {
-        "species_community.distribution.noo_auto": function (newVal) {
+        'species_community.distribution.noo_auto': function (newVal) {
             let vm = this;
             var selectedValue = newVal;
-            if (selectedValue === "true") {
-                vm.species_community.distribution.number_of_occurrences = vm.species_community.distribution.cal_number_of_occurrences;
-            }
-            else {
+            if (selectedValue === 'true') {
+                vm.species_community.distribution.number_of_occurrences =
+                    vm.species_community.distribution.cal_number_of_occurrences;
+            } else {
                 vm.species_community.distribution.number_of_occurrences = null;
             }
         },
-        "species_community.distribution.eoo_auto": function (newVal) {
+        'species_community.distribution.eoo_auto': function (newVal) {
             let vm = this;
             var selectedValue = newVal;
-            if (selectedValue === "true") {
-                vm.species_community.distribution.extent_of_occurrences = vm.species_community.distribution.cal_extent_of_occurrences;
-            }
-            else {
+            if (selectedValue === 'true') {
+                vm.species_community.distribution.extent_of_occurrences =
+                    vm.species_community.distribution.cal_extent_of_occurrences;
+            } else {
                 vm.species_community.distribution.extent_of_occurrences = null;
             }
         },
-        "species_community.distribution.aoo_actual_auto": function (newVal) {
+        'species_community.distribution.aoo_actual_auto': function (newVal) {
             let vm = this;
             var selectedValue = newVal;
-            if (selectedValue === "true") {
-                vm.species_community.distribution.area_of_occupancy_actual = vm.species_community.distribution.cal_area_of_occupancy_actual;
-            }
-            else {
-                vm.species_community.distribution.area_of_occupancy_actual = null;
+            if (selectedValue === 'true') {
+                vm.species_community.distribution.area_of_occupancy_actual =
+                    vm.species_community.distribution.cal_area_of_occupancy_actual;
+            } else {
+                vm.species_community.distribution.area_of_occupancy_actual =
+                    null;
             }
         },
     },
+    created: async function () {
+        let vm = this;
+        //----set the distribution field values if auto onload
+        if (vm.species_community.distribution.noo_auto == true) {
+            vm.species_community.distribution.number_of_occurrences =
+                vm.species_community.distribution.cal_number_of_occurrences;
+        }
+        if (vm.species_community.distribution.eoo_auto == true) {
+            vm.species_community.distribution.extent_of_occurrences =
+                vm.species_community.distribution.cal_extent_of_occurrences;
+        }
+        if (vm.species_community.distribution.aoo_actual_auto == true) {
+            vm.species_community.distribution.area_of_occupancy_actual =
+                vm.species_community.distribution.cal_area_of_occupancy_actual;
+        }
+        if (
+            vm.species_community.conservation_attributes
+                .minimum_fire_interval_to != null &&
+            vm.species_community.conservation_attributes
+                .minimum_fire_interval_to != '' &&
+            vm.species_community.conservation_attributes
+                .minimum_fire_interval_to != undefined
+        ) {
+            vm.minimum_fire_interval_range_new = true;
+        }
+        if (
+            vm.species_community.conservation_attributes.average_lifespan_to !=
+                null &&
+            vm.species_community.conservation_attributes.average_lifespan_to !=
+                '' &&
+            vm.species_community.conservation_attributes.average_lifespan_to !=
+                undefined
+        ) {
+            vm.average_lifespan_range_new = true;
+        }
+        if (
+            vm.species_community.conservation_attributes.generation_length_to !=
+                null &&
+            vm.species_community.conservation_attributes.generation_length_to !=
+                '' &&
+            vm.species_community.conservation_attributes.generation_length_to !=
+                undefined
+        ) {
+            vm.generation_length_range_new = true;
+        }
+        if (
+            vm.species_community.conservation_attributes.time_to_maturity_to !=
+                null &&
+            vm.species_community.conservation_attributes.time_to_maturity_to !=
+                '' &&
+            vm.species_community.conservation_attributes.time_to_maturity_to !=
+                undefined
+        ) {
+            vm.time_to_maturity_range_new = true;
+        }
+        //------fetch list of values
+        const response = await fetch('/api/species_profile_dict/');
+        vm.species_profile_dict = await response.json();
+        vm.flora_recruitment_type_list =
+            vm.species_profile_dict.flora_recruitment_type_list;
+        vm.flora_recruitment_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.root_morphology_list = vm.species_profile_dict.root_morphology_list;
+        vm.root_morphology_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.post_fire_habitatat_interactions_list =
+            vm.species_profile_dict.post_fire_habitatat_interactions_list;
+        vm.post_fire_habitatat_interactions_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.fetchRegions();
+    },
+    mounted: function () {
+        let vm = this;
+        vm.eventListeners();
+        vm.initialiseScientificNameLookup();
+        vm.loadTaxonomydetails();
+        vm.initialiseRegionSelect();
+        vm.initialiseDistrictSelect();
+    },
     methods: {
         filterDistrict: function (event) {
             this.$nextTick(() => {
@@ -1439,11 +1915,13 @@ export default {
                     this.species_community.district_id = null; //-----to remove the previous selection
                 }
                 this.filtered_district_list = [];
-                this.filtered_district_list = [{
-                    id: null,
-                    name: "",
-                    region_id: null,
-                }];
+                this.filtered_district_list = [
+                    {
+                        id: null,
+                        name: '',
+                        region_id: null,
+                    },
+                ];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
                     if (choice.region_id === this.species_community.region_id) {
@@ -1455,38 +1933,40 @@ export default {
         checkDate: function () {
             let vm = this;
             if (vm.$refs.last_data_curration_date.value) {
-                vm.species_community.last_data_curration_date = vm.$refs.last_data_curration_date.value;
-            }
-            else {
+                vm.species_community.last_data_curration_date =
+                    vm.$refs.last_data_curration_date.value;
+            } else {
                 vm.species_community.last_data_curration_date = null;
             }
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_scientific_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.species_community.group_type_id,
-                            species_profile: true // This parameter makes sure the query only returns records that don't yet have a species profile
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id:
+                                    vm.species_community.group_type_id,
+                                species_profile: true, // This parameter makes sure the query only returns records that don't yet have a species profile
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
-                    vm.species_community.taxonomy_id = data
+                    vm.species_community.taxonomy_id = data;
                     vm.species_community.taxonomy_details = e.params.data;
                     vm.species_display = e.params.data.scientific_name;
                     vm.common_name = e.params.data.common_name;
@@ -1497,22 +1977,24 @@ export default {
                     vm.genus = e.params.data.genera_name;
                     vm.name_authority = e.params.data.name_authority;
                     vm.name_comments = e.params.data.name_comments;
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.taxonomy_id = ''
+                    vm.species_community.taxonomy_id = '';
                     vm.species_display = '';
                     vm.common_name = '';
                     vm.taxon_name_id = '';
                     vm.taxon_previous_name = '';
                     vm.phylogenetic_group = '';
-                    vm.family = '',
-                        vm.genus = '',
-                        vm.name_authority = '';
+                    (vm.family = ''), (vm.genus = ''), (vm.name_authority = '');
                     vm.name_comments = '';
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
@@ -1520,58 +2002,101 @@ export default {
         loadTaxonomydetails: function () {
             let vm = this;
             if (vm.species_community.taxonomy_details != null) {
-                vm.species_display = vm.species_community.taxonomy_details.scientific_name;
-                vm.common_name = vm.species_community.taxonomy_details.common_name;
-                vm.taxon_name_id = vm.species_community.taxonomy_details.taxon_name_id;
-                vm.taxon_previous_name = vm.species_community.taxonomy_details.taxon_previous_name;
-                vm.phylogenetic_group = vm.species_community.taxonomy_details.phylogenetic_group;
+                vm.species_display =
+                    vm.species_community.taxonomy_details.scientific_name;
+                vm.common_name =
+                    vm.species_community.taxonomy_details.common_name;
+                vm.taxon_name_id =
+                    vm.species_community.taxonomy_details.taxon_name_id;
+                vm.taxon_previous_name =
+                    vm.species_community.taxonomy_details.taxon_previous_name;
+                vm.phylogenetic_group =
+                    vm.species_community.taxonomy_details.phylogenetic_group;
                 vm.family = vm.species_community.taxonomy_details.family_name;
                 vm.genus = vm.species_community.taxonomy_details.genera_name;
-                vm.name_authority = vm.species_community.taxonomy_details.name_authority;
-                vm.name_comments = vm.species_community.taxonomy_details.name_comments;
+                vm.name_authority =
+                    vm.species_community.taxonomy_details.name_authority;
+                vm.name_comments =
+                    vm.species_community.taxonomy_details.name_comments;
             }
         },
         //--------on/off checkbox value to new species--------
         checkHabitatForm: function () {
-            if ($("#habitat_frm_chk" + this.species_community.id).is(':checked') == true) {
-                this.species_community.conservation_attributes.habitat_growth_form = this.species_original.conservation_attributes.habitat_growth_form;
+            if (
+                $('#habitat_frm_chk' + this.species_community.id).is(
+                    ':checked'
+                ) == true
+            ) {
+                this.species_community.conservation_attributes.habitat_growth_form =
+                    this.species_original.conservation_attributes.habitat_growth_form;
             } else {
-                this.species_community.conservation_attributes.habitat_growth_form = null;
+                this.species_community.conservation_attributes.habitat_growth_form =
+                    null;
             }
         },
-        checkConservationInput: function (chkbox_name, chkbox_id, obj_field, value, select2_ref = "", valueTo = null, valueChoice = null) {
-            const interval_fields = ['minimum_fire_interval', 'average_lifespan', 'generation_length', 'time_to_maturity'];
+        checkConservationInput: function (
+            chkbox_name,
+            chkbox_id,
+            obj_field,
+            value,
+            select2_ref = '',
+            valueTo = null,
+            valueChoice = null
+        ) {
+            const interval_fields = [
+                'minimum_fire_interval',
+                'average_lifespan',
+                'generation_length',
+                'time_to_maturity',
+            ];
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox_id).is(':checked') == true) {
+            if ($('#' + chkbox_id).is(':checked') == true) {
                 if (interval_fields.includes(obj_field)) {
-                    this.species_community.conservation_attributes[obj_field + '_from'] = value;
-                    this.species_community.conservation_attributes[obj_field + '_to'] = valueTo;
-                    this.species_community.conservation_attributes[obj_field + '_choice'] = valueChoice;
-                    if (this.species_community.conservation_attributes[obj_field + '_to'] != null) {
+                    this.species_community.conservation_attributes[
+                        obj_field + '_from'
+                    ] = value;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_to'
+                    ] = valueTo;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_choice'
+                    ] = valueChoice;
+                    if (
+                        this.species_community.conservation_attributes[
+                            obj_field + '_to'
+                        ] != null
+                    ) {
                         this[obj_field + '_range_new'] = true;
-                    }
-                    else {
+                    } else {
                         this[obj_field + '_range_new'] = false;
                     }
-                }
-                else {
-                    this.species_community.conservation_attributes[obj_field] = value;
-                    if (select2_ref != "") {
-                        $(this.$refs[select2_ref]).val(value).trigger("change");
+                } else {
+                    this.species_community.conservation_attributes[obj_field] =
+                        value;
+                    if (select2_ref != '') {
+                        $(this.$refs[select2_ref]).val(value).trigger('change');
                     }
                 }
             } else {
                 if (interval_fields.includes(obj_field)) {
-                    this.species_community.conservation_attributes[obj_field + '_from'] = null;
-                    this.species_community.conservation_attributes[obj_field + '_to'] = null;
-                    this.species_community.conservation_attributes[obj_field + '_choice'] = null;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_from'
+                    ] = null;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_to'
+                    ] = null;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_choice'
+                    ] = null;
                     this[obj_field + '_range_new'] = false;
-                }
-                else {
-                    this.species_community.conservation_attributes[obj_field] = null;
-                    if (select2_ref != "") {
-                        $(this.$refs[select2_ref]).val("").trigger("change");
-                        this.species_community.conservation_attributes[obj_field] = [];
+                } else {
+                    this.species_community.conservation_attributes[obj_field] =
+                        null;
+                    if (select2_ref != '') {
+                        $(this.$refs[select2_ref]).val('').trigger('change');
+                        this.species_community.conservation_attributes[
+                            obj_field
+                        ] = [];
                     }
                 }
             }
@@ -1583,9 +2108,14 @@ export default {
                 }
             }
         },
-        checkDistributionInput: function (chkbox_name, chkbox_id, obj_field, value) {
+        checkDistributionInput: function (
+            chkbox_name,
+            chkbox_id,
+            obj_field,
+            value
+        ) {
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox_id).is(':checked') == true) {
+            if ($('#' + chkbox_id).is(':checked') == true) {
                 this.species_community.distribution[obj_field] = value;
             } else {
                 this.species_community.distribution[obj_field] = null;
@@ -1600,7 +2130,7 @@ export default {
         },
         checkCommentInput: function (chkbox_name, chkbox_id, obj_field, value) {
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox_id).is(':checked') == true) {
+            if ($('#' + chkbox_id).is(':checked') == true) {
                 this.species_community[obj_field] = value;
             } else {
                 this.species_community[obj_field] = null;
@@ -1616,161 +2146,187 @@ export default {
         //----------------------------------------------------------------
         eventListeners: function () {
             let vm = this;
-            $(vm.$refs.flowering_period_select).select2({
-                dropdownParent: $("#" + vm.select_flowering_period),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Flowering Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.flowering_period_select)
+                .select2({
+                    dropdownParent: $('#' + vm.select_flowering_period),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Flowering Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.flowering_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.flowering_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.flowering_period = selected.val();
+                    vm.species_community.conservation_attributes.flowering_period =
+                        selected.val();
                 });
             $(vm.$refs.flowering_period_select_readonly).select2({
-                dropdownParent: $("#" + vm.select_flowering_period_readonly),
-                "theme": "bootstrap-5",
+                dropdownParent: $('#' + vm.select_flowering_period_readonly),
+                theme: 'bootstrap-5',
                 allowClear: true,
-                placeholder: "Select Flowering Period",
+                placeholder: 'Select Flowering Period',
                 multiple: true,
             });
-            $(vm.$refs.fruiting_period_select).select2({
-                dropdownParent: $("#" + vm.select_fruiting_period),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Fruiting Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.fruiting_period_select)
+                .select2({
+                    dropdownParent: $('#' + vm.select_fruiting_period),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Fruiting Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.fruiting_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.fruiting_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.fruiting_period = selected.val();
+                    vm.species_community.conservation_attributes.fruiting_period =
+                        selected.val();
                 });
             $(vm.$refs.fruiting_period_select_readonly).select2({
-                dropdownParent: $("#" + vm.select_fruiting_period_readonly),
-                "theme": "bootstrap-5",
+                dropdownParent: $('#' + vm.select_fruiting_period_readonly),
+                theme: 'bootstrap-5',
                 allowClear: true,
-                placeholder: "Select Fruiting Period",
+                placeholder: 'Select Fruiting Period',
                 multiple: true,
             });
-            $(vm.$refs.breeding_period_select).select2({
-                dropdownParent: $("#" + vm.select_breeding_period),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Breeding Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.breeding_period_select)
+                .select2({
+                    dropdownParent: $('#' + vm.select_breeding_period),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Breeding Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.breeding_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.breeding_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.breeding_period = selected.val();
+                    vm.species_community.conservation_attributes.breeding_period =
+                        selected.val();
                 });
             $(vm.$refs.breeding_period_select_readonly).select2({
-                dropdownParent: $("#" + vm.select_breeding_period_readonly),
-                "theme": "bootstrap-5",
+                dropdownParent: $('#' + vm.select_breeding_period_readonly),
+                theme: 'bootstrap-5',
                 allowClear: true,
-                placeholder: "Select Breeding Period",
+                placeholder: 'Select Breeding Period',
                 multiple: true,
             });
         },
         intervalMonthsComputedOriginal: function (months, intervalChoice) {
-
             const totalMonths = parseInt(months);
             if (totalMonths > 12 && intervalChoice == 2) {
                 const years = Math.floor(totalMonths / 12);
                 const months = totalMonths % 12;
-                return years + " year/s " + months + " month/s";
-            }
-            else {
-                return ""
+                return years + ' year/s ' + months + ' month/s';
+            } else {
+                return '';
             }
         },
         intervalMonthsComputedNew: function (field_from, field_choice) {
-
-            const totalMonths = parseInt(this.species_community.conservation_attributes[field_from]);
-            const intervalChoice = this.species_community.conservation_attributes[field_choice];
+            const totalMonths = parseInt(
+                this.species_community.conservation_attributes[field_from]
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes[field_choice];
             // const isIntervalRange = this.minimum_fire_interval_range_new;
 
             // if(totalMonths > 12 && intervalChoice == 2 && isIntervalRange == false){
             if (totalMonths > 12 && intervalChoice == 2) {
                 const years = Math.floor(totalMonths / 12);
                 const months = totalMonths % 12;
-                return years + " year/s " + months + " month/s";
-            }
-            else {
-                return ""
+                return years + ' year/s ' + months + ' month/s';
+            } else {
+                return '';
             }
         },
         handleMinimumFireIntervalRange: function () {
             if (this.minimum_fire_interval_range_new == false) {
-                this.species_community.conservation_attributes.minimum_fire_interval_to = null;
+                this.species_community.conservation_attributes.minimum_fire_interval_to =
+                    null;
             }
         },
         handleAverageLifespanRange: function () {
             if (this.average_lifespan_range_new == false) {
-                this.species_community.conservation_attributes.average_lifespan_to = null;
+                this.species_community.conservation_attributes.average_lifespan_to =
+                    null;
             }
         },
         handleGenerationLengthRange: function () {
             if (this.generation_length_range_new == false) {
-                this.species_community.conservation_attributes.generation_length_to = null;
+                this.species_community.conservation_attributes.generation_length_to =
+                    null;
             }
         },
         handleTimeToMaturityRange: function () {
             if (this.time_to_maturity_range_new == false) {
-                this.species_community.conservation_attributes.time_to_maturity_to = null;
+                this.species_community.conservation_attributes.time_to_maturity_to =
+                    null;
             }
         },
-        validateRange: function (field_from, field_to, field_choice, field_error) {
-            const rangeFrom = parseInt(this.species_community.conservation_attributes[field_from]);
-            const rangeTo = parseInt(this.species_community.conservation_attributes[field_to]);
-            const intervalChoice = this.species_community.conservation_attributes[field_choice];
-            if ((rangeFrom != null || rangeTo != null) && intervalChoice == null) {
-                this.errors[field_error] = "Please select years/months";
-            }
-            else if (rangeFrom >= rangeTo) {
-                this.errors[field_error] = "Please enter a valid range";
-            }
-            else {
-                this.errors[field_error] = "";
+        validateRange: function (
+            field_from,
+            field_to,
+            field_choice,
+            field_error
+        ) {
+            const rangeFrom = parseInt(
+                this.species_community.conservation_attributes[field_from]
+            );
+            const rangeTo = parseInt(
+                this.species_community.conservation_attributes[field_to]
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes[field_choice];
+            if (
+                (rangeFrom != null || rangeTo != null) &&
+                intervalChoice == null
+            ) {
+                this.errors[field_error] = 'Please select years/months';
+            } else if (rangeFrom >= rangeTo) {
+                this.errors[field_error] = 'Please enter a valid range';
+            } else {
+                this.errors[field_error] = '';
             }
         },
         isOriginalRangeChecked: function (fullId, id, field) {
-            const species_obj = this.original_species_combine_list.find((i) => i.id === id);
+            const species_obj = this.original_species_combine_list.find(
+                (i) => i.id === id
+            );
             const valueTo = species_obj.conservation_attributes[field];
-            if (valueTo != null && valueTo != "" && valueTo != undefined) {
-                $("#" + fullId).prop("checked", true);
+            if (valueTo != null && valueTo != '' && valueTo != undefined) {
+                $('#' + fullId).prop('checked', true);
                 return true;
-            }
-            else {
-                $("#" + fullId).prop("checked", false);
+            } else {
+                $('#' + fullId).prop('checked', false);
                 return false;
             }
         },
         getselectedRegionNames(species) {
             // Filter regions_list to get only the selected regions
-            let selected_region = species.regions
-            const selectedRegions = this.region_list.filter(region => selected_region.includes(region.value));
+            let selected_region = species.regions;
+            const selectedRegions = this.region_list.filter((region) =>
+                selected_region.includes(region.value)
+            );
             // Map the selected regions to their names and join them with commas
-            return selectedRegions.map(region => region.text).join(', ');
+            return selectedRegions.map((region) => region.text).join(', ');
         },
         getselectedDistrictNames(species) {
             // Initialize an empty array to store the names of selected districts
             let selectedNames = [];
             // Iterate over each region
-            this.region_list.forEach(region => {
+            this.region_list.forEach((region) => {
                 // Filter the districts of the current region
-                region.districts.forEach(district => {
+                region.districts.forEach((district) => {
                     if (species.districts.includes(district.id)) {
                         selectedNames.push(district.name);
                     }
@@ -1779,19 +2335,32 @@ export default {
             // Join the names with commas
             return selectedNames.join(', ');
         },
-        checkRegionDistrictInput: function (chkbox, obj_field, species, select2_ref = "") {
+        checkRegionDistrictInput: function (
+            chkbox,
+            obj_field,
+            species,
+            select2_ref = ''
+        ) {
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox).is(':checked') == true) {
+            if ($('#' + chkbox).is(':checked') == true) {
                 this.species_community[obj_field] = species[obj_field];
-                if (select2_ref != "") {
-                    $(this.$refs[select2_ref]).val(this.species_community[obj_field]).trigger("change");
-                    this.chainedSelectDistricts(this.species_community.regions, "select");
+                if (select2_ref != '') {
+                    $(this.$refs[select2_ref])
+                        .val(this.species_community[obj_field])
+                        .trigger('change');
+                    this.chainedSelectDistricts(
+                        this.species_community.regions,
+                        'select'
+                    );
                     this.species_community[obj_field] = species[obj_field];
                 }
             } else {
-                if (select2_ref != "") {
-                    $(this.$refs[select2_ref]).val("").trigger("change");
-                    this.chainedSelectDistricts(this.species_community.regions, "deselect");
+                if (select2_ref != '') {
+                    $(this.$refs[select2_ref]).val('').trigger('change');
+                    this.chainedSelectDistricts(
+                        this.species_community.regions,
+                        'deselect'
+                    );
                 }
                 this.species_community[obj_field] = [];
             }
@@ -1799,18 +2368,28 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            fetch(api_endpoints.regions).then(async (response) => {
-                vm.api_regions = await response.json();
-                for (var i = 0; i < vm.api_regions.length; i++) {
-                    this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
-                }
-                // vm.setProposalData2(this.regions);
-                if (vm.species_community.regions) {
-                    vm.chainedSelectDistricts(vm.species_community.regions, "fetch");
+            fetch(api_endpoints.regions).then(
+                async (response) => {
+                    vm.api_regions = await response.json();
+                    for (var i = 0; i < vm.api_regions.length; i++) {
+                        this.region_list.push({
+                            text: vm.api_regions[i].name,
+                            value: vm.api_regions[i].id,
+                            districts: vm.api_regions[i].districts,
+                        });
+                    }
+                    // vm.setProposalData2(this.regions);
+                    if (vm.species_community.regions) {
+                        vm.chainedSelectDistricts(
+                            vm.species_community.regions,
+                            'fetch'
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            })
+            );
         },
         searchList: function (id, search_list) {
             /* Searches for dictionary in list */
@@ -1823,16 +2402,22 @@ export default {
         },
         chainedSelectDistricts: function (regions, action, deselect_region_id) {
             let vm = this;
-            if (action != "fetch") {
+            if (action != 'fetch') {
                 vm.species_community.districts = []; //-----to remove the previous selection
             }
             vm.district_list = [];
             if (regions) {
                 for (let r of regions) {
-                    var api_districts = this.searchList(r, vm.region_list).districts;
+                    var api_districts = this.searchList(
+                        r,
+                        vm.region_list
+                    ).districts;
                     if (api_districts.length > 0) {
                         for (var i = 0; i < api_districts.length; i++) {
-                            this.district_list.push({ text: api_districts[i].name, value: api_districts[i].id });
+                            this.district_list.push({
+                                text: api_districts[i].name,
+                                value: api_districts[i].id,
+                            });
                         }
                     }
                 }
@@ -1840,107 +2425,52 @@ export default {
         },
         initialiseRegionSelect: function () {
             let vm = this;
-            $(vm.$refs.regions_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                dropdownParent: $("#" + vm.select_regions),
-                placeholder: "Select Region",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.regions_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    dropdownParent: $('#' + vm.select_regions),
+                    placeholder: 'Select Region',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "select");
-                }).
-                on("select2:unselect", function (e) {
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'select'
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "deselect");
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'deselect'
+                    );
                 });
         },
         initialiseDistrictSelect: function () {
             let vm = this;
-            $(vm.$refs.districts_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                dropdownParent: $("#" + vm.select_districts),
-                multiple: true,
-                placeholder: "Select District",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.districts_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    dropdownParent: $('#' + vm.select_districts),
+                    multiple: true,
+                    placeholder: 'Select District',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
                 });
         },
     },
-    created: async function () {
-        let vm = this;
-        //----set the distribution field values if auto onload
-        if (vm.species_community.distribution.noo_auto == true) {
-            vm.species_community.distribution.number_of_occurrences = vm.species_community.distribution.cal_number_of_occurrences;
-        }
-        if (vm.species_community.distribution.eoo_auto == true) {
-            vm.species_community.distribution.extent_of_occurrences = vm.species_community.distribution.cal_extent_of_occurrences;
-        }
-        if (vm.species_community.distribution.aoo_actual_auto == true) {
-            vm.species_community.distribution.area_of_occupancy_actual = vm.species_community.distribution.cal_area_of_occupancy_actual;
-        }
-        if (vm.species_community.conservation_attributes.minimum_fire_interval_to != null &&
-            vm.species_community.conservation_attributes.minimum_fire_interval_to != "" &&
-            vm.species_community.conservation_attributes.minimum_fire_interval_to != undefined) {
-            vm.minimum_fire_interval_range_new = true;
-        }
-        if (vm.species_community.conservation_attributes.average_lifespan_to != null &&
-            vm.species_community.conservation_attributes.average_lifespan_to != "" &&
-            vm.species_community.conservation_attributes.average_lifespan_to != undefined) {
-            vm.average_lifespan_range_new = true;
-        }
-        if (vm.species_community.conservation_attributes.generation_length_to != null &&
-            vm.species_community.conservation_attributes.generation_length_to != "" &&
-            vm.species_community.conservation_attributes.generation_length_to != undefined) {
-            vm.generation_length_range_new = true;
-        }
-        if (vm.species_community.conservation_attributes.time_to_maturity_to != null &&
-            vm.species_community.conservation_attributes.time_to_maturity_to != "" &&
-            vm.species_community.conservation_attributes.time_to_maturity_to != undefined) {
-            vm.time_to_maturity_range_new = true;
-        }
-        //------fetch list of values
-        const response = await fetch('/api/species_profile_dict/');
-        vm.species_profile_dict = await response.json();
-        vm.flora_recruitment_type_list = vm.species_profile_dict.flora_recruitment_type_list;
-        vm.flora_recruitment_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.root_morphology_list = vm.species_profile_dict.root_morphology_list;
-        vm.root_morphology_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.post_fire_habitatat_interactions_list = vm.species_profile_dict.post_fire_habitatat_interactions_list;
-        vm.post_fire_habitatat_interactions_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.fetchRegions();
-    },
-    mounted: function () {
-        let vm = this;
-        vm.eventListeners();
-        vm.initialiseScientificNameLookup();
-        vm.loadTaxonomydetails();
-        vm.initialiseRegionSelect();
-        vm.initialiseDistrictSelect();
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -1960,12 +2490,12 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
index 499e27af..3c364719 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
@@ -1,322 +1,367 @@
 <template lang="html">
     <div id="species_split_threats">
-        <FormSection :formCollapse="false" label="Threats" :Index="threatBody">
+        <FormSection :form-collapse="false" label="Threats" :Index="threatBody">
             <form class="form-horizontal" action="index.html" method="post">
                 <div class="col-sm-12 form-check form-check-inline">
-                    <input class="form-check-input" type="radio" :id="'threat_select_all'+species_original.id" name="threatSelect" value="selectAll" @click="selectThreatOption($event)"/>
-                    <label class="form-check-label">Copy all threats from Species {{species_original.species_number}}</label>
+                    <input
+                        :id="'threat_select_all' + species_original.id"
+                        class="form-check-input"
+                        type="radio"
+                        name="threatSelect"
+                        value="selectAll"
+                        @click="selectThreatOption($event)"
+                    />
+                    <label class="form-check-label"
+                        >Copy all threats from Species
+                        {{ species_original.species_number }}</label
+                    >
                 </div>
                 <div class="col-sm-12 form-check form-check-inline mb-3">
-                    <input class="form-check-input" type="radio" :id="'threat_select_individual'+species_original.id" name="threatSelect" value="individual" @click="selectThreatOption($event)"/>
+                    <input
+                        :id="'threat_select_individual' + species_original.id"
+                        class="form-check-input"
+                        type="radio"
+                        name="threatSelect"
+                        value="individual"
+                        @click="selectThreatOption($event)"
+                    />
                     <label class="form-check-label">Decide per threat</label>
                 </div>
                 <div>
-                    <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                    :dtHeaders="threats_headers"/>
+                    <datatable
+                        :id="panelBody"
+                        ref="threats_datatable"
+                        :dt-options="threats_options"
+                        :dt-headers="threats_headers"
+                    />
                 </div>
             </form>
         </FormSection>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-from '@/utils/hooks'
-
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
-        name: 'SpeciesCombineThreats',
-        props:{
-            species_community:{
-                type: Object,
-                required:true
-            },
-            species_original:{
-                type: Object,
-                required:true
-            },
+    name: 'SpeciesCombineThreats',
+    components: {
+        FormSection,
+        datatable,
+    },
+    props: {
+        species_community: {
+            type: Object,
+            required: true,
         },
-        data:function () {
-            let vm = this;
-            return{
-                uuid:0,
-                threatBody: "threatBody"+ vm._uid,
-                panelBody: "species-combine-threats-"+ vm._uid,
-                values:null,
-                // to store all the documents of original on first load.
-                original_species_threats:[],
-                threat_url: api_endpoints.threat,
-                threats_headers:['Number','Category', 'Threat Source', 'Date Observed', 'Threat Agent', 'Comments',
-                                'Current Impact?', 'Potential Impact?','Action'],
-                threats_options:{
-                    autowidth: false,
-                    language:{
-                        processing: constants.DATATABLE_PROCESSING_HTML
+        species_original: {
+            type: Object,
+            required: true,
+        },
+    },
+    data: function () {
+        let vm = this;
+        return {
+            uuid: 0,
+            threatBody: 'threatBody' + vm._uid,
+            panelBody: 'species-combine-threats-' + vm._uid,
+            values: null,
+            // to store all the documents of original on first load.
+            original_species_threats: [],
+            threat_url: api_endpoints.threat,
+            threats_headers: [
+                'Number',
+                'Category',
+                'Threat Source',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Current Impact?',
+                'Potential Impact?',
+                'Action',
+            ],
+            threats_options: {
+                autowidth: false,
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
+                },
+                responsive: true,
+                searching: true,
+                //  to show the "workflow Status","Action" columns always in the last position
+                columnDefs: [
+                    { responsivePriority: 1, targets: 0 },
+                    { responsivePriority: 2, targets: -1 },
+                ],
+                ajax: {
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.species,
+                        vm.species_original.id + '/threats'
+                    ),
+                    dataSrc: '',
+                },
+                order: [[0, 'desc']],
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
+                buttons: [
+                    {
+                        extend: 'excel',
+                        title: 'Boranga Species Combine Threats Excel Export',
+                        text: '<i class="fa-solid fa-download"></i> Excel',
+                        className: 'btn btn-primary me-2 rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    responsive: true,
-                    searching: true,
-                    //  to show the "workflow Status","Action" columns always in the last position
-                    columnDefs: [
-                        { responsivePriority: 1, targets: 0 },
-                        { responsivePriority: 2, targets: -1 },
-                    ],
-                    ajax:{
-                        "url": helpers.add_endpoint_json(api_endpoints.species,vm.species_original.id+'/threats'),
-                        "dataSrc": ''
+                    {
+                        extend: 'csv',
+                        title: 'Boranga Species Combine Threats CSV Export',
+                        text: '<i class="fa-solid fa-download"></i> CSV',
+                        className: 'btn btn-primary rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    order: [[0, 'desc']],
-                    dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                     "<'row'<'col-sm-12'tr>>" +
-                     "<'d-flex align-items-center'<'me-auto'i>p>",
-                    buttons:[
-                        {
-                            extend: 'excel',
-                            title: 'Boranga Species Combine Threats Excel Export',
-                            text: '<i class="fa-solid fa-download"></i> Excel',
-                            className: 'btn btn-primary me-2 rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                ],
+                columns: [
+                    {
+                        data: 'threat_number',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_number;
+                            } else {
+                                return '<s>' + full.threat_number + '</s>';
                             }
                         },
-                        {
-                            extend: 'csv',
-                            title: 'Boranga Species Combine Threats CSV Export',
-                            text: '<i class="fa-solid fa-download"></i> CSV',
-                            className: 'btn btn-primary rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                    },
+                    {
+                        data: 'threat_category',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_category;
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
-                    ],
-                    columns: [
-                        {
-                            data: "threat_number",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_number;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_number + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "threat_category",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_category;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_category + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "source",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.source;
-                                }
-                                else{
-                                    return '<s>'+ full.source + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'source',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.source;
+                            } else {
+                                return '<s>' + full.source + '</s>';
+                            }
                         },
-                        {
-                            data: "date_observed",
-                            mRender:function (data,type,full){
-                                if(full.visible){
-                                    return data != '' && data != null ? moment(data).format('DD/MM/YYYY'):'';
-                                }
-                                else{
-                                    return data != '' && data != null ? '<s>'+ moment(data).format('DD/MM/YYYY'):'' + '</s>'
-                                }
+                    },
+                    {
+                        data: 'date_observed',
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
                         },
-                        {
-                            data: "threat_agent",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_agent;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_agent + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'threat_agent',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_agent;
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
+                            }
                         },
-                        {
-                            data: "comment",
-                            orderable: true,
-                            searchable: true,
-                            'render': function(value, type, full){
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                if(full.visible){
-                                    return type=='export' ? value : result;
-                                }
-                                else{
-                                    return type=='export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
-                                }
-                            },
+                    },
+                    {
+                        data: 'comment',
+                        orderable: true,
+                        searchable: true,
+                        render: function (value, type, full) {
+                            let result = helpers.dtPopover(value, 30, 'hover');
+                            if (full.visible) {
+                                return type == 'export' ? value : result;
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
+                            }
                         },
-                        {
-                            data: "current_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.current_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.current_impact_name + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'current_impact_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.current_impact_name;
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
+                            }
                         },
-                        {
-                            data: "potential_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.potential_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.potential_impact_name + '</s>'
-                                }
-                            },
+                    },
+                    {
+                        data: 'potential_impact_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.potential_impact_name;
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
+                            }
                         },
-                        {
-                            data: "id",
-                            mRender:function (data,type,full){
-                               // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
-                               if(!vm.original_species_threats.includes(full.id)){
-                                    vm.original_species_threats.push(full.id)
-                                };
+                    },
+                    {
+                        data: 'id',
+                        mRender: function (data, type, full) {
+                            // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
+                            if (
+                                !vm.original_species_threats.includes(full.id)
+                            ) {
+                                vm.original_species_threats.push(full.id);
+                            }
 
-                                if(vm.species_community.threats.includes(full.id)){
-                                    return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}"  checked>`;
-                                }
-                                else{
-                                    return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}">`;
-                                }
+                            if (
+                                vm.species_community.threats.includes(full.id)
+                            ) {
+                                return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}"  checked>`;
+                            } else {
+                                return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}">`;
                             }
                         },
-                    ],
-                    processing:true,
-                    drawCallback: function() {
+                    },
+                ],
+                processing: true,
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
-                        helpers.enablePopovers();
-                        // another option to fix the responsive table overflow css on tab switch
-                        setTimeout(function (){
-                            vm.adjust_table_width();
-                        },100);
-                    },
+                initComplete: function () {
+                    helpers.enablePopovers();
+                    // another option to fix the responsive table overflow css on tab switch
+                    setTimeout(function () {
+                        vm.adjust_table_width();
+                    }, 100);
+                },
+            },
+        };
+    },
+    computed: {},
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            if (vm.species_original.threat_selection != null) {
+                if (vm.species_original.threat_selection === 'selectAll') {
+                    document.getElementById(
+                        'threat_select_all' + vm.species_original.id
+                    ).checked = true;
+                } else {
+                    document.getElementById(
+                        'threat_select_individual' + vm.species_original.id
+                    ).checked = true;
                 }
             }
-        },
-        components: {
-            FormSection,
-            datatable,
-        },
-        computed: {
-        },
-        methods:{
-            selectThreatOption(e){
-                let vm=this;
-                //--fetch the value of selected radio btn
-                let selected_option=e.target.value;
-                //----set the selected value to the original species object so as to get the data when tab is reloaded/refreshed
-                vm.species_original.threat_selection = selected_option;
+            vm.addEventListeners();
+        });
+    },
+    methods: {
+        selectThreatOption(e) {
+            let vm = this;
+            //--fetch the value of selected radio btn
+            let selected_option = e.target.value;
+            //----set the selected value to the original species object so as to get the data when tab is reloaded/refreshed
+            vm.species_original.threat_selection = selected_option;
 
-                if(selected_option == "selectAll"){
-                    //---first need to delete the original_species_threats from the new_arr if added from the "Decide individual" option to avoid duplication
-                    vm.species_community.threats = vm.species_community.threats.filter(x => vm.original_species_threats.indexOf(x) == -1);  //--"filter" used to delete one array from another
-                    //-- copy all original species threats to new species threats array
-                    //---use '...' spread operator to add one arr elemnents to other
-                    vm.species_community.threats.push(...vm.original_species_threats);
-                    this.$refs.threats_datatable.vmDataTable.ajax.reload();
-                }
-                else if(selected_option == "individual"){
-                    //----empty only the current original species array from the new species array as will contain other original combine species threat_id's as well
-                    vm.species_community.threats = vm.species_community.threats.filter(x => vm.original_species_threats.indexOf(x) == -1); //--"filter" used to delete one array from another
-                    this.$refs.threats_datatable.vmDataTable.ajax.reload();
-                }
-            },
-            addEventListeners:function (){
-                let vm=this;
-                vm.$refs.threats_datatable.vmDataTable.on('click', 'input[data-add-threat]', function(e) {
+            if (selected_option == 'selectAll') {
+                //---first need to delete the original_species_threats from the new_arr if added from the "Decide individual" option to avoid duplication
+                vm.species_community.threats =
+                    vm.species_community.threats.filter(
+                        (x) => vm.original_species_threats.indexOf(x) == -1
+                    ); //--"filter" used to delete one array from another
+                //-- copy all original species threats to new species threats array
+                //---use '...' spread operator to add one arr elemnents to other
+                vm.species_community.threats.push(
+                    ...vm.original_species_threats
+                );
+                this.$refs.threats_datatable.vmDataTable.ajax.reload();
+            } else if (selected_option == 'individual') {
+                //----empty only the current original species array from the new species array as will contain other original combine species threat_id's as well
+                vm.species_community.threats =
+                    vm.species_community.threats.filter(
+                        (x) => vm.original_species_threats.indexOf(x) == -1
+                    ); //--"filter" used to delete one array from another
+                this.$refs.threats_datatable.vmDataTable.ajax.reload();
+            }
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'input[data-add-threat]',
+                function (e) {
                     //e.preventDefault();
                     let id = $(this).attr('data-add-threat');
                     let chkbox = $(this).attr('id');
-                    if($("#"+chkbox).is(':checked')== true){
-                        if(!vm.species_community.threats.includes(id)){
+                    if ($('#' + chkbox).is(':checked') == true) {
+                        if (!vm.species_community.threats.includes(id)) {
                             vm.species_community.threats.push(parseInt(id));
                         }
-                    }
-                    else{
-                        let threat_arr=vm.species_community.threats;
+                    } else {
+                        let threat_arr = vm.species_community.threats;
                         //---remove document id from array (for this arr.splice is used)
                         var index = threat_arr.indexOf(id);
-                        vm.species_community.threats.splice(index,1);
+                        vm.species_community.threats.splice(index, 1);
                     }
-                });
-                vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
                     helpers.enablePopovers();
-                });
-            },
-            adjust_table_width: function(){
-                if (this.$refs.threats_datatable !== undefined) {this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc();}
-            },
-        },
-        mounted: function(){
-            let vm = this;
-            this.$nextTick(() => {
-                if(vm.species_original.threat_selection!=null){
-
-                    if(vm.species_original.threat_selection==="selectAll"){
-                        document.getElementById('threat_select_all'+vm.species_original.id).checked=true;
-                    }
-                    else{
-                        document.getElementById('threat_select_individual'+vm.species_original.id).checked=true;
-                    }
                 }
-                vm.addEventListeners();
-            });
-        }
-    }
+            );
+        },
+        adjust_table_width: function () {
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
index cbed6787..4ed1c9ff 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
@@ -1,61 +1,84 @@
 <template lang="html">
     <div id="species_documents">
-        <FormSection :formCollapse="false" label="Documents" :Index="documentBody">
-            <alert type="warning"><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload Management or Recovery Plans here</alert>
+        <FormSection
+            :form-collapse="false"
+            label="Documents"
+            :Index="documentBody"
+        >
+            <alert type="warning"
+                ><i class="bi bi-ban fs-6 fw-bold me-2"></i>Do not upload
+                Management or Recovery Plans here</alert
+            >
             <form class="form-horizontal" action="index.html" method="post">
                 <div v-if="!is_readonly" class="col-sm-12">
                     <div class="text-end">
-                        <button :disabled="is_readonly" type="button" class="btn btn-primary mb-2 "
-                            @click.prevent="newDocument">
+                        <button
+                            :disabled="is_readonly"
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newDocument"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Document
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                        :dtHeaders="documents_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="documents_datatable"
+                        :dt-options="documents_options"
+                        :dt-headers="documents_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <DocumentDetail ref="document_detail" @refreshFromResponse="refreshFromResponse" :url="species_document_url"
-            :is_internal="is_internal"></DocumentDetail>
+        <DocumentDetail
+            ref="document_detail"
+            :url="species_document_url"
+            :is_internal="is_internal"
+            @refresh-from-response="refreshFromResponse"
+        ></DocumentDetail>
         <div v-if="speciesDocumentHistoryId">
-            <SpeciesDocumentHistory ref="species_document_history" :key="speciesDocumentHistoryId"
-                :document-id="speciesDocumentHistoryId" :species-id="species_community.id" />
+            <SpeciesDocumentHistory
+                ref="species_document_history"
+                :key="speciesDocumentHistoryId"
+                :document-id="speciesDocumentHistoryId"
+                :species-id="species_community.id"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
-import DocumentDetail from '../add_document.vue'
+import DocumentDetail from '../add_document.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import SpeciesDocumentHistory from '../../internal/species_communities/species_document_history.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'SpeciesDocuments',
+    components: {
+        alert,
+        FormSection,
+        datatable,
+        DocumentDetail,
+        SpeciesDocumentHistory,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -63,15 +86,23 @@ export default {
         return {
             uuid: 0,
             speciesDocumentHistoryId: null,
-            documentBody: "documentBody" + vm._uid,
-            panelBody: "species-documents-" + vm._uid,
+            documentBody: 'documentBody' + vm._uid,
+            panelBody: 'species-documents-' + vm._uid,
             values: null,
             species_document_url: api_endpoints.species_documents,
-            documents_headers: ['Number', 'Category', 'Sub Category', 'Document', 'Description', 'Date/Time', 'Action'],
+            documents_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
             documents_options: {
                 autowidth: true,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -81,11 +112,15 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.species, vm.species_community.id + '/documents'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.species,
+                        vm.species_community.id + '/documents'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -95,8 +130,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -104,111 +139,137 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "document_number",
+                        data: 'document_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_number;
-                            }
-                            else {
-                                return '<s>' + full.document_number + '</s>'
+                            } else {
+                                return '<s>' + full.document_number + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "document_category_name",
+                        data: 'document_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "document_sub_category_name",
+                        data: 'document_sub_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_sub_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_sub_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "name",
+                        data: 'name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.active) {
                                 let value = full.name;
-                                let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                links += '<span><a href="' + full._file + '" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
                             } else {
                                 let value = full.name;
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                links += type == 'export' ? value : '<s>' + result + '</s>';
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
                             }
                             return links;
                         },
-
                     },
                     {
-                        data: "description",
+                        data: 'description',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.active) {
                                 return type == 'export' ? value : result;
                             } else {
-                                return type == 'export' ? value : '<s>' + result + '</s>';
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "uploaded_date",
+                        data: 'uploaded_date',
                         mRender: function (data, type, full) {
                             if (full.active) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
                             } else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY HH:mm') + '</s>' : '';
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (!vm.is_readonly) {
                                 if (full.active) {
                                     links += `<a href='#${full.id}' data-edit-document='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-document='${full.id}'>Discard</a><br>`;
-                                }
-                                else {
+                                } else {
                                     links += `<a href='#' data-reinstate-document='${full.id}'>Reinstate</a><br>`;
                                 }
                             }
                             links += `<a href='#' data-history-document='${full.id}'>History</a><br>`;
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -223,15 +284,14 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
+            },
+        };
     },
-    components: {
-        alert,
-        FormSection,
-        datatable,
-        DocumentDetail,
-        SpeciesDocumentHistory,
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         newDocument: function () {
@@ -245,7 +305,7 @@ export default {
                 document_category: '',
                 document_sub_category: '',
                 uploaded_date: null,
-            }
+            };
             this.$refs.document_detail.documentObj = new_document_another;
             this.$refs.document_detail.uploaded_document = [];
             this.$refs.document_detail.document_action = 'add';
@@ -257,18 +317,29 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
-            fetch(helpers.add_endpoint_json(api_endpoints.species_documents, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.document_detail.documentObj = data;
-                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [data];
-                //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(data.document_category);
-
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(api_endpoints.species_documents, id)
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.document_detail.documentObj = data;
+                    this.$refs.document_detail.documentObj.uploaded_date =
+                        data.uploaded_date != null &&
+                        data.uploaded_date != undefined
+                            ? moment(data.uploaded_date).format(
+                                  'yyyy-MM-DDTHH:mm'
+                              )
+                            : '';
+                    this.$refs.document_detail.uploaded_document = [data];
+                    //-----this method is called as it wasn't fetching subcategory
+                    this.$refs.document_detail.fetchSubCategory(
+                        data.document_category
+                    );
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             //this.$refs.document_detail.fetchSpeciesDocument(id);
             this.$refs.document_detail.isModalOpen = true;
         },
@@ -282,123 +353,157 @@ export default {
         discardDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Document",
-                text: "Are you sure you want to discard this Document?",
-                icon: "question",
+                title: 'Discard Document',
+                text: 'Are you sure you want to discard this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Document',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.species_documents, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The document has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.species_documents,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The document has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Document",
-                text: "Are you sure you want to Reinstate this Document?",
-                icon: "question",
+                title: 'Reinstate Document',
+                text: 'Are you sure you want to Reinstate this Document?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Document',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.species_documents, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your document has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.documents_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.species_documents,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your document has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.documents_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         updatedDocuments() {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-edit-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-document');
-                vm.editDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-history-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-document');
-                vm.historyDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-document');
+                    vm.editDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-document');
+                    vm.historyDocument(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-discard-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-document');
-                vm.discardDocument(id);
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-document');
+                    vm.discardDocument(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.documents_datatable.vmDataTable.on('click', 'a[data-reinstate-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-document');
-                vm.reinstateDocument(id);
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-document');
+                    vm.reinstateDocument(id);
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.documents_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.documents_datatable !== undefined) { this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    },
-
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
index 27b8e951..4014381e 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
@@ -1,15 +1,25 @@
 <template lang="html">
     <div id="species_occ_threats">
-
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Threat Source:</label>
-                        <select class="form-select" v-model="filterThreatSource">
+                        <select
+                            v-model="filterThreatSource"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_source_filter_list" :value="option">{{ option }}
+                            <option
+                                v-for="option in threat_source_filter_list"
+                                :value="option"
+                            >
+                                {{ option }}
                             </option>
                         </select>
                     </div>
@@ -17,9 +27,16 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Category:</label>
-                        <select class="form-select" v-model="filterThreatCategory">
+                        <select
+                            v-model="filterThreatCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name }}
+                            <option
+                                v-for="option in threat_category_filter_list"
+                                :value="option.id"
+                            >
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -27,9 +44,15 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Current Impact:</label>
-                        <select class="form-select" v-model="filterThreatCurrentImpact">
+                        <select
+                            v-model="filterThreatCurrentImpact"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                            <option
+                                v-for="option in threat_current_impact_filter_list"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
@@ -38,9 +61,15 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Potential Impact:</label>
-                        <select class="form-select" v-model="filterThreatPotentialImpact">
+                        <select
+                            v-model="filterThreatPotentialImpact"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                            <option
+                                v-for="option in threat_potential_impact_filter_list"
+                                :value="option.id"
+                            >
                                 {{ option.name }}
                             </option>
                         </select>
@@ -49,9 +78,16 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterThreatStatus">
+                        <select
+                            v-model="filterThreatStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                            <option
+                                v-for="option in threat_status_filter_list"
+                                :value="option.id"
+                            >
+                                {{ option.name }}
                             </option>
                         </select>
                     </div>
@@ -59,52 +95,72 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed From:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
-                            v-model="filterObservedFromDate">
+                        <input
+                            id="observed_from_date"
+                            v-model="filterObservedFromDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Date Observed To:</label>
-                        <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
-                            v-model="filterObservedToDate">
+                        <input
+                            id="observed_to_date"
+                            v-model="filterObservedToDate"
+                            type="date"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
         <div>
-            <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                :dtHeaders="threats_headers" />
+            <datatable
+                :id="panelBody"
+                ref="threats_datatable"
+                :dt-options="threats_options"
+                :dt-headers="threats_headers"
+            />
         </div>
 
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="occ_threat_url">
+        <ThreatDetail
+            ref="threat_detail"
+            :url="occ_threat_url"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ThreatDetail>
         <div v-if="occConservationThreatHistoryId">
-            <ConservationThreatHistory ref="occ_conservation_threat_history" :key="occConservationThreatHistoryId"
-                :threat-id="occConservationThreatHistoryId" />
+            <ConservationThreatHistory
+                ref="occ_conservation_threat_history"
+                :key="occConservationThreatHistoryId"
+                :threat-id="occConservationThreatHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import ThreatDetail from '@/components/common/species_communities/add_threat.vue'
+import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import ConservationThreatHistory from '../../internal/occurrence/occ_conservation_threat_history.vue';
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'OCCThreats',
+    components: {
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        CollapsibleFilters,
+    },
     props: {
         species_obj: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -113,8 +169,8 @@ export default {
             uuid: 0,
             occConservationThreatHistoryId: null,
             showExisting: false,
-            threatBody: "threatBody" + vm._uid,
-            panelBody: "species-threats-" + vm._uid,
+            threatBody: 'threatBody' + vm._uid,
+            panelBody: 'species-threats-' + vm._uid,
             values: null,
             occ_threat_url: api_endpoints.occ_threat,
 
@@ -132,16 +188,26 @@ export default {
             threat_potential_impact_filter_list: [],
 
             threat_status_filter_list: [
-                { id: "active", name: "Active" },
-                { id: "removed", name: "Removed" },
+                { id: 'active', name: 'Active' },
+                { id: 'removed', name: 'Removed' },
             ],
 
-            threats_headers: ['Number', 'Original Report', 'Category', 'Date Observed', 'Threat Agent', 'Comments',
-                'Current Impact', 'Potential Impact', 'Threat Source', 'Action'],
+            threats_headers: [
+                'Number',
+                'Original Report',
+                'Category',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Current Impact',
+                'Potential Impact',
+                'Threat Source',
+                'Action',
+            ],
             threats_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -151,20 +217,26 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.species, vm.species_obj.id + '/occurrence_threats'),
-                    "dataSrc": '',
-                    "data": function (d) {
-                        d.filter_threat_source = vm.filterThreatSource
-                        d.filter_threat_category = vm.filterThreatCategory
-                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                        d.filter_threat_status = vm.filterThreatStatus
-                        d.filter_observed_from_date = vm.filterObservedFromDate
-                        d.filter_observed_to_date = vm.filterObservedToDate
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.species,
+                        vm.species_obj.id + '/occurrence_threats'
+                    ),
+                    dataSrc: '',
+                    data: function (d) {
+                        d.filter_threat_source = vm.filterThreatSource;
+                        d.filter_threat_category = vm.filterThreatCategory;
+                        d.filter_threat_current_impact =
+                            vm.filterThreatCurrentImpact;
+                        d.filter_threat_potential_impact =
+                            vm.filterThreatPotentialImpact;
+                        d.filter_threat_status = vm.filterThreatStatus;
+                        d.filter_observed_from_date = vm.filterObservedFromDate;
+                        d.filter_observed_to_date = vm.filterObservedToDate;
                     },
                 },
                 order: [[0, 'desc']],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -174,8 +246,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -183,146 +255,156 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "threat_number",
+                        data: 'threat_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return "OCC" + full.occurrence + " - " + full.threat_number;
-                            }
-                            else {
-                                return '<s>' + "OCC" + full.occurrence + " - " + full.threat_number + '</s>'
+                                return (
+                                    'OCC' +
+                                    full.occurrence +
+                                    ' - ' +
+                                    full.threat_number
+                                );
+                            } else {
+                                return (
+                                    '<s>' +
+                                    'OCC' +
+                                    full.occurrence +
+                                    ' - ' +
+                                    full.threat_number +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "original_report",
+                        data: 'original_report',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible && full.original_report != null) {
-                                return full.original_report + " - " + full.original_threat;
-                            }
-                            else {
-                                return ""
+                                return (
+                                    full.original_report +
+                                    ' - ' +
+                                    full.original_threat
+                                );
+                            } else {
+                                return '';
                             }
                         },
-
                     },
                     {
-                        data: "threat_category",
+                        data: 'threat_category',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_category;
-                            }
-                            else {
-                                return '<s>' + full.threat_category + '</s>'
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "date_observed",
+                        data: 'date_observed',
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
-                            else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
-                            }
-                        }
+                        },
                     },
                     {
-                        data: "threat_agent",
+                        data: 'threat_agent',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_agent;
-                            }
-                            else {
-                                return '<s>' + full.threat_agent + '</s>'
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "comment",
+                        data: 'comment',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.visible) {
                                 return type == 'export' ? value : result;
-                            }
-                            else {
-                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "current_impact_name",
+                        data: 'current_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.current_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.current_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "potential_impact_name",
+                        data: 'potential_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.potential_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.potential_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "source",
+                        data: 'source',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.source;
-                            }
-                            else {
-                                return '<s>' + full.source + '</s>'
+                            } else {
+                                return '<s>' + full.source + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.visible) {
                                 links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
                                 links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
-                            }
-                            else {
+                            } else {
                                 links += `<a href='#' data-history-threat='${full.id}'>History</a><br>`;
                             }
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -337,18 +419,13 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        datatable,
-        ThreatDetail,
-        ConservationThreatHistory,
-        CollapsibleFilters,
+            },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterThreatSource === 'all' &&
+            if (
+                this.filterThreatSource === 'all' &&
                 this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
@@ -356,9 +433,9 @@ export default {
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
             ) {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
     },
@@ -366,7 +443,9 @@ export default {
         filterApplied: function () {
             if (this.$refs.collapsible_filters) {
                 // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
         filterThreatSource: function () {
@@ -398,44 +477,72 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
         },
     },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
 
         fetchFilterLists: function () {
             let vm = this;
 
             //Threat Source filter list (specific to instance)
-            fetch(helpers.add_endpoint_json(api_endpoints.species, vm.species_obj.id + '/occurrence_threat_source_list')).then(async (response) => {
-                vm.threat_source_filter_list = await response.json();
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.species,
+                    vm.species_obj.id + '/occurrence_threat_source_list'
+                )
+            ).then(
+                async (response) => {
+                    vm.threat_source_filter_list = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
 
             //Category, Current Impact, Potential Impact (generic to all threats)
-            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
-                const data = await response.json();
-                vm.threat_category_filter_list = data["threat_category_lists"];
-                vm.threat_current_impact_filter_list = data["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
-            }, (error) => {
-                console.log(error);
-            })
-
+            fetch('/api/threat/threat_list_of_values/').then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.threat_category_filter_list =
+                        data['threat_category_lists'];
+                    vm.threat_current_impact_filter_list =
+                        data['current_impact_lists'];
+                    vm.threat_potential_impact_filter_list =
+                        data['potential_impact_lists'];
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         viewThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         historyThreat: function (id) {
@@ -450,35 +557,43 @@ export default {
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-threat');
-                vm.viewThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-threat');
-                vm.historyThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-threat');
+                    vm.viewThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-threat');
+                    vm.historyThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
index 3282ccd1..8373c96e 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
@@ -1,111 +1,245 @@
 <template lang="html">
     <div id="species">
-        <FormSection :formCollapse="false" label="Taxonomy" :Index="taxonBody">
+        <FormSection :form-collapse="false" label="Taxonomy" :Index="taxonBody">
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label"
-                    :class="(rename_species || !isReadOnly) ? 'fw-bold' : ''">Scientific Name: <span
-                        v-if="rename_species || !isReadOnly" class="text-danger">*</span></label>
-                <div class="col-sm-9" :id="select_scientific_name">
-                    <select v-if="rename_species || !isReadOnly" :id="scientific_name_lookup"
-                        :name="scientific_name_lookup" :ref="scientific_name_lookup" class="form-select" />
-                    <input v-else :disabled="true" type="text" class="form-control" id="taxon_name_id" placeholder=""
-                        v-model="species_community.scientific_name" />
+                <label
+                    for=""
+                    class="col-sm-3 col-form-label"
+                    :class="rename_species || !isReadOnly ? 'fw-bold' : ''"
+                    >Scientific Name:
+                    <span
+                        v-if="rename_species || !isReadOnly"
+                        class="text-danger"
+                        >*</span
+                    ></label
+                >
+                <div :id="select_scientific_name" class="col-sm-9">
+                    <select
+                        v-if="rename_species || !isReadOnly"
+                        :id="scientific_name_lookup"
+                        :ref="scientific_name_lookup"
+                        :name="scientific_name_lookup"
+                        class="form-select"
+                    />
+                    <input
+                        v-else
+                        id="taxon_name_id"
+                        v-model="species_community.scientific_name"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="species_community.scientific_name != species_display" class="row mb-3">
+            <div
+                v-if="species_community.scientific_name != species_display"
+                class="row mb-3"
+            >
                 <label for="" class="col-sm-3 col-form-label"></label>
                 <div class="col-sm-9">
-                    <textarea disabled class="form-control" rows=2 id="species_display" v-model="species_display" />
+                    <textarea
+                        id="species_display"
+                        v-model="species_display"
+                        disabled
+                        class="form-control"
+                        rows="2"
+                    />
                 </div>
             </div>
             <div v-if="showField(common_name)" class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Common Name:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Common Name:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="true" class="form-control" rows="2" id="common_name" placeholder=""
-                        v-model="common_name" />
+                    <textarea
+                        id="common_name"
+                        v-model="common_name"
+                        :disabled="true"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Taxon Name ID:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Taxon Name ID:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="true" type="text" class="form-control" id="taxon_name_id" placeholder=""
-                        v-model="taxon_name_id" />
+                    <input
+                        id="taxon_name_id"
+                        v-model="taxon_name_id"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-if="showField(taxon_previous_name)" class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Previous Name:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Previous Name:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="true" type="text" class="form-control" id="previous_name" placeholder=""
-                        v-model="taxon_previous_name" />
+                    <input
+                        id="previous_name"
+                        v-model="taxon_previous_name"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-if="showField(phylogenetic_group)" class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Phylogenetic Group:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Phylogenetic Group:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="true" class="form-control" rows="1" id="phylogenetic_group" placeholder=""
-                        v-model="phylogenetic_group" />
+                    <textarea
+                        id="phylogenetic_group"
+                        v-model="phylogenetic_group"
+                        :disabled="true"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-if="showField(family)" class="row mb-3">
                 <label for="" class="col-sm-3 col-form-label">Family:</label>
                 <div class="col-sm-9">
-                    <textarea :disabled="true" rows="1" class="form-control" id="family" placeholder=""
-                        v-model="family" />
+                    <textarea
+                        id="family"
+                        v-model="family"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-if="showField(genus)" class="row mb-3">
                 <label for="" class="col-sm-3 col-form-label">Genus:</label>
                 <div class="col-sm-9">
-                    <textarea :disabled="true" rows="1" class="form-control" id="genus" placeholder=""
-                        v-model="genus" />
+                    <textarea
+                        id="genus"
+                        v-model="genus"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-if="showField(name_authority)" class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Name Authority:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Name Authority:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="true" rows="1" class="form-control" id="name_authority" placeholder=""
-                        v-model="name_authority" />
+                    <textarea
+                        id="name_authority"
+                        v-model="name_authority"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-if="showField(name_comments)" class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">NOMOS names comments:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >NOMOS names comments:</label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="true" class="form-control" rows="3" id="name_comments" placeholder=""
-                        v-model="name_comments" />
+                    <textarea
+                        id="name_comments"
+                        v-model="name_comments"
+                        :disabled="true"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
-        <FormSection v-if="distribution_public || is_internal" :formCollapse="false" label="Distribution"
-            :Index="distributionBody">
+        <FormSection
+            v-if="distribution_public || is_internal"
+            :form-collapse="false"
+            label="Distribution"
+            :Index="distributionBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label" :class="isReadOnly ? '' : 'fw-bold'">Distribution: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 col-form-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >Distribution:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="1" id="distribution" placeholder=""
-                        v-model="species_community.distribution.distribution" />
+                    <textarea
+                        id="distribution"
+                        v-model="species_community.distribution.distribution"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label" :class="isReadOnly ? '' : 'fw-bold'">Region: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 col-form-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >Region:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" v-model="species_community.regions"
-                        ref="regions_select">
-                        <option value="" selected disabled>Select region</option>
-                        <option v-for="option in region_list" :value="option.value" :key="option.value">
+                    <select
+                        ref="regions_select"
+                        v-model="species_community.regions"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option value="" selected disabled>
+                            Select region
+                        </option>
+                        <option
+                            v-for="option in region_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
                 </div>
             </div>
             <div v-if="species_community.regions" class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label" :class="isReadOnly ? '' : 'fw-bold'">District: <span
-                        v-if="!isReadOnly" class="text-danger">*</span></label>
+                <label
+                    for=""
+                    class="col-sm-3 col-form-label"
+                    :class="isReadOnly ? '' : 'fw-bold'"
+                    >District:
+                    <span v-if="!isReadOnly" class="text-danger">*</span></label
+                >
                 <div class="col-sm-9">
-                    <select :disabled="isReadOnly" class="form-select" v-model="species_community.districts"
-                        ref="districts_select">
-                        <option value="" selected disabled>Select district</option>
-                        <option v-for="option in district_list" :value="option.value" v-bind:key="option.value">
+                    <select
+                        ref="districts_select"
+                        v-model="species_community.districts"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option value="" selected disabled>
+                            Select district
+                        </option>
+                        <option
+                            v-for="option in district_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
@@ -113,117 +247,319 @@
             </div>
             <template v-if="show_calculated_distribution_fields">
                 <div class="row mb-3 pt-3">
-                    <label for="" class="col-sm-4 col-form-label">Number of Occurrences:</label>
-                    <div v-if="showField(species_community.distribution.number_of_occurrences)" class="col-sm-4">
-                        <input v-if="species_community.distribution.noo_auto" :disabled="isNOOReadOnly" type="number"
-                            class="form-control" id="no_of_occurrences" placeholder=""
-                            v-model="species_community.occurrence_count" />
-                        <input v-else :disabled="isNOOReadOnly" type="number" class="form-control"
-                            id="no_of_occurrences" placeholder="" ref="number_of_occurrences"
-                            v-model="species_community.distribution.number_of_occurrences" />
+                    <label for="" class="col-sm-4 col-form-label"
+                        >Number of Occurrences:</label
+                    >
+                    <div
+                        v-if="
+                            showField(
+                                species_community.distribution
+                                    .number_of_occurrences
+                            )
+                        "
+                        class="col-sm-4"
+                    >
+                        <input
+                            v-if="species_community.distribution.noo_auto"
+                            id="no_of_occurrences"
+                            v-model="species_community.occurrence_count"
+                            :disabled="isNOOReadOnly"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
+                        <input
+                            v-else
+                            id="no_of_occurrences"
+                            ref="number_of_occurrences"
+                            v-model="
+                                species_community.distribution
+                                    .number_of_occurrences
+                            "
+                            :disabled="isNOOReadOnly"
+                            type="number"
+                            class="form-control"
+                            placeholder=""
+                        />
                     </div>
-                    <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
+                    <div
+                        v-if="!isReadOnly"
+                        class="col-sm-3 d-flex align-items-center"
+                    >
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                                id="noo_auto" @click="switchNOO('true')"
-                                v-model="species_community.distribution.noo_auto">
+                            <input
+                                id="noo_auto"
+                                v-model="
+                                    species_community.distribution.noo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="true"
+                                class="form-check-input"
+                                @click="switchNOO('true')"
+                            />
                             <label class="form-check-label">auto</label>
                         </div>
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="false" @click="switchNOO('false')"
-                                class="form-check-input" id="noo_manual"
-                                v-model="species_community.distribution.noo_auto">
+                            <input
+                                id="noo_manual"
+                                v-model="
+                                    species_community.distribution.noo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="false"
+                                class="form-check-input"
+                                @click="switchNOO('false')"
+                            />
                             <label class="form-check-label">manual</label>
                         </div>
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-4 col-form-label">Extent of Occurrences: <HelpText v-if="species_community.distribution.eoo_auto"
-                        section_id="species_extent_of_occurrences" /></label>
+                    <label for="" class="col-sm-4 col-form-label"
+                        >Extent of Occurrences:
+                        <HelpText
+                            v-if="species_community.distribution.eoo_auto"
+                            section_id="species_extent_of_occurrences"
+                    /></label>
                     <div class="col-sm-4">
                         <div class="input-group">
-                            <input v-if="species_community.distribution.eoo_auto" :disabled="isEOOReadOnly"
-                                type="number" class="form-control" id="extent_of_occurrence" placeholder=""
-                                v-model="species_community.area_occurrence_convex_hull_km2" />
-                            <input v-else :disabled="isEOOReadOnly" type="number" class="form-control"
-                                id="extent_of_occurrence" ref="extent_of_occurrence" placeholder=""
-                                v-model="species_community.distribution.extent_of_occurrences" />
-                            <span class="input-group-text" id="area_of_occupancy_km2-addon">km&#xb2;</span>
+                            <input
+                                v-if="species_community.distribution.eoo_auto"
+                                id="extent_of_occurrence"
+                                v-model="
+                                    species_community.area_occurrence_convex_hull_km2
+                                "
+                                :disabled="isEOOReadOnly"
+                                type="number"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <input
+                                v-else
+                                id="extent_of_occurrence"
+                                ref="extent_of_occurrence"
+                                v-model="
+                                    species_community.distribution
+                                        .extent_of_occurrences
+                                "
+                                :disabled="isEOOReadOnly"
+                                type="number"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <span
+                                id="area_of_occupancy_km2-addon"
+                                class="input-group-text"
+                                >km&#xb2;</span
+                            >
                         </div>
                     </div>
-                    <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
+                    <div
+                        v-if="!isReadOnly"
+                        class="col-sm-3 d-flex align-items-center"
+                    >
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                                id="eoo_auto" @click="switchEOO('true')"
-                                v-model="species_community.distribution.eoo_auto">
+                            <input
+                                id="eoo_auto"
+                                v-model="
+                                    species_community.distribution.eoo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="true"
+                                class="form-check-input"
+                                @click="switchEOO('true')"
+                            />
                             <label class="form-check-label">auto</label>
                         </div>
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input"
-                                id="eoo_manual" @click="switchEOO('false')"
-                                v-model="species_community.distribution.eoo_auto">
+                            <input
+                                id="eoo_manual"
+                                v-model="
+                                    species_community.distribution.eoo_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="false"
+                                class="form-check-input"
+                                @click="switchEOO('false')"
+                            />
                             <label class="form-check-label">manual</label>
                         </div>
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-4 col-form-label">Area of Occupancy:</label>
+                    <label for="" class="col-sm-4 col-form-label"
+                        >Area of Occupancy:</label
+                    >
                     <div class="col-sm-4">
                         <div class="input-group">
-                            <input :disabled="isReadOnly" type="number" class="form-control" id="area_of_occupany"
-                                placeholder="" v-model="species_community.distribution.area_of_occupancy" />
-                            <span class="input-group-text" id="area_of_occupancy-addon">2km x 2km</span>
+                            <input
+                                id="area_of_occupany"
+                                v-model="
+                                    species_community.distribution
+                                        .area_of_occupancy
+                                "
+                                :disabled="isReadOnly"
+                                type="number"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <span
+                                id="area_of_occupancy-addon"
+                                class="input-group-text"
+                                >2km x 2km</span
+                            >
                         </div>
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="" class="col-sm-4 col-form-label">Actual Area of Occupancy:  <HelpText v-if="species_community.distribution.aoo_actual_auto"
-                        section_id="species_actual_area_of_occupancy" /></label>
+                    <label for="" class="col-sm-4 col-form-label"
+                        >Actual Area of Occupancy:
+                        <HelpText
+                            v-if="
+                                species_community.distribution.aoo_actual_auto
+                            "
+                            section_id="species_actual_area_of_occupancy"
+                    /></label>
                     <div class="col-sm-4">
                         <div class="input-group">
-                            <input v-if="species_community.distribution.aoo_actual_auto" :disabled="isAOOActualReadOnly"
-                                type="number" step="any" class="form-control" id="area_of_occupancy_actual"
-                                placeholder="" v-model="species_community.area_of_occupancy_km2" area-describedby="" />
-                            <input v-else :disabled="isAOOActualReadOnly" type="number" step="any" class="form-control"
-                                id="area_of_occupancy_actual" ref="area_of_occupancy_actual" placeholder=""
-                                v-model="species_community.distribution.area_of_occupancy_actual" />
-                            <span class="input-group-text" id="area_of_occupancy_km2-addon">km&#xb2;</span>
+                            <input
+                                v-if="
+                                    species_community.distribution
+                                        .aoo_actual_auto
+                                "
+                                id="area_of_occupancy_actual"
+                                v-model="
+                                    species_community.area_of_occupancy_km2
+                                "
+                                :disabled="isAOOActualReadOnly"
+                                type="number"
+                                step="any"
+                                class="form-control"
+                                placeholder=""
+                                area-describedby=""
+                            />
+                            <input
+                                v-else
+                                id="area_of_occupancy_actual"
+                                ref="area_of_occupancy_actual"
+                                v-model="
+                                    species_community.distribution
+                                        .area_of_occupancy_actual
+                                "
+                                :disabled="isAOOActualReadOnly"
+                                type="number"
+                                step="any"
+                                class="form-control"
+                                placeholder=""
+                            />
+                            <span
+                                id="area_of_occupancy_km2-addon"
+                                class="input-group-text"
+                                >km&#xb2;</span
+                            >
                         </div>
                     </div>
-                    <div v-if="!isReadOnly" class="col-sm-3 d-flex align-items-center">
+                    <div
+                        v-if="!isReadOnly"
+                        class="col-sm-3 d-flex align-items-center"
+                    >
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                                id="aoo_actual_auto" @click="switchAOOActual('true')"
-                                v-model="species_community.distribution.aoo_actual_auto">
+                            <input
+                                id="aoo_actual_auto"
+                                v-model="
+                                    species_community.distribution
+                                        .aoo_actual_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="true"
+                                class="form-check-input"
+                                @click="switchAOOActual('true')"
+                            />
                             <label class="form-check-label">auto</label>
                         </div>
                         <div class="form-check form-check-inline">
-                            <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input"
-                                id="aoo_actual_manual" @click="switchAOOActual('false')"
-                                v-model="species_community.distribution.aoo_actual_auto">
+                            <input
+                                id="aoo_actual_manual"
+                                v-model="
+                                    species_community.distribution
+                                        .aoo_actual_auto
+                                "
+                                :disabled="isReadOnly"
+                                type="radio"
+                                :value="false"
+                                class="form-check-input"
+                                @click="switchAOOActual('false')"
+                            />
                             <label class="form-check-label">manual</label>
                         </div>
                     </div>
                 </div>
             </template>
-            <div v-if="showField(species_community.distribution.number_of_iucn_locations)" class="row mb-3">
-                <label for="" class="col-sm-4 col-form-label">Number of IUCN Locations:</label>
+            <div
+                v-if="
+                    showField(
+                        species_community.distribution.number_of_iucn_locations
+                    )
+                "
+                class="row mb-3"
+            >
+                <label for="" class="col-sm-4 col-form-label"
+                    >Number of IUCN Locations:</label
+                >
                 <div class="col-sm-4">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="no_of_iucn_locations"
-                        placeholder="" v-model="species_community.distribution.number_of_iucn_locations" />
+                    <input
+                        id="no_of_iucn_locations"
+                        v-model="
+                            species_community.distribution
+                                .number_of_iucn_locations
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
-            <div v-if="showField(species_community.distribution.number_of_iucn_subpopulations)" class="row mb-1">
-                <label for="" class="col-sm-4 col-form-label">Number of IUCN Sub-populations:</label>
+            <div
+                v-if="
+                    showField(
+                        species_community.distribution
+                            .number_of_iucn_subpopulations
+                    )
+                "
+                class="row mb-1"
+            >
+                <label for="" class="col-sm-4 col-form-label"
+                    >Number of IUCN Sub-populations:</label
+                >
                 <div class="col-sm-4">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="number_of_iucn_subpopulations"
-                        placeholder="" v-model="species_community.distribution.number_of_iucn_subpopulations" />
+                    <input
+                        id="number_of_iucn_subpopulations"
+                        v-model="
+                            species_community.distribution
+                                .number_of_iucn_subpopulations
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
         <BasicConservationStatus
-            v-if="species_community.conservation_status && (conservation_status_public || is_internal)"
-            :conservation_status="species_community.conservation_status" :is_internal="is_internal" />
+            v-if="
+                species_community.conservation_status &&
+                (conservation_status_public || is_internal)
+            "
+            :conservation_status="species_community.conservation_status"
+            :is_internal="is_internal"
+        />
         <!-- <FormSection v-if="conservation_attributes_public || is_internal" :formCollapse="false"
             label="Conservation Attributes" :Index="conservationBody">
             <div class="row mb-3">
@@ -637,84 +973,191 @@
                 </div>
             </div>
         </FormSection> -->
-        <FormSection v-if="is_internal" :formCollapse="false" label="General" :Index="generalBody">
+        <FormSection
+            v-if="is_internal"
+            :form-collapse="false"
+            label="General"
+            :Index="generalBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Department File Numbers:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Department File Numbers:</label
+                >
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="department_file_numbers"
-                        placeholder="" v-model="species_community.department_file_numbers" />
+                    <input
+                        id="department_file_numbers"
+                        v-model="species_community.department_file_numbers"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Last data curation date: </label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Last data curation date:
+                </label>
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="date" class="form-control" name="last_data_curration_date"
-                        ref="last_data_curration_date" @change="checkDate()"
-                        v-model="species_community.last_data_curration_date" />
+                    <input
+                        ref="last_data_curration_date"
+                        v-model="species_community.last_data_curration_date"
+                        :disabled="isReadOnly"
+                        type="date"
+                        class="form-control"
+                        name="last_data_curration_date"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="conservation_plan_exists" class="col-sm-3 col-form-label">Conservation Plan Exists: </label>
+                <label
+                    for="conservation_plan_exists"
+                    class="col-sm-3 col-form-label"
+                    >Conservation Plan Exists:
+                </label>
                 <div class="col-sm-9">
-                    <label for="conservation_plan_exists" class="me-2">No</label>
-                    <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input me-2"
-                        id="conservation_plan_exists" v-model="species_community.conservation_plan_exists">
-                    <label for="conservation_plan_exists" class="me-2">Yes</label>
-                    <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                        id="conservation_plan_exists" v-model="species_community.conservation_plan_exists"
-                        @change="focusConservationPlanReference">
+                    <label for="conservation_plan_exists" class="me-2"
+                        >No</label
+                    >
+                    <input
+                        id="conservation_plan_exists"
+                        v-model="species_community.conservation_plan_exists"
+                        :disabled="isReadOnly"
+                        type="radio"
+                        :value="false"
+                        class="form-check-input me-2"
+                    />
+                    <label for="conservation_plan_exists" class="me-2"
+                        >Yes</label
+                    >
+                    <input
+                        id="conservation_plan_exists"
+                        v-model="species_community.conservation_plan_exists"
+                        :disabled="isReadOnly"
+                        type="radio"
+                        :value="true"
+                        class="form-check-input"
+                        @change="focusConservationPlanReference"
+                    />
                 </div>
             </div>
-            <div v-if="species_community.conservation_plan_exists" class="row mb-3">
-                <label for="conservation_plan_reference" class="col-sm-3 col-form-label">Conservation Plan Reference /
-                    Location: </label>
+            <div
+                v-if="species_community.conservation_plan_exists"
+                class="row mb-3"
+            >
+                <label
+                    for="conservation_plan_reference"
+                    class="col-sm-3 col-form-label"
+                    >Conservation Plan Reference / Location:
+                </label>
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" name="conservation_plan_reference"
-                        ref="conservation_plan_reference" @change="checkDate()"
-                        v-model="species_community.conservation_plan_reference" />
+                    <input
+                        ref="conservation_plan_reference"
+                        v-model="species_community.conservation_plan_reference"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        name="conservation_plan_reference"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 col-form-label">Comment:</label>
                 <div class="col-sm-9">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="3" id="comment" placeholder=""
-                        v-model="species_community.comment" />
+                    <textarea
+                        id="comment"
+                        v-model="species_community.comment"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
-        <FormSection v-if="is_internal" :formCollapse="false" label="Publishing" Index="publishing">
+        <FormSection
+            v-if="is_internal"
+            :form-collapse="false"
+            label="Publishing"
+            Index="publishing"
+        >
             <div class="row mb-3">
-                <label for="distribution_publishing" class="col-sm-3 col-form-label">Distribution: </label>
+                <label
+                    for="distribution_publishing"
+                    class="col-sm-3 col-form-label"
+                    >Distribution:
+                </label>
                 <div class="col-sm-9">
                     <div class="form-check form-check-inline">
                         <label for="distribution_publishing">Private</label>
-                        <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="false"
-                            class="form-check-input me-2" id="distribution_publishing"
-                            v-model="species_community.publishing_status.distribution_public">
+                        <input
+                            id="distribution_publishing"
+                            v-model="
+                                species_community.publishing_status
+                                    .distribution_public
+                            "
+                            :disabled="isReadOnly || !isPublic || !isActive"
+                            type="radio"
+                            :value="false"
+                            class="form-check-input me-2"
+                        />
                     </div>
                     <div class="form-check form-check-inline">
                         <label for="distribution_publishing">Public</label>
-                        <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="true"
-                            class="form-check-input" id="distribution_publishing"
-                            v-model="species_community.publishing_status.distribution_public">
+                        <input
+                            id="distribution_publishing"
+                            v-model="
+                                species_community.publishing_status
+                                    .distribution_public
+                            "
+                            :disabled="isReadOnly || !isPublic || !isActive"
+                            type="radio"
+                            :value="true"
+                            class="form-check-input"
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="conservation_status_publishing" class="col-sm-3 col-form-label">Conservation Status:
+                <label
+                    for="conservation_status_publishing"
+                    class="col-sm-3 col-form-label"
+                    >Conservation Status:
                 </label>
                 <div class="col-sm-9">
                     <div class="form-check form-check-inline">
-                        <label for="conservation_status_publishing">Private</label>
-                        <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="false"
-                            class="form-check-input me-2" id="conservation_status_publishing"
-                            v-model="species_community.publishing_status.conservation_status_public">
+                        <label for="conservation_status_publishing"
+                            >Private</label
+                        >
+                        <input
+                            id="conservation_status_publishing"
+                            v-model="
+                                species_community.publishing_status
+                                    .conservation_status_public
+                            "
+                            :disabled="isReadOnly || !isPublic || !isActive"
+                            type="radio"
+                            :value="false"
+                            class="form-check-input me-2"
+                        />
                     </div>
                     <div class="form-check form-check-inline">
-                        <label for="conservation_status_publishing">Public</label>
-                        <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="true"
-                            class="form-check-input" id="conservation_status_publishing"
-                            v-model="species_community.publishing_status.conservation_status_public">
+                        <label for="conservation_status_publishing"
+                            >Public</label
+                        >
+                        <input
+                            id="conservation_status_publishing"
+                            v-model="
+                                species_community.publishing_status
+                                    .conservation_status_public
+                            "
+                            :disabled="isReadOnly || !isPublic || !isActive"
+                            type="radio"
+                            :value="true"
+                            class="form-check-input"
+                        />
                     </div>
                 </div>
             </div>
@@ -737,30 +1180,59 @@
                 </div>
             </div> -->
             <div class="row mb-3">
-                <label for="threats_publishing" class="col-sm-3 col-form-label">Threats: </label>
+                <label for="threats_publishing" class="col-sm-3 col-form-label"
+                    >Threats:
+                </label>
                 <div class="col-sm-9">
                     <div class="form-check form-check-inline">
                         <label for="threats_publishing">Private</label>
-                        <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="false"
-                            class="form-check-input me-2" id="threats_publishing"
-                            v-model="species_community.publishing_status.threats_public">
+                        <input
+                            id="threats_publishing"
+                            v-model="
+                                species_community.publishing_status
+                                    .threats_public
+                            "
+                            :disabled="isReadOnly || !isPublic || !isActive"
+                            type="radio"
+                            :value="false"
+                            class="form-check-input me-2"
+                        />
                     </div>
                     <div class="form-check form-check-inline">
                         <label for="threats_publishing">Public</label>
-                        <input :disabled="isReadOnly || !isPublic || !isActive" type="radio" :value="true"
-                            class="form-check-input" id="threats_publishing"
-                            v-model="species_community.publishing_status.threats_public">
+                        <input
+                            id="threats_publishing"
+                            v-model="
+                                species_community.publishing_status
+                                    .threats_public
+                            "
+                            :disabled="isReadOnly || !isPublic || !isActive"
+                            type="radio"
+                            :value="true"
+                            class="form-check-input"
+                        />
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
                 <div class="col-sm-12">
-                    <button v-if="!updatingPublishing" :disabled="isReadOnly || !isPublic || !isActive"
+                    <button
+                        v-if="!updatingPublishing"
+                        :disabled="isReadOnly || !isPublic || !isActive"
                         class="btn btn-primary btn-sm float-end"
-                        @click.prevent="updatePublishingDetails()">Update</button>
-                    <button v-else disabled class="float-end btn btn-primary">Updating <span
-                            class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                        <span class="visually-hidden">Loading...</span></button>
+                        @click.prevent="updatePublishingDetails()"
+                    >
+                        Update
+                    </button>
+                    <button v-else disabled class="float-end btn btn-primary">
+                        Updating
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
                 </div>
             </div>
         </FormSection>
@@ -768,41 +1240,40 @@
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
 import BasicConservationStatus from './basic_conservation_status.vue';
 import HelpText from '@/components/common/help_text.vue';
 
-import {
-    api_endpoints,
-    helpers
-}
-
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'Species',
+    components: {
+        FormSection,
+        BasicConservationStatus,
+        HelpText,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         species_community_original: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         // this prop is only send from rename species form to make the taxon select editable
         rename_species: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -817,15 +1288,15 @@ export default {
             },
             updatingPublishing: false,
             scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
-            select_scientific_name: "select_scientific_name" + vm._uid,
-            select_flowering_period: "select_flowering_period" + vm._uid,
+            select_scientific_name: 'select_scientific_name' + vm._uid,
+            select_flowering_period: 'select_flowering_period' + vm._uid,
             taxonBody: 'taxonBody' + vm._uid,
             distributionBody: 'distributionBody' + vm._uid,
             conservationStatusBody: 'conservationStatusBody' + vm._uid,
             conservationBody: 'conservationBody' + vm._uid,
             generalBody: 'generalBody' + vm._uid,
             //---to show fields related to Fauna
-            isFauna: vm.species_community.group_type === "fauna" ? true : false,
+            isFauna: vm.species_community.group_type === 'fauna' ? true : false,
             //----list of values dictionary
             taxon_names: [],
             species_profile_dict: {},
@@ -848,48 +1319,56 @@ export default {
             genus: null,
             name_authority: null,
             name_comments: null,
-            period_list: [{ id: 1, name: 'January' },
-            { id: 2, name: 'February' },
-            { id: 3, name: 'March' },
-            { id: 4, name: 'April' },
-            { id: 5, name: 'May' },
-            { id: 6, name: 'June' },
-            { id: 7, name: 'July' },
-            { id: 8, name: 'August' },
-            { id: 9, name: 'September' },
-            { id: 10, name: 'October' },
-            { id: 11, name: 'November' },
-            { id: 12, name: 'December' },
+            period_list: [
+                { id: 1, name: 'January' },
+                { id: 2, name: 'February' },
+                { id: 3, name: 'March' },
+                { id: 4, name: 'April' },
+                { id: 5, name: 'May' },
+                { id: 6, name: 'June' },
+                { id: 7, name: 'July' },
+                { id: 8, name: 'August' },
+                { id: 9, name: 'September' },
+                { id: 10, name: 'October' },
+                { id: 11, name: 'November' },
+                { id: 12, name: 'December' },
             ],
             minimum_fire_interval_range: false,
             average_lifespan_range: false,
             generation_length_range: false,
             time_to_maturity_range: false,
-            interval_choice: [{ id: 1, name: 'year/s' },
-            { id: 2, name: 'month/s' }
+            interval_choice: [
+                { id: 1, name: 'year/s' },
+                { id: 2, name: 'month/s' },
             ],
             errors: {
                 minimum_fire_interval_error: null,
                 average_lifespan_error: null,
                 generation_length_error: null,
-                time_to_maturity_error: null
+                time_to_maturity_error: null,
             },
-        }
-    },
-    components: {
-        FormSection,
-        BasicConservationStatus,
-        HelpText
+        };
     },
     computed: {
         distribution_public: function () {
-            return this.isPublic && this.species_community.publishing_status.distribution_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status.distribution_public
+            );
         },
         conservation_status_public: function () {
-            return this.isPublic && this.species_community.publishing_status.conservation_status_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status
+                    .conservation_status_public
+            );
         },
         conservation_attributes_public: function () {
-            return this.isPublic && this.species_community.publishing_status.conservation_attributes_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status
+                    .conservation_attributes_public
+            );
         },
         isReadOnly: function () {
             // this prop (is_readonly = true) is only send from split/combine species form to make the original species readonly
@@ -899,26 +1378,33 @@ export default {
             //---else the normal serializer value
             else {
                 let action = this.$route.query.action;
-                if (action === "edit" && this.species_community && this.species_community.user_edit_mode) {
+                if (
+                    action === 'edit' &&
+                    this.species_community &&
+                    this.species_community.user_edit_mode
+                ) {
                     return false;
-                }
-                else {
+                } else {
                     return this.species_community.readonly;
                 }
             }
         },
         isActive: function () {
-            return this.species_community.processing_status === "Active" ? true : false;
+            return this.species_community.processing_status === 'Active'
+                ? true
+                : false;
         },
         isPublic: function () {
-            return this.isActive && this.species_community.publishing_status.species_public ? true : false;
+            return this.isActive &&
+                this.species_community.publishing_status.species_public
+                ? true
+                : false;
         },
         isNOOReadOnly: function () {
             let vm = this;
             if (vm.species_community.distribution.noo_auto === true) {
                 return true;
-            }
-            else {
+            } else {
                 return vm.isReadOnly;
             }
         },
@@ -926,8 +1412,7 @@ export default {
             let vm = this;
             if (vm.species_community.distribution.eoo_auto === true) {
                 return true;
-            }
-            else {
+            } else {
                 return vm.isReadOnly;
             }
         },
@@ -935,14 +1420,19 @@ export default {
             let vm = this;
             if (vm.species_community.distribution.aoo_actual_auto === true) {
                 return true;
-            }
-            else {
+            } else {
                 return vm.isReadOnly;
             }
         },
         show_calculated_distribution_fields: function () {
-            return this.is_internal || (this.species_community.distribution.noo_auto && this.species_community.occurrence_count > 0
-                || !this.species_community.distribution.noo_auto && this.species_community.distribution.number_of_occurrences > 0)
+            return (
+                this.is_internal ||
+                (this.species_community.distribution.noo_auto &&
+                    this.species_community.occurrence_count > 0) ||
+                (!this.species_community.distribution.noo_auto &&
+                    this.species_community.distribution.number_of_occurrences >
+                        0)
+            );
         },
     },
     watch: {
@@ -956,64 +1446,165 @@ export default {
         //             vm.species_community.distribution.extent_of_occurrences=null;
         //         }
         // },
-        "species_community.distribution.number_of_iucn_locations": function (newVal) {
+        'species_community.distribution.number_of_iucn_locations': function (
+            newVal
+        ) {
             let vm = this;
-            if (newVal == "") {
-                vm.species_community.distribution.number_of_iucn_locations = null;
+            if (newVal == '') {
+                vm.species_community.distribution.number_of_iucn_locations =
+                    null;
             }
         },
-        "species_community.distribution.number_of_iucn_subpopulations": function (newVal) {
-            let vm = this;
-            if (newVal == "") {
-                vm.species_community.distribution.number_of_iucn_subpopulations = null;
+        'species_community.distribution.number_of_iucn_subpopulations':
+            function (newVal) {
+                let vm = this;
+                if (newVal == '') {
+                    vm.species_community.distribution.number_of_iucn_subpopulations =
+                        null;
+                }
+            },
+    },
+    created: async function () {
+        let vm = this;
+        if (vm.species_community.conservation_attributes) {
+            if (
+                vm.species_community.conservation_attributes
+                    .minimum_fire_interval_to != null &&
+                vm.species_community.conservation_attributes
+                    .minimum_fire_interval_to != '' &&
+                vm.species_community.conservation_attributes
+                    .minimum_fire_interval_to != undefined
+            ) {
+                vm.minimum_fire_interval_range = true;
             }
-        },
+            if (
+                vm.species_community.conservation_attributes
+                    .average_lifespan_to != null &&
+                vm.species_community.conservation_attributes
+                    .average_lifespan_to != '' &&
+                vm.species_community.conservation_attributes
+                    .average_lifespan_to != undefined
+            ) {
+                vm.average_lifespan_range = true;
+            }
+            if (
+                vm.species_community.conservation_attributes
+                    .generation_length_to != null &&
+                vm.species_community.conservation_attributes
+                    .generation_length_to != '' &&
+                vm.species_community.conservation_attributes
+                    .generation_length_to != undefined
+            ) {
+                vm.generation_length_range = true;
+            }
+            if (
+                vm.species_community.conservation_attributes
+                    .time_to_maturity_to != null &&
+                vm.species_community.conservation_attributes
+                    .time_to_maturity_to != '' &&
+                vm.species_community.conservation_attributes
+                    .time_to_maturity_to != undefined
+            ) {
+                vm.time_to_maturity_range = true;
+            }
+        }
+        //------fetch list of values
+        const response = await fetch('/api/species_profile_dict/');
+        vm.species_profile_dict = await response.json();
+        vm.flora_recruitment_type_list =
+            vm.species_profile_dict.flora_recruitment_type_list;
+        vm.flora_recruitment_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.root_morphology_list = vm.species_profile_dict.root_morphology_list;
+        vm.root_morphology_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.post_fire_habitatat_interactions_list =
+            vm.species_profile_dict.post_fire_habitatat_interactions_list;
+        vm.post_fire_habitatat_interactions_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.fetchRegions();
+    },
+    mounted: function () {
+        let vm = this;
+        vm.eventListeners();
+        vm.initialiseScientificNameLookup();
+        vm.loadTaxonomydetails();
+        vm.initialiseRegionSelect();
+        vm.initialiseDistrictSelect();
+        vm.enablePopovers();
     },
     methods: {
         showField(fieldValue) {
             if (!this.isReadOnly) {
-                return true
+                return true;
             }
             return this.isReadOnly && fieldValue;
         },
         updatePublishing(data) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.species, (vm.species_community.id + '/update_publishing_status')), {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
-                }, body: data
-            }).then(async (response) => {
-                vm.updatingPublishing = false;
-                vm.species_community.publishing_status = await response.json();
-                vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Publishing settings have been updated',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Publishing settings cannot be updated because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.species,
+                    vm.species_community.id + '/update_publishing_status'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingPublishing = false;
-            });
+                    body: data,
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingPublishing = false;
+                    vm.species_community.publishing_status =
+                        await response.json();
+                    vm.species_community_original.publishing_status =
+                        helpers.copyObject(
+                            vm.species_community.publishing_status
+                        );
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Publishing settings have been updated',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Publishing settings cannot be updated because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingPublishing = false;
+                }
+            );
         },
         updatePublishingDetails: function () {
             let vm = this;
             vm.updatingPublishing = true;
             //if not already public, we make it public (notify user first)
             //but only if it is active
-            if (helpers.checkForChange(vm.species_community_original.publishing_status, vm.species_community.publishing_status)) {
+            if (
+                helpers.checkForChange(
+                    vm.species_community_original.publishing_status,
+                    vm.species_community.publishing_status
+                )
+            ) {
                 swal.fire({
                     title: 'Error',
                     text: 'No changes made',
@@ -1023,10 +1614,11 @@ export default {
                     },
                 });
                 vm.updatingPublishing = false;
-            }
-            else if (vm.isPublic && vm.isActive) {
+            } else if (vm.isPublic && vm.isActive) {
                 //send just publishing form data
-                let data = JSON.stringify(vm.species_community.publishing_status)
+                let data = JSON.stringify(
+                    vm.species_community.publishing_status
+                );
                 vm.updatePublishing(data);
             } else {
                 swal.fire({
@@ -1043,11 +1635,11 @@ export default {
         switchNOO: function (value) {
             let vm = this;
             var selectedValue = value;
-            if (selectedValue === "true") {
+            if (selectedValue === 'true') {
                 swal.fire({
-                    title: "Changing from Manual to Auto",
-                    text: "If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.",
-                    icon: "info",
+                    title: 'Changing from Manual to Auto',
+                    text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
+                    icon: 'info',
                     showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
@@ -1055,24 +1647,29 @@ export default {
                         confirmButton: 'btn btn-primary',
                     },
                     reverseButtons: true,
-                }).then((swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        document.getElementById("noo_auto").checked = true;
-                        document.getElementById("noo_manual").checked = false;
-                        vm.species_community.distribution.noo_auto = true
-                    } else if (swalresult.dismiss === swal.DismissReason.cancel) {
-                        document.getElementById("noo_manual").checked = true;
-                        document.getElementById("noo_auto").checked = false;
-                        vm.species_community.distribution.noo_auto = false
+                }).then(
+                    (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            document.getElementById('noo_auto').checked = true;
+                            document.getElementById('noo_manual').checked =
+                                false;
+                            vm.species_community.distribution.noo_auto = true;
+                        } else if (
+                            swalresult.dismiss === swal.DismissReason.cancel
+                        ) {
+                            document.getElementById('noo_manual').checked =
+                                true;
+                            document.getElementById('noo_auto').checked = false;
+                            vm.species_community.distribution.noo_auto = false;
+                        }
+                    },
+                    (error) => {
+                        console.error('Error:', error);
                     }
-
-                }, (error) => {
-                    console.error('Error:', error);
-                });
-            }
-            else {
-                document.getElementById("noo_manual").checked = true;
-                document.getElementById("noo_auto").checked = false;
+                );
+            } else {
+                document.getElementById('noo_manual').checked = true;
+                document.getElementById('noo_auto').checked = false;
                 vm.species_community.distribution.noo_auto = false;
                 vm.$nextTick(() => {
                     vm.$refs.number_of_occurrences.focus();
@@ -1082,11 +1679,11 @@ export default {
         switchEOO: function (value) {
             let vm = this;
             var selectedValue = value;
-            if (selectedValue === "true") {
+            if (selectedValue === 'true') {
                 swal.fire({
-                    title: "Changing from Manual to Auto",
-                    text: "If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.",
-                    icon: "info",
+                    title: 'Changing from Manual to Auto',
+                    text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
+                    icon: 'info',
                     showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
@@ -1094,32 +1691,37 @@ export default {
                         confirmButton: 'btn btn-primary',
                     },
                     reverseButtons: true,
-                }).then((swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        // set EOO field to calculted_EOO vale
-                        document.getElementById("eoo_auto").checked = true;
-                        document.getElementById("eoo_manual").checked = false;
-                        // set eoo to true to fire the change of value so the EOO input box readonly
-                        vm.species_community.distribution.eoo_auto = true;
-                        vm.$nextTick(() => {
-                            vm.enablePopovers();
-                        });
-                    } else if (swalresult.dismiss === swal.DismissReason.cancel) {
-                        document.getElementById("eoo_manual").checked = true;
-                        document.getElementById("eoo_auto").checked = false;
-                        // set eoo to false to fire the change of value so the EOO input box will be editable
-                        vm.species_community.distribution.eoo_auto = false;
-                        //Otherwise revert back to its manual value if swal cancelled
+                }).then(
+                    (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            // set EOO field to calculted_EOO vale
+                            document.getElementById('eoo_auto').checked = true;
+                            document.getElementById('eoo_manual').checked =
+                                false;
+                            // set eoo to true to fire the change of value so the EOO input box readonly
+                            vm.species_community.distribution.eoo_auto = true;
+                            vm.$nextTick(() => {
+                                vm.enablePopovers();
+                            });
+                        } else if (
+                            swalresult.dismiss === swal.DismissReason.cancel
+                        ) {
+                            document.getElementById('eoo_manual').checked =
+                                true;
+                            document.getElementById('eoo_auto').checked = false;
+                            // set eoo to false to fire the change of value so the EOO input box will be editable
+                            vm.species_community.distribution.eoo_auto = false;
+                            //Otherwise revert back to its manual value if swal cancelled
+                        }
+                    },
+                    (error) => {
+                        console.error('Error:', error);
                     }
-
-                }, (error) => {
-                    console.error('Error:', error);
-                });
-            }
-            else {
+                );
+            } else {
                 // set EOO value to null if manual selected
-                document.getElementById("eoo_manual").checked = true;
-                document.getElementById("eoo_auto").checked = false;
+                document.getElementById('eoo_manual').checked = true;
+                document.getElementById('eoo_auto').checked = false;
                 // set eoo to false to fire the change of value so the EOO input box will be editable
                 vm.species_community.distribution.eoo_auto = false;
                 vm.$nextTick(() => {
@@ -1130,11 +1732,11 @@ export default {
         switchAOOActual: function (value) {
             let vm = this;
             var selectedValue = value;
-            if (selectedValue === "true") {
+            if (selectedValue === 'true') {
                 swal.fire({
-                    title: "Changing from Manual to Auto",
-                    text: "If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.",
-                    icon: "info",
+                    title: 'Changing from Manual to Auto',
+                    text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
+                    icon: 'info',
                     showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
@@ -1142,32 +1744,41 @@ export default {
                         confirmButton: 'btn btn-primary',
                     },
                     reverseButtons: true,
-                }).then((swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        // set AOOActual field to calculted_AOOActual vale
-                        document.getElementById("aoo_actual_auto").checked = true;
-                        document.getElementById("aoo_actual_manual").checked = false;
-                        // set aoo_actual to true to fire the change of value so the AOOActual input box readonly
-                        vm.species_community.distribution.aoo_actual_auto = true;
-                        vm.$nextTick(() => {
-                            vm.enablePopovers();
-                        });
-                    } else if (swalresult.dismiss === swal.DismissReason.cancel) {
-                        document.getElementById("aoo_actual_manual").checked = true;
-                        document.getElementById("aoo_actual_auto").checked = false;
-                        // set eoo to false to fire the change of value so the EOO input box will be editable
-                        vm.species_community.distribution.aoo_actual_auto = false;
-                        //Otherwise revert back to its manual value if swal cancelled
+                }).then(
+                    (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            // set AOOActual field to calculted_AOOActual vale
+                            document.getElementById('aoo_actual_auto').checked =
+                                true;
+                            document.getElementById(
+                                'aoo_actual_manual'
+                            ).checked = false;
+                            // set aoo_actual to true to fire the change of value so the AOOActual input box readonly
+                            vm.species_community.distribution.aoo_actual_auto = true;
+                            vm.$nextTick(() => {
+                                vm.enablePopovers();
+                            });
+                        } else if (
+                            swalresult.dismiss === swal.DismissReason.cancel
+                        ) {
+                            document.getElementById(
+                                'aoo_actual_manual'
+                            ).checked = true;
+                            document.getElementById('aoo_actual_auto').checked =
+                                false;
+                            // set eoo to false to fire the change of value so the EOO input box will be editable
+                            vm.species_community.distribution.aoo_actual_auto = false;
+                            //Otherwise revert back to its manual value if swal cancelled
+                        }
+                    },
+                    (error) => {
+                        console.error('Error:', error);
                     }
-
-                }, (error) => {
-                    console.error('Error:', error);
-                });
-            }
-            else {
+                );
+            } else {
                 // set AOOActual value to null if manual selected
-                document.getElementById("aoo_actual_manual").checked = true;
-                document.getElementById("aoo_actual_auto").checked = false;
+                document.getElementById('aoo_actual_manual').checked = true;
+                document.getElementById('aoo_actual_auto').checked = false;
                 // set aoo_actual to false to fire the change of value so the AOOActual input box will be editable
                 vm.species_community.distribution.aoo_actual_auto = false;
                 vm.$nextTick(() => {
@@ -1181,11 +1792,13 @@ export default {
                     this.species_community.district_id = null; //-----to remove the previous selection
                 }
                 this.filtered_district_list = [];
-                this.filtered_district_list = [{
-                    id: null,
-                    name: "",
-                    region_id: null,
-                }];
+                this.filtered_district_list = [
+                    {
+                        id: null,
+                        name: '',
+                        region_id: null,
+                    },
+                ];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
                     if (choice.region_id === this.species_community.region_id) {
@@ -1197,48 +1810,53 @@ export default {
         checkDate: function () {
             let vm = this;
             if (vm.$refs.last_data_curration_date.value) {
-                vm.species_community.last_data_curration_date = vm.$refs.last_data_curration_date.value;
-            }
-            else {
+                vm.species_community.last_data_curration_date =
+                    vm.$refs.last_data_curration_date.value;
+            } else {
                 vm.species_community.last_data_curration_date = null;
             }
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_scientific_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.species_community.group_type_id,
-                            species_profile: true,
-                            species_id: vm.species_community.id, // to filter species  current/non_current
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id:
+                                    vm.species_community.group_type_id,
+                                species_profile: true,
+                                species_id: vm.species_community.id, // to filter species  current/non_current
+                            };
+                            return query;
+                        },
+                        // results: function (data, page) { // parse the results into the format expected by Select2.
+                        //     // since we are using custom formatting functions we do not need to alter remote JSON data
+                        //     return {results: data};
+                        // },
                     },
-                    // results: function (data, page) { // parse the results into the format expected by Select2.
-                    //     // since we are using custom formatting functions we do not need to alter remote JSON data
-                    //     return {results: data};
-                    // },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
-                    vm.species_community.taxonomy_id = data
+                    vm.species_community.taxonomy_id = data;
                     vm.species_display = e.params.data.scientific_name;
                     if (e.params.data.conservation_status) {
-                        vm.conservation_category = e.params.data.conservation_status.conservation_category;
-                        vm.conservation_list = e.params.data.conservation_status.conservation_list;
-                        vm.conservation_criteria = e.params.data.conservation_status.conservation_criteria;
+                        vm.conservation_category =
+                            e.params.data.conservation_status.conservation_category;
+                        vm.conservation_list =
+                            e.params.data.conservation_status.conservation_list;
+                        vm.conservation_criteria =
+                            e.params.data.conservation_status.conservation_criteria;
                     }
                     vm.common_name = e.params.data.common_name;
                     vm.taxon_name_id = e.params.data.taxon_name_id;
@@ -1250,10 +1868,10 @@ export default {
                     vm.name_comments = e.params.data.name_comments;
                     // vm.filterFloraScientificName = data;
                     // sessionStorage.setItem("filterFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.taxonomy_id = ''
+                    vm.species_community.taxonomy_id = '';
                     vm.species_display = '';
                     vm.conservation_category = '';
                     vm.conservation_criteria = '';
@@ -1262,13 +1880,15 @@ export default {
                     vm.taxon_name_id = '';
                     vm.taxon_previous_name = '';
                     vm.phylogenetic_group = '';
-                    vm.family = '',
-                        vm.genus = '',
-                        vm.name_authority = '';
+                    (vm.family = ''), (vm.genus = ''), (vm.name_authority = '');
                     vm.name_comments = '';
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
@@ -1278,115 +1898,154 @@ export default {
             //console.log(vm.taxon_names);
 
             if (vm.species_community.taxonomy_details != null) {
-                var newOption = new Option(vm.species_community.taxonomy_details.scientific_name, vm.species_community.taxonomy_id, false, true);
+                var newOption = new Option(
+                    vm.species_community.taxonomy_details.scientific_name,
+                    vm.species_community.taxonomy_id,
+                    false,
+                    true
+                );
                 // newOption.setAttribute('data-select2-id', '2');
                 $('#' + vm.scientific_name_lookup).append(newOption);
-                vm.species_display = vm.species_community.taxonomy_details.scientific_name;
+                vm.species_display =
+                    vm.species_community.taxonomy_details.scientific_name;
                 if (vm.species_community.conservation_status) {
-                    vm.conservation_category = vm.species_community.conservation_status.conservation_category;
-                    vm.conservation_list = vm.species_community.conservation_status.conservation_list;
+                    vm.conservation_category =
+                        vm.species_community.conservation_status.conservation_category;
+                    vm.conservation_list =
+                        vm.species_community.conservation_status.conservation_list;
                 }
-                vm.common_name = vm.species_community.taxonomy_details.common_name;
-                vm.taxon_name_id = vm.species_community.taxonomy_details.taxon_name_id;
-                vm.taxon_previous_name = vm.species_community.taxonomy_details.taxon_previous_name;
-                vm.phylogenetic_group = vm.species_community.taxonomy_details.phylogenetic_group;
+                vm.common_name =
+                    vm.species_community.taxonomy_details.common_name;
+                vm.taxon_name_id =
+                    vm.species_community.taxonomy_details.taxon_name_id;
+                vm.taxon_previous_name =
+                    vm.species_community.taxonomy_details.taxon_previous_name;
+                vm.phylogenetic_group =
+                    vm.species_community.taxonomy_details.phylogenetic_group;
                 vm.family = vm.species_community.taxonomy_details.family_name;
                 vm.genus = vm.species_community.taxonomy_details.genera_name;
-                vm.name_authority = vm.species_community.taxonomy_details.name_authority;
-                vm.name_comments = vm.species_community.taxonomy_details.name_comments;
+                vm.name_authority =
+                    vm.species_community.taxonomy_details.name_authority;
+                vm.name_comments =
+                    vm.species_community.taxonomy_details.name_comments;
             }
         },
         eventListeners: function () {
             let vm = this;
-            $(vm.$refs.flowering_period_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Flowering Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.flowering_period_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Flowering Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.flowering_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.flowering_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.flowering_period = selected.val();
+                    vm.species_community.conservation_attributes.flowering_period =
+                        selected.val();
                 });
-            $(vm.$refs.fruiting_period_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Fruiting Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.fruiting_period_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Fruiting Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.fruiting_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.fruiting_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.fruiting_period = selected.val();
+                    vm.species_community.conservation_attributes.fruiting_period =
+                        selected.val();
                 });
-            $(vm.$refs.breeding_period_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Breeding Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.breeding_period_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Breeding Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.breeding_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.breeding_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.breeding_period = selected.val();
+                    vm.species_community.conservation_attributes.breeding_period =
+                        selected.val();
                 });
         },
         handleMinimumFireIntervalRange: function (e) {
             if (this.minimum_fire_interval_range == false) {
-                this.species_community.conservation_attributes.minimum_fire_interval_to = null;
+                this.species_community.conservation_attributes.minimum_fire_interval_to =
+                    null;
             }
         },
         handleAverageLifespanRange: function () {
             if (this.average_lifespan_range == false) {
-                this.species_community.conservation_attributes.average_lifespan_to = null;
+                this.species_community.conservation_attributes.average_lifespan_to =
+                    null;
             }
         },
         handleGenerationLengthRange: function () {
             if (this.generation_length_range == false) {
-                this.species_community.conservation_attributes.generation_length_to = null;
+                this.species_community.conservation_attributes.generation_length_to =
+                    null;
             }
         },
         handleTimeToMaturityRange: function () {
             if (this.time_to_maturity_range == false) {
-                this.species_community.conservation_attributes.time_to_maturity_to = null;
+                this.species_community.conservation_attributes.time_to_maturity_to =
+                    null;
             }
         },
-        validateRange: function (field_from, field_to, field_choice, field_error) {
-            const rangeFrom = parseInt(this.species_community.conservation_attributes[field_from]);
-            const rangeTo = parseInt(this.species_community.conservation_attributes[field_to]);
-            const intervalChoice = this.species_community.conservation_attributes[field_choice];
-            if ((rangeFrom != null || rangeTo != null) && intervalChoice == null) {
-                this.errors[field_error] = "Please select years/months";
-            }
-            else if (rangeFrom >= rangeTo) {
-                this.errors[field_error] = "Please enter a valid range";
-            }
-            else {
-                this.errors[field_error] = "";
+        validateRange: function (
+            field_from,
+            field_to,
+            field_choice,
+            field_error
+        ) {
+            const rangeFrom = parseInt(
+                this.species_community.conservation_attributes[field_from]
+            );
+            const rangeTo = parseInt(
+                this.species_community.conservation_attributes[field_to]
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes[field_choice];
+            if (
+                (rangeFrom != null || rangeTo != null) &&
+                intervalChoice == null
+            ) {
+                this.errors[field_error] = 'Please select years/months';
+            } else if (rangeFrom >= rangeTo) {
+                this.errors[field_error] = 'Please enter a valid range';
+            } else {
+                this.errors[field_error] = '';
             }
         },
         intervalMonthsComputed: function (field_from, field_choice) {
-
-            const totalMonths = parseInt(this.species_community.conservation_attributes[field_from]);
-            const intervalChoice = this.species_community.conservation_attributes[field_choice];
+            const totalMonths = parseInt(
+                this.species_community.conservation_attributes[field_from]
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes[field_choice];
 
             if (totalMonths > 12 && intervalChoice == 2) {
                 const years = Math.floor(totalMonths / 12);
                 const months = totalMonths % 12;
-                return years + " year/s " + months + " month/s";
-            }
-            else {
-                return ""
+                return years + ' year/s ' + months + ' month/s';
+            } else {
+                return '';
             }
         },
         focusConservationPlanReference: function () {
@@ -1397,18 +2056,28 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            fetch(api_endpoints.regions).then(async (response) => {
-                vm.api_regions = await response.json();
-                for (var i = 0; i < vm.api_regions.length; i++) {
-                    this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
-                }
-                // vm.setProposalData2(this.regions);
-                if (vm.species_community.regions) {
-                    vm.chainedSelectDistricts(vm.species_community.regions, "fetch");
+            fetch(api_endpoints.regions).then(
+                async (response) => {
+                    vm.api_regions = await response.json();
+                    for (var i = 0; i < vm.api_regions.length; i++) {
+                        this.region_list.push({
+                            text: vm.api_regions[i].name,
+                            value: vm.api_regions[i].id,
+                            districts: vm.api_regions[i].districts,
+                        });
+                    }
+                    // vm.setProposalData2(this.regions);
+                    if (vm.species_community.regions) {
+                        vm.chainedSelectDistricts(
+                            vm.species_community.regions,
+                            'fetch'
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            })
+            );
         },
         searchList: function (id, search_list) {
             /* Searches for dictionary in list */
@@ -1421,16 +2090,22 @@ export default {
         },
         chainedSelectDistricts: function (regions, action, deselect_region_id) {
             let vm = this;
-            if (action != "fetch") {
+            if (action != 'fetch') {
                 vm.species_community.districts = []; //-----to remove the previous selection
             }
             vm.district_list = [];
             if (regions) {
                 for (let r of regions) {
-                    var api_districts = this.searchList(r, vm.region_list).districts;
+                    var api_districts = this.searchList(
+                        r,
+                        vm.region_list
+                    ).districts;
                     if (api_districts.length > 0) {
                         for (var i = 0; i < api_districts.length; i++) {
-                            this.district_list.push({ text: api_districts[i].name, value: api_districts[i].id });
+                            this.district_list.push({
+                                text: api_districts[i].name,
+                                value: api_districts[i].id,
+                            });
                         }
                     }
                 }
@@ -1438,104 +2113,58 @@ export default {
         },
         initialiseRegionSelect: function () {
             let vm = this;
-            $(vm.$refs.regions_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Region",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.regions_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Region',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "select");
-                }).
-                on("select2:unselect", function (e) {
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'select'
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "deselect");
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'deselect'
+                    );
                 });
         },
         initialiseDistrictSelect: function () {
             let vm = this;
-            $(vm.$refs.districts_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select District",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.districts_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select District',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
                 });
         },
         enablePopovers: function () {
-            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+            var popoverTriggerList = [].slice.call(
+                document.querySelectorAll('[data-bs-toggle="popover"]')
+            );
             popoverTriggerList.map(function (popoverTriggerEl) {
-                return new bootstrap.Popover(popoverTriggerEl)
-            })
-        },
-    },
-    created: async function () {
-        let vm = this;
-        if (vm.species_community.conservation_attributes) {
-            if (vm.species_community.conservation_attributes.minimum_fire_interval_to != null &&
-                vm.species_community.conservation_attributes.minimum_fire_interval_to != "" &&
-                vm.species_community.conservation_attributes.minimum_fire_interval_to != undefined) {
-                vm.minimum_fire_interval_range = true;
-            }
-            if (vm.species_community.conservation_attributes.average_lifespan_to != null &&
-                vm.species_community.conservation_attributes.average_lifespan_to != "" &&
-                vm.species_community.conservation_attributes.average_lifespan_to != undefined) {
-                vm.average_lifespan_range = true;
-            }
-            if (vm.species_community.conservation_attributes.generation_length_to != null &&
-                vm.species_community.conservation_attributes.generation_length_to != "" &&
-                vm.species_community.conservation_attributes.generation_length_to != undefined) {
-                vm.generation_length_range = true;
-            }
-            if (vm.species_community.conservation_attributes.time_to_maturity_to != null &&
-                vm.species_community.conservation_attributes.time_to_maturity_to != "" &&
-                vm.species_community.conservation_attributes.time_to_maturity_to != undefined) {
-                vm.time_to_maturity_range = true;
-            }
-        }
-        //------fetch list of values
-        const response = await fetch('/api/species_profile_dict/');
-        vm.species_profile_dict = await response.json();
-        vm.flora_recruitment_type_list = vm.species_profile_dict.flora_recruitment_type_list;
-        vm.flora_recruitment_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.root_morphology_list = vm.species_profile_dict.root_morphology_list;
-        vm.root_morphology_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.post_fire_habitatat_interactions_list = vm.species_profile_dict.post_fire_habitatat_interactions_list;
-        vm.post_fire_habitatat_interactions_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
+                return new bootstrap.Popover(popoverTriggerEl);
             });
-        vm.fetchRegions();
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.eventListeners();
-        vm.initialiseScientificNameLookup();
-        vm.loadTaxonomydetails();
-        vm.initialiseRegionSelect();
-        vm.initialiseDistrictSelect();
-        vm.enablePopovers();
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
index daa38687..ad0e553e 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
@@ -1,37 +1,56 @@
 <template lang="html">
     <div id="species_split_documents">
-        <FormSection :formCollapse="false" label="Documents" :Index="documentBody">
+        <FormSection
+            :formCollapse="false"
+            label="Documents"
+            :Index="documentBody"
+        >
             <form class="form-horizontal" action="index.html" method="post">
                 <div class="col-sm-12 form-check form-check-inline">
-                    <input class="form-check-input" type="radio" :id="'doc_select_all'+species_community.id" name="documentSelect" value="selectAll" @click="selectDocumentOption($event)"/>
-                    <label class="form-check-label">Copy all documents to Species {{species_community.species_number}}</label>
+                    <input
+                        class="form-check-input"
+                        type="radio"
+                        :id="'doc_select_all' + species_community.id"
+                        name="documentSelect"
+                        value="selectAll"
+                        @click="selectDocumentOption($event)"
+                    />
+                    <label class="form-check-label"
+                        >Copy all documents to Species
+                        {{ species_community.species_number }}</label
+                    >
                 </div>
                 <div class="col-sm-12 form-check form-check-inline mb-3">
-                    <input class="form-check-input" type="radio" :id="'doc_select_individual'+species_community.id" name="documentSelect" value="individual" @click="selectDocumentOption($event)"/>
+                    <input
+                        class="form-check-input"
+                        type="radio"
+                        :id="'doc_select_individual' + species_community.id"
+                        name="documentSelect"
+                        value="individual"
+                        @click="selectDocumentOption($event)"
+                    />
                     <label class="form-check-label">Decide per document</label>
                 </div>
                 <div>
-                    <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                    :dtHeaders="documents_headers"/>
+                    <datatable
+ref="documents_datatable" :id="panelBody" :dt-options="documents_options"
+                    :dt-headers="documents_headers"/>
                 </div>
             </form>
         </FormSection>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-from '@/utils/hooks'
-
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
-        name: 'SpeciesSplitDocuments',
+    name: 'SpeciesSplitDocuments',
+        components: {
+            FormSection,
+            datatable,
+        },
         props:{
             species_community:{
                 type: Object,
@@ -210,11 +229,21 @@ export default {
                 }
             }
         },
-        components: {
-            FormSection,
-            datatable,
-        },
-        computed: {
+    computed: {},
+        mounted: function(){
+            let vm = this;
+            this.$nextTick(() => {
+                vm.addEventListeners();
+                if(vm.$parent.document_selection!=null){
+                    if(vm.$parent.document_selection==="selectAll"){
+                        document.getElementById('doc_select_all'+vm.species_community.id).checked=true;
+                    }
+                    else{
+                        document.getElementById('doc_select_individual'+vm.species_community.id).checked=true;
+                    }
+                }
+
+            });
         },
         methods:{
             selectDocumentOption(e){
@@ -261,40 +290,26 @@ export default {
                 if (this.$refs.documents_datatable !== undefined) {this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc();}
             },
         },
-        mounted: function(){
-            let vm = this;
-            this.$nextTick(() => {
-                vm.addEventListeners();
-                if(vm.$parent.document_selection!=null){
-                    if(vm.$parent.document_selection==="selectAll"){
-                        document.getElementById('doc_select_all'+vm.species_community.id).checked=true;
-                    }
-                    else{
-                        document.getElementById('doc_select_individual'+vm.species_community.id).checked=true;
-                    }
-                }
 
-            });
-        },
-
-    }
+    },
+};
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
index 4618c010..642028a4 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
@@ -1,103 +1,209 @@
 <template lang="html">
     <div id="species">
-        <FormSection :formCollapse="false" label="Taxonomy" :Index="taxonBody">
+        <FormSection :form-collapse="false" label="Taxonomy" :Index="taxonBody">
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Scientific Name:</label>
-                <div class="col-sm-8" :id="select_scientific_name">
-                    <select :disabled="isReadOnly" :id="scientific_name_lookup" :name="scientific_name_lookup"
-                        :ref="scientific_name_lookup" class="form-control" />
+                <label for="" class="col-sm-3 control-label"
+                    >Scientific Name:</label
+                >
+                <div :id="select_scientific_name" class="col-sm-8">
+                    <select
+                        :id="scientific_name_lookup"
+                        :ref="scientific_name_lookup"
+                        :disabled="isReadOnly"
+                        :name="scientific_name_lookup"
+                        class="form-control"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label"></label>
                 <div class="col-sm-8">
-                    <textarea disabled class="form-control" rows="3" id="species_display" v-model="species_display" />
+                    <textarea
+                        id="species_display"
+                        v-model="species_display"
+                        disabled
+                        class="form-control"
+                        rows="3"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Common Name:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Common Name:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="2" id="common_name" placeholder=""
-                        v-model="common_name" />
+                    <textarea
+                        id="common_name"
+                        v-model="common_name"
+                        :disabled="true"
+                        class="form-control"
+                        rows="2"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Taxon Name ID:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Taxon Name ID:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="true" type="text" class="form-control" id="taxon_name_id" placeholder=""
-                        v-model="taxon_name_id" />
+                    <input
+                        id="taxon_name_id"
+                        v-model="taxon_name_id"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                     <!-- gives error for the below when new species created as no taxonomy id is present -->
                     <!-- <input :disabled="true" type="text" class="form-control" id="taxon_name_id" placeholder=""
                     v-model="species_communities.taxonomy_details.taxon_name_id"/> -->
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Previous Name:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Previous Name:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="true" type="text" class="form-control" id="previous_name" placeholder=""
-                        v-model="taxon_previous_name" />
+                    <input
+                        id="previous_name"
+                        v-model="taxon_previous_name"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Phylogenetic Group:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Phylogenetic Group:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="1" id="phylogenetic_group" placeholder=""
-                        v-model="phylogenetic_group" />
+                    <textarea
+                        id="phylogenetic_group"
+                        v-model="phylogenetic_group"
+                        :disabled="true"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Family:</label>
                 <div class="col-sm-8">
-                    <textarea :disabled="true" rows="1" class="form-control" id="family" placeholder=""
-                        v-model="family" />
+                    <textarea
+                        id="family"
+                        v-model="family"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Genus:</label>
                 <div class="col-sm-8">
-                    <textarea :disabled="true" rows="1" class="form-control" id="genus" placeholder=""
-                        v-model="genus" />
+                    <textarea
+                        id="genus"
+                        v-model="genus"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Name Authority:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Name Authority:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" rows="1" class="form-control" id="name_authority" placeholder=""
-                        v-model="name_authority" />
+                    <textarea
+                        id="name_authority"
+                        v-model="name_authority"
+                        :disabled="true"
+                        rows="1"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Nomos names comments:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Nomos names comments:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="3" id="comment" placeholder=""
-                        v-model="name_comments" />
+                    <textarea
+                        id="comment"
+                        v-model="name_comments"
+                        :disabled="true"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
-        <FormSection :formCollapse="false" label="Distribution" :Index="distributionBody">
+        <FormSection
+            :form-collapse="false"
+            label="Distribution"
+            :Index="distributionBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Distribution:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Distribution:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="1" id="distribution" placeholder=""
-                        v-model="species_original.distribution.distribution" />
+                    <textarea
+                        id="distribution"
+                        v-model="species_original.distribution.distribution"
+                        :disabled="true"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-1">
                     <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                    <input class="form-check-input" type="checkbox" :id="'distribution' + species_community.id"
-                        @change="checkDistributionInput('distribution' + species_community.id, 'distribution')" />
+                    <input
+                        :id="'distribution' + species_community.id"
+                        class="form-check-input"
+                        type="checkbox"
+                        @change="
+                            checkDistributionInput(
+                                'distribution' + species_community.id,
+                                'distribution'
+                            )
+                        "
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Distribution:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Distribution:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="1" id="distribution" placeholder=""
-                        v-model="species_community.distribution.distribution" />
+                    <textarea
+                        id="distribution"
+                        v-model="species_community.distribution.distribution"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="1"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Region:</label>
-                <div class="col-sm-8" :id="select_regions_read_only">
-                    <label for="" class="control-label">{{ getselectedRegionNames(species_original) }}</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Region:</label
+                >
+                <div :id="select_regions_read_only" class="col-sm-8">
+                    <label for="" class="control-label">{{
+                        getselectedRegionNames(species_original)
+                    }}</label>
                     <!-- <select :disabled="true"
                         style="width:100%;"
                         class="form-select input-sm"
@@ -111,26 +217,51 @@
                 </div>
                 <div class="col-sm-1">
                     <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                    <input class="form-check-input" type="checkbox" :id="'regions_select_chk' + species_community.id"
-                        @change="checkRegionDistrictInput('regions_select_chk' + species_community.id, 'regions', 'regions_select')" />
+                    <input
+                        :id="'regions_select_chk' + species_community.id"
+                        class="form-check-input"
+                        type="checkbox"
+                        @change="
+                            checkRegionDistrictInput(
+                                'regions_select_chk' + species_community.id,
+                                'regions',
+                                'regions_select'
+                            )
+                        "
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Region:</label>
-                <div class="col-sm-8" :id="select_regions">
-                    <select :disabled="isReadOnly" style="width:100%;" class="form-select input-sm"
-                        v-model="species_community.regions" ref="regions_select">
-                        <option value="" selected disabled>Select region</option>
-                        <option v-for="option in region_list" :value="option.value" :key="option.value">
+                <div :id="select_regions" class="col-sm-8">
+                    <select
+                        ref="regions_select"
+                        v-model="species_community.regions"
+                        :disabled="isReadOnly"
+                        style="width: 100%"
+                        class="form-select input-sm"
+                    >
+                        <option value="" selected disabled>
+                            Select region
+                        </option>
+                        <option
+                            v-for="option in region_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} District:</label>
-                <div class="col-sm-8" :id="select_districts_read_only">
-                    <label for="" class="control-label">{{ getselectedDistrictNames(species_original) }}</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} District:</label
+                >
+                <div :id="select_districts_read_only" class="col-sm-8">
+                    <label for="" class="control-label">{{
+                        getselectedDistrictNames(species_original)
+                    }}</label>
                     <!-- <select :disabled="true"
                     class="form-select"
                     v-model="species_original.districts"
@@ -143,158 +274,361 @@
                 </div>
                 <div class="col-sm-1">
                     <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                    <input class="form-check-input" type="checkbox" :id="'districts_select_chk' + species_community.id"
-                        @change="checkRegionDistrictInput('districts_select_chk' + species_community.id, 'districts', 'districts_select')" />
+                    <input
+                        :id="'districts_select_chk' + species_community.id"
+                        class="form-check-input"
+                        type="checkbox"
+                        @change="
+                            checkRegionDistrictInput(
+                                'districts_select_chk' + species_community.id,
+                                'districts',
+                                'districts_select'
+                            )
+                        "
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">District:</label>
-                <div class="col-sm-8" :id="select_districts">
-                    <select :disabled="isReadOnly" class="form-select" v-model="species_community.districts"
-                        ref="districts_select">
-                        <option value="" selected disabled>Select district</option>
-                        <option v-for="option in district_list" :value="option.value" v-bind:key="option.value">
+                <div :id="select_districts" class="col-sm-8">
+                    <select
+                        ref="districts_select"
+                        v-model="species_community.districts"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
+                        <option value="" selected disabled>
+                            Select district
+                        </option>
+                        <option
+                            v-for="option in district_list"
+                            :key="option.value"
+                            :value="option.value"
+                        >
                             {{ option.text }}
                         </option>
                     </select>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Number of
-                    Occurrences:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Number of
+                    Occurrences:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="true" type="number" class="form-control" id="no_of_occurrences_orig"
-                        placeholder="" v-model="species_original.distribution.number_of_occurrences" />
+                    <input
+                        id="no_of_occurrences_orig"
+                        v-model="
+                            species_original.distribution.number_of_occurrences
+                        "
+                        :disabled="true"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Number of Occurrences:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Number of Occurrences:</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="no_of_occurrences"
-                        placeholder="" v-model="species_community.distribution.number_of_occurrences" />
+                    <input
+                        id="no_of_occurrences"
+                        v-model="
+                            species_community.distribution.number_of_occurrences
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-3">
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="true" class="noo_auto form-check-input"
-                            name="noo_auto" v-model="species_community.distribution.noo_auto">
+                        <input
+                            v-model="species_community.distribution.noo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="true"
+                            class="noo_auto form-check-input"
+                            name="noo_auto"
+                        />
                         <label class="form-check-label">auto</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="false" class="noo_auto form-check-input"
-                            name="noo_auto" v-model="species_community.distribution.noo_auto">
+                        <input
+                            v-model="species_community.distribution.noo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="false"
+                            class="noo_auto form-check-input"
+                            name="noo_auto"
+                        />
                         <label class="form-check-label">manual</label>
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Extent of Occurrences
-                    (km2):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Extent of Occurrences
+                    (km2):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="true" type="number" class="form-control" id="extent_of_occurrence_orig"
-                        placeholder="" v-model="species_original.distribution.extent_of_occurrences" />
+                    <input
+                        id="extent_of_occurrence_orig"
+                        v-model="
+                            species_original.distribution.extent_of_occurrences
+                        "
+                        :disabled="true"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Extent of Occurrences (km2):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Extent of Occurrences (km2):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="extent_of_occurrence"
-                        placeholder="" v-model="species_community.distribution.extent_of_occurrences" />
+                    <input
+                        id="extent_of_occurrence"
+                        v-model="
+                            species_community.distribution.extent_of_occurrences
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-3">
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="true" class="eoo_auto form-check-input"
-                            name="eoo_auto" v-model="species_community.distribution.eoo_auto">
+                        <input
+                            v-model="species_community.distribution.eoo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="true"
+                            class="eoo_auto form-check-input"
+                            name="eoo_auto"
+                        />
                         <label class="form-check-label">auto</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="false" class="eoo_auto form-check-input"
-                            name="eoo_auto" v-model="species_community.distribution.eoo_auto">
+                        <input
+                            v-model="species_community.distribution.eoo_auto"
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="false"
+                            class="eoo_auto form-check-input"
+                            name="eoo_auto"
+                        />
                         <label class="form-check-label">manual</label>
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Actual Area of
-                    Occupancy<br>(km2):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Actual Area of
+                    Occupancy<br />(km2):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="true" type="number" class="form-control" id="area_of_occupancy_actual_orig"
-                        placeholder="" v-model="species_original.distribution.area_of_occupancy_actual" />
+                    <input
+                        id="area_of_occupancy_actual_orig"
+                        v-model="
+                            species_original.distribution
+                                .area_of_occupancy_actual
+                        "
+                        :disabled="true"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Actual Area of Occupancy<br>(km2):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Actual Area of Occupancy<br />(km2):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="area_of_occupancy_actual"
-                        placeholder="" v-model="species_community.distribution.area_of_occupancy_actual" />
+                    <input
+                        id="area_of_occupancy_actual"
+                        v-model="
+                            species_community.distribution
+                                .area_of_occupancy_actual
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-3">
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="true" class="aoo_actual_auto form-check-input"
-                            name="aoo_actual_auto" v-model="species_community.distribution.aoo_actual_auto">
+                        <input
+                            v-model="
+                                species_community.distribution.aoo_actual_auto
+                            "
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="true"
+                            class="aoo_actual_auto form-check-input"
+                            name="aoo_actual_auto"
+                        />
                         <label class="form-check-label">auto</label>
                     </div>
                     <div class="form-check form-check-inline">
-                        <input :disabled="isReadOnly" type="radio" value="false"
-                            class="aoo_actual_auto form-check-input" name="aoo_actual_auto"
-                            v-model="species_community.distribution.aoo_actual_auto">
+                        <input
+                            v-model="
+                                species_community.distribution.aoo_actual_auto
+                            "
+                            :disabled="isReadOnly"
+                            type="radio"
+                            value="false"
+                            class="aoo_actual_auto form-check-input"
+                            name="aoo_actual_auto"
+                        />
                         <label class="form-check-label">manual</label>
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Area of
-                    Occupancy<br>(2km x 2km):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Area of Occupancy<br />(2km
+                    x 2km):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="true" type="number" class="form-control" id="area_of_occupany_orig" placeholder=""
-                        v-model="species_original.distribution.area_of_occupancy" />
+                    <input
+                        id="area_of_occupany_orig"
+                        v-model="
+                            species_original.distribution.area_of_occupancy
+                        "
+                        :disabled="true"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Area of Occupancy<br>(2km x 2km):</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Area of Occupancy<br />(2km x 2km):</label
+                >
                 <div class="col-sm-6">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="area_of_occupany"
-                        placeholder="" v-model="species_community.distribution.area_of_occupancy" />
+                    <input
+                        id="area_of_occupany"
+                        v-model="
+                            species_community.distribution.area_of_occupancy
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Number of IUCN
-                    Locations:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Number of IUCN
+                    Locations:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="true" type="number" class="form-control" id="no_of_iucn_locations" placeholder=""
-                        v-model="species_original.distribution.number_of_iucn_locations" />
+                    <input
+                        id="no_of_iucn_locations"
+                        v-model="
+                            species_original.distribution
+                                .number_of_iucn_locations
+                        "
+                        :disabled="true"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-1">
                     <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                    <input class="form-check-input" type="checkbox" :id="'no_of_iucn_locations' + species_community.id"
-                        @change="checkDistributionInput('no_of_iucn_locations' + species_community.id, 'number_of_iucn_locations')" />
+                    <input
+                        :id="'no_of_iucn_locations' + species_community.id"
+                        class="form-check-input"
+                        type="checkbox"
+                        @change="
+                            checkDistributionInput(
+                                'no_of_iucn_locations' + species_community.id,
+                                'number_of_iucn_locations'
+                            )
+                        "
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Number of IUCN Locations:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Number of IUCN Locations:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="no_of_iucn_locations"
-                        placeholder="" v-model="species_community.distribution.number_of_iucn_locations" />
+                    <input
+                        id="no_of_iucn_locations"
+                        v-model="
+                            species_community.distribution
+                                .number_of_iucn_locations
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">{{ species_original.species_number }} Number of IUCN
-                    Sub-populations:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >{{ species_original.species_number }} Number of IUCN
+                    Sub-populations:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="true" type="number" class="form-control" id="number_of_iucn_subpopulations"
-                        placeholder="" v-model="species_original.distribution.number_of_iucn_subpopulations" />
+                    <input
+                        id="number_of_iucn_subpopulations"
+                        v-model="
+                            species_original.distribution
+                                .number_of_iucn_subpopulations
+                        "
+                        :disabled="true"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-1">
                     <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                    <input class="form-check-input" type="checkbox"
+                    <input
                         :id="'no_of_iucn_subpopulations' + species_community.id"
-                        @change="checkDistributionInput('no_of_iucn_subpopulations' + species_community.id, 'number_of_iucn_subpopulations')" />
+                        class="form-check-input"
+                        type="checkbox"
+                        @change="
+                            checkDistributionInput(
+                                'no_of_iucn_subpopulations' +
+                                    species_community.id,
+                                'number_of_iucn_subpopulations'
+                            )
+                        "
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 col-form-label">Number of IUCN Sub-populations:</label>
+                <label for="" class="col-sm-3 col-form-label"
+                    >Number of IUCN Sub-populations:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="number" class="form-control" id="number_of_iucn_subpopulations"
-                        placeholder="" v-model="species_community.distribution.number_of_iucn_subpopulations" />
+                    <input
+                        id="number_of_iucn_subpopulations"
+                        v-model="
+                            species_community.distribution
+                                .number_of_iucn_subpopulations
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
@@ -1198,74 +1532,166 @@
             </div>
 
         </FormSection> -->
-        <FormSection :formCollapse="false" label="General" :Index="generalBody">
+        <FormSection
+            :form-collapse="false"
+            label="General"
+            :Index="generalBody"
+        >
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Department File
-                    Numbers:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Department File
+                    Numbers:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="true" type="text" class="form-control" id="department_file_numbers" placeholder=""
-                        v-model="species_original.department_file_numbers" />
+                    <input
+                        id="department_file_numbers"
+                        v-model="species_original.department_file_numbers"
+                        :disabled="true"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-1">
                     <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                    <input class="form-check-input" type="checkbox" :id="'dept_file_chk' + species_community.id"
-                        @change="checkDistributionInput('dept_file_chk' + species_community.id, 'department_file_numbers')" />
+                    <input
+                        :id="'dept_file_chk' + species_community.id"
+                        class="form-check-input"
+                        type="checkbox"
+                        @change="
+                            checkDistributionInput(
+                                'dept_file_chk' + species_community.id,
+                                'department_file_numbers'
+                            )
+                        "
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Department File Numbers:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >Department File Numbers:</label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="department_file_numbers"
-                        placeholder="" v-model="species_community.department_file_numbers" />
+                    <input
+                        id="department_file_numbers"
+                        v-model="species_community.department_file_numbers"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">Last data curration date: </label>
+                <label for="" class="col-sm-3 control-label"
+                    >Last data curration date:
+                </label>
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="date" class="form-control" name="last_data_curration_date"
-                        ref="last_data_curration_date" @change="checkDate()"
-                        v-model="species_community.last_data_curration_date" />
+                    <input
+                        ref="last_data_curration_date"
+                        v-model="species_community.last_data_curration_date"
+                        :disabled="isReadOnly"
+                        type="date"
+                        class="form-control"
+                        name="last_data_curration_date"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="conservation_plan_exists" class="col-sm-3 col-form-label">Conservation Plan Exists: </label>
+                <label
+                    for="conservation_plan_exists"
+                    class="col-sm-3 col-form-label"
+                    >Conservation Plan Exists:
+                </label>
                 <div class="col-sm-9">
-                    <label for="conservation_plan_exists" class="me-2">No</label>
-                    <input :disabled="isReadOnly" type="radio" :value="false" class="form-check-input me-2"
-                        id="conservation_plan_exists" v-model="species_community.conservation_plan_exists">
-                    <label for="conservation_plan_exists" class="me-2">Yes</label>
-                    <input :disabled="isReadOnly" type="radio" :value="true" class="form-check-input"
-                        id="conservation_plan_exists" v-model="species_community.conservation_plan_exists"
-                        @change="focusConservationPlanReference">
-                </div>
-            </div>
-            <div v-if="species_community.conservation_plan_exists" class="row mb-3">
-                <label for="conservation_plan_reference" class="col-sm-3 col-form-label">Conservation Plan Reference /
-                    Location: </label>
+                    <label for="conservation_plan_exists" class="me-2"
+                        >No</label
+                    >
+                    <input
+                        id="conservation_plan_exists"
+                        v-model="species_community.conservation_plan_exists"
+                        :disabled="isReadOnly"
+                        type="radio"
+                        :value="false"
+                        class="form-check-input me-2"
+                    />
+                    <label for="conservation_plan_exists" class="me-2"
+                        >Yes</label
+                    >
+                    <input
+                        id="conservation_plan_exists"
+                        v-model="species_community.conservation_plan_exists"
+                        :disabled="isReadOnly"
+                        type="radio"
+                        :value="true"
+                        class="form-check-input"
+                        @change="focusConservationPlanReference"
+                    />
+                </div>
+            </div>
+            <div
+                v-if="species_community.conservation_plan_exists"
+                class="row mb-3"
+            >
+                <label
+                    for="conservation_plan_reference"
+                    class="col-sm-3 col-form-label"
+                    >Conservation Plan Reference / Location:
+                </label>
                 <div class="col-sm-9">
-                    <input :disabled="isReadOnly" type="text" class="form-control" name="conservation_plan_reference"
-                        ref="conservation_plan_reference" @change="checkDate()"
-                        v-model="species_community.conservation_plan_reference" />
+                    <input
+                        ref="conservation_plan_reference"
+                        v-model="species_community.conservation_plan_reference"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        name="conservation_plan_reference"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-3 control-label">{{ species_original.species_number }} Comment:</label>
+                <label for="" class="col-sm-3 control-label"
+                    >{{ species_original.species_number }} Comment:</label
+                >
                 <div class="col-sm-8">
-                    <textarea :disabled="true" class="form-control" rows="3" id="comment" placeholder=""
-                        v-model="species_original.comment" />
+                    <textarea
+                        id="comment"
+                        v-model="species_original.comment"
+                        :disabled="true"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
                 <div class="col-sm-1">
                     <!-- checkInput(checkbox_id , v-model object attribute of this field) -->
-                    <input class="form-check-input" type="checkbox" :id="'comment_chk' + species_community.id"
-                        @change="checkCommentInput('comment_chk' + species_community.id, 'comment')" />
+                    <input
+                        :id="'comment_chk' + species_community.id"
+                        class="form-check-input"
+                        type="checkbox"
+                        @change="
+                            checkCommentInput(
+                                'comment_chk' + species_community.id,
+                                'comment'
+                            )
+                        "
+                    />
                 </div>
             </div>
             <div class="row mb-3">
                 <label for="" class="col-sm-3 control-label">Comment:</label>
                 <div class="col-sm-8">
-                    <textarea :disabled="isReadOnly" class="form-control" rows="3" id="comment" placeholder=""
-                        v-model="species_community.comment" />
+                    <textarea
+                        id="comment"
+                        v-model="species_community.comment"
+                        :disabled="isReadOnly"
+                        class="form-control"
+                        rows="3"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
@@ -1273,46 +1699,54 @@
 </template>
 
 <script>
-;
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'SpeciesSplitProfile',
+    components: {
+        FormSection,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         species_original: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
         let vm = this;
         return {
-            scientific_name_lookup: 'scientific_name_lookup' + vm.species_community.id,
-            select_scientific_name: "select_scientific_name" + vm.species_community.id,
-            select_flowering_period: "select_flowering_period" + vm.species_community.id,
-            select_flowering_period_readonly: "select_flowering_period_readonly" + vm.species_community.id,
-            select_fruiting_period: "select_fruiting_period" + vm.species_community.id,
-            select_fruiting_period_readonly: "select_fruiting_period_readonly" + vm.species_community.id,
-            select_breeding_period: "select_breeding_period" + vm.species_community.id,
-            select_breeding_period_readonly: "select_breeding_period_readonly" + vm.species_community.id,
-            select_regions: "select_regions" + vm.species_community.id,
-            select_regions_read_only: "select_regions_read_only" + vm.species_community.id,
-            select_districts_read_only: "select_districts_read_only" + vm.species_community.id,
-            select_districts: "select_districts" + vm.species_community.id,
+            scientific_name_lookup:
+                'scientific_name_lookup' + vm.species_community.id,
+            select_scientific_name:
+                'select_scientific_name' + vm.species_community.id,
+            select_flowering_period:
+                'select_flowering_period' + vm.species_community.id,
+            select_flowering_period_readonly:
+                'select_flowering_period_readonly' + vm.species_community.id,
+            select_fruiting_period:
+                'select_fruiting_period' + vm.species_community.id,
+            select_fruiting_period_readonly:
+                'select_fruiting_period_readonly' + vm.species_community.id,
+            select_breeding_period:
+                'select_breeding_period' + vm.species_community.id,
+            select_breeding_period_readonly:
+                'select_breeding_period_readonly' + vm.species_community.id,
+            select_regions: 'select_regions' + vm.species_community.id,
+            select_regions_read_only:
+                'select_regions_read_only' + vm.species_community.id,
+            select_districts_read_only:
+                'select_districts_read_only' + vm.species_community.id,
+            select_districts: 'select_districts' + vm.species_community.id,
             taxonBody: 'taxonBody' + vm._uid,
             distributionBody: 'distributionBody' + vm._uid,
             conservationBody: 'conservationBody' + vm._uid,
             generalBody: 'generalBody' + vm._uid,
             //---to show fields related to Fauna
-            isFauna: vm.species_community.group_type === "fauna" ? true : false,
+            isFauna: vm.species_community.group_type === 'fauna' ? true : false,
             //----list of values dictionary
             species_profile_dict: {},
             //scientific_name_list: [],
@@ -1334,18 +1768,19 @@ export default {
             genus: null,
             name_authority: null,
             name_comments: null,
-            period_list: [{ id: 1, name: 'January' },
-            { id: 2, name: 'February' },
-            { id: 3, name: 'March' },
-            { id: 4, name: 'April' },
-            { id: 5, name: 'May' },
-            { id: 6, name: 'June' },
-            { id: 7, name: 'July' },
-            { id: 8, name: 'August' },
-            { id: 9, name: 'September' },
-            { id: 10, name: 'October' },
-            { id: 11, name: 'November' },
-            { id: 12, name: 'December' },
+            period_list: [
+                { id: 1, name: 'January' },
+                { id: 2, name: 'February' },
+                { id: 3, name: 'March' },
+                { id: 4, name: 'April' },
+                { id: 5, name: 'May' },
+                { id: 6, name: 'June' },
+                { id: 7, name: 'July' },
+                { id: 8, name: 'August' },
+                { id: 9, name: 'September' },
+                { id: 10, name: 'October' },
+                { id: 11, name: 'November' },
+                { id: 12, name: 'December' },
             ],
             minimum_fire_interval_range_original: false,
             average_lifespan_range_original: false,
@@ -1355,63 +1790,190 @@ export default {
             average_lifespan_range_new: false,
             generation_length_range_new: false,
             time_to_maturity_range_new: false,
-            interval_choice: [{ id: 1, name: 'year/s' },
-            { id: 2, name: 'month/s' }
+            interval_choice: [
+                { id: 1, name: 'year/s' },
+                { id: 2, name: 'month/s' },
             ],
             errors: {
                 minimum_fire_interval_error: null,
                 average_lifespan_error: null,
                 generation_length_error: null,
-                time_to_maturity_error: null
-            }
-        }
-    },
-    components: {
-        FormSection,
+                time_to_maturity_error: null,
+            },
+        };
     },
     computed: {
         isReadOnly: function () {
             let action = this.$route.query.action;
-            if (action === "edit" && this.species_community && this.species_community.user_edit_mode) {
+            if (
+                action === 'edit' &&
+                this.species_community &&
+                this.species_community.user_edit_mode
+            ) {
                 return false;
-            }
-            else {
+            } else {
                 return this.species_community.readonly;
             }
         },
     },
     watch: {
-        "species_community.distribution.noo_auto": function (newVal) {
+        'species_community.distribution.noo_auto': function (newVal) {
             let vm = this;
             var selectedValue = newVal;
-            if (selectedValue === "true") {
-                vm.species_community.distribution.number_of_occurrences = vm.species_community.distribution.cal_number_of_occurrences;
-            }
-            else {
+            if (selectedValue === 'true') {
+                vm.species_community.distribution.number_of_occurrences =
+                    vm.species_community.distribution.cal_number_of_occurrences;
+            } else {
                 vm.species_community.distribution.number_of_occurrences = null;
             }
         },
-        "species_community.distribution.eoo_auto": function (newVal) {
+        'species_community.distribution.eoo_auto': function (newVal) {
             let vm = this;
             var selectedValue = newVal;
-            if (selectedValue === "true") {
-                vm.species_community.distribution.extent_of_occurrences = vm.species_community.distribution.cal_extent_of_occurrences;
-            }
-            else {
+            if (selectedValue === 'true') {
+                vm.species_community.distribution.extent_of_occurrences =
+                    vm.species_community.distribution.cal_extent_of_occurrences;
+            } else {
                 vm.species_community.distribution.extent_of_occurrences = null;
             }
         },
-        "species_community.distribution.aoo_actual_auto": function (newVal) {
+        'species_community.distribution.aoo_actual_auto': function (newVal) {
             let vm = this;
             var selectedValue = newVal;
-            if (selectedValue === "true") {
-                vm.species_community.distribution.area_of_occupancy_actual = vm.species_community.distribution.cal_area_of_occupancy_actual;
-            }
-            else {
-                vm.species_community.distribution.area_of_occupancy_actual = null;
+            if (selectedValue === 'true') {
+                vm.species_community.distribution.area_of_occupancy_actual =
+                    vm.species_community.distribution.cal_area_of_occupancy_actual;
+            } else {
+                vm.species_community.distribution.area_of_occupancy_actual =
+                    null;
             }
         },
     },
+    created: async function () {
+        let vm = this;
+        //----set the distribution field values if auto onload
+        if (vm.species_community.distribution.noo_auto == true) {
+            vm.species_community.distribution.number_of_occurrences =
+                vm.species_community.distribution.cal_number_of_occurrences;
+        }
+        if (vm.species_community.distribution.eoo_auto == true) {
+            vm.species_community.distribution.extent_of_occurrences =
+                vm.species_community.distribution.cal_extent_of_occurrences;
+        }
+        if (vm.species_community.distribution.aoo_actual_auto == true) {
+            vm.species_community.distribution.area_of_occupancy_actual =
+                vm.species_community.distribution.cal_area_of_occupancy_actual;
+        }
+        if (
+            vm.species_original.conservation_attributes
+                .minimum_fire_interval_to != null &&
+            vm.species_original.conservation_attributes
+                .minimum_fire_interval_to != '' &&
+            vm.species_original.conservation_attributes
+                .minimum_fire_interval_to != undefined
+        ) {
+            vm.minimum_fire_interval_range_original = true;
+        }
+        if (
+            vm.species_community.conservation_attributes
+                .minimum_fire_interval_to != null &&
+            vm.species_community.conservation_attributes
+                .minimum_fire_interval_to != '' &&
+            vm.species_community.conservation_attributes
+                .minimum_fire_interval_to != undefined
+        ) {
+            vm.minimum_fire_interval_range_new = true;
+        }
+        if (
+            vm.species_original.conservation_attributes.average_lifespan_to !=
+                null &&
+            vm.species_original.conservation_attributes.average_lifespan_to !=
+                '' &&
+            vm.species_original.conservation_attributes.average_lifespan_to !=
+                undefined
+        ) {
+            vm.average_lifespan_range_original = true;
+        }
+        if (
+            vm.species_community.conservation_attributes.average_lifespan_to !=
+                null &&
+            vm.species_community.conservation_attributes.average_lifespan_to !=
+                '' &&
+            vm.species_community.conservation_attributes.average_lifespan_to !=
+                undefined
+        ) {
+            vm.average_lifespan_range_new = true;
+        }
+        if (
+            vm.species_original.conservation_attributes.generation_length_to !=
+                null &&
+            vm.species_original.conservation_attributes.generation_length_to !=
+                '' &&
+            vm.species_original.conservation_attributes.generation_length_to !=
+                undefined
+        ) {
+            vm.generation_length_range_original = true;
+        }
+        if (
+            vm.species_community.conservation_attributes.generation_length_to !=
+                null &&
+            vm.species_community.conservation_attributes.generation_length_to !=
+                '' &&
+            vm.species_community.conservation_attributes.generation_length_to !=
+                undefined
+        ) {
+            vm.generation_length_range_new = true;
+        }
+        if (
+            vm.species_original.conservation_attributes.time_to_maturity_to !=
+                null &&
+            vm.species_original.conservation_attributes.time_to_maturity_to !=
+                '' &&
+            vm.species_original.conservation_attributes.time_to_maturity_to !=
+                undefined
+        ) {
+            vm.time_to_maturity_range_original = true;
+        }
+        if (
+            vm.species_community.conservation_attributes.time_to_maturity_to !=
+                null &&
+            vm.species_community.conservation_attributes.time_to_maturity_to !=
+                '' &&
+            vm.species_community.conservation_attributes.time_to_maturity_to !=
+                undefined
+        ) {
+            vm.time_to_maturity_range_new = true;
+        }
+        //------fetch list of values
+        const response = await fetch('/api/species_profile_dict/');
+        vm.species_profile_dict = await response.json();
+        vm.flora_recruitment_type_list =
+            vm.species_profile_dict.flora_recruitment_type_list;
+        vm.flora_recruitment_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.root_morphology_list = vm.species_profile_dict.root_morphology_list;
+        vm.root_morphology_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.post_fire_habitatat_interactions_list =
+            vm.species_profile_dict.post_fire_habitatat_interactions_list;
+        vm.post_fire_habitatat_interactions_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.fetchRegions();
+    },
+    mounted: function () {
+        let vm = this;
+        vm.eventListeners();
+        vm.initialiseScientificNameLookup();
+        vm.loadTaxonomydetails();
+        vm.initialiseRegionSelect();
+        vm.initialiseDistrictSelect();
+    },
     methods: {
         filterDistrict: function (event) {
             this.$nextTick(() => {
@@ -1419,11 +1981,13 @@ export default {
                     this.species_community.district_id = null; //-----to remove the previous selection
                 }
                 this.filtered_district_list = [];
-                this.filtered_district_list = [{
-                    id: null,
-                    name: "",
-                    region_id: null,
-                }];
+                this.filtered_district_list = [
+                    {
+                        id: null,
+                        name: '',
+                        region_id: null,
+                    },
+                ];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
                     if (choice.region_id === this.species_community.region_id) {
@@ -1435,38 +1999,40 @@ export default {
         checkDate: function () {
             let vm = this;
             if (vm.$refs.last_data_curration_date.value) {
-                vm.species_community.last_data_curration_date = vm.$refs.last_data_curration_date.value;
-            }
-            else {
+                vm.species_community.last_data_curration_date =
+                    vm.$refs.last_data_curration_date.value;
+            } else {
                 vm.species_community.last_data_curration_date = null;
             }
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs[vm.scientific_name_lookup]).select2({
-                minimumInputLength: 2,
-                dropdownParent: $("#" + vm.select_scientific_name),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.species_community.group_type_id,
-                            species_profile: true, // This parameter makes sure the query only returns records that don't yet have a species profile
-                        }
-                        return query;
+            $(vm.$refs[vm.scientific_name_lookup])
+                .select2({
+                    minimumInputLength: 2,
+                    dropdownParent: $('#' + vm.select_scientific_name),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id:
+                                    vm.species_community.group_type_id,
+                                species_profile: true, // This parameter makes sure the query only returns records that don't yet have a species profile
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
-                    vm.species_community.taxonomy_id = data
+                    vm.species_community.taxonomy_id = data;
                     vm.species_community.taxonomy_details = e.params.data;
                     vm.species_display = e.params.data.scientific_name;
                     vm.common_name = e.params.data.common_name;
@@ -1477,22 +2043,24 @@ export default {
                     vm.genus = e.params.data.genera_name;
                     vm.name_authority = e.params.data.name_authority;
                     vm.name_comments = e.params.data.name_comments;
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.taxonomy_id = ''
+                    vm.species_community.taxonomy_id = '';
                     vm.species_display = '';
                     vm.common_name = '';
                     vm.taxon_name_id = '';
                     vm.taxon_previous_name = '';
                     vm.phylogenetic_group = '';
-                    vm.family = '',
-                        vm.genus = '',
-                        vm.name_authority = '';
+                    (vm.family = ''), (vm.genus = ''), (vm.name_authority = '');
                     vm.name_comments = '';
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-' + vm.scientific_name_lookup + '-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-' +
+                            vm.scientific_name_lookup +
+                            '-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
@@ -1500,111 +2068,179 @@ export default {
         loadTaxonomydetails: function () {
             let vm = this;
             if (vm.species_community.taxonomy_details != null) {
-                vm.species_display = vm.species_community.taxonomy_details.scientific_name;
-                vm.common_name = vm.species_community.taxonomy_details.common_name;
-                vm.taxon_name_id = vm.species_community.taxonomy_details.taxon_name_id;
-                vm.taxon_previous_name = vm.species_community.taxonomy_details.taxon_previous_name;
-                vm.phylogenetic_group = vm.species_community.taxonomy_details.phylogenetic_group;
+                vm.species_display =
+                    vm.species_community.taxonomy_details.scientific_name;
+                vm.common_name =
+                    vm.species_community.taxonomy_details.common_name;
+                vm.taxon_name_id =
+                    vm.species_community.taxonomy_details.taxon_name_id;
+                vm.taxon_previous_name =
+                    vm.species_community.taxonomy_details.taxon_previous_name;
+                vm.phylogenetic_group =
+                    vm.species_community.taxonomy_details.phylogenetic_group;
                 vm.family = vm.species_community.taxonomy_details.family_name;
                 vm.genus = vm.species_community.taxonomy_details.genera_name;
-                vm.name_authority = vm.species_community.taxonomy_details.name_authority;
-                vm.name_comments = vm.species_community.taxonomy_details.name_comments;
+                vm.name_authority =
+                    vm.species_community.taxonomy_details.name_authority;
+                vm.name_comments =
+                    vm.species_community.taxonomy_details.name_comments;
             }
         },
         //--------on/off checkbox value to new species--------
         checkHabitatForm: function () {
-            if ($("#habitat_frm_chk" + this.species_community.id).is(':checked') == true) {
-                this.species_community.conservation_attributes.habitat_growth_form = this.species_original.conservation_attributes.habitat_growth_form;
+            if (
+                $('#habitat_frm_chk' + this.species_community.id).is(
+                    ':checked'
+                ) == true
+            ) {
+                this.species_community.conservation_attributes.habitat_growth_form =
+                    this.species_original.conservation_attributes.habitat_growth_form;
             } else {
-                this.species_community.conservation_attributes.habitat_growth_form = null;
+                this.species_community.conservation_attributes.habitat_growth_form =
+                    null;
             }
         },
-        checkConservationInput: function (chkbox, obj_field, select2_ref = "") {
-            const interval_fields = ['minimum_fire_interval', 'average_lifespan', 'generation_length', 'time_to_maturity'];
+        checkConservationInput: function (chkbox, obj_field, select2_ref = '') {
+            const interval_fields = [
+                'minimum_fire_interval',
+                'average_lifespan',
+                'generation_length',
+                'time_to_maturity',
+            ];
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox).is(':checked') == true) {
+            if ($('#' + chkbox).is(':checked') == true) {
                 if (interval_fields.includes(obj_field)) {
-                    this.species_community.conservation_attributes[obj_field + '_from'] = this.species_original.conservation_attributes[obj_field + '_from'];
-                    this.species_community.conservation_attributes[obj_field + '_to'] = this.species_original.conservation_attributes[obj_field + '_to'];
-                    this.species_community.conservation_attributes[obj_field + '_choice'] = this.species_original.conservation_attributes[obj_field + '_choice'];
-                    if (this.species_community.conservation_attributes[obj_field + '_to'] != null) {
+                    this.species_community.conservation_attributes[
+                        obj_field + '_from'
+                    ] =
+                        this.species_original.conservation_attributes[
+                            obj_field + '_from'
+                        ];
+                    this.species_community.conservation_attributes[
+                        obj_field + '_to'
+                    ] =
+                        this.species_original.conservation_attributes[
+                            obj_field + '_to'
+                        ];
+                    this.species_community.conservation_attributes[
+                        obj_field + '_choice'
+                    ] =
+                        this.species_original.conservation_attributes[
+                            obj_field + '_choice'
+                        ];
+                    if (
+                        this.species_community.conservation_attributes[
+                            obj_field + '_to'
+                        ] != null
+                    ) {
                         this[obj_field + '_range_new'] = true;
-                    }
-                    else {
+                    } else {
                         this[obj_field + '_range_new'] = false;
                     }
-                }
-                else {
-                    this.species_community.conservation_attributes[obj_field] = this.species_original.conservation_attributes[obj_field];
-                    if (select2_ref != "") {
-                        $(this.$refs[select2_ref]).val(this.species_community.conservation_attributes[obj_field]).trigger("change");
+                } else {
+                    this.species_community.conservation_attributes[obj_field] =
+                        this.species_original.conservation_attributes[
+                            obj_field
+                        ];
+                    if (select2_ref != '') {
+                        $(this.$refs[select2_ref])
+                            .val(
+                                this.species_community.conservation_attributes[
+                                    obj_field
+                                ]
+                            )
+                            .trigger('change');
                     }
                 }
             } else {
                 if (interval_fields.includes(obj_field)) {
-                    this.species_community.conservation_attributes[obj_field + '_from'] = null;
-                    this.species_community.conservation_attributes[obj_field + '_to'] = null;
-                    this.species_community.conservation_attributes[obj_field + '_choice'] = null;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_from'
+                    ] = null;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_to'
+                    ] = null;
+                    this.species_community.conservation_attributes[
+                        obj_field + '_choice'
+                    ] = null;
                     this[obj_field + '_range_new'] = false;
-                }
-                else {
-                    this.species_community.conservation_attributes[obj_field] = null;
-                    if (select2_ref != "") {
-                        $(this.$refs[select2_ref]).val("").trigger("change");
-                        this.species_community.conservation_attributes[obj_field] = [];
+                } else {
+                    this.species_community.conservation_attributes[obj_field] =
+                        null;
+                    if (select2_ref != '') {
+                        $(this.$refs[select2_ref]).val('').trigger('change');
+                        this.species_community.conservation_attributes[
+                            obj_field
+                        ] = [];
                     }
                 }
             }
         },
         checkDistributionInput: function (chkbox, obj_field) {
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox).is(':checked') == true) {
-                this.species_community.distribution[obj_field] = this.species_original.distribution[obj_field];
+            if ($('#' + chkbox).is(':checked') == true) {
+                this.species_community.distribution[obj_field] =
+                    this.species_original.distribution[obj_field];
             } else {
                 this.species_community.distribution[obj_field] = null;
             }
         },
         checkCommentInput: function (chkbox, obj_field) {
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox).is(':checked') == true) {
-                this.species_community[obj_field] = this.species_original[obj_field];
+            if ($('#' + chkbox).is(':checked') == true) {
+                this.species_community[obj_field] =
+                    this.species_original[obj_field];
             } else {
                 this.species_community[obj_field] = null;
             }
         },
-        checkRegionDistrictInput: function (chkbox, obj_field, select2_ref = "") {
+        checkRegionDistrictInput: function (
+            chkbox,
+            obj_field,
+            select2_ref = ''
+        ) {
             // if checkbox is checked copy value from original  species to new species
-            if ($("#" + chkbox).is(':checked') == true) {
-                this.species_community[obj_field] = this.species_original[obj_field];
-                console.log(this.species_community[obj_field])
-                console.log(select2_ref)
-                if (select2_ref != "") {
-                    $(this.$refs[select2_ref]).val(this.species_community[obj_field]).trigger("change");
-                    this.chainedSelectDistricts(this.species_community.regions, "select");
+            if ($('#' + chkbox).is(':checked') == true) {
+                this.species_community[obj_field] =
+                    this.species_original[obj_field];
+                console.log(this.species_community[obj_field]);
+                console.log(select2_ref);
+                if (select2_ref != '') {
+                    $(this.$refs[select2_ref])
+                        .val(this.species_community[obj_field])
+                        .trigger('change');
+                    this.chainedSelectDistricts(
+                        this.species_community.regions,
+                        'select'
+                    );
                 }
             } else {
-                if (select2_ref != "") {
-                    $(this.$refs[select2_ref]).val("").trigger("change");
-                    this.chainedSelectDistricts(this.species_community.regions, "deselect");
+                if (select2_ref != '') {
+                    $(this.$refs[select2_ref]).val('').trigger('change');
+                    this.chainedSelectDistricts(
+                        this.species_community.regions,
+                        'deselect'
+                    );
                 }
                 this.species_community[obj_field] = [];
-
             }
         },
         getselectedRegionNames(species) {
             // Filter regions_list to get only the selected regions
-            let selected_region = species.regions
-            const selectedRegions = this.region_list.filter(region => selected_region.includes(region.value));
+            let selected_region = species.regions;
+            const selectedRegions = this.region_list.filter((region) =>
+                selected_region.includes(region.value)
+            );
             // Map the selected regions to their names and join them with commas
-            return selectedRegions.map(region => region.text).join(', ');
+            return selectedRegions.map((region) => region.text).join(', ');
         },
         getselectedDistrictNames(species) {
             // Initialize an empty array to store the names of selected districts
             let selectedNames = [];
             // Iterate over each region
-            this.region_list.forEach(region => {
+            this.region_list.forEach((region) => {
                 // Filter the districts of the current region
-                region.districts.forEach(district => {
+                region.districts.forEach((district) => {
                     if (species.districts.includes(district.id)) {
                         selectedNames.push(district.name);
                     }
@@ -1616,134 +2252,157 @@ export default {
         //----------------------------------------------------------------
         eventListeners: function () {
             let vm = this;
-            $(vm.$refs.flowering_period_select).select2({
-                dropdownParent: $("#" + vm.select_flowering_period),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Flowering Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.flowering_period_select)
+                .select2({
+                    dropdownParent: $('#' + vm.select_flowering_period),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Flowering Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.flowering_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.flowering_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.flowering_period = selected.val();
+                    vm.species_community.conservation_attributes.flowering_period =
+                        selected.val();
                 });
             $(vm.$refs.flowering_period_select_readonly).select2({
-                dropdownParent: $("#" + vm.select_flowering_period_readonly),
-                "theme": "bootstrap-5",
+                dropdownParent: $('#' + vm.select_flowering_period_readonly),
+                theme: 'bootstrap-5',
                 allowClear: true,
-                placeholder: "Select Flowering Period",
+                placeholder: 'Select Flowering Period',
                 multiple: true,
             });
-            $(vm.$refs.fruiting_period_select).select2({
-                dropdownParent: $("#" + vm.select_fruiting_period),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Fruiting Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.fruiting_period_select)
+                .select2({
+                    dropdownParent: $('#' + vm.select_fruiting_period),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Fruiting Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.fruiting_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.fruiting_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.fruiting_period = selected.val();
+                    vm.species_community.conservation_attributes.fruiting_period =
+                        selected.val();
                 });
             $(vm.$refs.fruiting_period_select_readonly).select2({
-                dropdownParent: $("#" + vm.select_fruiting_period_readonly),
-                "theme": "bootstrap-5",
+                dropdownParent: $('#' + vm.select_fruiting_period_readonly),
+                theme: 'bootstrap-5',
                 allowClear: true,
-                placeholder: "Select Fruiting Period",
+                placeholder: 'Select Fruiting Period',
                 multiple: true,
             });
-            $(vm.$refs.breeding_period_select).select2({
-                dropdownParent: $("#" + vm.select_breeding_period),
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Breeding Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.breeding_period_select)
+                .select2({
+                    dropdownParent: $('#' + vm.select_breeding_period),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Breeding Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.breeding_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.species_community.conservation_attributes.breeding_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.species_community.conservation_attributes.breeding_period = selected.val();
+                    vm.species_community.conservation_attributes.breeding_period =
+                        selected.val();
                 });
             $(vm.$refs.breeding_period_select_readonly).select2({
-                dropdownParent: $("#" + vm.select_breeding_period_readonly),
-                "theme": "bootstrap-5",
+                dropdownParent: $('#' + vm.select_breeding_period_readonly),
+                theme: 'bootstrap-5',
                 allowClear: true,
-                placeholder: "Select Breeding Period",
+                placeholder: 'Select Breeding Period',
                 multiple: true,
             });
         },
         intervalMonthsComputedNew: function (field_from, field_choice) {
-
-            const totalMonths = parseInt(this.species_community.conservation_attributes[field_from]);
-            const intervalChoice = this.species_community.conservation_attributes[field_choice];
+            const totalMonths = parseInt(
+                this.species_community.conservation_attributes[field_from]
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes[field_choice];
             // const isIntervalRange = this.minimum_fire_interval_range_new;
 
             // if(totalMonths > 12 && intervalChoice == 2 && isIntervalRange == false){
             if (totalMonths > 12 && intervalChoice == 2) {
                 const years = Math.floor(totalMonths / 12);
                 const months = totalMonths % 12;
-                return years + " year/s " + months + " month/s";
-            }
-            else {
-                return ""
+                return years + ' year/s ' + months + ' month/s';
+            } else {
+                return '';
             }
         },
         intervalMonthsComputedOriginal: function (months, intervalChoice) {
-
             const totalMonths = parseInt(months);
 
             if (totalMonths > 12 && intervalChoice == 2) {
                 const years = Math.floor(totalMonths / 12);
                 const months = totalMonths % 12;
-                return years + " year/s " + months + " month/s";
-            }
-            else {
-                return ""
+                return years + ' year/s ' + months + ' month/s';
+            } else {
+                return '';
             }
         },
         handleMinimumFireIntervalRange: function (e) {
             if (this.minimum_fire_interval_range_new == false) {
-                this.species_community.conservation_attributes.minimum_fire_interval_to = null;
+                this.species_community.conservation_attributes.minimum_fire_interval_to =
+                    null;
             }
         },
         handleAverageLifespanRange: function () {
             if (this.average_lifespan_range_new == false) {
-                this.species_community.conservation_attributes.average_lifespan_to = null;
+                this.species_community.conservation_attributes.average_lifespan_to =
+                    null;
             }
         },
         handleGenerationLengthRange: function () {
             if (this.generation_length_range_new == false) {
-                this.species_community.conservation_attributes.generation_length_to = null;
+                this.species_community.conservation_attributes.generation_length_to =
+                    null;
             }
         },
         handleTimeToMaturityRange: function () {
             if (this.time_to_maturity_range_new == false) {
-                this.species_community.conservation_attributes.time_to_maturity_to = null;
+                this.species_community.conservation_attributes.time_to_maturity_to =
+                    null;
             }
         },
-        validateRange: function (field_from, field_to, field_choice, field_error) {
-            const rangeFrom = parseInt(this.species_community.conservation_attributes[field_from]);
-            const rangeTo = parseInt(this.species_community.conservation_attributes[field_to]);
-            const intervalChoice = this.species_community.conservation_attributes[field_choice];
-            if ((rangeFrom != null || rangeTo != null) && intervalChoice == null) {
-                this.errors[field_error] = "Please select years/months";
-            }
-            else if (rangeFrom >= rangeTo) {
-                this.errors[field_error] = "Please enter a valid range";
-            }
-            else {
-                this.errors[field_error] = "";
+        validateRange: function (
+            field_from,
+            field_to,
+            field_choice,
+            field_error
+        ) {
+            const rangeFrom = parseInt(
+                this.species_community.conservation_attributes[field_from]
+            );
+            const rangeTo = parseInt(
+                this.species_community.conservation_attributes[field_to]
+            );
+            const intervalChoice =
+                this.species_community.conservation_attributes[field_choice];
+            if (
+                (rangeFrom != null || rangeTo != null) &&
+                intervalChoice == null
+            ) {
+                this.errors[field_error] = 'Please select years/months';
+            } else if (rangeFrom >= rangeTo) {
+                this.errors[field_error] = 'Please enter a valid range';
+            } else {
+                this.errors[field_error] = '';
             }
         },
         focusConservationPlanReference: function () {
@@ -1754,21 +2413,34 @@ export default {
         fetchRegions: function () {
             let vm = this;
 
-            fetch(api_endpoints.regions).then(async (response) => {
-                vm.api_regions = await response.json();
-                for (var i = 0; i < vm.api_regions.length; i++) {
-                    this.region_list.push({ text: vm.api_regions[i].name, value: vm.api_regions[i].id, districts: vm.api_regions[i].districts });
-                }
-                // vm.setProposalData2(this.regions);
-                if (vm.species_community.regions) {
-                    vm.chainedSelectDistricts(vm.species_community.regions, "fetch");
-                }
-                if (vm.species_original.regions) {
-                    vm.chainedSelectReadonlyDistricts(vm.species_original.regions, "fetch");
+            fetch(api_endpoints.regions).then(
+                async (response) => {
+                    vm.api_regions = await response.json();
+                    for (var i = 0; i < vm.api_regions.length; i++) {
+                        this.region_list.push({
+                            text: vm.api_regions[i].name,
+                            value: vm.api_regions[i].id,
+                            districts: vm.api_regions[i].districts,
+                        });
+                    }
+                    // vm.setProposalData2(this.regions);
+                    if (vm.species_community.regions) {
+                        vm.chainedSelectDistricts(
+                            vm.species_community.regions,
+                            'fetch'
+                        );
+                    }
+                    if (vm.species_original.regions) {
+                        vm.chainedSelectReadonlyDistricts(
+                            vm.species_original.regions,
+                            'fetch'
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            })
+            );
         },
         searchList: function (id, search_list) {
             /* Searches for dictionary in list */
@@ -1781,31 +2453,47 @@ export default {
         },
         chainedSelectDistricts: function (regions, action, deselect_region_id) {
             let vm = this;
-            if (action != "fetch" && action != "select") {
+            if (action != 'fetch' && action != 'select') {
                 vm.species_community.districts = []; //-----to remove the previous selection
             }
             vm.district_list = [];
             if (regions) {
                 for (let r of regions) {
-                    var api_districts = this.searchList(r, vm.region_list).districts;
+                    var api_districts = this.searchList(
+                        r,
+                        vm.region_list
+                    ).districts;
                     if (api_districts.length > 0) {
                         for (var i = 0; i < api_districts.length; i++) {
-                            this.district_list.push({ text: api_districts[i].name, value: api_districts[i].id });
+                            this.district_list.push({
+                                text: api_districts[i].name,
+                                value: api_districts[i].id,
+                            });
                         }
                     }
                 }
             }
         },
-        chainedSelectReadonlyDistricts: function (regions, action, deselect_region_id) {
+        chainedSelectReadonlyDistricts: function (
+            regions,
+            action,
+            deselect_region_id
+        ) {
             let vm = this;
 
             vm.district_list_readonly = [];
             if (regions) {
                 for (let r of regions) {
-                    var api_districts = this.searchList(r, vm.region_list).districts;
+                    var api_districts = this.searchList(
+                        r,
+                        vm.region_list
+                    ).districts;
                     if (api_districts.length > 0) {
                         for (var i = 0; i < api_districts.length; i++) {
-                            this.district_list_readonly.push({ text: api_districts[i].name, value: api_districts[i].id });
+                            this.district_list_readonly.push({
+                                text: api_districts[i].name,
+                                value: api_districts[i].id,
+                            });
                         }
                     }
                 }
@@ -1814,142 +2502,67 @@ export default {
 
         initialiseRegionSelect: function () {
             let vm = this;
-            $(vm.$refs.regions_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                dropdownParent: $("#" + vm.select_regions),
-                placeholder: "Select Region",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.regions_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    dropdownParent: $('#' + vm.select_regions),
+                    placeholder: 'Select Region',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "select");
-                }).
-                on("select2:unselect", function (e) {
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'select'
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.regions = selected.val();
-                    vm.chainedSelectDistricts(vm.species_community.regions, "deselect");
+                    vm.chainedSelectDistricts(
+                        vm.species_community.regions,
+                        'deselect'
+                    );
                 });
             $(vm.$refs.regions_select_read_only).select2({
-                "theme": "bootstrap-5",
+                theme: 'bootstrap-5',
                 allowClear: true,
                 multiple: true,
-                dropdownParent: $("#" + vm.select_regions_read_only),
-                placeholder: "Select Region",
+                dropdownParent: $('#' + vm.select_regions_read_only),
+                placeholder: 'Select Region',
             });
             //vm.chainedSelectReadonlyDistricts(vm.species_original.regions,"fetch")
         },
         initialiseDistrictSelect: function () {
             let vm = this;
-            $(vm.$refs.districts_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                dropdownParent: $("#" + vm.select_districts),
-                multiple: true,
-                placeholder: "Select District",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.districts_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    dropdownParent: $('#' + vm.select_districts),
+                    multiple: true,
+                    placeholder: 'Select District',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.species_community.districts = selected.val();
                 });
             $(vm.$refs.districts_select_read_only).select2({
-                "theme": "bootstrap-5",
+                theme: 'bootstrap-5',
                 allowClear: true,
-                dropdownParent: $("#" + vm.select_districts_read_only),
+                dropdownParent: $('#' + vm.select_districts_read_only),
                 multiple: true,
-                placeholder: "Select District",
+                placeholder: 'Select District',
             });
         },
     },
-    created: async function () {
-        let vm = this;
-        //----set the distribution field values if auto onload
-        if (vm.species_community.distribution.noo_auto == true) {
-            vm.species_community.distribution.number_of_occurrences = vm.species_community.distribution.cal_number_of_occurrences;
-        }
-        if (vm.species_community.distribution.eoo_auto == true) {
-            vm.species_community.distribution.extent_of_occurrences = vm.species_community.distribution.cal_extent_of_occurrences;
-        }
-        if (vm.species_community.distribution.aoo_actual_auto == true) {
-            vm.species_community.distribution.area_of_occupancy_actual = vm.species_community.distribution.cal_area_of_occupancy_actual;
-        }
-        if (vm.species_original.conservation_attributes.minimum_fire_interval_to != null &&
-            vm.species_original.conservation_attributes.minimum_fire_interval_to != "" &&
-            vm.species_original.conservation_attributes.minimum_fire_interval_to != undefined) {
-            vm.minimum_fire_interval_range_original = true;
-        }
-        if (vm.species_community.conservation_attributes.minimum_fire_interval_to != null &&
-            vm.species_community.conservation_attributes.minimum_fire_interval_to != "" &&
-            vm.species_community.conservation_attributes.minimum_fire_interval_to != undefined) {
-            vm.minimum_fire_interval_range_new = true;
-        }
-        if (vm.species_original.conservation_attributes.average_lifespan_to != null &&
-            vm.species_original.conservation_attributes.average_lifespan_to != "" &&
-            vm.species_original.conservation_attributes.average_lifespan_to != undefined) {
-            vm.average_lifespan_range_original = true;
-        }
-        if (vm.species_community.conservation_attributes.average_lifespan_to != null &&
-            vm.species_community.conservation_attributes.average_lifespan_to != "" &&
-            vm.species_community.conservation_attributes.average_lifespan_to != undefined) {
-            vm.average_lifespan_range_new = true;
-        }
-        if (vm.species_original.conservation_attributes.generation_length_to != null &&
-            vm.species_original.conservation_attributes.generation_length_to != "" &&
-            vm.species_original.conservation_attributes.generation_length_to != undefined) {
-            vm.generation_length_range_original = true;
-        }
-        if (vm.species_community.conservation_attributes.generation_length_to != null &&
-            vm.species_community.conservation_attributes.generation_length_to != "" &&
-            vm.species_community.conservation_attributes.generation_length_to != undefined) {
-            vm.generation_length_range_new = true;
-        }
-        if (vm.species_original.conservation_attributes.time_to_maturity_to != null &&
-            vm.species_original.conservation_attributes.time_to_maturity_to != "" &&
-            vm.species_original.conservation_attributes.time_to_maturity_to != undefined) {
-            vm.time_to_maturity_range_original = true;
-        }
-        if (vm.species_community.conservation_attributes.time_to_maturity_to != null &&
-            vm.species_community.conservation_attributes.time_to_maturity_to != "" &&
-            vm.species_community.conservation_attributes.time_to_maturity_to != undefined) {
-            vm.time_to_maturity_range_new = true;
-        }
-        //------fetch list of values
-        const response = await fetch('/api/species_profile_dict/');
-        vm.species_profile_dict = await response.json();
-        vm.flora_recruitment_type_list = vm.species_profile_dict.flora_recruitment_type_list;
-        vm.flora_recruitment_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.root_morphology_list = vm.species_profile_dict.root_morphology_list;
-        vm.root_morphology_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.post_fire_habitatat_interactions_list = vm.species_profile_dict.post_fire_habitatat_interactions_list;
-        vm.post_fire_habitatat_interactions_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.fetchRegions();
-    },
-    mounted: function () {
-        let vm = this;
-        vm.eventListeners();
-        vm.initialiseScientificNameLookup();
-        vm.loadTaxonomydetails();
-        vm.initialiseRegionSelect();
-        vm.initialiseDistrictSelect();
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -1973,12 +2586,12 @@ legend.scheduler-border {
     border-bottom: none;
 }
 
-input[type=text],
+input[type='text'],
 select {
     width: 100%;
 }
 
-input[type=number] {
+input[type='number'] {
     width: 50%;
 }
 
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
index 61c9127c..42d3bff1 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
@@ -1,18 +1,39 @@
 <template lang="html">
     <div id="species_split_threats">
-        <FormSection :formCollapse="false" label="Threats" :Index="threatBody">
+        <FormSection :form-collapse="false" label="Threats" :Index="threatBody">
             <form class="form-horizontal" action="index.html" method="post">
                 <div class="col-sm-12 form-check form-check-inline">
-                    <input class="form-check-input" type="radio" :id="'threat_select_all'+species_community.id" name="threatSelect" value="selectAll" @click="selectThreatOption($event)"/>
-                    <label class="form-check-label">Copy all threats to Species {{species_community.species_number}}</label>
+                    <input
+                        :id="'threat_select_all' + species_community.id"
+                        class="form-check-input"
+                        type="radio"
+                        name="threatSelect"
+                        value="selectAll"
+                        @click="selectThreatOption($event)"
+                    />
+                    <label class="form-check-label"
+                        >Copy all threats to Species
+                        {{ species_community.species_number }}</label
+                    >
                 </div>
                 <div class="col-sm-12 form-check form-check-inline mb-3">
-                    <input class="form-check-input" type="radio" :id="'threat_select_individual'+species_community.id" name="threatSelect" value="individual" @click="selectThreatOption($event)"/>
+                    <input
+                        :id="'threat_select_individual' + species_community.id"
+                        class="form-check-input"
+                        type="radio"
+                        name="threatSelect"
+                        value="individual"
+                        @click="selectThreatOption($event)"
+                    />
                     <label class="form-check-label">Decide per threat</label>
                 </div>
                 <div>
-                    <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                    :dtHeaders="threats_headers"/>
+                    <datatable
+                        :id="panelBody"
+                        ref="threats_datatable"
+                        :dt-options="threats_options"
+                        :dt-headers="threats_headers"
+                    />
                 </div>
             </form>
         </FormSection>
@@ -20,307 +41,323 @@
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-from '@/utils/hooks'
-
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
-        name: 'SpeciesSplitThreats',
-        props:{
-            species_community:{
-                type: Object,
-                required:true
-            },
-            species_original:{
-                type: Object,
-                required:true
-            },
+    name: 'SpeciesSplitThreats',
+    components: {
+        FormSection,
+        datatable,
+    },
+    props: {
+        species_community: {
+            type: Object,
+            required: true,
         },
-        data:function () {
-            let vm = this;
-            return{
-                uuid:0,
-                threatBody: "threatBody"+ vm._uid,
-                panelBody: "species-split-threats-"+ vm._uid,
-                values:null,
-                // to store all the documents of original on first load.
-                original_species_threats:[],
-                threat_url: api_endpoints.threat,
-                threats_headers:['Number','Category', 'Threat Source', 'Date Observed', 'Threat Agent', 'Comments',
-                                'Current Impact?', 'Potential Impact?','Action'],
-                threats_options:{
-                    autowidth: false,
-                    language:{
-                        processing: constants.DATATABLE_PROCESSING_HTML
+        species_original: {
+            type: Object,
+            required: true,
+        },
+    },
+    data: function () {
+        let vm = this;
+        return {
+            uuid: 0,
+            threatBody: 'threatBody' + vm._uid,
+            panelBody: 'species-split-threats-' + vm._uid,
+            values: null,
+            // to store all the documents of original on first load.
+            original_species_threats: [],
+            threat_url: api_endpoints.threat,
+            threats_headers: [
+                'Number',
+                'Category',
+                'Threat Source',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Current Impact?',
+                'Potential Impact?',
+                'Action',
+            ],
+            threats_options: {
+                autowidth: false,
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
+                },
+                responsive: true,
+                searching: true,
+                //  to show the "workflow Status","Action" columns always in the last position
+                columnDefs: [
+                    { responsivePriority: 1, targets: 0 },
+                    { responsivePriority: 2, targets: -1 },
+                ],
+                ajax: {
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.species,
+                        vm.species_original.id + '/threats'
+                    ),
+                    dataSrc: '',
+                },
+                order: [],
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
+                buttons: [
+                    {
+                        extend: 'excel',
+                        title: 'Boranga Species Split Threats Excel Export',
+                        text: '<i class="fa-solid fa-download"></i> Excel',
+                        className: 'btn btn-primary me-2 rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    responsive: true,
-                    searching: true,
-                    //  to show the "workflow Status","Action" columns always in the last position
-                    columnDefs: [
-                        { responsivePriority: 1, targets: 0 },
-                        { responsivePriority: 2, targets: -1 },
-                    ],
-                    ajax:{
-                        "url": helpers.add_endpoint_json(api_endpoints.species,vm.species_original.id+'/threats'),
-                        "dataSrc": ''
+                    {
+                        extend: 'csv',
+                        title: 'Boranga Species Split Threats CSV Export',
+                        text: '<i class="fa-solid fa-download"></i> CSV',
+                        className: 'btn btn-primary rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    order: [],
-                    dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                     "<'row'<'col-sm-12'tr>>" +
-                     "<'d-flex align-items-center'<'me-auto'i>p>",
-                    buttons:[
-                        {
-                            extend: 'excel',
-                            title: 'Boranga Species Split Threats Excel Export',
-                            text: '<i class="fa-solid fa-download"></i> Excel',
-                            className: 'btn btn-primary me-2 rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                ],
+                columns: [
+                    {
+                        data: 'threat_number',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_number;
+                            } else {
+                                return '<s>' + full.threat_number + '</s>';
                             }
                         },
-                        {
-                            extend: 'csv',
-                            title: 'Boranga Species Split Threats CSV Export',
-                            text: '<i class="fa-solid fa-download"></i> CSV',
-                            className: 'btn btn-primary rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                    },
+                    {
+                        data: 'threat_category',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_category;
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
-                    ],
-                    columns: [
-                        {
-                            data: "threat_number",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_number;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_number + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "threat_category",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_category;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_category + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "source",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.source;
-                                }
-                                else{
-                                    return '<s>'+ full.source + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'source',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.source;
+                            } else {
+                                return '<s>' + full.source + '</s>';
+                            }
                         },
-                        {
-                            data: "date_observed",
-                            mRender:function (data,type,full){
-                                if(full.visible){
-                                    return data != '' && data != null ? moment(data).format('DD/MM/YYYY'):'';
-                                }
-                                else{
-                                    return data != '' && data != null ? '<s>'+ moment(data).format('DD/MM/YYYY'):'' + '</s>'
-                                }
+                    },
+                    {
+                        data: 'date_observed',
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
                         },
-                        {
-                            data: "threat_agent",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.threat_agent;
-                                }
-                                else{
-                                    return '<s>'+ full.threat_agent + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'threat_agent',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.threat_agent;
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
+                            }
                         },
-                        {
-                            data: "comment",
-                            orderable: true,
-                            searchable: true,
-                            'render': function(value, type, full){
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                if(full.visible){
-                                    return type=='export' ? value : result;
-                                }
-                                else{
-                                    return type=='export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
-                                }
-                            },
+                    },
+                    {
+                        data: 'comment',
+                        orderable: true,
+                        searchable: true,
+                        render: function (value, type, full) {
+                            let result = helpers.dtPopover(value, 30, 'hover');
+                            if (full.visible) {
+                                return type == 'export' ? value : result;
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
+                            }
                         },
-                        {
-                            data: "current_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.current_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.current_impact_name + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'current_impact_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.current_impact_name;
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
+                            }
                         },
-                        {
-                            data: "potential_impact_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.visible){
-                                    return full.potential_impact_name;
-                                }
-                                else{
-                                    return '<s>'+ full.potential_impact_name + '</s>'
-                                }
-                            },
+                    },
+                    {
+                        data: 'potential_impact_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.visible) {
+                                return full.potential_impact_name;
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
+                            }
                         },
-                        {
-                            data: "id",
-                            mRender:function (data,type,full){
-                               // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
-                               if(!vm.original_species_threats.includes(full.id)){
-                                    vm.original_species_threats.push(full.id)
-                                };
+                    },
+                    {
+                        data: 'id',
+                        mRender: function (data, type, full) {
+                            // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
+                            if (
+                                !vm.original_species_threats.includes(full.id)
+                            ) {
+                                vm.original_species_threats.push(full.id);
+                            }
 
-                                if(vm.species_community.threats.includes(full.id)){
-                                    return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}"  checked>`;
-                                }
-                                else{
-                                    return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}">`;
-                                }
+                            if (
+                                vm.species_community.threats.includes(full.id)
+                            ) {
+                                return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}"  checked>`;
+                            } else {
+                                return `<input class='form-check-input' type="checkbox" id="threat_chkbox-${vm.species_community.id}-${full.id}" data-add-threat="${full.id}">`;
                             }
                         },
-                    ],
-                    processing:true,
-                    drawCallback: function() {
+                    },
+                ],
+                processing: true,
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
-                        helpers.enablePopovers();
-                        // another option to fix the responsive table overflow css on tab switch
-                        setTimeout(function (){
-                            vm.adjust_table_width();
-                        },100);
-                    },
+                initComplete: function () {
+                    helpers.enablePopovers();
+                    // another option to fix the responsive table overflow css on tab switch
+                    setTimeout(function () {
+                        vm.adjust_table_width();
+                    }, 100);
+                },
+            },
+        };
+    },
+    computed: {},
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+
+            if (vm.$parent.threat_selection != null) {
+                if (vm.$parent.threat_selection === 'selectAll') {
+                    document.getElementById(
+                        'threat_select_all' + vm.species_community.id
+                    ).checked = true;
+                } else {
+                    document.getElementById(
+                        'threat_select_individual' + vm.species_community.id
+                    ).checked = true;
+                    //$('#doc_select_individual').checked=true;
                 }
             }
-        },
-        components: {
-            FormSection,
-            datatable,
-        },
-        computed: {
-        },
-        methods:{
-            selectThreatOption(e){
-                let vm=this;
-                //--fetch the value of selected radio btn
-                let selected_option=e.target.value;
-                //----set the selected value to the parent variable so as to get the data when tab is reloaded/refreshed
-                vm.$parent.threat_selection=selected_option;
+        });
+    },
+    methods: {
+        selectThreatOption(e) {
+            let vm = this;
+            //--fetch the value of selected radio btn
+            let selected_option = e.target.value;
+            //----set the selected value to the parent variable so as to get the data when tab is reloaded/refreshed
+            vm.$parent.threat_selection = selected_option;
 
-                if(selected_option == "selectAll"){
-                    //-- copy all original species threats to new species threats array
-                    vm.species_community.threats=vm.original_species_threats;
-                    this.$refs.threats_datatable.vmDataTable.ajax.reload();
-                }
-                else if(selected_option == "individual"){
-                    //----empty the array to later select individual
-                    vm.species_community.threats=[];
-                    this.$refs.threats_datatable.vmDataTable.ajax.reload();
-                }
-            },
-            addEventListeners:function (){
-                let vm=this;
-                vm.$refs.threats_datatable.vmDataTable.on('click', 'input[data-add-threat]', function(e) {
+            if (selected_option == 'selectAll') {
+                //-- copy all original species threats to new species threats array
+                vm.species_community.threats = vm.original_species_threats;
+                this.$refs.threats_datatable.vmDataTable.ajax.reload();
+            } else if (selected_option == 'individual') {
+                //----empty the array to later select individual
+                vm.species_community.threats = [];
+                this.$refs.threats_datatable.vmDataTable.ajax.reload();
+            }
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'input[data-add-threat]',
+                function (e) {
                     //e.preventDefault();
                     let id = $(this).attr('data-add-threat');
                     let chkbox = $(this).attr('id');
-                    if($("#"+chkbox).is(':checked')== true){
-                        if(!vm.species_community.threats.includes(id)){
+                    if ($('#' + chkbox).is(':checked') == true) {
+                        if (!vm.species_community.threats.includes(id)) {
                             vm.species_community.threats.push(parseInt(id));
                         }
-                    }
-                    else{
-                        let threat_arr=vm.species_community.threats;
+                    } else {
+                        let threat_arr = vm.species_community.threats;
                         //---remove document id from array (for this arr.splice is used)
                         var index = threat_arr.indexOf(id);
-                        vm.species_community.threats.splice(index,1);
+                        vm.species_community.threats.splice(index, 1);
                     }
-                });
-                vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
                     helpers.enablePopovers();
-                });
-            },
-            adjust_table_width: function(){
-                if (this.$refs.threats_datatable !== undefined) {this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc();}
-            },
-        },
-        mounted: function(){
-            let vm = this;
-            this.$nextTick(() => {
-                vm.addEventListeners();
-
-                if(vm.$parent.threat_selection!=null){
-
-                    if(vm.$parent.threat_selection==="selectAll"){
-                        document.getElementById('threat_select_all'+vm.species_community.id).checked=true;
-                    }
-                    else{
-                        document.getElementById('threat_select_individual'+vm.species_community.id).checked=true;
-                        //$('#doc_select_individual').checked=true;
-                    }
                 }
-        });
-        }
-    }
+            );
+        },
+        adjust_table_width: function () {
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
index cbec9ee1..09f75d18 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
@@ -1,16 +1,26 @@
 <template lang="html">
     <div id="species_threats">
-        <FormSection :formCollapse="false" label="Threats" :Index="threatBody">
-            <CollapsibleFilters component_title="Filters" ref="collapsible_filters"
-                @created="collapsible_component_mounted" class="mb-2">
+        <FormSection :form-collapse="false" label="Threats" :Index="threatBody">
+            <CollapsibleFilters
+                ref="collapsible_filters"
+                component_title="Filters"
+                class="mb-2"
+                @created="collapsible_component_mounted"
+            >
                 <div class="row">
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Category:</label>
-                            <select class="form-select" v-model="filterThreatCategory">
+                            <select
+                                v-model="filterThreatCategory"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_category_filter_list" :value="option.id">{{ option.name
-                                    }}
+                                <option
+                                    v-for="option in threat_category_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -18,9 +28,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Current Impact:</label>
-                            <select class="form-select" v-model="filterThreatCurrentImpact">
+                            <select
+                                v-model="filterThreatCurrentImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_current_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_current_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -29,9 +45,15 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Potential Impact:</label>
-                            <select class="form-select" v-model="filterThreatPotentialImpact">
+                            <select
+                                v-model="filterThreatPotentialImpact"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_potential_impact_filter_list" :value="option.id">
+                                <option
+                                    v-for="option in threat_potential_impact_filter_list"
+                                    :value="option.id"
+                                >
                                     {{ option.name }}
                                 </option>
                             </select>
@@ -40,9 +62,16 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Status:</label>
-                            <select class="form-select" v-model="filterThreatStatus">
+                            <select
+                                v-model="filterThreatStatus"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in threat_status_filter_list" :value="option.id">{{ option.name }}
+                                <option
+                                    v-for="option in threat_status_filter_list"
+                                    :value="option.id"
+                                >
+                                    {{ option.name }}
                                 </option>
                             </select>
                         </div>
@@ -50,15 +79,25 @@
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed From:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_from_date"
-                                v-model="filterObservedFromDate">
+                            <input
+                                id="observed_from_date"
+                                v-model="filterObservedFromDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Date Observed To:</label>
-                            <input type="date" class="form-control" placeholder="DD/MM/YYYY" id="observed_to_date"
-                                v-model="filterObservedToDate">
+                            <input
+                                id="observed_to_date"
+                                v-model="filterObservedToDate"
+                                type="date"
+                                class="form-control"
+                                placeholder="DD/MM/YYYY"
+                            />
                         </div>
                     </div>
                 </div>
@@ -67,79 +106,106 @@
                 <div v-if="is_internal && !isReadOnly" class="col-sm-12">
                     <!--should we still show the add threat button if readonly, only disabled?-->
                     <div class="text-end">
-                        <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                            @click.prevent="newThreat">
+                        <button
+                            :disabled="isReadOnly"
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newThreat"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Threat
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                        :dtHeaders="threats_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="threats_datatable"
+                        :dt-options="threats_options"
+                        :dt-headers="threats_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <FormSection v-if="is_internal" :formCollapse="false" label="Occurrence Threats" :Index="occThreatBody">
+        <FormSection
+            v-if="is_internal"
+            :form-collapse="false"
+            label="Occurrence Threats"
+            :Index="occThreatBody"
+        >
             <SpeciesOCCThreats :species_obj="species_community" />
         </FormSection>
 
-        <ThreatDetail ref="threat_detail" @refreshFromResponse="refreshFromResponse" :url="threat_url"
-            :change_warning="changeWarning">
+        <ThreatDetail
+            ref="threat_detail"
+            :url="threat_url"
+            :change_warning="changeWarning"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ThreatDetail>
         <div v-if="conservationThreatHistoryId">
-            <ConservationThreatHistory ref="conservation_threat_history" :key="conservationThreatHistoryId"
-                :threat-id="conservationThreatHistoryId" />
+            <ConservationThreatHistory
+                ref="conservation_threat_history"
+                :key="conservationThreatHistoryId"
+                :threat-id="conservationThreatHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import ThreatDetail from './add_threat.vue'
+import ThreatDetail from './add_threat.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import ConservationThreatHistory from '../../internal/species_communities/conservation_threat_history.vue';
 import SpeciesOCCThreats from '@/components/common/species_communities/species_occ_threats.vue';
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
-
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'SpeciesThreats',
+    components: {
+        FormSection,
+        datatable,
+        ThreatDetail,
+        ConservationThreatHistory,
+        SpeciesOCCThreats,
+        CollapsibleFilters,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
         let vm = this;
         let url = '';
         if (vm.is_internal) {
-            url = helpers.add_endpoint_json(api_endpoints.species, vm.species_community.id + '/threats')
+            url = helpers.add_endpoint_json(
+                api_endpoints.species,
+                vm.species_community.id + '/threats'
+            );
         } else {
-            url = helpers.add_endpoint_json("/api/external_species/", vm.species_community.id + '/threats')
+            url = helpers.add_endpoint_json(
+                '/api/external_species/',
+                vm.species_community.id + '/threats'
+            );
         }
         return {
             uuid: 0,
             conservationThreatHistoryId: null,
-            threatBody: "threatBody" + vm.uid,
-            occThreatBody: "occThreatBody" + vm.uid,
-            panelBody: "species-threats-" + vm.uid,
+            threatBody: 'threatBody' + vm.uid,
+            occThreatBody: 'occThreatBody' + vm.uid,
+            panelBody: 'species-threats-' + vm.uid,
             values: null,
             threat_url: api_endpoints.threat,
 
@@ -155,16 +221,25 @@ export default {
             threat_potential_impact_filter_list: [],
 
             threat_status_filter_list: [
-                { id: "active", name: "Active" },
-                { id: "removed", name: "Removed" },
+                { id: 'active', name: 'Active' },
+                { id: 'removed', name: 'Removed' },
             ],
 
-            threats_headers: ['Number', 'Category', 'Date Observed', 'Threat Agent', 'Comments',
-                'Current Impact', 'Potential Impact', 'Threat Source', 'Action'],
+            threats_headers: [
+                'Number',
+                'Category',
+                'Date Observed',
+                'Threat Agent',
+                'Comments',
+                'Current Impact',
+                'Potential Impact',
+                'Threat Source',
+                'Action',
+            ],
             threats_options: {
                 autowidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -174,19 +249,22 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": url,
-                    "dataSrc": '',
-                    "data": function (d) {
-                        d.filter_threat_category = vm.filterThreatCategory
-                        d.filter_threat_current_impact = vm.filterThreatCurrentImpact
-                        d.filter_threat_potential_impact = vm.filterThreatPotentialImpact
-                        d.filter_threat_status = vm.filterThreatStatus
-                        d.filter_observed_from_date = vm.filterObservedFromDate
-                        d.filter_observed_to_date = vm.filterObservedToDate
+                    url: url,
+                    dataSrc: '',
+                    data: function (d) {
+                        d.filter_threat_category = vm.filterThreatCategory;
+                        d.filter_threat_current_impact =
+                            vm.filterThreatCurrentImpact;
+                        d.filter_threat_potential_impact =
+                            vm.filterThreatPotentialImpact;
+                        d.filter_threat_status = vm.filterThreatStatus;
+                        d.filter_observed_from_date = vm.filterObservedFromDate;
+                        d.filter_observed_to_date = vm.filterObservedToDate;
                     },
                 },
                 order: [[0, 'desc']],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -196,8 +274,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -205,121 +283,129 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
                 columns: [
                     {
-                        data: "threat_number",
+                        data: 'threat_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return "S" + full.species + " - " + full.threat_number;
-                            }
-                            else {
-                                return '<s> S' + full.species + " - " + full.threat_number + '</s>'
+                                return (
+                                    'S' +
+                                    full.species +
+                                    ' - ' +
+                                    full.threat_number
+                                );
+                            } else {
+                                return (
+                                    '<s> S' +
+                                    full.species +
+                                    ' - ' +
+                                    full.threat_number +
+                                    '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "threat_category",
+                        data: 'threat_category',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_category;
-                            }
-                            else {
-                                return '<s>' + full.threat_category + '</s>'
+                            } else {
+                                return '<s>' + full.threat_category + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "date_observed",
+                        data: 'date_observed',
                         mRender: function (data, type, full) {
                             if (full.visible) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY') : '';
-                            }
-                            else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY') : '' + '</s>'
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' + moment(data).format('DD/MM/YYYY')
+                                    : '' + '</s>';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "threat_agent",
+                        data: 'threat_agent',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.threat_agent;
-                            }
-                            else {
-                                return '<s>' + full.threat_agent + '</s>'
+                            } else {
+                                return '<s>' + full.threat_agent + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "comment",
+                        data: 'comment',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.visible) {
                                 return type == 'export' ? value : result;
-                            }
-                            else {
-                                return type == 'export' ? '<s>' + value + '</s>' : '<s>' + result + '</s>';
+                            } else {
+                                return type == 'export'
+                                    ? '<s>' + value + '</s>'
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "current_impact_name",
+                        data: 'current_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.current_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.current_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.current_impact_name + '</s>'
+                                );
                             }
                         },
-
                     },
                     {
-                        data: "potential_impact_name",
+                        data: 'potential_impact_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.potential_impact_name;
-                            }
-                            else {
-                                return '<s>' + full.potential_impact_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.potential_impact_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "source",
+                        data: 'source',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.visible) {
                                 return full.source;
-                            }
-                            else {
-                                return '<s>' + full.source + '</s>'
+                            } else {
+                                return '<s>' + full.source + '</s>';
                             }
                         },
-
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (vm.is_internal) {
@@ -328,8 +414,7 @@ export default {
                                     if (full.visible) {
                                         links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
                                         links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
-                                    }
-                                    else {
+                                    } else {
                                         links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
                                     }
                                 }
@@ -338,7 +423,7 @@ export default {
                                 links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
                             }
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -353,25 +438,18 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-            }
-        }
-    },
-    components: {
-        FormSection,
-        datatable,
-        ThreatDetail,
-        ConservationThreatHistory,
-        SpeciesOCCThreats,
-        CollapsibleFilters,
+            },
+        };
     },
     computed: {
         changeWarning: function () {
-            if (this.species_community.publishing_status.species_public &&
+            if (
+                this.species_community.publishing_status.species_public &&
                 this.species_community.publishing_status.threats_public
             )
-                return "Adding or updating a threat will set the Species record to Private."
+                return 'Adding or updating a threat will set the Species record to Private.';
             else {
-                return null
+                return null;
             }
         },
         isReadOnly: function () {
@@ -381,16 +459,17 @@ export default {
             }
         },
         filterApplied: function () {
-            if (this.filterThreatCategory === 'all' &&
+            if (
+                this.filterThreatCategory === 'all' &&
                 this.filterThreatCurrentImpact === 'all' &&
                 this.filterThreatPotentialImpact === 'all' &&
                 this.filterThreatStatus === 'all' &&
                 this.filterObservedFromDate === '' &&
                 this.filterObservedToDate === ''
             ) {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
     },
@@ -398,7 +477,9 @@ export default {
         filterApplied: function () {
             if (this.$refs.collapsible_filters) {
                 // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
         filterThreatCategory: function () {
@@ -426,22 +507,37 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
         },
     },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
 
         fetchFilterLists: function () {
             let vm = this;
             //Category, Current Impact, Potential Impact (generic to all threats)
-            fetch('/api/threat/threat_list_of_values/').then(async (response) => {
-                const data = await response.json();
-                vm.threat_category_filter_list = data["threat_category_lists"];
-                vm.threat_current_impact_filter_list = data["current_impact_lists"];
-                vm.threat_potential_impact_filter_list = data["potential_impact_lists"];
-            }, (error) => {
-                console.log(error);
-            })
+            fetch('/api/threat/threat_list_of_values/').then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.threat_category_filter_list =
+                        data['threat_category_lists'];
+                    vm.threat_current_impact_filter_list =
+                        data['current_impact_lists'];
+                    vm.threat_potential_impact_filter_list =
+                        data['potential_impact_lists'];
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         newThreat: function () {
             let vm = this;
@@ -457,7 +553,7 @@ export default {
                 potential_impact: '',
                 potential_threat_onset: '',
                 date_observed: null,
-            }
+            };
             this.$refs.threat_detail.threatObj = new_species_threat_another;
             this.$refs.threat_detail.threat_action = 'add';
             this.$refs.threat_detail.isModalOpen = true;
@@ -466,28 +562,40 @@ export default {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
-            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
             let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.threat_detail.threatObj = data;
-                this.$refs.threat_detail.threatObj.date_observed = data.date_observed != null && data.date_observed != undefined ? moment(data.date_observed).format('yyyy-MM-DD') : '';
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.threat_detail.threatObj = data;
+                    this.$refs.threat_detail.threatObj.date_observed =
+                        data.date_observed != null &&
+                        data.date_observed != undefined
+                            ? moment(data.date_observed).format('yyyy-MM-DD')
+                            : '';
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.threat_detail.isModalOpen = true;
         },
         historyThreat: function (id) {
@@ -503,91 +611,117 @@ export default {
         },
         discardThreat: function (id) {
             let vm = this;
-            let public_message = ""
-            if (vm.species_community.publishing_status.species_public &&
+            let public_message = '';
+            if (
+                vm.species_community.publishing_status.species_public &&
                 vm.species_community.publishing_status.threats_public
             ) {
-                public_message = " Doing so will make the Species Record Private"
+                public_message =
+                    ' Doing so will make the Species Record Private';
             }
 
             swal.fire({
-                title: "Remove Threat",
-                text: "Are you sure you want to remove this Threat?" + public_message,
-                icon: "question",
+                title: 'Remove Threat',
+                text:
+                    'Are you sure you want to remove this Threat?' +
+                    public_message,
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Remove Threat',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your threat has been removed',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                            vm.refreshSpeciesCommunity();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.threat,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your threat has been removed',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.threats_datatable.vmDataTable.ajax.reload();
+                                vm.refreshSpeciesCommunity();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateThreat: function (id) {
             let vm = this;
-            let public_message = ""
-            if (vm.species_community.publishing_status.species_public &&
+            let public_message = '';
+            if (
+                vm.species_community.publishing_status.species_public &&
                 vm.species_community.publishing_status.threats_public
             ) {
-                public_message = " Doing so will make the Species Record Private"
+                public_message =
+                    ' Doing so will make the Species Record Private';
             }
 
             swal.fire({
-                title: "Reinstate Threat",
-                text: "Are you sure you want to Reinstate this Threat?" + public_message,
-                icon: "question",
+                title: 'Reinstate Threat',
+                text:
+                    'Are you sure you want to Reinstate this Threat?' +
+                    public_message,
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Threat',
                 customClass: {
-                    confirmButton: 'btn btn-primary'
+                    confirmButton: 'btn btn-primary',
                 },
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.threat, id + '/reinstate'), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your threat has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary'
-                                },
-                            });
-                            vm.$refs.threats_datatable.vmDataTable.ajax.reload();
-                            vm.refreshSpeciesCommunity();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.threat,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your threat has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.threats_datatable.vmDataTable.ajax.reload();
+                                vm.refreshSpeciesCommunity();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         updatedThreats() {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
@@ -595,52 +729,72 @@ export default {
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-edit-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-threat');
-                vm.editThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-view-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-threat');
-                vm.viewThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-history-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-threat');
-                vm.historyThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-threat');
+                    vm.editThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-threat');
+                    vm.viewThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-threat');
+                    vm.historyThreat(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-discard-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-threat');
-                vm.discardThreat(id);
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-threat');
+                    vm.discardThreat(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.threats_datatable.vmDataTable.on('click', 'a[data-reinstate-threat]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-threat');
-                vm.reinstateThreat(id);
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-threat]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-threat');
+                    vm.reinstateThreat(id);
+                }
+            );
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.threats_datatable.vmDataTable.ajax.reload();
         },
         adjust_table_width: function () {
-            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
index 42b086b3..cb8ac08b 100644
--- a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
@@ -1,45 +1,76 @@
 <template id="species_fauna_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="scientific_name_lookup">Scientific Name:</label>
-                        <select id="scientific_name_lookup" name="scientific_name_lookup" ref="scientific_name_lookup"
-                            class="form-control" />
+                        <label for="scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="scientific_name_lookup"
+                            ref="scientific_name_lookup"
+                            name="scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="common_name_lookup">Common Name:</label>
-                        <select id="common_name_lookup" name="common_name_lookup" ref="common_name_lookup"
-                            class="form-control" />
+                        <select
+                            id="common_name_lookup"
+                            ref="common_name_lookup"
+                            name="common_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="phylo_group_lookup">Phylo Group:</label>
-                        <select id="phylo_group_lookup" name="phylo_group_lookup" ref="phylo_group_lookup"
-                            class="form-control" />
+                        <select
+                            id="phylo_group_lookup"
+                            ref="phylo_group_lookup"
+                            name="phylo_group_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="family_lookup">Family:</label>
-                        <select id="family_lookup" name="family_lookup" ref="family_lookup" class="form-control" />
+                        <select
+                            id="family_lookup"
+                            ref="family_lookup"
+                            name="family_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="genera_lookup">Genera:</label>
-                        <select id="genera_lookup" name="genera_lookup" ref="genera_lookup" class="form-control" />
+                        <select
+                            id="genera_lookup"
+                            ref="genera_lookup"
+                            name="genera_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div v-if="is_internal" class="col-md-3">
                     <div class="form-group">
                         <label for="">Name Status:</label>
-                        <select class="form-select" v-model="filterFaunaNameStatus">
+                        <select
+                            v-model="filterFaunaNameStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
                             <option value="True">Current</option>
                             <option value="False">Non Current</option>
@@ -49,85 +80,168 @@
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterFaunaApplicationStatus">
+                        <select
+                            v-model="filterFaunaApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in species_status" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in species_status"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Region:</label>
-                        <select class="form-select" v-model="filterFaunaRegion" @change="filterDistrict($event)">
+                        <select
+                            v-model="filterFaunaRegion"
+                            class="form-select"
+                            @change="filterDistrict($event)"
+                        >
                             <option value="all">All</option>
-                            <option v-for="region in region_list" :value="region.id" v-bind:key="region.id">
-                                {{ region.name }}</option>
+                            <option
+                                v-for="region in region_list"
+                                :key="region.id"
+                                :value="region.id"
+                            >
+                                {{ region.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">District:</label>
-                        <select class="form-select" v-model="filterFaunaDistrict">
+                        <select
+                            v-model="filterFaunaDistrict"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="district in filtered_district_list" :value="district.id">{{ district.name }}
+                            <option
+                                v-for="district in filtered_district_list"
+                                :value="district.id"
+                            >
+                                {{ district.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-list">WA Legislative List:</label>
-                        <select id="wa-legislative-list" class="form-select" v-model="filterFaunaWALegislativeList">
+                        <label for="wa-legislative-list"
+                            >WA Legislative List:</label
+                        >
+                        <select
+                            id="wa-legislative-list"
+                            v-model="filterFaunaWALegislativeList"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_lists" :value="list.id">{{ list.code }}</option>
+                            <option
+                                v-for="list in wa_legislative_lists"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-category">WA Legislative Category:</label>
-                        <select id="wa-legislative-category" class="form-select"
-                            v-model="filterFaunaWALegislativeCategory">
+                        <label for="wa-legislative-category"
+                            >WA Legislative Category:</label
+                        >
+                        <select
+                            id="wa-legislative-category"
+                            v-model="filterFaunaWALegislativeCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_legislative_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-priority-category">WA Priority Category:</label>
-                        <select id="wa-priority-category" class="form-select" v-model="filterFaunaWAPriorityCategory">
+                        <label for="wa-priority-category"
+                            >WA Priority Category:</label
+                        >
+                        <select
+                            id="wa-priority-category"
+                            v-model="filterFaunaWAPriorityCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_priority_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_priority_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="commonwealth-relevance">Commonwealth Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="commonwealth-relevance"
+                            >Commonwealth Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="commonwealth-relevance"
-                                v-model="filterFaunaCommonwealthRelevance" true-value="true" false-value="false">
+                            <input
+                                id="commonwealth-relevance"
+                                v-model="filterFaunaCommonwealthRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="international-relevance">International Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="international-relevance"
+                            >International Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="international-relevance"
-                                v-model="filterFaunaInternationalRelevance" true-value="true" false-value="false">
+                            <input
+                                id="international-relevance"
+                                v-model="filterFaunaInternationalRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="conservation-criteria">Conservation Criteria</label>
-                        <input class="form-control" type="input" id="conservation-criteria"
-                            v-model="filterFaunaConsevationCriteria" placeholder="Enter text to search for">
+                        <label
+                            class="form-check-label"
+                            for="conservation-criteria"
+                            >Conservation Criteria</label
+                        >
+                        <input
+                            id="conservation-criteria"
+                            v-model="filterFaunaConsevationCriteria"
+                            class="form-control"
+                            type="input"
+                            placeholder="Enter text to search for"
+                        />
                     </div>
                 </div>
             </div>
@@ -135,36 +249,50 @@
 
         <div v-if="newFaunaVisibility" class="col-md-12">
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFauna"><i
-                        class="fa-solid fa-circle-plus"></i> New Fauna </button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFauna"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> New Fauna
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="fauna_datatable" :id="datatable_fauna_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_fauna_id"
+                    ref="fauna_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
         <div v-if="speciesHistoryId">
-            <SpeciesHistory ref="species_history" :key="speciesHistoryId" :species-id="speciesHistoryId" />
+            <SpeciesHistory
+                ref="species_history"
+                :key="speciesHistoryId"
+                :species-id="speciesHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import SpeciesHistory from '../internal/species_communities/species_history.vue';
 
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'SpeciesFaunaTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        SpeciesHistory,
+    },
     props: {
         level: {
             type: String,
@@ -172,24 +300,24 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         filterFaunaScientificName_cache: {
             type: String,
@@ -266,7 +394,6 @@ export default {
             required: false,
             default: 'filterFaunaConsevationCriteria',
         },
-
     },
     data() {
         let vm = this;
@@ -278,51 +405,111 @@ export default {
             //Profile to check if user has access to process Proposal
 
             // selected values for filtering
-            filterFaunaScientificName: sessionStorage.getItem(this.filterFaunaScientificName_cache) ?
-                sessionStorage.getItem(this.filterFaunaScientificName_cache) : 'all',
-
-            filterFaunaCommonName: sessionStorage.getItem(this.filterFaunaCommonName_cache) ?
-                sessionStorage.getItem(this.filterFaunaCommonName_cache) : 'all',
+            filterFaunaScientificName: sessionStorage.getItem(
+                this.filterFaunaScientificName_cache
+            )
+                ? sessionStorage.getItem(this.filterFaunaScientificName_cache)
+                : 'all',
 
-            filterFaunaPhylogeneticGroup: sessionStorage.getItem(this.filterFaunaPhylogeneticGroup_cache) ?
-                sessionStorage.getItem(this.filterFaunaPhylogeneticGroup_cache) : 'all',
+            filterFaunaCommonName: sessionStorage.getItem(
+                this.filterFaunaCommonName_cache
+            )
+                ? sessionStorage.getItem(this.filterFaunaCommonName_cache)
+                : 'all',
 
-            filterFaunaFamily: sessionStorage.getItem(this.filterFaunaFamily_cache) ?
-                sessionStorage.getItem(this.filterFaunaFamily_cache) : 'all',
+            filterFaunaPhylogeneticGroup: sessionStorage.getItem(
+                this.filterFaunaPhylogeneticGroup_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaPhylogeneticGroup_cache
+                  )
+                : 'all',
 
-            filterFaunaGenus: sessionStorage.getItem(this.filterFaunaGenus_cache) ?
-                sessionStorage.getItem(this.filterFaunaGenus_cache) : 'all',
+            filterFaunaFamily: sessionStorage.getItem(
+                this.filterFaunaFamily_cache
+            )
+                ? sessionStorage.getItem(this.filterFaunaFamily_cache)
+                : 'all',
 
-            filterFaunaNameStatus: sessionStorage.getItem(this.filterFaunaNameStatus_cache) ?
-                sessionStorage.getItem(this.filterFaunaNameStatus_cache) : 'all',
+            filterFaunaGenus: sessionStorage.getItem(
+                this.filterFaunaGenus_cache
+            )
+                ? sessionStorage.getItem(this.filterFaunaGenus_cache)
+                : 'all',
 
-            filterFaunaApplicationStatus: sessionStorage.getItem(this.filterFaunaApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterFaunaApplicationStatus_cache) : 'all',
+            filterFaunaNameStatus: sessionStorage.getItem(
+                this.filterFaunaNameStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterFaunaNameStatus_cache)
+                : 'all',
 
-            filterFaunaRegion: sessionStorage.getItem(this.filterFaunaRegion_cache) ?
-                sessionStorage.getItem(this.filterFaunaRegion_cache) : 'all',
+            filterFaunaApplicationStatus: sessionStorage.getItem(
+                this.filterFaunaApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaApplicationStatus_cache
+                  )
+                : 'all',
 
-            filterFaunaDistrict: sessionStorage.getItem(this.filterFaunaDistrict_cache) ?
-                sessionStorage.getItem(this.filterFaunaDistrict_cache) : 'all',
+            filterFaunaRegion: sessionStorage.getItem(
+                this.filterFaunaRegion_cache
+            )
+                ? sessionStorage.getItem(this.filterFaunaRegion_cache)
+                : 'all',
 
-            filterFaunaWALegislativeList: sessionStorage.getItem(this.filterFaunaWALegislativeList_cache) ?
-                sessionStorage.getItem(this.filterFaunaWALegislativeList_cache) : 'all',
+            filterFaunaDistrict: sessionStorage.getItem(
+                this.filterFaunaDistrict_cache
+            )
+                ? sessionStorage.getItem(this.filterFaunaDistrict_cache)
+                : 'all',
 
-            filterFaunaWALegislativeCategory: sessionStorage.getItem(this.filterFaunaWALegislativeCategory_cache) ?
-                sessionStorage.getItem(this.filterFaunaWALegislativeCategory_cache) : 'all',
+            filterFaunaWALegislativeList: sessionStorage.getItem(
+                this.filterFaunaWALegislativeList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaWALegislativeList_cache
+                  )
+                : 'all',
 
-            filterFaunaWAPriorityCategory: sessionStorage.getItem(this.filterFaunaWAPriorityCategory_cache) ?
-                sessionStorage.getItem(this.filterFaunaWAPriorityCategory_cache) : 'all',
+            filterFaunaWALegislativeCategory: sessionStorage.getItem(
+                this.filterFaunaWALegislativeCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaWALegislativeCategory_cache
+                  )
+                : 'all',
 
-            filterFaunaCommonwealthRelevance: sessionStorage.getItem(this.filterFaunaCommonwealthRelevance_cache) ?
-                sessionStorage.getItem(this.filterFaunaCommonwealthRelevance_cache) : "false",
+            filterFaunaWAPriorityCategory: sessionStorage.getItem(
+                this.filterFaunaWAPriorityCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaWAPriorityCategory_cache
+                  )
+                : 'all',
 
-            filterFaunaInternationalRelevance: sessionStorage.getItem(this.filterFaunaInternationalRelevance_cache) ?
-                sessionStorage.getItem(this.filterFaunaInternationalRelevance_cache) : "false",
+            filterFaunaCommonwealthRelevance: sessionStorage.getItem(
+                this.filterFaunaCommonwealthRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaCommonwealthRelevance_cache
+                  )
+                : 'false',
 
-            filterFaunaConsevationCriteria: sessionStorage.getItem(this.filterFaunaConsevationCriteria_cache) ?
-                sessionStorage.getItem(this.filterFaunaConsevationCriteria_cache) : "",
+            filterFaunaInternationalRelevance: sessionStorage.getItem(
+                this.filterFaunaInternationalRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaInternationalRelevance_cache
+                  )
+                : 'false',
 
+            filterFaunaConsevationCriteria: sessionStorage.getItem(
+                this.filterFaunaConsevationCriteria_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFaunaConsevationCriteria_cache
+                  )
+                : '',
 
             //Filter list for scientific name and common name
             filterListsSpecies: {},
@@ -355,100 +542,12 @@ export default {
             ],
 
             species_status: [],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        SpeciesHistory,
-    },
-    watch: {
-        filterFaunaScientificName: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaScientificName_cache, vm.filterFaunaScientificName);
-        },
-        filterFaunaCommonName: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaCommonName_cache, vm.filterFaunaCommonName);
-        },
-        filterFaunaPhylogeneticGroup: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaPhylogeneticGroup_cache, vm.filterFaunaPhylogeneticGroup);
-        },
-        filterFaunaFamily: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaFamily_cache, vm.filterFaunaFamily);
-        },
-        filterFaunaGenus: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaGenus_cache, vm.filterFaunaGenus);
-        },
-        filterFaunaNameStatus: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaNameStatus_cache, vm.filterFaunaNameStatus);
-        },
-        filterFaunaApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaApplicationStatus_cache, vm.filterFaunaApplicationStatus);
-        },
-        filterFaunaRegion: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaRegion_cache, vm.filterFaunaRegion);
-        },
-        filterFaunaDistrict: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaDistrict_cache, vm.filterFaunaDistrict);
-        },
-        filterFaunaWALegislativeList: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaWALegislativeList_cache, vm.filterFaunaWALegislativeList);
-        },
-        filterFaunaWALegislativeCategory: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaWALegislativeCategory_cache, vm.filterFaunaWALegislativeCategory);
-        },
-        filterFaunaWAPriorityCategory: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaWAPriorityCategory_cache, vm.filterFaunaWAPriorityCategory);
-        },
-        filterFaunaCommonwealthRelevance: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaCommonwealthRelevance_cache, vm.filterFaunaCommonwealthRelevance);
-        },
-        filterFaunaInternationalRelevance: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaInternationalRelevance_cache, vm.filterFaunaInternationalRelevance);
-        },
-        filterFaunaConsevationCriteria: function () {
-            let vm = this;
-            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFaunaConsevationCriteria_cache, vm.filterFaunaConsevationCriteria);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterFaunaScientificName === 'all' &&
+            if (
+                this.filterFaunaScientificName === 'all' &&
                 this.filterFaunaCommonName === 'all' &&
                 this.filterFaunaPhylogeneticGroup === 'all' &&
                 this.filterFaunaFamily === 'all' &&
@@ -462,216 +561,259 @@ export default {
                 this.filterFaunaWAPriorityCategory === 'all' &&
                 this.filterFaunaCommonwealthRelevance === 'false' &&
                 this.filterFaunaInternationalRelevance === 'false' &&
-                this.filterFaunaConsevationCriteria === '') {
-                return false
+                this.filterFaunaConsevationCriteria === ''
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_external: function () {
             return this.level == 'external';
         },
         is_internal: function () {
-            return this.level == 'internal'
+            return this.level == 'internal';
         },
         is_referral: function () {
             return this.level == 'referral';
         },
         newFaunaVisibility: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS)
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS
+                )
+            );
         },
         datatable_headers: function () {
             if (this.is_external) {
-                return ['Id', 'Number', 'Scientific Name', 'Common Name', 'Phylo Group', 'Family', 'Genera', 'Region', 'District',
-                    'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category',
-                    'International Conservation', 'Conservation Criteria', 'Action']
+                return [
+                    'Id',
+                    'Number',
+                    'Scientific Name',
+                    'Common Name',
+                    'Phylo Group',
+                    'Family',
+                    'Genera',
+                    'Region',
+                    'District',
+                    'WA Priority Category',
+                    'WA Legislative List',
+                    'WA Legislative Category',
+                    'Commonwealth Conservation Category',
+                    'International Conservation',
+                    'Conservation Criteria',
+                    'Action',
+                ];
             }
             if (this.is_internal) {
-                return ['Id', 'Number', 'Scientific Name', 'Common Name', 'Phylo Group', 'Family', 'Genera', 'Region', 'District',
-                    'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category',
-                    'International Conservation', 'Conservation Criteria', 'Status', 'Action']
+                return [
+                    'Id',
+                    'Number',
+                    'Scientific Name',
+                    'Common Name',
+                    'Phylo Group',
+                    'Family',
+                    'Genera',
+                    'Region',
+                    'District',
+                    'WA Priority Category',
+                    'WA Legislative List',
+                    'WA Legislative Category',
+                    'Commonwealth Conservation Category',
+                    'International Conservation',
+                    'Conservation Criteria',
+                    'Status',
+                    'Action',
+                ];
             }
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             return {
-                data: "species_number",
+                data: 'species_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.species_number
+                render: function (data, type, full) {
+                    return full.species_number;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__scientific_name",
-            }
+                name: 'taxonomy__scientific_name',
+            };
         },
         column_common_name: function () {
             return {
-                data: "common_name",
+                data: 'common_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__vernaculars__vernacular_name",
-            }
+                name: 'taxonomy__vernaculars__vernacular_name',
+            };
         },
         column_phylogenetic_group: function () {
             return {
-                data: "phylogenetic_group",
+                data: 'phylogenetic_group',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__informal_groups__classification_system_fk__class_desc",
-            }
+                name: 'taxonomy__informal_groups__classification_system_fk__class_desc',
+            };
         },
         column_family: function () {
             return {
-                data: "family",
+                data: 'family',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__family_name",
-            }
+                name: 'taxonomy__family_name',
+            };
         },
         column_genera: function () {
             return {
-                data: "genus",
+                data: 'genus',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "taxonomy__genera_name",
-            }
+                name: 'taxonomy__genera_name',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.processing_status) {
-                        if (full.processing_status === "Active" && full.publishing_status) {
-                            return full.processing_status + " - " + full.publishing_status.public_status;
+                        if (
+                            full.processing_status === 'Active' &&
+                            full.publishing_status
+                        ) {
+                            return (
+                                full.processing_status +
+                                ' - ' +
+                                full.publishing_status.public_status
+                            );
                         }
                         return full.processing_status;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_region: function () {
             return {
-                data: "regions",
+                data: 'regions',
                 orderable: true,
                 searchable: false, // handles by filter_queryset override method - class ProposalFilterBackend
                 visible: true,
-                name: "regions__name",
-            }
+                name: 'regions__name',
+            };
         },
         column_district: function () {
             return {
-                data: "districts",
+                data: 'districts',
                 orderable: true,
                 searchable: false, // handles by filter_queryset override method - class ProposalFilterBackend
                 visible: true,
-                name: "districts__name",
-            }
+                name: 'districts__name',
+            };
         },
         column_wa_legislative_list: function () {
             return {
-                data: "wa_legislative_list",
+                data: 'wa_legislative_list',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_wa_legislative_category: function () {
             return {
-                data: "wa_legislative_category",
+                data: 'wa_legislative_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_wa_priority_category: function () {
             return {
-                data: "wa_priority_category",
+                data: 'wa_priority_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_commonwealth_conservation_category: function () {
             return {
-                data: "commonwealth_conservation_category",
+                data: 'commonwealth_conservation_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
+        },
+        column_other_conservation_assessment: function () {
+            return {
+                data: 'other_conservation_assessment',
+                orderable: false,
+                searchable: false,
+                visible: true,
+            };
         },
-        column_other_conservation_assessment:
-            function () {
-                return {
-                    data: "other_conservation_assessment",
-                    orderable: false,
-                    searchable: false,
-                    visible: true,
-                }
-            },
         column_conservation_criteria: function () {
             return {
-                data: "conservation_criteria",
+                data: 'conservation_criteria',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (!vm.is_external) {
                         if (full.can_user_edit) {
                             if (full.processing_status == 'Discarded') {
@@ -681,8 +823,7 @@ export default {
                                 links += `<a href='#${full.id}' data-discard-species-proposal='${full.id}'>Discard</a><br/>`;
                                 links += `<a href='#' data-history-species='${full.id}'>History</a><br>`;
                             }
-                        }
-                        else {
+                        } else {
                             if (full.user_process) {
                                 links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
                             }
@@ -693,14 +834,14 @@ export default {
                         links += `<a href='/external/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -709,7 +850,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -718,9 +859,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             if (vm.is_external) {
                 columns = [
                     vm.column_id,
@@ -739,8 +880,8 @@ export default {
                     vm.column_other_conservation_assessment,
                     vm.column_conservation_criteria,
                     vm.column_action,
-                ]
-                search = false
+                ];
+                search = false;
             }
             if (vm.is_internal) {
                 columns = [
@@ -761,59 +902,75 @@ export default {
                     vm.column_conservation_criteria,
                     vm.column_status,
                     vm.column_action,
-                ]
-                search = true
+                ];
+                search = true;
             }
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "Action" column always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
                         d.filter_scientific_name = vm.filterFaunaScientificName;
                         d.filter_common_name = vm.filterFaunaCommonName;
-                        d.filter_phylogenetic_group = vm.filterFaunaPhylogeneticGroup;
+                        d.filter_phylogenetic_group =
+                            vm.filterFaunaPhylogeneticGroup;
                         d.filter_family = vm.filterFaunaFamily;
                         d.filter_genus = vm.filterFaunaGenus;
                         d.filter_name_status = vm.filterFaunaNameStatus;
-                        d.filter_conservation_list = vm.filterFaunaConservationList;
-                        d.filter_conservation_category = vm.filterFaunaConservationCategory;
-                        d.filter_application_status = vm.filterFaunaApplicationStatus;
+                        d.filter_conservation_list =
+                            vm.filterFaunaConservationList;
+                        d.filter_conservation_category =
+                            vm.filterFaunaConservationCategory;
+                        d.filter_application_status =
+                            vm.filterFaunaApplicationStatus;
                         d.filter_region = vm.filterFaunaRegion;
                         d.filter_district = vm.filterFaunaDistrict;
-                        d.filter_wa_legislative_list = vm.filterFaunaWALegislativeList;
-                        d.filter_wa_legislative_category = vm.filterFaunaWALegislativeCategory;
-                        d.filter_wa_priority_category = vm.filterFaunaWAPriorityCategory;
-                        d.filter_commonwealth_relevance = vm.filterFaunaCommonwealthRelevance;
-                        d.filter_international_relevance = vm.filterFaunaInternationalRelevance;
-                        d.filter_conservation_criteria = vm.filterFaunaConsevationCriteria;
+                        d.filter_wa_legislative_list =
+                            vm.filterFaunaWALegislativeList;
+                        d.filter_wa_legislative_category =
+                            vm.filterFaunaWALegislativeCategory;
+                        d.filter_wa_priority_category =
+                            vm.filterFaunaWAPriorityCategory;
+                        d.filter_commonwealth_relevance =
+                            vm.filterFaunaCommonwealthRelevance;
+                        d.filter_international_relevance =
+                            vm.filterFaunaInternationalRelevance;
+                        d.filter_conservation_criteria =
+                            vm.filterFaunaConsevationCriteria;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -825,8 +982,270 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterFaunaScientificName: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaScientificName_cache,
+                vm.filterFaunaScientificName
+            );
+        },
+        filterFaunaCommonName: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaCommonName_cache,
+                vm.filterFaunaCommonName
+            );
+        },
+        filterFaunaPhylogeneticGroup: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaPhylogeneticGroup_cache,
+                vm.filterFaunaPhylogeneticGroup
+            );
+        },
+        filterFaunaFamily: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaFamily_cache,
+                vm.filterFaunaFamily
+            );
+        },
+        filterFaunaGenus: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaGenus_cache,
+                vm.filterFaunaGenus
+            );
+        },
+        filterFaunaNameStatus: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaNameStatus_cache,
+                vm.filterFaunaNameStatus
+            );
+        },
+        filterFaunaApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaApplicationStatus_cache,
+                vm.filterFaunaApplicationStatus
+            );
+        },
+        filterFaunaRegion: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaRegion_cache,
+                vm.filterFaunaRegion
+            );
+        },
+        filterFaunaDistrict: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaDistrict_cache,
+                vm.filterFaunaDistrict
+            );
+        },
+        filterFaunaWALegislativeList: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaWALegislativeList_cache,
+                vm.filterFaunaWALegislativeList
+            );
+        },
+        filterFaunaWALegislativeCategory: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaWALegislativeCategory_cache,
+                vm.filterFaunaWALegislativeCategory
+            );
+        },
+        filterFaunaWAPriorityCategory: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaWAPriorityCategory_cache,
+                vm.filterFaunaWAPriorityCategory
+            );
+        },
+        filterFaunaCommonwealthRelevance: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaCommonwealthRelevance_cache,
+                vm.filterFaunaCommonwealthRelevance
+            );
+        },
+        filterFaunaInternationalRelevance: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaInternationalRelevance_cache,
+                vm.filterFaunaInternationalRelevance
+            );
+        },
+        filterFaunaConsevationCriteria: function () {
+            let vm = this;
+            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFaunaConsevationCriteria_cache,
+                vm.filterFaunaConsevationCriteria
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommonNameLookup();
+            vm.initialisePhyloGroupLookup();
+            vm.initialiseFamilyLookup();
+            vm.initialiseGeneraLookup();
+            vm.addEventListeners();
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterFaunaScientificName') != 'all' &&
+                sessionStorage.getItem('filterFaunaScientificName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFaunaScientificNameText'),
+                    vm.filterFaunaScientificName,
+                    false,
+                    true
+                );
+                $('#scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterFaunaCommonName') != 'all' &&
+                sessionStorage.getItem('filterFaunaCommonName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFaunaCommonNameText'),
+                    vm.filterFaunaCommonName,
+                    false,
+                    true
+                );
+                $('#common_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterFaunaPhylogeneticGroup') !=
+                    'all' &&
+                sessionStorage.getItem('filterFaunaPhylogeneticGroup') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFaunaPhylogeneticGroupText'),
+                    vm.filterFaunaPhylogeneticGroup,
+                    false,
+                    true
+                );
+                $('#phylo_group_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterFaunaFamily') != 'all' &&
+                sessionStorage.getItem('filterFaunaFamily') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFaunaFamilyText'),
+                    vm.filterFaunaFamily,
+                    false,
+                    true
+                );
+                $('#family_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterFaunaGenus') != 'all' &&
+                sessionStorage.getItem('filterFaunaGenus') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFaunaGenusText'),
+                    vm.filterFaunaGenus,
+                    false,
+                    true
+                );
+                $('#genera_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -837,191 +1256,226 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaScientificName = data; // this is id session
-                    sessionStorage.setItem("filterFaunaScientificNameText", e.params.data.text); // this is name session
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFaunaScientificNameText',
+                        e.params.data.text
+                    ); // this is name session
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFaunaScientificName = 'all';
-                    sessionStorage.setItem("filterFaunaScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-scientific_name_lookup-results"]')
+                    sessionStorage.setItem('filterFaunaScientificNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommonNameLookup: function () {
             let vm = this;
-            $(vm.$refs.common_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Common Name",
-                ajax: {
-                    url: api_endpoints.common_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.common_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Common Name',
+                    ajax: {
+                        url: api_endpoints.common_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaCommonName = data;
-                    sessionStorage.setItem("filterFaunaCommonNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFaunaCommonNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFaunaCommonName = 'all';
-                    sessionStorage.setItem("filterFaunaCommonNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-common_name_lookup-results"]')
+                    sessionStorage.setItem('filterFaunaCommonNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-common_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialisePhyloGroupLookup: function () {
             let vm = this;
-            $(vm.$refs.phylo_group_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Phylo Group",
-                ajax: {
-                    url: api_endpoints.phylo_group_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.phylo_group_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Phylo Group',
+                    ajax: {
+                        url: api_endpoints.phylo_group_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaPhylogeneticGroup = data;
-                    sessionStorage.setItem("filterFaunaPhylogeneticGroupText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFaunaPhylogeneticGroupText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFaunaPhylogeneticGroup = 'all';
-                    sessionStorage.setItem("filterFaunaPhylogeneticGroupText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-phylo_group_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterFaunaPhylogeneticGroupText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-phylo_group_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseFamilyLookup: function () {
             let vm = this;
-            $(vm.$refs.family_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Family",
-                ajax: {
-                    url: api_endpoints.family_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.family_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Family',
+                    ajax: {
+                        url: api_endpoints.family_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaFamily = data;
-                    sessionStorage.setItem("filterFaunaFamilyText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFaunaFamilyText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFaunaFamily = 'all';
-                    sessionStorage.setItem("filterFaunaFamilyText", '');
-                }).
-                on("select2:open", function (e) {
+                    sessionStorage.setItem('filterFaunaFamilyText', '');
+                })
+                .on('select2:open', function (e) {
                     //const searchField = $(".select2-search__field")
-                    const searchField = $('[aria-controls="select2-family_lookup-results"]')
+                    const searchField = $(
+                        '[aria-controls="select2-family_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseGeneraLookup: function () {
             let vm = this;
-            $(vm.$refs.genera_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Genera",
-                ajax: {
-                    url: api_endpoints.genera_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.genera_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Genera',
+                    ajax: {
+                        url: api_endpoints.genera_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaGenus = data;
-                    sessionStorage.setItem("filterFaunaGenusText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFaunaGenusText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFaunaGenus = 'all';
-                    sessionStorage.setItem("filterFaunaGenusText", '');
-                }).
-                on("select2:open", function (e) {
+                    sessionStorage.setItem('filterFaunaGenusText', '');
+                })
+                .on('select2:open', function (e) {
                     //const searchField = $(".select2-search__field")
-                    const searchField = $('[aria-controls="select2-genera_lookup-results"]')
+                    const searchField = $(
+                        '[aria-controls="select2-genera_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
@@ -1029,29 +1483,47 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
 
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.common_name_list = vm.filterListsSpecies.common_name_list;
-                vm.family_list = vm.filterListsSpecies.family_list;
-                vm.phylogenetic_group_list = vm.filterListsSpecies.phylogenetic_group_list;
-                vm.filterDistrict();
-                vm.species_status = vm.internal_status.slice().sort((a, b) => {
-                    return a.name.trim().localeCompare(b.name.trim());
-                });
-                vm.wa_legislative_lists = vm.filterListsSpecies.wa_legislative_lists;
-                vm.wa_legislative_categories = vm.filterListsSpecies.wa_legislative_categories;
-                vm.wa_priority_categories = vm.filterListsSpecies.wa_priority_categories;
-            }, (error) => {
-                console.log(error);
-            })
-            fetch(api_endpoints.region_district_filter_dict).then(async (response) => {
-                vm.filterRegionDistrict = await response.json();
-                vm.region_list = vm.filterRegionDistrict.region_list;
-                vm.district_list = vm.filterRegionDistrict.district_list;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.common_name_list =
+                        vm.filterListsSpecies.common_name_list;
+                    vm.family_list = vm.filterListsSpecies.family_list;
+                    vm.phylogenetic_group_list =
+                        vm.filterListsSpecies.phylogenetic_group_list;
+                    vm.filterDistrict();
+                    vm.species_status = vm.internal_status
+                        .slice()
+                        .sort((a, b) => {
+                            return a.name.trim().localeCompare(b.name.trim());
+                        });
+                    vm.wa_legislative_lists =
+                        vm.filterListsSpecies.wa_legislative_lists;
+                    vm.wa_legislative_categories =
+                        vm.filterListsSpecies.wa_legislative_categories;
+                    vm.wa_priority_categories =
+                        vm.filterListsSpecies.wa_priority_categories;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
+            fetch(api_endpoints.region_district_filter_dict).then(
+                async (response) => {
+                    vm.filterRegionDistrict = await response.json();
+                    vm.region_list = vm.filterRegionDistrict.region_list;
+                    vm.district_list = vm.filterRegionDistrict.district_list;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         //-------filter district dropdown dependent on region selected
         filterDistrict: function (event) {
@@ -1062,20 +1534,22 @@ export default {
                 this.filtered_district_list = [];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
-                    if (choice.region_id.toString() === this.filterFaunaRegion.toString()) {
+                    if (
+                        choice.region_id.toString() ===
+                        this.filterFaunaRegion.toString()
+                    ) {
                         this.filtered_district_list.push(choice);
                     }
-
                 }
             });
         },
         createFauna: async function () {
             swal.fire({
                 title: `Add Fauna`,
-                text: "Are you sure you want to add a new fauna?",
-                icon: "question",
+                text: 'Are you sure you want to add a new fauna?',
+                icon: 'question',
                 showCancelButton: true,
-            confirmButtonText: 'Add Fauna',
+                confirmButtonText: 'Add Fauna',
                 reverseButtons: true,
                 customClass: {
                     confirmButton: 'btn btn-primary',
@@ -1083,11 +1557,11 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFaunaId = null
+                    let newFaunaId = null;
                     try {
-                        const createUrl = api_endpoints.species + "/";
+                        const createUrl = api_endpoints.species + '/';
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
+                        payload.group_type_id = this.group_type_id;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -1099,8 +1573,7 @@ export default {
                         if (data) {
                             newFaunaId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                         if (this.is_internal) {
                             return err;
@@ -1117,145 +1590,140 @@ export default {
         discardSpecies: function (species_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Fauna",
-                text: "Are you sure you want to discard this fauna record?",
-                icon: "question",
+                title: 'Discard Fauna',
+                text: 'Are you sure you want to discard this fauna record?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Fauna',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_species_proposal(species_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The fauna record has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_species_proposal(species_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The fauna record has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateSpecies: function (species_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Fauna",
-                text: "Are you sure you want to reinstate this fauna record?",
-                icon: "question",
+                title: 'Reinstate Fauna',
+                text: 'Are you sure you want to reinstate this fauna record?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Fauna',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.reinstate_species_proposal(species_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'The fauna record has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.fauna_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_species_proposal(
+                                species_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'The fauna record has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.fauna_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // External Discard listener
-            vm.$refs.fauna_datatable.vmDataTable.on('click', 'a[data-discard-species-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-species-proposal');
-                vm.discardSpecies(id);
-            });
-            vm.$refs.fauna_datatable.vmDataTable.on('click', 'a[data-reinstate-species-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-species-proposal');
-                vm.reinstateSpecies(id);
-            });
-            vm.$refs.fauna_datatable.vmDataTable.on('click', 'a[data-history-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-species');
-                vm.historyDocument(id);
-            });
-            vm.$refs.fauna_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.fauna_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-species-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-species-proposal');
+                    vm.discardSpecies(id);
+                }
+            );
+            vm.$refs.fauna_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-species-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-species-proposal');
+                    vm.reinstateSpecies(id);
+                }
+            );
+            vm.$refs.fauna_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-species');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.fauna_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommonNameLookup();
-            vm.initialisePhyloGroupLookup();
-            vm.initialiseFamilyLookup();
-            vm.initialiseGeneraLookup()
-            vm.addEventListeners();
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterFaunaScientificName") != 'all' && sessionStorage.getItem("filterFaunaScientificName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFaunaScientificNameText"), vm.filterFaunaScientificName, false, true);
-                $('#scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterFaunaCommonName") != 'all' && sessionStorage.getItem("filterFaunaCommonName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFaunaCommonNameText"), vm.filterFaunaCommonName, false, true);
-                $('#common_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterFaunaPhylogeneticGroup") != 'all' && sessionStorage.getItem("filterFaunaPhylogeneticGroup") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFaunaPhylogeneticGroupText"), vm.filterFaunaPhylogeneticGroup, false, true);
-                $('#phylo_group_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterFaunaFamily") != 'all' && sessionStorage.getItem("filterFaunaFamily") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFaunaFamilyText"), vm.filterFaunaFamily, false, true);
-                $('#family_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterFaunaGenus") != 'all' && sessionStorage.getItem("filterFaunaGenus") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFaunaGenusText"), vm.filterFaunaGenus, false, true);
-                $('#genera_lookup').append(newOption);
-            }
-        });
-    },
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
diff --git a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
index 6875ac60..ed2b2b7f 100755
--- a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
@@ -1,45 +1,76 @@
 <template id="species_flora_dashboard">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="scientific_name_lookup">Scientific Name:</label>
-                        <select id="scientific_name_lookup" name="scientific_name_lookup" ref="scientific_name_lookup"
-                            class="form-control" />
+                        <label for="scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="scientific_name_lookup"
+                            ref="scientific_name_lookup"
+                            name="scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="common_name_lookup">Common Name:</label>
-                        <select id="common_name_lookup" name="common_name_lookup" ref="common_name_lookup"
-                            class="form-control" />
+                        <select
+                            id="common_name_lookup"
+                            ref="common_name_lookup"
+                            name="common_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="phylo_group_lookup">Phylo Group:</label>
-                        <select id="phylo_group_lookup" name="phylo_group_lookup" ref="phylo_group_lookup"
-                            class="form-control" />
+                        <select
+                            id="phylo_group_lookup"
+                            ref="phylo_group_lookup"
+                            name="phylo_group_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="family_lookup">Family:</label>
-                        <select id="family_lookup" name="family_lookup" ref="family_lookup" class="form-control" />
+                        <select
+                            id="family_lookup"
+                            ref="family_lookup"
+                            name="family_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="genera_lookup">Genera:</label>
-                        <select id="genera_lookup" name="genera_lookup" ref="genera_lookup" class="form-control" />
+                        <select
+                            id="genera_lookup"
+                            ref="genera_lookup"
+                            name="genera_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Name Status:</label>
-                        <select class="form-select" v-model="filterFloraNameStatus">
+                        <select
+                            v-model="filterFloraNameStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
                             <option value="True">Current</option>
                             <option value="False">Non Current</option>
@@ -49,85 +80,168 @@
                 <div v-if="is_internal" class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterFloraApplicationStatus">
+                        <select
+                            v-model="filterFloraApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in species_status" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in species_status"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Region:</label>
-                        <select class="form-select" v-model="filterFloraRegion" @change="filterDistrict($event)">
+                        <select
+                            v-model="filterFloraRegion"
+                            class="form-select"
+                            @change="filterDistrict($event)"
+                        >
                             <option value="all">All</option>
-                            <option v-for="region in region_list" :value="region.id" v-bind:key="region.id">
-                                {{ region.name }}</option>
+                            <option
+                                v-for="region in region_list"
+                                :key="region.id"
+                                :value="region.id"
+                            >
+                                {{ region.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">District:</label>
-                        <select class="form-select" v-model="filterFloraDistrict">
+                        <select
+                            v-model="filterFloraDistrict"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="district in filtered_district_list" :value="district.id">{{ district.name }}
+                            <option
+                                v-for="district in filtered_district_list"
+                                :value="district.id"
+                            >
+                                {{ district.name }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-list">WA Legislative List:</label>
-                        <select id="wa-legislative-list" class="form-select" v-model="filterFloraWALegislativeList">
+                        <label for="wa-legislative-list"
+                            >WA Legislative List:</label
+                        >
+                        <select
+                            id="wa-legislative-list"
+                            v-model="filterFloraWALegislativeList"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_lists" :value="list.id">{{ list.code }}</option>
+                            <option
+                                v-for="list in wa_legislative_lists"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
+                            </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-legislative-category">WA Legislative Category:</label>
-                        <select id="wa-legislative-category" class="form-select"
-                            v-model="filterFloraWALegislativeCategory">
+                        <label for="wa-legislative-category"
+                            >WA Legislative Category:</label
+                        >
+                        <select
+                            id="wa-legislative-category"
+                            v-model="filterFloraWALegislativeCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_legislative_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_legislative_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="wa-priority-category">WA Priority Category:</label>
-                        <select id="wa-priority-category" class="form-select" v-model="filterFloraWAPriorityCategory">
+                        <label for="wa-priority-category"
+                            >WA Priority Category:</label
+                        >
+                        <select
+                            id="wa-priority-category"
+                            v-model="filterFloraWAPriorityCategory"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="list in wa_priority_categories" :value="list.id">{{ list.code }}
+                            <option
+                                v-for="list in wa_priority_categories"
+                                :value="list.id"
+                            >
+                                {{ list.code }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="commonwealth-relevance">Commonwealth Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="commonwealth-relevance"
+                            >Commonwealth Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="commonwealth-relevance"
-                                v-model="filterFloraCommonwealthRelevance" true-value="true" false-value="false">
+                            <input
+                                id="commonwealth-relevance"
+                                v-model="filterFloraCommonwealthRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="international-relevance">International Relevance</label>
+                        <label
+                            class="form-check-label"
+                            for="international-relevance"
+                            >International Relevance</label
+                        >
                         <div class="form-check form-switch mt-1">
-                            <input class="form-check-input" type="checkbox" id="international-relevance"
-                                v-model="filterFloraInternationalRelevance" true-value="true" false-value="false">
+                            <input
+                                id="international-relevance"
+                                v-model="filterFloraInternationalRelevance"
+                                class="form-check-input"
+                                type="checkbox"
+                                true-value="true"
+                                false-value="false"
+                            />
                         </div>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label class="form-check-label" for="conservation-criteria">Conservation Criteria</label>
-                        <input class="form-control" type="input" id="conservation-criteria"
-                            v-model="filterFloraConsevationCriteria" placeholder="Enter text to search for">
+                        <label
+                            class="form-check-label"
+                            for="conservation-criteria"
+                            >Conservation Criteria</label
+                        >
+                        <input
+                            id="conservation-criteria"
+                            v-model="filterFloraConsevationCriteria"
+                            class="form-control"
+                            type="input"
+                            placeholder="Enter text to search for"
+                        />
                     </div>
                 </div>
             </div>
@@ -135,36 +249,50 @@
 
         <div v-if="newFloraVisibility" class="col-md-12">
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createFlora"><i
-                        class="fa-solid fa-circle-plus"></i> New Flora </button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createFlora"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> New Flora
+                </button>
             </div>
         </div>
 
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="flora_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="flora_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
         <div v-if="speciesHistoryId">
-            <SpeciesHistory ref="species_history" :key="speciesHistoryId" :species-id="speciesHistoryId" />
+            <SpeciesHistory
+                ref="species_history"
+                :key="speciesHistoryId"
+                :species-id="speciesHistoryId"
+            />
         </div>
     </div>
 </template>
 <script>
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 import SpeciesHistory from '../internal/species_communities/species_history.vue';
 
-import {
-    api_endpoints,
-    constants,
-    helpers
-} from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'SpeciesFloraTable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+        SpeciesHistory,
+    },
     props: {
         level: {
             type: String,
@@ -172,24 +300,24 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         group_type_name: {
             type: String,
-            required: true
+            required: true,
         },
         group_type_id: {
             type: Number,
             required: true,
-            default: 0
+            default: 0,
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
-            default: null
+            default: null,
         },
         filterFloraScientificName_cache: {
             type: String,
@@ -275,50 +403,111 @@ export default {
             datatable_id: 'species_flora-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterFloraScientificName: sessionStorage.getItem(this.filterFloraScientificName_cache) ?
-                sessionStorage.getItem(this.filterFloraScientificName_cache) : 'all',
+            filterFloraScientificName: sessionStorage.getItem(
+                this.filterFloraScientificName_cache
+            )
+                ? sessionStorage.getItem(this.filterFloraScientificName_cache)
+                : 'all',
 
-            filterFloraCommonName: sessionStorage.getItem(this.filterFloraCommonName_cache) ?
-                sessionStorage.getItem(this.filterFloraCommonName_cache) : 'all',
+            filterFloraCommonName: sessionStorage.getItem(
+                this.filterFloraCommonName_cache
+            )
+                ? sessionStorage.getItem(this.filterFloraCommonName_cache)
+                : 'all',
 
-            filterFloraFamily: sessionStorage.getItem(this.filterFloraFamily_cache) ?
-                sessionStorage.getItem(this.filterFloraFamily_cache) : 'all',
+            filterFloraFamily: sessionStorage.getItem(
+                this.filterFloraFamily_cache
+            )
+                ? sessionStorage.getItem(this.filterFloraFamily_cache)
+                : 'all',
 
-            filterFloraPhylogeneticGroup: sessionStorage.getItem(this.filterFloraPhylogeneticGroup_cache) ?
-                sessionStorage.getItem(this.filterFloraPhylogeneticGroup_cache) : 'all',
+            filterFloraPhylogeneticGroup: sessionStorage.getItem(
+                this.filterFloraPhylogeneticGroup_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraPhylogeneticGroup_cache
+                  )
+                : 'all',
 
-            filterFloraGenus: sessionStorage.getItem(this.filterFloraGenus_cache) ?
-                sessionStorage.getItem(this.filterFloraGenus_cache) : 'all',
+            filterFloraGenus: sessionStorage.getItem(
+                this.filterFloraGenus_cache
+            )
+                ? sessionStorage.getItem(this.filterFloraGenus_cache)
+                : 'all',
 
-            filterFloraNameStatus: sessionStorage.getItem(this.filterFloraNameStatus_cache) ?
-                sessionStorage.getItem(this.filterFloraNameStatus_cache) : 'all',
+            filterFloraNameStatus: sessionStorage.getItem(
+                this.filterFloraNameStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterFloraNameStatus_cache)
+                : 'all',
 
-            filterFloraApplicationStatus: sessionStorage.getItem(this.filterFloraApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterFloraApplicationStatus_cache) : 'all',
+            filterFloraApplicationStatus: sessionStorage.getItem(
+                this.filterFloraApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraApplicationStatus_cache
+                  )
+                : 'all',
 
-            filterFloraRegion: sessionStorage.getItem(this.filterFloraRegion_cache) ?
-                sessionStorage.getItem(this.filterFloraRegion_cache) : 'all',
+            filterFloraRegion: sessionStorage.getItem(
+                this.filterFloraRegion_cache
+            )
+                ? sessionStorage.getItem(this.filterFloraRegion_cache)
+                : 'all',
 
-            filterFloraDistrict: sessionStorage.getItem(this.filterFloraDistrict_cache) ?
-                sessionStorage.getItem(this.filterFloraDistrict_cache) : 'all',
+            filterFloraDistrict: sessionStorage.getItem(
+                this.filterFloraDistrict_cache
+            )
+                ? sessionStorage.getItem(this.filterFloraDistrict_cache)
+                : 'all',
 
-            filterFloraWALegislativeList: sessionStorage.getItem(this.filterFloraWALegislativeList_cache) ?
-                sessionStorage.getItem(this.filterFloraWALegislativeList_cache) : 'all',
+            filterFloraWALegislativeList: sessionStorage.getItem(
+                this.filterFloraWALegislativeList_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraWALegislativeList_cache
+                  )
+                : 'all',
 
-            filterFloraWALegislativeCategory: sessionStorage.getItem(this.filterFloraWALegislativeCategory_cache) ?
-                sessionStorage.getItem(this.filterFloraWALegislativeCategory_cache) : 'all',
+            filterFloraWALegislativeCategory: sessionStorage.getItem(
+                this.filterFloraWALegislativeCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraWALegislativeCategory_cache
+                  )
+                : 'all',
 
-            filterFloraWAPriorityCategory: sessionStorage.getItem(this.filterFloraWAPriorityCategory_cache) ?
-                sessionStorage.getItem(this.filterFloraWAPriorityCategory_cache) : 'all',
+            filterFloraWAPriorityCategory: sessionStorage.getItem(
+                this.filterFloraWAPriorityCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraWAPriorityCategory_cache
+                  )
+                : 'all',
 
-            filterFloraCommonwealthRelevance: sessionStorage.getItem(this.filterFloraCommonwealthRelevance_cache) ?
-                sessionStorage.getItem(this.filterFloraCommonwealthRelevance_cache) : "false",
+            filterFloraCommonwealthRelevance: sessionStorage.getItem(
+                this.filterFloraCommonwealthRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraCommonwealthRelevance_cache
+                  )
+                : 'false',
 
-            filterFloraInternationalRelevance: sessionStorage.getItem(this.filterFloraInternationalRelevance_cache) ?
-                sessionStorage.getItem(this.filterFloraInternationalRelevance_cache) : "false",
+            filterFloraInternationalRelevance: sessionStorage.getItem(
+                this.filterFloraInternationalRelevance_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraInternationalRelevance_cache
+                  )
+                : 'false',
 
-            filterFloraConsevationCriteria: sessionStorage.getItem(this.filterFloraConsevationCriteria_cache) ?
-                sessionStorage.getItem(this.filterFloraConsevationCriteria_cache) : "",
+            filterFloraConsevationCriteria: sessionStorage.getItem(
+                this.filterFloraConsevationCriteria_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterFloraConsevationCriteria_cache
+                  )
+                : '',
 
             //Filter list for scientific name and common name
             filterListsSpecies: {},
@@ -351,100 +540,12 @@ export default {
             ],
 
             species_status: [],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-        SpeciesHistory,
-    },
-    watch: {
-        filterFloraScientificName: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraScientificName_cache, vm.filterFloraScientificName);
-        },
-        filterFloraCommonName: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraCommonName_cache, vm.filterFloraCommonName);
-        },
-        filterFloraFamily: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraFamily_cache, vm.filterFloraFamily);
-        },
-        filterFloraPhylogeneticGroup: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraPhylogeneticGroup_cache, vm.filterFloraPhylogeneticGroup);
-        },
-        filterFloraGenus: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraGenus_cache, vm.filterFloraGenus);
-        },
-        filterFloraNameStatus: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraNameStatus_cache, vm.filterFloraNameStatus);
-        },
-        filterFloraApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraApplicationStatus_cache, vm.filterFloraApplicationStatus);
-        },
-        filterFloraRegion: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraRegion_cache, vm.filterFloraRegion);
-        },
-        filterFloraDistrict: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraDistrict_cache, vm.filterFloraDistrict);
-        },
-        filterFloraWALegislativeList: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraWALegislativeList_cache, vm.filterFloraWALegislativeList);
-        },
-        filterFloraWALegislativeCategory: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraWALegislativeCategory_cache, vm.filterFloraWALegislativeCategory);
-        },
-        filterFloraWAPriorityCategory: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraWAPriorityCategory_cache, vm.filterFloraWAPriorityCategory);
-        },
-        filterFloraCommonwealthRelevance: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraCommonwealthRelevance_cache, vm.filterFloraCommonwealthRelevance);
-        },
-        filterFloraInternationalRelevance: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraInternationalRelevance_cache, vm.filterFloraInternationalRelevance);
-        },
-        filterFloraConsevationCriteria: function () {
-            let vm = this;
-            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFloraConsevationCriteria_cache, vm.filterFloraConsevationCriteria);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterFloraScientificName === 'all' &&
+            if (
+                this.filterFloraScientificName === 'all' &&
                 this.filterFloraCommonName === 'all' &&
                 this.filterFloraFamily === 'all' &&
                 this.filterFloraPhylogeneticGroup === 'all' &&
@@ -460,228 +561,272 @@ export default {
                 this.filterFloraInternationalRelevance === 'false' &&
                 this.filterFloraConsevationCriteria === ''
             ) {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         is_external: function () {
             return this.level == 'external';
         },
         is_internal: function () {
-            return this.level == 'internal'
+            return this.level == 'internal';
         },
         is_referral: function () {
             return this.level == 'referral';
         },
         newFloraVisibility: function () {
-            return this.profile && this.profile.groups.includes(constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS)
+            return (
+                this.profile &&
+                this.profile.groups.includes(
+                    constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS
+                )
+            );
         },
         datatable_headers: function () {
             if (this.is_external) {
-                return ['Id', 'Number', 'Scientific Name', 'Common Name', 'Phylo Group(s)', 'Family', 'Genera',
-                    'Region(s)', 'District(s)',
-                    'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category',
-                    'International Conservation', 'Conservation Criteria', 'Action']
+                return [
+                    'Id',
+                    'Number',
+                    'Scientific Name',
+                    'Common Name',
+                    'Phylo Group(s)',
+                    'Family',
+                    'Genera',
+                    'Region(s)',
+                    'District(s)',
+                    'WA Priority Category',
+                    'WA Legislative List',
+                    'WA Legislative Category',
+                    'Commonwealth Conservation Category',
+                    'International Conservation',
+                    'Conservation Criteria',
+                    'Action',
+                ];
             }
             if (this.is_internal) {
-                return ['Id', 'Number', 'Scientific Name', 'Common Name', 'Phylo Group(s)', 'Family', 'Genera',
-                    'Region(s)', 'District(s)',
-                    'WA Priority Category', 'WA Legislative List', 'WA Legislative Category', 'Commonwealth Conservation Category',
-                    'International Conservation', 'Conservation Criteria', 'Status', 'Action']
+                return [
+                    'Id',
+                    'Number',
+                    'Scientific Name',
+                    'Common Name',
+                    'Phylo Group(s)',
+                    'Family',
+                    'Genera',
+                    'Region(s)',
+                    'District(s)',
+                    'WA Priority Category',
+                    'WA Legislative List',
+                    'WA Legislative Category',
+                    'Commonwealth Conservation Category',
+                    'International Conservation',
+                    'Conservation Criteria',
+                    'Status',
+                    'Action',
+                ];
             }
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             return {
-                data: "species_number",
+                data: 'species_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.species_number
+                render: function (data, type, full) {
+                    return full.species_number;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__scientific_name",
-            }
+                name: 'taxonomy__scientific_name',
+            };
         },
         column_common_name: function () {
             return {
-                data: "common_name",
+                data: 'common_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__vernaculars__vernacular_name",
-            }
+                name: 'taxonomy__vernaculars__vernacular_name',
+            };
         },
         column_family: function () {
             return {
-                data: "family",
+                data: 'family',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__family_name",
-            }
+                name: 'taxonomy__family_name',
+            };
         },
         column_phylogenetic_group: function () {
             return {
-                data: "phylogenetic_group",
+                data: 'phylogenetic_group',
                 orderable: true,
                 searchable: true,
                 visible: true,
                 render: function (data, type, full) {
                     let html = '';
                     if (full.phylogenetic_group) {
-                        for (let i = 0; i < full.phylogenetic_group.length; i++) {
-                            html += `<span class="badge bg-primary">${full.phylogenetic_group[i]}</span>`
+                        for (
+                            let i = 0;
+                            i < full.phylogenetic_group.length;
+                            i++
+                        ) {
+                            html += `<span class="badge bg-primary">${full.phylogenetic_group[i]}</span>`;
                         }
                     }
-                    return html
+                    return html;
                 },
-                name: "taxonomy__informal_groups__classification_system_fk__class_desc",
-            }
+                name: 'taxonomy__informal_groups__classification_system_fk__class_desc',
+            };
         },
         column_genera: function () {
             return {
-                data: "genus",
+                data: 'genus',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "taxonomy__genera_name",
-            }
+                name: 'taxonomy__genera_name',
+            };
         },
         column_wa_legislative_list: function () {
             return {
-                data: "wa_legislative_list",
+                data: 'wa_legislative_list',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_wa_legislative_category: function () {
             return {
-                data: "wa_legislative_category",
+                data: 'wa_legislative_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_wa_priority_category: function () {
             return {
-                data: "wa_priority_category",
+                data: 'wa_priority_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_commonwealth_conservation_category: function () {
             return {
-                data: "commonwealth_conservation_category",
+                data: 'commonwealth_conservation_category',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
+        },
+        column_other_conservation_assessment: function () {
+            return {
+                data: 'other_conservation_assessment',
+                orderable: false,
+                searchable: false,
+                visible: true,
+            };
         },
-        column_other_conservation_assessment:
-            function () {
-                return {
-                    data: "other_conservation_assessment",
-                    orderable: false,
-                    searchable: false,
-                    visible: true,
-                }
-            },
         column_conservation_criteria: function () {
             return {
-                data: "conservation_criteria",
+                data: 'conservation_criteria',
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_status: function () {
             return {
                 // 9. Workflow Status
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.processing_status) {
-                        if (full.processing_status === "Active" && full.publishing_status) {
-                            return full.processing_status + " - " + full.publishing_status.public_status;
+                        if (
+                            full.processing_status === 'Active' &&
+                            full.publishing_status
+                        ) {
+                            return (
+                                full.processing_status +
+                                ' - ' +
+                                full.publishing_status.public_status
+                            );
                         }
                         return full.processing_status;
                     }
                     // Should not reach here
-                    return ''
+                    return '';
                 },
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_region: function () {
             return {
-                data: "regions",
+                data: 'regions',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "regions__name",
-            }
+                name: 'regions__name',
+            };
         },
         column_district: function () {
             return {
-                data: "districts",
+                data: 'districts',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "districts__name",
-            }
+                name: 'districts__name',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
                 // 10. Action
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (!vm.is_external) {
                         if (full.can_user_edit) {
                             if (full.processing_status == 'Discarded') {
@@ -691,8 +836,7 @@ export default {
                                 links += `<a href='#${full.id}' data-discard-species-proposal='${full.id}'>Discard</a><br/>`;
                                 links += `<a href='#' data-history-species='${full.id}'>History</a><br>`;
                             }
-                        }
-                        else {
+                        } else {
                             if (full.user_process) {
                                 links += `<a href='/internal/species-communities/${full.id}?group_type_name=${full.group_type}&action=edit'>Edit</a><br/>`;
                             }
@@ -703,14 +847,14 @@ export default {
                         links += `<a href='/external/species-communities/${full.id}?group_type_name=${full.group_type}&action=view'>View</a><br/>`;
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -719,7 +863,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -728,9 +872,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             if (vm.is_external) {
                 columns = [
                     vm.column_id,
@@ -749,8 +893,8 @@ export default {
                     vm.column_other_conservation_assessment,
                     vm.column_conservation_criteria,
                     vm.column_action,
-                ]
-                search = false
+                ];
+                search = false;
             }
             if (vm.is_internal) {
                 columns = [
@@ -771,57 +915,71 @@ export default {
                     vm.column_conservation_criteria,
                     vm.column_status,
                     vm.column_action,
-                ]
-                search = true
+                ];
+                search = true;
             }
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "Action" column always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "method": 'post',
+                    url: this.url,
+                    dataSrc: 'data',
+                    method: 'post',
                     headers: {
                         'X-CSRFToken': helpers.getCookie('csrftoken'),
                     },
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_group_type = vm.group_type_name;
                         d.filter_scientific_name = vm.filterFloraScientificName;
                         d.filter_common_name = vm.filterFloraCommonName;
                         d.filter_family = vm.filterFloraFamily;
-                        d.filter_phylogenetic_group = vm.filterFloraPhylogeneticGroup;
+                        d.filter_phylogenetic_group =
+                            vm.filterFloraPhylogeneticGroup;
                         d.filter_genus = vm.filterFloraGenus;
                         d.filter_name_status = vm.filterFloraNameStatus;
-                        d.filter_application_status = vm.filterFloraApplicationStatus;
+                        d.filter_application_status =
+                            vm.filterFloraApplicationStatus;
                         d.filter_region = vm.filterFloraRegion;
                         d.filter_district = vm.filterFloraDistrict;
-                        d.filter_wa_legislative_list = vm.filterFloraWALegislativeList;
-                        d.filter_wa_legislative_category = vm.filterFloraWALegislativeCategory;
-                        d.filter_wa_priority_category = vm.filterFloraWAPriorityCategory;
-                        d.filter_commonwealth_relevance = vm.filterFloraCommonwealthRelevance;
-                        d.filter_international_relevance = vm.filterFloraInternationalRelevance;
-                        d.filter_conservation_criteria = vm.filterFloraConsevationCriteria;
+                        d.filter_wa_legislative_list =
+                            vm.filterFloraWALegislativeList;
+                        d.filter_wa_legislative_category =
+                            vm.filterFloraWALegislativeCategory;
+                        d.filter_wa_priority_category =
+                            vm.filterFloraWAPriorityCategory;
+                        d.filter_commonwealth_relevance =
+                            vm.filterFloraCommonwealthRelevance;
+                        d.filter_international_relevance =
+                            vm.filterFloraInternationalRelevance;
+                        d.filter_conservation_criteria =
+                            vm.filterFloraConsevationCriteria;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -833,8 +991,272 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterFloraScientificName: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraScientificName_cache,
+                vm.filterFloraScientificName
+            );
+        },
+        filterFloraCommonName: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraCommonName_cache,
+                vm.filterFloraCommonName
+            );
+        },
+        filterFloraFamily: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraFamily_cache,
+                vm.filterFloraFamily
+            );
+        },
+        filterFloraPhylogeneticGroup: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraPhylogeneticGroup_cache,
+                vm.filterFloraPhylogeneticGroup
+            );
+        },
+        filterFloraGenus: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraGenus_cache,
+                vm.filterFloraGenus
+            );
+        },
+        filterFloraNameStatus: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraNameStatus_cache,
+                vm.filterFloraNameStatus
+            );
+        },
+        filterFloraApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraApplicationStatus_cache,
+                vm.filterFloraApplicationStatus
+            );
+        },
+        filterFloraRegion: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraRegion_cache,
+                vm.filterFloraRegion
+            );
+        },
+        filterFloraDistrict: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraDistrict_cache,
+                vm.filterFloraDistrict
+            );
+        },
+        filterFloraWALegislativeList: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraWALegislativeList_cache,
+                vm.filterFloraWALegislativeList
+            );
+        },
+        filterFloraWALegislativeCategory: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraWALegislativeCategory_cache,
+                vm.filterFloraWALegislativeCategory
+            );
+        },
+        filterFloraWAPriorityCategory: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraWAPriorityCategory_cache,
+                vm.filterFloraWAPriorityCategory
+            );
+        },
+        filterFloraCommonwealthRelevance: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraCommonwealthRelevance_cache,
+                vm.filterFloraCommonwealthRelevance
+            );
+        },
+        filterFloraInternationalRelevance: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraInternationalRelevance_cache,
+                vm.filterFloraInternationalRelevance
+            );
+        },
+        filterFloraConsevationCriteria: function () {
+            let vm = this;
+            vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFloraConsevationCriteria_cache,
+                vm.filterFloraConsevationCriteria
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+
+    mounted: function () {
+        let vm = this;
+        vm.fetchFilterLists();
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommonNameLookup();
+            vm.initialisePhyloGroupLookup();
+            vm.initialiseFamilyLookup();
+            vm.initialiseGeneraLookup();
+            vm.addEventListeners();
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterFloraScientificName') != 'all' &&
+                sessionStorage.getItem('filterFloraScientificName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFloraScientificNameText'),
+                    vm.filterFloraScientificName,
+                    false,
+                    true
+                );
+                $('#scientific_name_lookup').append(newOption);
+                //$('#scientific_name_lookup').append(newOption).trigger('change');
+            }
+            if (
+                sessionStorage.getItem('filterFloraCommonName') != 'all' &&
+                sessionStorage.getItem('filterFloraCommonName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFloraCommonNameText'),
+                    vm.filterFloraCommonName,
+                    false,
+                    true
+                );
+                $('#common_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterFloraPhylogeneticGroup') !=
+                    'all' &&
+                sessionStorage.getItem('filterFloraPhylogeneticGroup') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFloraPhylogeneticGroupText'),
+                    vm.filterFloraPhylogeneticGroup,
+                    false,
+                    true
+                );
+                $('#phylo_group_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterFloraFamily') != 'all' &&
+                sessionStorage.getItem('filterFloraFamily') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFloraFamilyText'),
+                    vm.filterFloraFamily,
+                    false,
+                    true
+                );
+                $('#family_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterFloraGenus') != 'all' &&
+                sessionStorage.getItem('filterFloraGenus') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterFloraGenusText'),
+                    vm.filterFloraGenus,
+                    false,
+                    true
+                );
+                $('#genera_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         historyDocument: function (id) {
@@ -845,215 +1267,268 @@ export default {
             });
         },
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraScientificName = data;
-                    sessionStorage.setItem("filterFloraScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFloraScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFloraScientificName = 'all';
-                    sessionStorage.setItem("filterFloraScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-scientific_name_lookup-results"]')
+                    sessionStorage.setItem('filterFloraScientificNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-scientific_name_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseCommonNameLookup: function () {
             let vm = this;
-            $(vm.$refs.common_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Common Name",
-                ajax: {
-                    url: api_endpoints.common_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.common_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Common Name',
+                    ajax: {
+                        url: api_endpoints.common_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraCommonName = data;
-                    sessionStorage.setItem("filterFloraCommonNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFloraCommonNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFloraCommonName = 'all';
-                    sessionStorage.setItem("filterFloraCommonNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-common_name_lookup-results"]')
+                    sessionStorage.setItem('filterFloraCommonNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-common_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseFamilyLookup: function () {
             let vm = this;
-            $(vm.$refs.family_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Family",
-                ajax: {
-                    url: api_endpoints.family_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.family_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Family',
+                    ajax: {
+                        url: api_endpoints.family_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraFamily = data;
-                    sessionStorage.setItem("filterFloraFamilyText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFloraFamilyText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFloraFamily = 'all';
-                    sessionStorage.setItem("filterFloraFamilyText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-family_lookup-results"]')
+                    sessionStorage.setItem('filterFloraFamilyText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-family_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialiseGeneraLookup: function () {
             let vm = this;
-            $(vm.$refs.genera_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Genera",
-                ajax: {
-                    url: api_endpoints.genera_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.genera_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Genera',
+                    ajax: {
+                        url: api_endpoints.genera_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraGenus = data;
-                    sessionStorage.setItem("filterFloraGenusText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFloraGenusText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFloraGenus = 'all';
-                    sessionStorage.setItem("filterFloraGenusText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-genera_lookup-results"]')
+                    sessionStorage.setItem('filterFloraGenusText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-genera_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         initialisePhyloGroupLookup: function () {
             let vm = this;
-            $(vm.$refs.phylo_group_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Phylo Group",
-                ajax: {
-                    url: api_endpoints.phylo_group_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.phylo_group_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Phylo Group',
+                    ajax: {
+                        url: api_endpoints.phylo_group_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraPhylogeneticGroup = data;
-                    sessionStorage.setItem("filterFloraPhylogeneticGroupText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterFloraPhylogeneticGroupText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterFloraPhylogeneticGroup = 'all';
-                    sessionStorage.setItem("filterFloraPhylogeneticGroupText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-phylo_group_lookup-results"]')
+                    sessionStorage.setItem(
+                        'filterFloraPhylogeneticGroupText',
+                        ''
+                    );
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-phylo_group_lookup-results"]'
+                    );
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(api_endpoints.filter_lists_species + '?group_type_name=' + vm.group_type_name).then(async (response) => {
-                vm.filterListsSpecies = await response.json();
-                vm.scientific_name_list = vm.filterListsSpecies.scientific_name_list;
-                vm.common_name_list = vm.filterListsSpecies.common_name_list;
-                vm.family_list = vm.filterListsSpecies.family_list;
-                vm.phylogenetic_group_list = vm.filterListsSpecies.phylogenetic_group_list;
-                vm.filterDistrict();
-                vm.species_status = vm.internal_status.slice().sort((a, b) => {
-                    return a.name.trim().localeCompare(b.name.trim());
-                });
-                vm.wa_legislative_lists = vm.filterListsSpecies.wa_legislative_lists;
-                vm.wa_legislative_categories = vm.filterListsSpecies.wa_legislative_categories;
-                vm.wa_priority_categories = vm.filterListsSpecies.wa_priority_categories;
-            }, (error) => {
-                console.log(error);
-            })
-            fetch(api_endpoints.region_district_filter_dict).then(async (response) => {
-                vm.filterRegionDistrict = await response.json();
-                vm.region_list = vm.filterRegionDistrict.region_list;
-                vm.district_list = vm.filterRegionDistrict.district_list;
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(
+                api_endpoints.filter_lists_species +
+                    '?group_type_name=' +
+                    vm.group_type_name
+            ).then(
+                async (response) => {
+                    vm.filterListsSpecies = await response.json();
+                    vm.scientific_name_list =
+                        vm.filterListsSpecies.scientific_name_list;
+                    vm.common_name_list =
+                        vm.filterListsSpecies.common_name_list;
+                    vm.family_list = vm.filterListsSpecies.family_list;
+                    vm.phylogenetic_group_list =
+                        vm.filterListsSpecies.phylogenetic_group_list;
+                    vm.filterDistrict();
+                    vm.species_status = vm.internal_status
+                        .slice()
+                        .sort((a, b) => {
+                            return a.name.trim().localeCompare(b.name.trim());
+                        });
+                    vm.wa_legislative_lists =
+                        vm.filterListsSpecies.wa_legislative_lists;
+                    vm.wa_legislative_categories =
+                        vm.filterListsSpecies.wa_legislative_categories;
+                    vm.wa_priority_categories =
+                        vm.filterListsSpecies.wa_priority_categories;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
+            fetch(api_endpoints.region_district_filter_dict).then(
+                async (response) => {
+                    vm.filterRegionDistrict = await response.json();
+                    vm.region_list = vm.filterRegionDistrict.region_list;
+                    vm.district_list = vm.filterRegionDistrict.district_list;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         //-------filter district dropdown dependent on region selected
         filterDistrict: function (event) {
@@ -1064,18 +1539,20 @@ export default {
                 this.filtered_district_list = [];
                 //---filter districts as per region selected
                 for (let choice of this.district_list) {
-                    if (choice.region_id.toString() === this.filterFloraRegion.toString()) {
+                    if (
+                        choice.region_id.toString() ===
+                        this.filterFloraRegion.toString()
+                    ) {
                         this.filtered_district_list.push(choice);
                     }
-
                 }
             });
         },
         createFlora: async function () {
             swal.fire({
                 title: `Add Flora`,
-                text: "Are you sure you want to add a new flora?",
-                icon: "question",
+                text: 'Are you sure you want to add a new flora?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Flora',
                 reverseButtons: true,
@@ -1085,11 +1562,11 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newFloraId = null
+                    let newFloraId = null;
                     try {
-                        const createUrl = api_endpoints.species + "/";
+                        const createUrl = api_endpoints.species + '/';
                         let payload = new Object();
-                        payload.group_type_id = this.group_type_id
+                        payload.group_type_id = this.group_type_id;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -1101,8 +1578,7 @@ export default {
                         if (data) {
                             newFloraId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                         if (this.is_internal) {
                             return err;
@@ -1119,104 +1595,144 @@ export default {
         discardSpecies: function (species_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Flora",
-                text: "Are you sure you want to discard this flora record?",
-                icon: "question",
+                title: 'Discard Flora',
+                text: 'Are you sure you want to discard this flora record?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Flora',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_species_proposal(species_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The flora record has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_species_proposal(species_id),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The flora record has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateSpecies: function (species_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Flora",
-                text: "Are you sure you want to reinstate this flora record?",
-                icon: "question",
+                title: 'Reinstate Flora',
+                text: 'Are you sure you want to reinstate this flora record?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Flora',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(api_endpoints.reinstate_species_proposal(species_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'The flora record has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.flora_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_species_proposal(
+                                species_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'The flora record has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.flora_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         addEventListeners: function () {
             let vm = this;
             // External Discard listener
-            vm.$refs.flora_datatable.vmDataTable.on('click', 'a[data-discard-species-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-species-proposal');
-                vm.discardSpecies(id);
-            });
-            vm.$refs.flora_datatable.vmDataTable.on('click', 'a[data-reinstate-species-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-species-proposal');
-                vm.reinstateSpecies(id);
-            });
-            vm.$refs.flora_datatable.vmDataTable.on('click', 'a[data-history-species]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-species');
-                vm.historyDocument(id);
-            });
-            vm.$refs.flora_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.flora_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-species-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-species-proposal');
+                    vm.discardSpecies(id);
+                }
+            );
+            vm.$refs.flora_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-species-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-species-proposal');
+                    vm.reinstateSpecies(id);
+                }
+            );
+            vm.$refs.flora_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-species]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-species');
+                    vm.historyDocument(id);
+                }
+            );
+            vm.$refs.flora_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         delay(callback, ms) {
             var timer = 0;
 
             return function () {
-                var context = this, args = arguments;
+                var context = this,
+                    args = arguments;
                 clearTimeout(timer);
                 timer = setTimeout(function () {
                     callback.apply(context, args);
@@ -1224,53 +1740,7 @@ export default {
             };
         },
     },
-
-    mounted: function () {
-        let vm = this;
-        vm.fetchFilterLists();
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommonNameLookup();
-            vm.initialisePhyloGroupLookup();
-            vm.initialiseFamilyLookup();
-            vm.initialiseGeneraLookup();
-            vm.addEventListeners();
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterFloraScientificName") != 'all' && sessionStorage.getItem("filterFloraScientificName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFloraScientificNameText"), vm.filterFloraScientificName, false, true);
-                $('#scientific_name_lookup').append(newOption);
-                //$('#scientific_name_lookup').append(newOption).trigger('change');
-            }
-            if (sessionStorage.getItem("filterFloraCommonName") != 'all' && sessionStorage.getItem("filterFloraCommonName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFloraCommonNameText"), vm.filterFloraCommonName, false, true);
-                $('#common_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterFloraPhylogeneticGroup") != 'all' && sessionStorage.getItem("filterFloraPhylogeneticGroup") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFloraPhylogeneticGroupText"), vm.filterFloraPhylogeneticGroup, false, true);
-                $('#phylo_group_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterFloraFamily") != 'all' && sessionStorage.getItem("filterFloraFamily") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFloraFamilyText"), vm.filterFloraFamily, false, true);
-                $('#family_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterFloraGenus") != 'all' && sessionStorage.getItem("filterFloraGenus") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterFloraGenusText"), vm.filterFloraGenus, false, true);
-                $('#genera_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -1298,7 +1768,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -1323,7 +1795,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/common/submission.vue b/boranga/frontend/boranga/src/components/common/submission.vue
index 409291dd..103697b4 100644
--- a/boranga/frontend/boranga/src/components/common/submission.vue
+++ b/boranga/frontend/boranga/src/components/common/submission.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="card card-default">
-        <div class="card-header">
-            Submission
-        </div>
+        <div class="card-header">Submission</div>
         <div class="card-body py-2">
             <strong>Submitted by</strong><br />
             {{ submitter_first_name }}
             {{ submitter_last_name }}
-            <span v-if="is_new_contributor" class="badge bg-warning"><i class="bi bi-person-plus-fill"></i> New
-                Contributor</span>
+            <span v-if="is_new_contributor" class="badge bg-warning"
+                ><i class="bi bi-person-plus-fill"></i> New Contributor</span
+            >
         </div>
         <div v-if="lodgement_date" class="card-body border-top py-2">
             <strong>Submitted on</strong><br />
-            {{ formatDateDay(lodgement_date) }} <span class="fw-light">at</span> {{ formatDateDay(lodgement_date) }}
+            {{ formatDateDay(lodgement_date) }}
+            <span class="fw-light">at</span> {{ formatDateDay(lodgement_date) }}
         </div>
         <div v-if="enableHistory" class="card-body border-top py-2">
             <table class="table small-table">
@@ -59,7 +59,7 @@ export default {
         },
         formatDateTime: function (data) {
             return data ? moment(data).format('HH:mm:ss A') : '';
-        }
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/submitter_information.vue b/boranga/frontend/boranga/src/components/common/submitter_information.vue
index 6fa85168..fe299fc3 100644
--- a/boranga/frontend/boranga/src/components/common/submitter_information.vue
+++ b/boranga/frontend/boranga/src/components/common/submitter_information.vue
@@ -1,84 +1,201 @@
 <template>
     <div id="submitter-information">
-        <FormSection :formCollapse="false" label="Submitter Information" Index="submitter_information">
-            <form id="submitter-information-form" class="needs-validation" novalidate>
+        <FormSection
+            :form-collapse="false"
+            label="Submitter Information"
+            Index="submitter_information"
+        >
+            <form
+                id="submitter-information-form"
+                class="needs-validation"
+                novalidate
+            >
                 <fieldset :disabled="disabled">
                     <div class="row mb-3">
-                        <label for="submitter_category" class="col-sm-2 col-form-label fw-bold">Category <span
-                                class="text-danger">*</span></label>
+                        <label
+                            for="submitter_category"
+                            class="col-sm-2 col-form-label fw-bold"
+                            >Category <span class="text-danger">*</span></label
+                        >
                         <div class="col-sm-6">
                             <template v-if="!disabled">
                                 <template
-                                    v-if="submitter_categories && submitter_categories.length > 0 && submitter_information.submitter_category && !submitter_categories.map((d) => d.id).includes(submitter_information.submitter_category)">
-                                    <input type="text" v-if="submitter_information.submitter_category_name"
+                                    v-if="
+                                        submitter_categories &&
+                                        submitter_categories.length > 0 &&
+                                        submitter_information.submitter_category &&
+                                        !submitter_categories
+                                            .map((d) => d.id)
+                                            .includes(
+                                                submitter_information.submitter_category
+                                            )
+                                    "
+                                >
+                                    <input
+                                        v-if="
+                                            submitter_information.submitter_category_name
+                                        "
+                                        type="text"
                                         class="form-control mb-3"
-                                        :value="submitter_information.submitter_category_name + ' (Now Archived)'"
-                                        disabled />
+                                        :value="
+                                            submitter_information.submitter_category_name +
+                                            ' (Now Archived)'
+                                        "
+                                        disabled
+                                    />
                                     <div class="mb-3 text-muted">
                                         Change submitter category to:
                                     </div>
                                 </template>
-                                <select class="form-select" id="submitter_category" ref="submitter_category"
-                                    v-model="submitter_information.submitter_category">
-                                    <option :value="null" disabled>Please select a submitter category</option>
-                                    <option v-for="submitter_category in submitter_categories"
-                                        :value="submitter_category.id" v-bind:key="submitter_category.id">
+                                <select
+                                    id="submitter_category"
+                                    ref="submitter_category"
+                                    v-model="
+                                        submitter_information.submitter_category
+                                    "
+                                    class="form-select"
+                                >
+                                    <option :value="null" disabled>
+                                        Please select a submitter category
+                                    </option>
+                                    <option
+                                        v-for="submitter_category in submitter_categories"
+                                        :key="submitter_category.id"
+                                        :value="submitter_category.id"
+                                    >
                                         {{ submitter_category.name }}
                                     </option>
                                 </select>
                             </template>
                             <template v-else>
-                                <input class="form-control" type="text" :disabled="disabled"
-                                    v-model="submitter_information.submitter_category_name" />
+                                <input
+                                    v-model="
+                                        submitter_information.submitter_category_name
+                                    "
+                                    class="form-control"
+                                    type="text"
+                                    :disabled="disabled"
+                                />
                             </template>
                         </div>
                     </div>
                     <div class="row mb-3">
-                        <label for="name" class="col-sm-2 col-form-label">Name</label>
+                        <label for="name" class="col-sm-2 col-form-label"
+                            >Name</label
+                        >
                         <div class="col-sm-6">
-                            <input type="text" maxlength="100" class="form-control" id="name"
-                                v-model="submitter_information.name">
+                            <input
+                                id="name"
+                                v-model="submitter_information.name"
+                                type="text"
+                                maxlength="100"
+                                class="form-control"
+                            />
                         </div>
                     </div>
-                    <div v-if="show_submitter_contact_details && Object.hasOwn(submitter_information, 'contact_details')"
-                        class="row mb-3 pb-3 border-bottom">
-                        <label for="contact_details" class="col-sm-2 col-form-label">Contact Details</label>
+                    <div
+                        v-if="
+                            show_submitter_contact_details &&
+                            Object.hasOwn(
+                                submitter_information,
+                                'contact_details'
+                            )
+                        "
+                        class="row mb-3 pb-3 border-bottom"
+                    >
+                        <label
+                            for="contact_details"
+                            class="col-sm-2 col-form-label"
+                            >Contact Details</label
+                        >
                         <div class="col-sm-6">
-                            <textarea class="form-control" id="contact_details"
-                                v-model="submitter_information.contact_details" rows="4" />
+                            <textarea
+                                id="contact_details"
+                                v-model="submitter_information.contact_details"
+                                class="form-control"
+                                rows="4"
+                            />
                         </div>
                     </div>
-                    <div class="row" :class="show_organisation_information ? 'mb-3' : ''">
-                        <label for="" class="col-sm-4 col-form-label">Are you submitting on behalf of an
-                            organisation?</label>
+                    <div
+                        class="row"
+                        :class="show_organisation_information ? 'mb-3' : ''"
+                    >
+                        <label for="" class="col-sm-4 col-form-label"
+                            >Are you submitting on behalf of an
+                            organisation?</label
+                        >
                         <div class="col-sm-6 d-flex align-items-center">
-                            <div class="form-check form-check-inline" @click="checkOrganisationDetails">
-                                <input type="radio" class="form-check-input" id="organisation_no"
-                                    v-model="submitting_on_behalf_of_organisation" value="no"
-                                    :disabled="organisation_details_entered">
-                                <label for="name" class="form-check-label">No</label>
+                            <div
+                                class="form-check form-check-inline"
+                                @click="checkOrganisationDetails"
+                            >
+                                <input
+                                    id="organisation_no"
+                                    v-model="
+                                        submitting_on_behalf_of_organisation
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    value="no"
+                                    :disabled="organisation_details_entered"
+                                />
+                                <label for="name" class="form-check-label"
+                                    >No</label
+                                >
                             </div>
                             <div class="form-check form-check-inline">
-                                <input type="radio" class="form-check-input" id="organisation_yes"
-                                    v-model="submitting_on_behalf_of_organisation" value="yes"
-                                    @change.prevent="focusOrganisation">
-                                <label for="name" class="form-check-label">Yes</label>
+                                <input
+                                    id="organisation_yes"
+                                    v-model="
+                                        submitting_on_behalf_of_organisation
+                                    "
+                                    type="radio"
+                                    class="form-check-input"
+                                    value="yes"
+                                    @change.prevent="focusOrganisation"
+                                />
+                                <label for="name" class="form-check-label"
+                                    >Yes</label
+                                >
                             </div>
                         </div>
                     </div>
                     <template v-if="show_organisation_information">
                         <div class="row mb-3">
-                            <label for="organisation" class="col-sm-2 col-form-label">Organisation</label>
+                            <label
+                                for="organisation"
+                                class="col-sm-2 col-form-label"
+                                >Organisation</label
+                            >
                             <div class="col-sm-6">
-                                <input type="text" maxlength="100" class="form-control" id="organisation"
-                                    ref="organisation" v-model="submitter_information.organisation">
+                                <input
+                                    id="organisation"
+                                    ref="organisation"
+                                    v-model="submitter_information.organisation"
+                                    type="text"
+                                    maxlength="100"
+                                    class="form-control"
+                                />
                             </div>
                         </div>
-                        <div v-if="show_organisation_information" class="row mb-3">
-                            <label for="position" class="col-sm-2 col-form-label">Position / Role</label>
+                        <div
+                            v-if="show_organisation_information"
+                            class="row mb-3"
+                        >
+                            <label
+                                for="position"
+                                class="col-sm-2 col-form-label"
+                                >Position / Role</label
+                            >
                             <div class="col-sm-6">
-                                <input type="text" maxlength="100" class="form-control" id="position"
-                                    v-model="submitter_information.position">
+                                <input
+                                    id="position"
+                                    v-model="submitter_information.position"
+                                    type="text"
+                                    maxlength="100"
+                                    class="form-control"
+                                />
                             </div>
                         </div>
                     </template>
@@ -91,10 +208,13 @@
 <script>
 import FormSection from '@/components/forms/section_toggle.vue';
 
-import { api_endpoints } from '@/utils/hooks.js'
+import { api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'SubmitterInformation',
+    components: {
+        FormSection,
+    },
     props: {
         submitter_information: {
             type: Object,
@@ -109,23 +229,49 @@ export default {
             default: true,
         },
     },
-    components: {
-        FormSection,
-    },
     data: function () {
         return {
             submitter_categories: null,
             submitting_on_behalf_of_organisation: 'no',
-        }
+        };
     },
     computed: {
         organisation_details_entered: function () {
-            return !!(this.submitter_information.organisation || this.submitter_information.position);
+            return !!(
+                this.submitter_information.organisation ||
+                this.submitter_information.position
+            );
         },
         show_organisation_information: function () {
-            return this.submitting_on_behalf_of_organisation == 'yes' || this.organisation_details_entered
+            return (
+                this.submitting_on_behalf_of_organisation == 'yes' ||
+                this.organisation_details_entered
+            );
         },
     },
+    created() {
+        this.fetchSubmitterCategories();
+        if (this.show_organisation_information) {
+            this.submitting_on_behalf_of_organisation = 'yes';
+        }
+    },
+    mounted() {
+        let vm = this;
+        var form = document.getElementById('submitter-information-form');
+        form.addEventListener(
+            'change',
+            function (event) {
+                if (!form.checkValidity()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    form.classList.add('was-validated');
+                } else {
+                    vm.saveSubmitterInformation();
+                }
+            },
+            false
+        );
+    },
     methods: {
         focusOrganisation() {
             this.$nextTick(() => {
@@ -137,7 +283,7 @@ export default {
                 .then(async (response) => {
                     this.submitter_categories = await response.json();
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.log(error);
                 });
         },
@@ -147,13 +293,13 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(this.submitter_information)
+                body: JSON.stringify(this.submitter_information),
             })
-                .then(response => response.json())
-                .then(data => {
+                .then((response) => response.json())
+                .then((data) => {
                     console.log(data);
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.log(error);
                 });
         },
@@ -166,28 +312,9 @@ export default {
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
             }
         },
     },
-    created() {
-        this.fetchSubmitterCategories();
-        if (this.show_organisation_information) {
-            this.submitting_on_behalf_of_organisation = 'yes';
-        }
-    },
-    mounted() {
-        let vm = this;
-        var form = document.getElementById('submitter-information-form')
-        form.addEventListener('change', function (event) {
-            if (!form.checkValidity()) {
-                event.preventDefault()
-                event.stopPropagation()
-                form.classList.add('was-validated')
-            } else {
-                vm.saveSubmitterInformation();
-            }
-        }, false)
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/table_related_items.vue b/boranga/frontend/boranga/src/components/common/table_related_items.vue
index 84723ea2..f55605f9 100644
--- a/boranga/frontend/boranga/src/components/common/table_related_items.vue
+++ b/boranga/frontend/boranga/src/components/common/table_related_items.vue
@@ -1,15 +1,30 @@
 <template lang="html">
     <div id="related_items">
-        <FormSection :formCollapse="false" label="Related Items" Index="related_items">
-            <CollapsibleFilters component_title="Filters" ref="collapsible_filters"
-                @created="collapsible_component_mounted" class="mb-2">
+        <FormSection
+            :form-collapse="false"
+            label="Related Items"
+            Index="related_items"
+        >
+            <CollapsibleFilters
+                ref="collapsible_filters"
+                component_title="Filters"
+                class="mb-2"
+                @created="collapsible_component_mounted"
+            >
                 <div class="row">
                     <div class="col-md-3">
                         <div class="form-group">
                             <label for="">Related Type:</label>
-                            <select class="form-select" v-model="filterRelatedType">
+                            <select
+                                v-model="filterRelatedType"
+                                class="form-select"
+                            >
                                 <option value="all">All</option>
-                                <option v-for="option in related_type_filter_list" :value="option[0]">{{ option[1] }}
+                                <option
+                                    v-for="option in related_type_filter_list"
+                                    :value="option[0]"
+                                >
+                                    {{ option[1] }}
                                 </option>
                             </select>
                         </div>
@@ -17,19 +32,23 @@
                 </div>
             </CollapsibleFilters>
             <div>
-                <datatable ref="related_items_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="related_items_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </FormSection>
     </div>
 </template>
 
 <script>
-import { v4 as uuid } from 'uuid'
-import { constants, helpers } from '@/utils/hooks'
-import datatable from '@/utils/vue/datatable.vue'
+import { v4 as uuid } from 'uuid';
+import { constants, helpers } from '@/utils/hooks';
+import datatable from '@/utils/vue/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 export default {
     name: 'TableRelatedItems',
     components: {
@@ -52,7 +71,7 @@ export default {
             datatable_id: uuid(),
             related_type_filter_list: [],
             filterRelatedType: 'all',
-        }
+        };
     },
     computed: {
         column_lodgement_number: function () {
@@ -61,7 +80,7 @@ export default {
                 orderable: false,
                 searchable: true,
                 visible: true,
-            }
+            };
         },
         column_type: function () {
             return {
@@ -69,7 +88,7 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_description: function () {
             return {
@@ -77,11 +96,11 @@ export default {
                 orderable: false,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-            }
+            };
         },
         column_status: function () {
             return {
@@ -89,7 +108,7 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         column_action: function () {
             return {
@@ -97,32 +116,32 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-            }
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
             let columns = [
                 vm.column_lodgement_number,
                 vm.column_type,
                 vm.column_description,
                 vm.column_status,
                 vm.column_action,
-            ]
+            ];
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
                 ordering: true,
                 order: [[0, 'desc']],
                 ajax: {
-                    "url": vm.ajax_url,
-                    "dataSrc": "",
-                    "data": function (d) {
-                        d.related_filter_type = vm.filterRelatedType
-                    }
+                    url: vm.ajax_url,
+                    dataSrc: '',
+                    data: function (d) {
+                        d.related_filter_type = vm.filterRelatedType;
+                    },
                 },
                 dom: 'lBfrtip',
                 buttons: [],
@@ -134,22 +153,16 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
-            }
+            };
         },
         datatable_headers: function () {
-            return [
-                'Number',
-                'Type',
-                'Description',
-                'Status',
-                'Action',
-            ]
+            return ['Number', 'Type', 'Description', 'Status', 'Action'];
         },
         filterApplied: function () {
             if (this.filterRelatedType === 'all') {
-                return false
+                return false;
             } else {
-                return true
+                return true;
             }
         },
     },
@@ -161,32 +174,42 @@ export default {
         filterApplied: function () {
             if (this.$refs.collapsible_filters) {
                 // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.fetchFilterList();
+        vm.$nextTick(() => {
+            vm.$refs.related_items_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         fetchFilterList: function () {
             let vm = this;
             //large FilterList of Species Values object
-            fetch(vm.filter_list_url).then(async (response) => {
-                vm.related_type_filter_list = await response.json();
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(vm.filter_list_url).then(
+                async (response) => {
+                    vm.related_type_filter_list = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.fetchFilterList();
-        vm.$nextTick(() => {
-            vm.$refs.related_items_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/view_document.vue b/boranga/frontend/boranga/src/components/common/view_document.vue
index 1b9c0780..a8c4c75f 100644
--- a/boranga/frontend/boranga/src/components/common/view_document.vue
+++ b/boranga/frontend/boranga/src/components/common/view_document.vue
@@ -1,40 +1,102 @@
 <template>
     <div id="view-document">
-        <modal transition="modal fade" @cancel="close()" :showOK="false" cancelText="Close" :title="title" large>
-            <form v-if="document" class="form-horizontal px-3 pt-2" name="documentForm">
+        <modal
+            transition="modal fade"
+            :show-o-k="false"
+            cancel-text="Close"
+            :title="title"
+            large
+            @cancel="close()"
+        >
+            <form
+                v-if="document"
+                class="form-horizontal px-3 pt-2"
+                name="documentForm"
+            >
                 <div class="row border-bottom mb-2 pb-2">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Document Number</label>
-                    <div class="col form-control-plaintext">{{ document.document_number }}</div>
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Document Number</label
+                    >
+                    <div class="col form-control-plaintext">
+                        {{ document.document_number }}
+                    </div>
                 </div>
-                <div v-if="document.document_category_name" class="row border-bottom mb-2 pb-2">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Category</label>
-                    <div class="col form-control-plaintext">{{ document.document_category_name }}</div>
+                <div
+                    v-if="document.document_category_name"
+                    class="row border-bottom mb-2 pb-2"
+                >
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Category</label
+                    >
+                    <div class="col form-control-plaintext">
+                        {{ document.document_category_name }}
+                    </div>
                 </div>
-                <div v-if="document.document_sub_category_name" class="row border-bottom mb-2 pb-2">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Sub Category</label>
-                    <div class="col form-control-plaintext">{{ document.document_sub_category_name }}</div>
+                <div
+                    v-if="document.document_sub_category_name"
+                    class="row border-bottom mb-2 pb-2"
+                >
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Sub Category</label
+                    >
+                    <div class="col form-control-plaintext">
+                        {{ document.document_sub_category_name }}
+                    </div>
                 </div>
                 <div class="row border-bottom mb-2 pb-2">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Description</label>
-                    <div class="col form-control-plaintext">{{ document.description }}</div>
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Description</label
+                    >
+                    <div class="col form-control-plaintext">
+                        {{ document.description }}
+                    </div>
                 </div>
                 <div class="row border-bottom mb-2 pb-2">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Document</label>
-                    <div class="col form-control-plaintext"><a :href="document._file" target="_blank">{{ document.name
-                            }}</a></div>
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Document</label
+                    >
+                    <div class="col form-control-plaintext">
+                        <a :href="document._file" target="_blank">{{
+                            document.name
+                        }}</a>
+                    </div>
                 </div>
-                <div class="row pb-2" :class="is_internal ? 'mb-2 border-bottom' : ''">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Date Uploaded</label>
-                    <div class="col form-control-plaintext">{{ new Date(document.uploaded_date).toLocaleDateString() }}
-                        at {{ new Date(document.uploaded_date).toLocaleTimeString() }}</div>
+                <div
+                    class="row pb-2"
+                    :class="is_internal ? 'mb-2 border-bottom' : ''"
+                >
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Date Uploaded</label
+                    >
+                    <div class="col form-control-plaintext">
+                        {{
+                            new Date(
+                                document.uploaded_date
+                            ).toLocaleDateString()
+                        }}
+                        at
+                        {{
+                            new Date(
+                                document.uploaded_date
+                            ).toLocaleTimeString()
+                        }}
+                    </div>
                 </div>
                 <div v-if="is_internal" class="row border-bottom mb-2 pb-2">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Active</label>
-                    <div class="col form-control-plaintext">{{ document.active ? 'Yes' : 'No' }}</div>
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Active</label
+                    >
+                    <div class="col form-control-plaintext">
+                        {{ document.active ? 'Yes' : 'No' }}
+                    </div>
                 </div>
                 <div v-if="is_internal" class="row pb-3">
-                    <label for="" class="col-sm-3 col-form-label fw-bold">Can Submitter Access</label>
-                    <div class="col form-control-plaintext">{{ document.can_submitter_access ? 'Yes' : 'No' }}</div>
+                    <label for="" class="col-sm-3 col-form-label fw-bold"
+                        >Can Submitter Access</label
+                    >
+                    <div class="col form-control-plaintext">
+                        {{ document.can_submitter_access ? 'Yes' : 'No' }}
+                    </div>
                 </div>
             </form>
         </modal>
@@ -42,7 +104,7 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
 
 export default {
     name: 'ViewDocument',
@@ -52,26 +114,28 @@ export default {
     props: {
         is_internal: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
     data() {
         return {
             document: null,
             isModalOpen: false,
-        }
+        };
     },
     computed: {
         title() {
-            let documentNumber = this.document ? this.document.document_number : ''
-            return `View Document ${documentNumber}`
-        }
+            let documentNumber = this.document
+                ? this.document.document_number
+                : '';
+            return `View Document ${documentNumber}`;
+        },
     },
     methods: {
         close() {
             this.document = null;
-            this.isModalOpen = false
+            this.isModalOpen = false;
         },
-    }
-}
+    },
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/external/api.js b/boranga/frontend/boranga/src/components/external/api.js
index df014ac5..4fd61bc3 100755
--- a/boranga/frontend/boranga/src/components/external/api.js
+++ b/boranga/frontend/boranga/src/components/external/api.js
@@ -5,4 +5,4 @@ module.exports = {
     organisations: '/api/organisations.json',
     organisation_contacts: '/api/organisation_contacts.json',
     my_organisations: '/api/my_organisations',
-}
+};
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
index 226e62cb..7dc502db 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
@@ -1,28 +1,58 @@
 <template lang="html">
     <div class="container">
-        <form :action="cs_proposal_form_url" method="post" name="new_cs_proposal" enctype="multipart/form-data">
-
+        <form
+            :action="cs_proposal_form_url"
+            method="post"
+            name="new_cs_proposal"
+            enctype="multipart/form-data"
+        >
             <div v-if="!cs_proposal_readonly">
                 <div v-if="hasAmendmentRequest" class="row">
                     <div class="col-lg-12 pull-right">
-                        <FormSection :formCollapse="false"
+                        <FormSection
+                            :form-collapse="false"
                             label="One or more amendments have been requested for this Conservation Status Proposal"
-                            Index="amendment_request" customColor="red">
+                            Index="amendment_request"
+                            custom-color="red"
+                        >
                             <ul class="list-group list-group-numbered ps-2">
-                                <li v-for="a in amendment_request"
-                                    class="list-group-item d-flex justify-content-between align-items-start">
+                                <li
+                                    v-for="a in amendment_request"
+                                    class="list-group-item d-flex justify-content-between align-items-start"
+                                >
                                     <div class="ms-4 me-auto">
-                                        <div class="mb-3"><span class="fw-bold">Reason:</span> {{ a.reason_text }}</div>
-                                        <p v-for="t in splitText(a.text)">{{ t }}</p>
+                                        <div class="mb-3">
+                                            <span class="fw-bold">Reason:</span>
+                                            {{ a.reason_text }}
+                                        </div>
+                                        <p v-for="t in splitText(a.text)">
+                                            {{ t }}
+                                        </p>
                                         <template
-                                            v-if="a.cs_amendment_request_documents && a.cs_amendment_request_documents.length > 0">
-                                            <div class="fw-bold mb-1">Documents:</div>
-                                            <ul class="list-group list-group-numbered mb-2">
-                                                <li v-for="document in a.cs_amendment_request_documents"
-                                                    class="list-group-item">
-                                                    <i class="bi bi-file-earmark-text-fill text-secondary"></i> <a
-                                                        :href="document._file" target="_blank">{{
-                                                            document.name }}</a>
+                                            v-if="
+                                                a.cs_amendment_request_documents &&
+                                                a.cs_amendment_request_documents
+                                                    .length > 0
+                                            "
+                                        >
+                                            <div class="fw-bold mb-1">
+                                                Documents:
+                                            </div>
+                                            <ul
+                                                class="list-group list-group-numbered mb-2"
+                                            >
+                                                <li
+                                                    v-for="document in a.cs_amendment_request_documents"
+                                                    class="list-group-item"
+                                                >
+                                                    <i
+                                                        class="bi bi-file-earmark-text-fill text-secondary"
+                                                    ></i>
+                                                    <a
+                                                        :href="document._file"
+                                                        target="_blank"
+                                                        >{{ document.name }}</a
+                                                    >
                                                 </li>
                                             </ul>
                                         </template>
@@ -33,65 +63,173 @@
                     </div>
                 </div>
             </div>
-            <div v-if="conservation_status_obj" id="scrollspy-heading" class="col-lg-12 mb-3">
-                <h4>Conservation List - {{ display_group_type }} Application: {{
-                    conservation_status_obj.conservation_status_number }}</h4>
+            <div
+                v-if="conservation_status_obj"
+                id="scrollspy-heading"
+                class="col-lg-12 mb-3"
+            >
+                <h4>
+                    Conservation List - {{ display_group_type }} Application:
+                    {{ conservation_status_obj.conservation_status_number }}
+                </h4>
             </div>
-            <ProposalConservationStatus v-if="conservation_status_obj"
-                :conservation_status_obj="conservation_status_obj" id="ConservationStatusStart"
-                :canEditStatus="canEditStatus" :is_external="true" ref="conservation_status"
-                @saveConservationStatus="save_wo_confirm">
+            <ProposalConservationStatus
+                v-if="conservation_status_obj"
+                id="ConservationStatusStart"
+                ref="conservation_status"
+                :conservation_status_obj="conservation_status_obj"
+                :can-edit-status="canEditStatus"
+                :is_external="true"
+                @save-conservation-status="save_wo_confirm"
+            >
             </ProposalConservationStatus>
             <div>
-                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                <input type='hidden' name="conservation_status_id" :value="1" />
+                <input
+                    type="hidden"
+                    name="csrfmiddlewaretoken"
+                    :value="csrf_token"
+                />
+                <input type="hidden" name="conservation_status_id" :value="1" />
 
                 <div class="row" style="margin-bottom: 50px">
                     <div class="container">
                         <div class="row" style="margin-bottom: 50px">
-                            <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
-                                <div v-if="conservation_status_obj && !conservation_status_obj.readonly"
-                                    class="container">
-                                    <div class="col-md-6" style="margin-top:5px">
-                                        <p class="pull-right" style="margin-top:5px;">
-                                            <router-link class="btn btn-primary"
-                                                :to="{ name: 'external-conservation_status-dash' }">Back to
-                                                Dashboard</router-link>
+                            <div
+                                class="navbar fixed-bottom"
+                                style="background-color: #f5f5f5"
+                            >
+                                <div
+                                    v-if="
+                                        conservation_status_obj &&
+                                        !conservation_status_obj.readonly
+                                    "
+                                    class="container"
+                                >
+                                    <div
+                                        class="col-md-6"
+                                        style="margin-top: 5px"
+                                    >
+                                        <p
+                                            class="pull-right"
+                                            style="margin-top: 5px"
+                                        >
+                                            <router-link
+                                                class="btn btn-primary"
+                                                :to="{
+                                                    name: 'external-conservation_status-dash',
+                                                }"
+                                                >Back to Dashboard</router-link
+                                            >
                                         </p>
                                     </div>
-                                    <div class="col-md-6 text-end" style="margin-top:5px">
-                                        <button v-if="savingCSProposal" type="button" class="btn btn-primary me-2"
-                                            disabled>Save and
-                                            Continue <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <input v-else type="button" @click.prevent="save" class="btn btn-primary me-2"
-                                            value="Save and Continue" :disabled="saveExitCSProposal || paySubmitting" />
+                                    <div
+                                        class="col-md-6 text-end"
+                                        style="margin-top: 5px"
+                                    >
+                                        <button
+                                            v-if="savingCSProposal"
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            disabled
+                                        >
+                                            Save and Continue
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
+                                        </button>
+                                        <input
+                                            v-else
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            value="Save and Continue"
+                                            :disabled="
+                                                saveExitCSProposal ||
+                                                paySubmitting
+                                            "
+                                            @click.prevent="save"
+                                        />
 
-                                        <button v-if="saveExitCSProposal" type="button" class="btn btn-primary me-2"
-                                            disabled>Save
-                                            and Exit <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <input v-else type="button" @click.prevent="save_exit"
-                                            class="btn btn-primary me-2" value="Save and Exit"
-                                            :disabled="savingCSProposal || paySubmitting" />
+                                        <button
+                                            v-if="saveExitCSProposal"
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            disabled
+                                        >
+                                            Save and Exit
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
+                                        </button>
+                                        <input
+                                            v-else
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            value="Save and Exit"
+                                            :disabled="
+                                                savingCSProposal ||
+                                                paySubmitting
+                                            "
+                                            @click.prevent="save_exit"
+                                        />
 
-                                        <button v-if="paySubmitting" type="button" class="btn btn-primary"
-                                            disabled>Submit <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <input v-else type="button" @click.prevent="submit" class="btn btn-primary"
-                                            :value="'Submit'" :disabled="saveExitCSProposal || savingCSProposal" />
-                                        <input id="save_and_continue_btn" type="hidden" @click.prevent="save_wo_confirm"
-                                            class="btn btn-primary" value="Save Without Confirmation" />
+                                        <button
+                                            v-if="paySubmitting"
+                                            type="button"
+                                            class="btn btn-primary"
+                                            disabled
+                                        >
+                                            Submit
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
+                                        </button>
+                                        <input
+                                            v-else
+                                            type="button"
+                                            class="btn btn-primary"
+                                            :value="'Submit'"
+                                            :disabled="
+                                                saveExitCSProposal ||
+                                                savingCSProposal
+                                            "
+                                            @click.prevent="submit"
+                                        />
+                                        <input
+                                            id="save_and_continue_btn"
+                                            type="hidden"
+                                            class="btn btn-primary"
+                                            value="Save Without Confirmation"
+                                            @click.prevent="save_wo_confirm"
+                                        />
                                     </div>
                                 </div>
                                 <div v-else class="container">
-                                    <p class="pull-right" style="margin-top:5px;">
-                                        <router-link class="btn btn-primary"
-                                            :to="{ name: 'external-conservation_status-dash' }">Back to
-                                            Dashboard</router-link>
+                                    <p
+                                        class="pull-right"
+                                        style="margin-top: 5px"
+                                    >
+                                        <router-link
+                                            class="btn btn-primary"
+                                            :to="{
+                                                name: 'external-conservation_status-dash',
+                                            }"
+                                            >Back to Dashboard</router-link
+                                        >
                                     </p>
                                 </div>
                             </div>
@@ -103,20 +241,68 @@
     </div>
 </template>
 <script>
-
-import ProposalConservationStatus from '@/components/form_conservation_status.vue'
+import ProposalConservationStatus from '@/components/form_conservation_status.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'ExternalConservationStatusProposal',
+    components: {
+        ProposalConservationStatus,
+        FormSection,
+    },
+    beforeRouteEnter: function (to, from, next) {
+        if (to.params.conservation_status_id) {
+            let vm = this;
+            fetch(
+                `/api/conservation_status/${to.params.conservation_status_id}.json`
+            ).then(
+                async (response) => {
+                    next(async (vm) => {
+                        const data = await response.json();
+                        vm.conservation_status_obj = data;
+                        vm.setdata(vm.conservation_status_obj.readonly);
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.conservation_status,
+                                to.params.conservation_status_id +
+                                    '/amendment_request'
+                            )
+                        ).then(
+                            async (response) => {
+                                vm.setAmendmentData(data);
+                            },
+                            (err) => {
+                                console.log(err);
+                            }
+                        );
+                    });
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        } else {
+            fetch('/api/conservation_status.json', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(
+                async (response) => {
+                    next(async (vm) => {
+                        vm.conservation_status_obj = await response.json();
+                    });
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        }
+    },
     data: function () {
         return {
-            "proposal": null,
-            "conservation_status_obj": null,
+            proposal: null,
+            conservation_status_obj: null,
             form: null,
             amendment_request: [],
             saveError: false,
@@ -127,32 +313,57 @@ export default {
             saveExitCSProposal: false,
             savingCSProposal: false,
             paySubmitting: false,
-            newText: "",
+            newText: '',
             missing_fields: [],
             proposal_parks: null,
             isSaved: false,
-        }
-    },
-    components: {
-        ProposalConservationStatus,
-        FormSection,
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         cs_proposal_form_url: function () {
-            return (this.conservation_status_obj) ? `/api/conservation_status/${this.conservation_status_obj.id}/draft.json` : '';
+            return this.conservation_status_obj
+                ? `/api/conservation_status/${this.conservation_status_obj.id}/draft.json`
+                : '';
         },
         canEditStatus: function () {
-            return this.conservation_status_obj ? this.conservation_status_obj.can_user_edit : 'false';
+            return this.conservation_status_obj
+                ? this.conservation_status_obj.can_user_edit
+                : 'false';
         },
         display_group_type: function () {
-            let group_type_string = this.conservation_status_obj.group_type
+            let group_type_string = this.conservation_status_obj.group_type;
             // to Capitalize only first character
-            return group_type_string.charAt(0).toUpperCase() + group_type_string.slice(1);
+            return (
+                group_type_string.charAt(0).toUpperCase() +
+                group_type_string.slice(1)
+            );
         },
     },
+    created: function () {
+        if (!this.conservation_status_obj) {
+            fetch(
+                `/api/conservation_status/${this.$route.params.conservation_status_id}.json`
+            ).then(
+                async (response) => {
+                    this.conservation_status_obj = await response.json();
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        }
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.new_cs_proposal;
+        window.addEventListener('beforeunload', vm.leaving);
+    },
+    beforeUnmount: function () {
+        window.removeEventListener('beforeunload', this.leaving);
+    },
     methods: {
         set_formData: function (e) {
             let vm = this;
@@ -161,16 +372,16 @@ export default {
         },
         save: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.savingCSProposal = true;
@@ -183,48 +394,54 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                let swalHtml = '<p>Your conservation status proposal has been saved as a draft.</p>';
-                if (vm.saveExitCSProposal) {
-                    swalHtml += '<p>It has <span class="fw-bold">NOT</span> been submitted.</p>';
-                    swalHtml += '<p>You can find the draft on the conservation status dashboard to continue working on the proposal later.</p>';
+            }).then(
+                async (response) => {
+                    let swalHtml =
+                        '<p>Your conservation status proposal has been saved as a draft.</p>';
+                    if (vm.saveExitCSProposal) {
+                        swalHtml +=
+                            '<p>It has <span class="fw-bold">NOT</span> been submitted.</p>';
+                        swalHtml +=
+                            '<p>You can find the draft on the conservation status dashboard to continue working on the proposal later.</p>';
+                    }
+                    swal.fire({
+                        title: 'Conservation Status Proposal Saved',
+                        html: swalHtml,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingCSProposal = false;
+                    vm.isSaved = true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Save Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingCSProposal = false;
+                    vm.isSaved = false;
                 }
-                swal.fire({
-                    title: 'Conservation Status Proposal Saved',
-                    html: swalHtml,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });;
-                vm.savingCSProposal = false;
-                vm.isSaved = true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Save Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingCSProposal = false;
-                vm.isSaved = false;
-            });
+            );
         },
         save_exit: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             this.submitting = true;
@@ -233,7 +450,7 @@ export default {
                 if (vm.isSaved === true) {
                     // redirect back to dashboard
                     vm.$router.push({
-                        name: 'external-conservation_status-dash'
+                        name: 'external-conservation_status-dash',
                     });
                 } else {
                     this.saveExitCSProposal = false;
@@ -247,11 +464,12 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(this.conservation_status_obj),
-            }).then(async (response) => {
-
-            }, err => {
-                console.log(err);
-            });
+            }).then(
+                async (response) => {},
+                (err) => {
+                    console.log(err);
+                }
+            );
         },
         save_before_submit: async function (e) {
             let vm = this;
@@ -259,20 +477,22 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
-            const result = await fetch(vm.cs_proposal_form_url, payload).then(async (response) => {
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.paySubmitting = false;
-                vm.saveError = true;
-            });
+            const result = await fetch(vm.cs_proposal_form_url, payload).then(
+                async (response) => {},
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.paySubmitting = false;
+                    vm.saveError = true;
+                }
+            );
             return result;
         },
         setdata: function (readonly) {
@@ -281,15 +501,12 @@ export default {
         setAmendmentData: function (amendment_request) {
             this.amendment_request = amendment_request;
 
-            if (amendment_request.length > 0)
-                this.hasAmendmentRequest = true;
-
+            if (amendment_request.length > 0) this.hasAmendmentRequest = true;
         },
         splitText: function (aText) {
             let newText = '';
-            newText = aText.split("\n");
+            newText = aText.split('\n');
             return newText;
-
         },
         leaving: function (e) {
             let vm = this;
@@ -297,80 +514,106 @@ export default {
             if (!vm.cs_proposal_readonly && !vm.submitting) {
                 e.returnValue = dialogText;
                 return dialogText;
-            }
-            else {
+            } else {
                 return null;
             }
         },
         highlight_missing_fields: function () {
             let vm = this;
             for (var missing_field of vm.missing_fields) {
-                $("#" + missing_field.id).css("color", 'red');
+                $('#' + missing_field.id).css('color', 'red');
             }
         },
         validateConservationStatusListsCategories: function (blank_fields) {
             let required_fields = [
-                { 'id': 'wa_legislative_list_id', 'display': 'WA Legislative List' },
-                { 'id': 'wa_priority_list_id', 'display': 'WA Priority List' },
+                {
+                    id: 'wa_legislative_list_id',
+                    display: 'WA Legislative List',
+                },
+                { id: 'wa_priority_list_id', display: 'WA Priority List' },
             ];
             for (let field of required_fields) {
-                if (this.conservation_status_obj[field.id] != null && this.conservation_status_obj[field.id] != '') {
+                if (
+                    this.conservation_status_obj[field.id] != null &&
+                    this.conservation_status_obj[field.id] != ''
+                ) {
                     return blank_fields;
                 }
             }
-            blank_fields.push(`At least one of the following fields are required: ${required_fields.map(f => f.display).join(', ')}`);
+            blank_fields.push(
+                `At least one of the following fields are required: ${required_fields.map((f) => f.display).join(', ')}`
+            );
             return blank_fields;
         },
         can_submit: function (check_action) {
             let vm = this;
-            let blank_fields = []
+            let blank_fields = [];
             blank_fields = vm.can_submit_conservation_status(check_action);
 
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
         can_submit_conservation_status: function (check_action) {
             let vm = this;
-            let blank_fields = []
-            if (vm.conservation_status_obj.group_type == 'flora' || vm.conservation_status_obj.group_type == 'fauna') {
-                if (vm.conservation_status_obj.species_taxonomy_id == null || vm.conservation_status_obj.species_taxonomy_id == '') {
-                    blank_fields.push(' Scientific Name is required')
+            let blank_fields = [];
+            if (
+                vm.conservation_status_obj.group_type == 'flora' ||
+                vm.conservation_status_obj.group_type == 'fauna'
+            ) {
+                if (
+                    vm.conservation_status_obj.species_taxonomy_id == null ||
+                    vm.conservation_status_obj.species_taxonomy_id == ''
+                ) {
+                    blank_fields.push(' Scientific Name is required');
                 }
-            }
-            else {
-                if (vm.conservation_status_obj.community_id == null || vm.conservation_status_obj.community_id == '') {
-                    blank_fields.push(' Community Name is required')
+            } else {
+                if (
+                    vm.conservation_status_obj.community_id == null ||
+                    vm.conservation_status_obj.community_id == ''
+                ) {
+                    blank_fields.push(' Community Name is required');
                 }
             }
-            if (!vm.conservation_status_obj.submitter_information.submitter_category) {
-                blank_fields.push(' Please select a submitter category')
+            if (
+                !vm.conservation_status_obj.submitter_information
+                    .submitter_category
+            ) {
+                blank_fields.push(' Please select a submitter category');
             }
-            if (check_action == "submit" && (vm.conservation_status_obj.species_taxonomy_id || vm.conservation_status_obj.community_id)) {
-                vm.validateConservationStatusListsCategories(blank_fields)
-                if (vm.conservation_status_obj.comment == null || vm.conservation_status_obj.comment == '') {
-                    blank_fields.push(' Please enter some comments regarding your conservation status proposal.')
+            if (
+                check_action == 'submit' &&
+                (vm.conservation_status_obj.species_taxonomy_id ||
+                    vm.conservation_status_obj.community_id)
+            ) {
+                vm.validateConservationStatusListsCategories(blank_fields);
+                if (
+                    vm.conservation_status_obj.comment == null ||
+                    vm.conservation_status_obj.comment == ''
+                ) {
+                    blank_fields.push(
+                        ' Please enter some comments regarding your conservation status proposal.'
+                    );
                 }
             }
 
-            return blank_fields
+            return blank_fields;
         },
         submit: function () {
             let vm = this;
 
-            var missing_data = vm.can_submit("submit");
+            var missing_data = vm.can_submit('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
 
@@ -379,102 +622,64 @@ export default {
             vm.paySubmitting = true;
 
             swal.fire({
-                title: "Submit Proposal",
-                text: "Are you sure you want to submit this conservation status proposal?",
-                icon: "question",
+                title: 'Submit Proposal',
+                text: 'Are you sure you want to submit this conservation status proposal?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Submit Proposal",
+                confirmButtonText: 'Submit Proposal',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then(async (result) => {
-                if (result.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.conservation_status_obj);
-                        fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/submit'), payload).then(async (response) => {
-                            vm.conservation_status_obj = await response.json();
-                            vm.$router.push({
-                                name: 'submit_cs_proposal',
-                                params: { conservation_status_obj: vm.conservation_status_obj }
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                async (result) => {
+                    if (result.isConfirmed) {
+                        let result = await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.conservation_status_obj);
+                            fetch(
+                                helpers.add_endpoint_json(
+                                    api_endpoints.conservation_status,
+                                    vm.conservation_status_obj.id + '/submit'
+                                ),
+                                payload
+                            ).then(
+                                async (response) => {
+                                    vm.conservation_status_obj =
+                                        await response.json();
+                                    vm.$router.push({
+                                        name: 'submit_cs_proposal',
+                                        params: {
+                                            conservation_status_obj:
+                                                vm.conservation_status_obj,
+                                        },
+                                    });
                                 },
-                            });
-                        });
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Submit Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                }
+                            );
+                        }
+                    } else {
+                        vm.submitting = false;
+                        vm.paySubmitting = false;
                     }
-                } else {
-                    vm.submitting = false;
+                },
+                (error) => {
+                    vm.submitting = true;
                     vm.paySubmitting = false;
                 }
-            }, (error) => {
-                vm.submitting = true;
-                vm.paySubmitting = false;
-            });
+            );
         },
     },
-    created: function () {
-        if (!this.conservation_status_obj) {
-            fetch(`/api/conservation_status/${this.$route.params.conservation_status_id}.json`).then(async (response) => {
-                this.conservation_status_obj = await response.json();
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.new_cs_proposal;
-        window.addEventListener('beforeunload', vm.leaving);
-    },
-    beforeRouteEnter: function (to, from, next) {
-        if (to.params.conservation_status_id) {
-            let vm = this;
-            fetch(`/api/conservation_status/${to.params.conservation_status_id}.json`).then(async (response) => {
-                next(async vm => {
-                    const data = await response.json();
-                    vm.conservation_status_obj = data;
-                    vm.setdata(vm.conservation_status_obj.readonly);
-                    fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, to.params.conservation_status_id + '/amendment_request')).then(async (response) => {
-                        vm.setAmendmentData(data);
-                    },
-                        err => {
-                            console.log(err);
-                        });
-                });
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-        else {
-            fetch('/api/conservation_status.json', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                next(async vm => {
-                    vm.conservation_status_obj = await response.json();
-                });
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-    },
-    beforeUnmount: function () {
-        window.removeEventListener('beforeunload', this.leaving);
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
index b23ef35e..761b8c3a 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
@@ -3,42 +3,97 @@
         <div class="row">
             <div class="col-sm-12">
                 <div class="row">
-                    <div v-if="isCSProposal" class="col-sm-offset-3 col-sm-6 borderDecoration">
-                        <div v-if="conservation_status_obj.group_type == application_type_flora">
-                            <strong>Your flora conservation status proposal has been successfully submitted.</strong>
+                    <div
+                        v-if="isCSProposal"
+                        class="col-sm-offset-3 col-sm-6 borderDecoration"
+                    >
+                        <div
+                            v-if="
+                                conservation_status_obj.group_type ==
+                                application_type_flora
+                            "
+                        >
+                            <strong
+                                >Your flora conservation status proposal has
+                                been successfully submitted.</strong
+                            >
                             <br />
                         </div>
-                        <div v-else-if="conservation_status_obj.group_type == application_type_fauna">
-                            <strong>Your fauna conservation status proposal has been successfully submitted.</strong>
+                        <div
+                            v-else-if="
+                                conservation_status_obj.group_type ==
+                                application_type_fauna
+                            "
+                        >
+                            <strong
+                                >Your fauna conservation status proposal has
+                                been successfully submitted.</strong
+                            >
                             <br />
                         </div>
-                        <div v-else-if="conservation_status_obj.group_type == application_type_community">
-                            <strong>Your community conservation status proposal has been successfully
-                                submitted.</strong>
+                        <div
+                            v-else-if="
+                                conservation_status_obj.group_type ==
+                                application_type_community
+                            "
+                        >
+                            <strong
+                                >Your community conservation status proposal has
+                                been successfully submitted.</strong
+                            >
                             <br />
                         </div>
                         <table>
                             <tbody>
                                 <tr>
                                     <td><strong>Proposal Number:</strong></td>
-                                    <td><strong>{{ conservation_status_obj.conservation_status_number }}</strong></td>
+                                    <td>
+                                        <strong>{{
+                                            conservation_status_obj.conservation_status_number
+                                        }}</strong>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td><strong>Date/Time:</strong></td>
-                                    <td><strong> {{ formatDate(conservation_status_obj.lodgement_date) }}</strong></td>
+                                    <td>
+                                        <strong>
+                                            {{
+                                                formatDate(
+                                                    conservation_status_obj.lodgement_date
+                                                )
+                                            }}</strong
+                                        >
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>
                         <br />
-                        <label>You will receive a notification email if there is any incomplete information or documents
-                            missing from the proposal.</label>
-                        <router-link :to="{ name: 'external-conservation_status-dash' }" style="margin-top:15px;"
-                            class="btn btn-primary">Back to home</router-link>
+                        <label
+                            >You will receive a notification email if there is
+                            any incomplete information or documents missing from
+                            the proposal.</label
+                        >
+                        <router-link
+                            :to="{ name: 'external-conservation_status-dash' }"
+                            style="margin-top: 15px"
+                            class="btn btn-primary"
+                            >Back to home</router-link
+                        >
                     </div>
-                    <div v-else class="col-sm-offset-3 col-sm-6 borderDecoration">
-                        <strong>Sorry it looks like there isn't any application currently in your session.</strong>
-                        <br /><router-link :to="{ name: 'external-conservation_status-dash' }" style="margin-top:15px;"
-                            class="btn btn-primary">Back to home</router-link>
+                    <div
+                        v-else
+                        class="col-sm-offset-3 col-sm-6 borderDecoration"
+                    >
+                        <strong
+                            >Sorry it looks like there isn't any application
+                            currently in your session.</strong
+                        >
+                        <br /><router-link
+                            :to="{ name: 'external-conservation_status-dash' }"
+                            style="margin-top: 15px"
+                            class="btn btn-primary"
+                            >Back to home</router-link
+                        >
                     </div>
                 </div>
             </div>
@@ -46,20 +101,26 @@
     </div>
 </template>
 <script>
-import {
-    api_endpoints,
-}
-    from '@/utils/hooks'
+import { api_endpoints } from '@/utils/hooks';
 export default {
+    beforeRouteEnter: function (to, from, next) {
+        next((vm) => {
+            vm.conservation_status_obj = to.params.conservation_status_obj;
+            console.log(vm.conservation_status_obj);
+        });
+    },
     data: function () {
         let vm = this;
         return {
-            "conservation_status_obj": {},
-        }
+            conservation_status_obj: {},
+        };
     },
     computed: {
         isCSProposal: function () {
-            return this.conservation_status_obj && this.conservation_status_obj.id ? true : false;
+            return this.conservation_status_obj &&
+                this.conservation_status_obj.id
+                ? true
+                : false;
         },
         application_type_flora: function () {
             return api_endpoints.group_type_flora;
@@ -69,24 +130,18 @@ export default {
         },
         application_type_community: function () {
             return api_endpoints.group_type_community;
-        }
-    },
-    methods: {
-        formatDate: function (data) {
-            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
-        }
+        },
     },
     mounted: function () {
         let vm = this;
         vm.form = document.forms.new_cs_proposal;
     },
-    beforeRouteEnter: function (to, from, next) {
-        next(vm => {
-            vm.conservation_status_obj = to.params.conservation_status_obj;
-            console.log(vm.conservation_status_obj)
-        })
-    }
-}
+    methods: {
+        formatDate: function (data) {
+            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
index 9afc1875..3ee76460 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
@@ -1,38 +1,66 @@
 <template id="external_conservation_status_datatable">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Type:</label>
-                        <select class="form-select" v-model="filterCSGroupType">
+                        <select v-model="filterCSGroupType" class="form-select">
                             <option value="all">All</option>
-                            <option v-for="option in group_types" :value="option.name">{{ option.display }}
+                            <option
+                                v-for="option in group_types"
+                                :value="option.name"
+                            >
+                                {{ option.display }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_scientific_name_lookup">Scientific Name:</label>
-                        <select id="cs_scientific_name_lookup" name="cs_scientific_name_lookup"
-                            ref="cs_scientific_name_lookup" class="form-control" />
+                        <label for="cs_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="cs_scientific_name_lookup"
+                            ref="cs_scientific_name_lookup"
+                            name="cs_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="cs_community_name_lookup">Community Name:</label>
-                        <select id="cs_community_name_lookup" name="cs_community_name_lookup"
-                            ref="cs_community_name_lookup" class="form-control" />
+                        <label for="cs_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="cs_community_name_lookup"
+                            ref="cs_community_name_lookup"
+                            name="cs_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterCSApplicationStatus">
+                        <select
+                            v-model="filterCSApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in customer_statuses" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in customer_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
@@ -40,15 +68,27 @@
         </CollapsibleFilters>
         <div v-if="addCSVisibility" class="col-md-12 dropdown">
             <div class="text-end">
-                <button class="btn btn-primary dropdown-toggle mb-2" type="button" id="cs_proposal_type"
-                    data-bs-toggle="dropdown" aria-expanded="false">
+                <button
+                    id="cs_proposal_type"
+                    class="btn btn-primary dropdown-toggle mb-2"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                >
                     Propose Conservation Status
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="cs_proposal_type">
                     <li v-for="group in group_types">
-                        <a class="dropdown-item" role="button"
-                            @click.prevent="createConservationStatus(group.id, group.display)">{{
-                                group.display }}
+                        <a
+                            class="dropdown-item"
+                            role="button"
+                            @click.prevent="
+                                createConservationStatus(
+                                    group.id,
+                                    group.display
+                                )
+                            "
+                            >{{ group.display }}
                         </a>
                     </li>
                 </ul>
@@ -56,27 +96,29 @@
         </div>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="conservation_status_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="conservation_status_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-
-
-import {
-    constants,
-    api_endpoints,
-    helpers
-} from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'ExternalConservationStatusDatatable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+    },
     props: {
         level: {
             type: String,
@@ -84,18 +126,18 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
             required: false,
             default: function () {
-                return null
-            }
+                return null;
+            },
         },
         filterCSGroupType_cache: {
             type: String,
@@ -134,23 +176,43 @@ export default {
             datatable_id: 'conservation_status-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterCSGroupType: sessionStorage.getItem(this.filterCSGroupType_cache) ?
-                sessionStorage.getItem(this.filterCSGroupType_cache) : 'all',
+            filterCSGroupType: sessionStorage.getItem(
+                this.filterCSGroupType_cache
+            )
+                ? sessionStorage.getItem(this.filterCSGroupType_cache)
+                : 'all',
 
-            filterCSScientificName: sessionStorage.getItem(this.filterCSScientificName_cache) ?
-                sessionStorage.getItem(this.filterCSScientificName_cache) : 'all',
+            filterCSScientificName: sessionStorage.getItem(
+                this.filterCSScientificName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSScientificName_cache)
+                : 'all',
 
-            filterCSExCommunityName: sessionStorage.getItem(this.filterCSExCommunityName_cache) ?
-                sessionStorage.getItem(this.filterCSExCommunityName_cache) : 'all',
+            filterCSExCommunityName: sessionStorage.getItem(
+                this.filterCSExCommunityName_cache
+            )
+                ? sessionStorage.getItem(this.filterCSExCommunityName_cache)
+                : 'all',
 
-            filterCSConservationList: sessionStorage.getItem(this.filterCSConservationList_cache) ?
-                sessionStorage.getItem(this.filterCSConservationList_cache) : 'all',
+            filterCSConservationList: sessionStorage.getItem(
+                this.filterCSConservationList_cache
+            )
+                ? sessionStorage.getItem(this.filterCSConservationList_cache)
+                : 'all',
 
-            filterCSConservationCategory: sessionStorage.getItem(this.filterCSConservationCategory_cache) ?
-                sessionStorage.getItem(this.filterCSConservationCategory_cache) : 'all',
+            filterCSConservationCategory: sessionStorage.getItem(
+                this.filterCSConservationCategory_cache
+            )
+                ? sessionStorage.getItem(
+                      this.filterCSConservationCategory_cache
+                  )
+                : 'all',
 
-            filterCSApplicationStatus: sessionStorage.getItem(this.filterCSApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterCSApplicationStatus_cache) : 'all',
+            filterCSApplicationStatus: sessionStorage.getItem(
+                this.filterCSApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterCSApplicationStatus_cache)
+                : 'all',
 
             group_types: [],
 
@@ -163,67 +225,21 @@ export default {
                 { value: 'delisted', name: 'DeListed' },
                 { value: 'declined', name: 'Declined' },
             ],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-    },
-    watch: {
-        filterCSGroupType: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSGroupType_cache, vm.filterCSGroupType);
-        },
-        filterCSScientificName: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSScientificName_cache, vm.filterCSScientificName);
-        },
-        filterCSExCommunityName: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSExCommunityName_cache, vm.filterCSExCommunityName);
-        },
-        filterCSScientificName: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSScientificName_cache, vm.filterCSScientificName);
-        },
-        filterCSConservationList: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSConservationList_cache, vm.filterCSConservationList);
-        },
-        filterCSConservationCategory: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSConservationCategory_cache, vm.filterCSConservationCategory);
-        },
-        filterCSApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterCSApplicationStatus_cache, vm.filterCSApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterCSGroupType === 'all' &&
+            if (
+                this.filterCSGroupType === 'all' &&
                 this.filterCSScientificName === 'all' &&
                 this.filterCSExCommunityName === 'all' &&
                 this.filterCSConservationList === 'all' &&
                 this.filterCSConservationCategory === 'all' &&
-                this.filterCSApplicationStatus === 'all') {
-                return false
+                this.filterCSApplicationStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         addCSVisibility: function () {
@@ -232,115 +248,120 @@ export default {
             return visibility;
         },
         datatable_headers: function () {
-            return ['Number', 'Type', 'Scientific Name', 'Community Name', 'Status', 'Action']
+            return [
+                'Number',
+                'Type',
+                'Scientific Name',
+                'Community Name',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                'render': function (data, type, full) {
-                    return full.id
+                render: function (data, type, full) {
+                    return full.id;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             return {
-                data: "conservation_status_number",
+                data: 'conservation_status_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.conservation_status_number
+                render: function (data, type, full) {
+                    return full.conservation_status_number;
                 },
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_type: function () {
             return {
-                data: "group_type",
+                data: 'group_type',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    return full.group_type
+                render: function (data, type, full) {
+                    return full.group_type;
                 },
-                name: "species__group_type__name",
-            }
+                name: 'species__group_type__name',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species_taxonomy__scientific_name",
-            }
+                name: 'species_taxonomy__scientific_name',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "community__taxonomy__community_name",
-            }
+                name: 'community__taxonomy__community_name',
+            };
         },
         column_status: function () {
             return {
-                data: "customer_status",
+                data: 'customer_status',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.customer_status) {
                         return full.customer_status;
                     }
-                    return ''
+                    return '';
                 },
-                name: "customer_status",
-            }
+                name: 'customer_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
                 // 10. Action
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (full.can_user_edit) {
                         links += `<a href='/external/conservation-status/${full.id}'>Continue</a><br/>`;
                         links += `<a href='#${full.id}' data-discard-cs-proposal='${full.id}'>Discard</a><br/>`;
-                    }
-                    else if (full.can_user_view) {
+                    } else if (full.can_user_view) {
                         links += `<a href='/external/conservation-status/${full.id}'>View</a>`;
-                    }
-                    else if (full.processing_status == 'discarded') {
+                    } else if (full.processing_status == 'discarded') {
                         links += `<a <a href='#${full.id}' data-reinstate-cs-proposal='${full.id}'>Reinstate</a>`;
                     }
 
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -349,7 +370,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -358,9 +379,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             columns = [
                 vm.column_number,
                 vm.column_type,
@@ -368,39 +389,48 @@ export default {
                 vm.column_community_name,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = false
+            ];
+            search = false;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "data": function (d) {
+                    url: this.url,
+                    dataSrc: 'data',
+                    data: function (d) {
                         d.filter_group_type = vm.filterCSGroupType;
                         d.filter_scientific_name = vm.filterCSScientificName;
                         d.filter_community_name = vm.filterCSExCommunityName;
-                        d.filter_conservation_list = vm.filterCSConservationList;
-                        d.filter_conservation_category = vm.filterCSConservationCategory;
-                        d.filter_application_status = vm.filterCSApplicationStatus
-                    }
+                        d.filter_conservation_list =
+                            vm.filterCSConservationList;
+                        d.filter_conservation_category =
+                            vm.filterCSConservationCategory;
+                        d.filter_application_status =
+                            vm.filterCSApplicationStatus;
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -412,98 +442,225 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterCSGroupType: function () {
+            let vm = this;
+            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSGroupType_cache,
+                vm.filterCSGroupType
+            );
+        },
+        filterCSScientificName: function () {
+            let vm = this;
+            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSScientificName_cache,
+                vm.filterCSScientificName
+            );
+        },
+        filterCSExCommunityName: function () {
+            let vm = this;
+            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSExCommunityName_cache,
+                vm.filterCSExCommunityName
+            );
+        },
+        filterCSScientificName: function () {
+            let vm = this;
+            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSScientificName_cache,
+                vm.filterCSScientificName
+            );
+        },
+        filterCSConservationList: function () {
+            let vm = this;
+            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSConservationList_cache,
+                vm.filterCSConservationList
+            );
+        },
+        filterCSConservationCategory: function () {
+            let vm = this;
+            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSConservationCategory_cache,
+                vm.filterCSConservationCategory
+            );
+        },
+        filterCSApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterCSApplicationStatus_cache,
+                vm.filterCSApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommunityNameLookup();
+            vm.addEventListeners();
+            // -- to set the select2 field with the session value if exists onload()
+            if (
+                sessionStorage.getItem('filterCSScientificName') != 'all' &&
+                sessionStorage.getItem('filterCSScientificName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSScientificNameText'),
+                    vm.filterCSScientificName,
+                    false,
+                    true
+                );
+                $('#cs_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterCSExCommunityName') != 'all' &&
+                sessionStorage.getItem('filterCSExCommunityName') != null
+            ) {
+                // contructor new Option(text, value, defaultSelected, selected)
+                var newOption = new Option(
+                    sessionStorage.getItem('filterCSExCommunityNameText'),
+                    vm.filterCSExCommunityName,
+                    false,
+                    true
+                );
+                $('#cs_community_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.scientific_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.cs_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.scientific_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSScientificName = data;
-                    sessionStorage.setItem("filterCSScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSScientificName = 'all';
-                    sessionStorage.setItem("filterCSScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_scientific_name_lookup-results"]')
+                    sessionStorage.setItem('filterCSScientificNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.cs_community_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.communities_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.cs_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.communities_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSExCommunityName = data;
-                    sessionStorage.setItem("filterCSExCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterCSExCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterCSExCommunityName = 'all';
-                    sessionStorage.setItem("filterCSExCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-cs_community_name_lookup-results"]')
+                    sessionStorage.setItem('filterCSExCommunityNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-cs_community_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         fetchFilterLists: function () {
             let vm = this;
-            fetch(api_endpoints.group_types_dict).then(async (response) => {
-                vm.group_types = await response.json();
-            }, (error) => {
-                console.log(error);
-            });
+            fetch(api_endpoints.group_types_dict).then(
+                async (response) => {
+                    vm.group_types = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createConservationStatus: async function (group_type, group_type_name) {
             swal.fire({
                 title: `Propose New ${group_type_name} Conservation Status`,
                 text: `Are you sure you want to propose a new ${group_type_name} Conservation Status?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: `Propose ${group_type_name} Conservation Status`,
                 reverseButtons: true,
@@ -512,11 +669,12 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newCSId = null
+                    let newCSId = null;
                     try {
-                        const createUrl = api_endpoints.conservation_status + "/";
+                        const createUrl =
+                            api_endpoints.conservation_status + '/';
                         let payload = new Object();
-                        payload.application_type_id = group_type
+                        payload.application_type_id = group_type;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -528,8 +686,7 @@ export default {
                         if (data) {
                             newCSId = data.id;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -542,9 +699,9 @@ export default {
         discardCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Proposal",
-                text: "Are you sure you want to discard this proposal?",
-                icon: "question",
+                title: 'Discard Proposal',
+                text: 'Are you sure you want to discard this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Proposal',
                 reverseButtons: true,
@@ -552,14 +709,19 @@ export default {
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary me-2',
-                }
+                },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
+                    fetch(
+                        api_endpoints.discard_cs_proposal(
+                            conservation_status_id
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: { 'Content-Type': 'application/json' },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'Your proposal has been discarded',
@@ -569,18 +731,20 @@ export default {
                                 },
                             });
                             vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         reinstateCSProposal: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Proposal",
-                text: "Are you sure you want to reinstate this proposal?",
-                icon: "question",
+                title: 'Reinstate Proposal',
+                text: 'Are you sure you want to reinstate this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Proposal',
                 reverseButtons: true,
@@ -588,15 +752,19 @@ export default {
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary me-2',
-                }
-
+                },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    fetch(api_endpoints.reinstate_cs_proposal(conservation_status_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
+                    fetch(
+                        api_endpoints.reinstate_cs_proposal(
+                            conservation_status_id
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: { 'Content-Type': 'application/json' },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your proposal has been reinstated. You may continue to work on it now.',
@@ -606,9 +774,11 @@ export default {
                                 },
                             });
                             vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
@@ -616,19 +786,30 @@ export default {
         addEventListeners: function () {
             let vm = this;
             // External Discard listener
-            vm.$refs.conservation_status_datatable.vmDataTable.on('click', 'a[data-discard-cs-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-cs-proposal');
-                vm.discardCSProposal(id);
-            });
-            vm.$refs.conservation_status_datatable.vmDataTable.on('click', 'a[data-reinstate-cs-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-cs-proposal');
-                vm.reinstateCSProposal(id);
-            });
-            vm.$refs.conservation_status_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.conservation_status_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-cs-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-cs-proposal');
+                    vm.discardCSProposal(id);
+                }
+            );
+            vm.$refs.conservation_status_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-cs-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-cs-proposal');
+                    vm.reinstateCSProposal(id);
+                }
+            );
+            vm.$refs.conservation_status_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         check_assessor: function (proposal) {
             let vm = this;
@@ -636,48 +817,21 @@ export default {
                 {
                     if (proposal.assigned_officer == vm.profile.full_name)
                         return true;
-                    else
-                        return false;
+                    else return false;
                 }
             } else {
-                var assessor = proposal.allowed_assessors.filter(function (elem) {
-                    return (elem.id = vm.profile.id)
-                });
+                var assessor = proposal.allowed_assessors.filter(
+                    function (elem) {
+                        return (elem.id = vm.profile.id);
+                    }
+                );
 
-                if (assessor.length > 0)
-                    return true;
-                else
-                    return false;
+                if (assessor.length > 0) return true;
+                else return false;
             }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommunityNameLookup();
-            vm.addEventListeners();
-            // -- to set the select2 field with the session value if exists onload()
-            if (sessionStorage.getItem("filterCSScientificName") != 'all' && sessionStorage.getItem("filterCSScientificName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCSScientificNameText"), vm.filterCSScientificName, false, true);
-                $('#cs_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterCSExCommunityName") != 'all' && sessionStorage.getItem("filterCSExCommunityName") != null) {
-                // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(sessionStorage.getItem("filterCSExCommunityNameText"), vm.filterCSExCommunityName, false, true);
-                $('#cs_community_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -705,7 +859,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -730,7 +886,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue b/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue
index 7b3c6dbf..503bed56 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/dashboard.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="container" id="externalCSDash">
+    <div id="externalCSDash" class="container">
         <FormSection
-            :formCollapse="false"
+            :form-collapse="false"
             label="Conservation Status"
             subtitle="- submit and view your proposed conservation status listings"
             Index="applications"
@@ -12,8 +12,9 @@
                 :profile="profile"
             />
         </FormSection>
-        <FormSection v-if="profile && profile.cs_referral_count > 0"
-            :formCollapse="false"
+        <FormSection
+            v-if="profile && profile.cs_referral_count > 0"
+            :form-collapse="false"
             label="Conservation Status Proposals Referred to Me"
             Index="cs_referred_to_me"
         >
@@ -26,44 +27,45 @@
 </template>
 
 <script>
-
-import FormSection from "@/components/forms/section_toggle.vue"
-import ConservationStatusTable from './conservation_status_proposal_table.vue'
-import ConservationStatusExternalReferralsDashboard from '@common-utils/cs_external_referrals_dashboard.vue'
-import { api_endpoints } from '@/utils/hooks'
+import FormSection from '@/components/forms/section_toggle.vue';
+import ConservationStatusTable from './conservation_status_proposal_table.vue';
+import ConservationStatusExternalReferralsDashboard from '@common-utils/cs_external_referrals_dashboard.vue';
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
     name: 'ExternalConservationStatusDashboard',
-    data() {
-        return {
-            profile: null,
-            conservation_status_url: api_endpoints.conservation_status_paginated_external,
-            cs_external_referrals_url: api_endpoints.conservation_status_referred_to_me,
-        }
-    },
-    components:{
+    components: {
         FormSection,
         ConservationStatusTable,
         ConservationStatusExternalReferralsDashboard,
     },
+    data() {
+        return {
+            profile: null,
+            conservation_status_url:
+                api_endpoints.conservation_status_paginated_external,
+            cs_external_referrals_url:
+                api_endpoints.conservation_status_referred_to_me,
+        };
+    },
     computed: {
-        is_external: function() {
-            return this.level == 'external'
+        is_external: function () {
+            return this.level == 'external';
         },
     },
+    created: function () {
+        this.fetchProfile();
+    },
     methods: {
         fetchProfile() {
             fetch(api_endpoints.profile)
                 .then(async (response) => {
-                    this.profile = await response.json()
-                })
-                .catch(error => {
-                    console.log(error)
+                    this.profile = await response.json();
                 })
+                .catch((error) => {
+                    console.log(error);
+                });
         },
     },
-    created: function () {
-        this.fetchProfile();
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue b/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue
index ecbaa685..db89fcb6 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/dashboard.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="container" id="externalOCRDash">
+    <div id="externalOCRDash" class="container">
         <FormSection
-            :formCollapse="false"
+            :form-collapse="false"
             :profile="profile"
             label="Occurrence Report"
             subtitle="- submit and view your reported occurrences"
@@ -12,8 +12,9 @@
                 :url="occurrence_report_url"
             />
         </FormSection>
-        <FormSection v-if="profile && profile.ocr_referral_count > 0"
-            :formCollapse="false"
+        <FormSection
+            v-if="profile && profile.ocr_referral_count > 0"
+            :form-collapse="false"
             label="Occurrence Reports Referred to Me"
             Index="ocr_referred_to_me"
         >
@@ -26,44 +27,46 @@
 </template>
 
 <script>
-import FormSection from "@/components/forms/section_toggle.vue"
-import OccurrenceReportTable from './occurrence_report_table.vue'
-import OccurrenceReportExternalReferralsDashboard from '@common-utils/ocr_external_referrals_dashboard.vue'
+import FormSection from '@/components/forms/section_toggle.vue';
+import OccurrenceReportTable from './occurrence_report_table.vue';
+import OccurrenceReportExternalReferralsDashboard from '@common-utils/ocr_external_referrals_dashboard.vue';
 
-import { api_endpoints } from '@/utils/hooks'
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
     name: 'ExternalOccurrenceReportDashboard',
-    data() {
-        return {
-            profile: null,
-            occurrence_report_url: api_endpoints.occurrence_report_paginated_external,
-            ocr_external_referrals_url: api_endpoints.occurrence_report_paginated_referred_to_me,
-        }
-    },
-    components:{
+    components: {
         FormSection,
         OccurrenceReportTable,
         OccurrenceReportExternalReferralsDashboard,
     },
+    data() {
+        return {
+            profile: null,
+            occurrence_report_url:
+                api_endpoints.occurrence_report_paginated_external,
+            ocr_external_referrals_url:
+                api_endpoints.occurrence_report_paginated_referred_to_me,
+        };
+    },
     computed: {
-        is_external: function() {
-            return this.level == 'external'
+        is_external: function () {
+            return this.level == 'external';
         },
     },
+    created: function () {
+        this.fetchProfile();
+    },
     methods: {
         fetchProfile() {
             fetch(api_endpoints.profile)
                 .then(async (response) => {
-                    this.profile = await response.json()
-                })
-                .catch(error => {
-                    console.log(error)
+                    this.profile = await response.json();
                 })
+                .catch((error) => {
+                    console.log(error);
+                });
         },
     },
-    created: function () {
-        this.fetchProfile();
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
index dd3ecb29..fb2ac342 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
@@ -1,28 +1,58 @@
 <template lang="html">
     <div class="container">
-        <form :action="ocr_proposal_form_url" method="post" name="new_ocr_proposal" enctype="multipart/form-data">
-
+        <form
+            :action="ocr_proposal_form_url"
+            method="post"
+            name="new_ocr_proposal"
+            enctype="multipart/form-data"
+        >
             <div v-if="!ocr_proposal_readonly">
                 <div v-if="hasAmendmentRequest" class="row">
                     <div class="col-lg-12 pull-right">
-                        <FormSection :formCollapse="false"
+                        <FormSection
+                            :form-collapse="false"
                             label="One or more amendments have been requested for this Occurrence Report"
-                            Index="amendment_request" customColor="red">
+                            Index="amendment_request"
+                            custom-color="red"
+                        >
                             <ul class="list-group list-group-numbered ps-2">
-                                <li v-for="a in amendment_request"
-                                    class="list-group-item d-flex justify-content-between align-items-start">
+                                <li
+                                    v-for="a in amendment_request"
+                                    class="list-group-item d-flex justify-content-between align-items-start"
+                                >
                                     <div class="ms-4 me-auto">
-                                        <div class="mb-3"><span class="fw-bold">Reason:</span> {{ a.reason_text }}</div>
-                                        <p v-for="t in splitText(a.text)">{{ t }}</p>
+                                        <div class="mb-3">
+                                            <span class="fw-bold">Reason:</span>
+                                            {{ a.reason_text }}
+                                        </div>
+                                        <p v-for="t in splitText(a.text)">
+                                            {{ t }}
+                                        </p>
                                         <template
-                                            v-if="a.amendment_request_documents && a.amendment_request_documents.length > 0">
-                                            <div class="fw-bold mb-1">Documents:</div>
-                                            <ul class="list-group list-group-numbered mb-2">
-                                                <li v-for="document in a.amendment_request_documents"
-                                                    class="list-group-item">
-                                                    <i class="bi bi-file-earmark-text-fill text-secondary"></i> <a
-                                                        :href="document._file" target="_blank">{{
-                                                            document.name }}</a>
+                                            v-if="
+                                                a.amendment_request_documents &&
+                                                a.amendment_request_documents
+                                                    .length > 0
+                                            "
+                                        >
+                                            <div class="fw-bold mb-1">
+                                                Documents:
+                                            </div>
+                                            <ul
+                                                class="list-group list-group-numbered mb-2"
+                                            >
+                                                <li
+                                                    v-for="document in a.amendment_request_documents"
+                                                    class="list-group-item"
+                                                >
+                                                    <i
+                                                        class="bi bi-file-earmark-text-fill text-secondary"
+                                                    ></i>
+                                                    <a
+                                                        :href="document._file"
+                                                        target="_blank"
+                                                        >{{ document.name }}</a
+                                                    >
                                                 </li>
                                             </ul>
                                         </template>
@@ -34,61 +64,159 @@
                 </div>
             </div>
 
-            <div v-if="occurrence_report_obj" id="scrollspy-heading" class="col-lg-12">
-                <h4>Occurrence Report - {{ display_group_type }}: {{ occurrence_report_obj.occurrence_report_number }}
+            <div
+                v-if="occurrence_report_obj"
+                id="scrollspy-heading"
+                class="col-lg-12"
+            >
+                <h4>
+                    Occurrence Report - {{ display_group_type }}:
+                    {{ occurrence_report_obj.occurrence_report_number }}
                 </h4>
             </div>
 
-            <ProposalOccurrenceReport v-if="occurrence_report_obj" :occurrence_report_obj="occurrence_report_obj"
-                id="OccurrenceReportStart" :canEditStatus="canEditStatus" :is_external="true" ref="occurrence_report"
-                @refreshOccurrenceReport="refreshOccurrenceReport()" @refreshFromResponse="refreshFromResponse"
-                @saveOccurrenceReport="save_before_submit()">
+            <ProposalOccurrenceReport
+                v-if="occurrence_report_obj"
+                id="OccurrenceReportStart"
+                ref="occurrence_report"
+                :occurrence_report_obj="occurrence_report_obj"
+                :can-edit-status="canEditStatus"
+                :is_external="true"
+                @refresh-occurrence-report="refreshOccurrenceReport()"
+                @refresh-from-response="refreshFromResponse"
+                @save-occurrence-report="save_before_submit()"
+            >
             </ProposalOccurrenceReport>
 
             <div>
-                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                <input type='hidden' name="occurrence_report_id" :value="1" />
+                <input
+                    type="hidden"
+                    name="csrfmiddlewaretoken"
+                    :value="csrf_token"
+                />
+                <input type="hidden" name="occurrence_report_id" :value="1" />
                 <div class="row" style="margin-bottom: 50px">
                     <div class="container">
                         <div class="row" style="margin-bottom: 50px">
-                            <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                            <div
+                                class="navbar fixed-bottom"
+                                style="background-color: #f5f5f5"
+                            >
                                 <div class="container">
-                                    <div class="col-md-6" style="margin-top:5px">
-                                        <p class="pull-right" style="margin-top:5px;">
-                                            <router-link class="btn btn-primary"
-                                                :to="{ name: 'external-occurrence-report-dash' }">Back
-                                                to
-                                                Dashboard</router-link>
+                                    <div
+                                        class="col-md-6"
+                                        style="margin-top: 5px"
+                                    >
+                                        <p
+                                            class="pull-right"
+                                            style="margin-top: 5px"
+                                        >
+                                            <router-link
+                                                class="btn btn-primary"
+                                                :to="{
+                                                    name: 'external-occurrence-report-dash',
+                                                }"
+                                                >Back to Dashboard</router-link
+                                            >
                                         </p>
                                     </div>
-                                    <div v-if="occurrence_report_obj && !occurrence_report_obj.readonly"
-                                        class="col-md-6 text-end" style="margin-top:5px">
-                                        <button v-if="savingOCRProposal" type="button" class="btn btn-primary me-2"
-                                            disabled>Save
-                                            and Continue <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <input v-else type="button" @click.prevent="save" class="btn btn-primary me-2"
-                                            value="Save and Continue" :disabled="saveExitOCRProposal || submitting" />
-
-                                        <button v-if="saveExitOCRProposal" type="button" class="btn btn-primary me-2"
-                                            disabled>Save
-                                            and Exit <span class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <input v-else type="button" @click.prevent="save_exit"
-                                            class="btn btn-primary me-2" value="Save and Exit"
-                                            :disabled="savingOCRProposal || submitting" />
-
-                                        <button v-if="submitting" type="button" class="btn btn-primary" disabled>{{
-                                            submit_text() }} <span class="spinner-border spinner-border-sm"
-                                                role="status" aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></button>
-                                        <input v-else type="button" @click.prevent="submit" class="btn btn-primary"
+                                    <div
+                                        v-if="
+                                            occurrence_report_obj &&
+                                            !occurrence_report_obj.readonly
+                                        "
+                                        class="col-md-6 text-end"
+                                        style="margin-top: 5px"
+                                    >
+                                        <button
+                                            v-if="savingOCRProposal"
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            disabled
+                                        >
+                                            Save and Continue
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
+                                        </button>
+                                        <input
+                                            v-else
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            value="Save and Continue"
+                                            :disabled="
+                                                saveExitOCRProposal ||
+                                                submitting
+                                            "
+                                            @click.prevent="save"
+                                        />
+
+                                        <button
+                                            v-if="saveExitOCRProposal"
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            disabled
+                                        >
+                                            Save and Exit
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
+                                        </button>
+                                        <input
+                                            v-else
+                                            type="button"
+                                            class="btn btn-primary me-2"
+                                            value="Save and Exit"
+                                            :disabled="
+                                                savingOCRProposal || submitting
+                                            "
+                                            @click.prevent="save_exit"
+                                        />
+
+                                        <button
+                                            v-if="submitting"
+                                            type="button"
+                                            class="btn btn-primary"
+                                            disabled
+                                        >
+                                            {{ submit_text() }}
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
+                                        </button>
+                                        <input
+                                            v-else
+                                            type="button"
+                                            class="btn btn-primary"
                                             :value="submit_text()"
-                                            :disabled="saveExitOCRProposal || savingOCRProposal" />
-                                        <input id="save_and_continue_btn" type="hidden" @click.prevent="save_wo_confirm"
-                                            class="btn btn-primary" value="Save Without Confirmation" />
+                                            :disabled="
+                                                saveExitOCRProposal ||
+                                                savingOCRProposal
+                                            "
+                                            @click.prevent="submit"
+                                        />
+                                        <input
+                                            id="save_and_continue_btn"
+                                            type="hidden"
+                                            class="btn btn-primary"
+                                            value="Save Without Confirmation"
+                                            @click.prevent="save_wo_confirm"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -100,21 +228,79 @@
     </div>
 </template>
 <script>
-
-import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue'
+import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'ExternalOccurrenceReportProposal',
+    components: {
+        ProposalOccurrenceReport,
+        FormSection,
+    },
+    beforeRouteEnter: function (to, from, next) {
+        if (to.params.occurrence_report_id) {
+            let vm = this;
+            fetch(
+                `/api/occurrence_report/${to.params.occurrence_report_id}.json`
+            ).then(
+                async (response) => {
+                    next(async (vm) => {
+                        const data = await response.json();
+                        vm.loading.push('occurrence report proposal');
+                        vm.occurrence_report_obj = data;
+                        vm.loading.splice(
+                            'fetching occurrence report proposal',
+                            1
+                        );
+                        vm.setdata(vm.occurrence_report_obj.readonly);
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.occurrence_report,
+                                to.params.occurrence_report_id +
+                                    '/amendment_request'
+                            )
+                        ).then(
+                            async (response) => {
+                                vm.setAmendmentData(data);
+                            },
+                            (err) => {
+                                console.log(err);
+                            }
+                        );
+                    });
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        } else {
+            fetch('/api/occurrence_report.json', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }).then(
+                async (response) => {
+                    next(async (vm) => {
+                        vm.loading.push('fetching occurrence report proposal');
+                        vm.occurrence_report_obj = await response.json();
+                        vm.loading.splice(
+                            'fetching occurrence report proposal',
+                            1
+                        );
+                    });
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        }
+    },
     data: function () {
         return {
-            "proposal": null,
-            "occurrence_report_obj": null,
-            "loading": [],
+            proposal: null,
+            occurrence_report_obj: null,
+            loading: [],
             form: null,
             amendment_request: [],
             saveError: false,
@@ -124,35 +310,51 @@ export default {
             saveExitOCRProposal: false,
             savingOCRProposal: false,
             paySubmitting: false,
-            newText: "",
+            newText: '',
             pBody: 'pBody',
             missing_fields: [],
             isSaved: false,
-        }
-    },
-    components: {
-        ProposalOccurrenceReport,
-        FormSection,
+        };
     },
     computed: {
         isLoading: function () {
-            return this.loading.length > 0
+            return this.loading.length > 0;
         },
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         ocr_proposal_form_url: function () {
-            return (this.occurrence_report_obj) ? `/api/occurrence_report/${this.occurrence_report_obj.id}/draft.json` : '';
+            return this.occurrence_report_obj
+                ? `/api/occurrence_report/${this.occurrence_report_obj.id}/draft.json`
+                : '';
         },
         canEditStatus: function () {
-            return this.occurrence_report_obj ? this.occurrence_report_obj.can_user_edit : 'false';
+            return this.occurrence_report_obj
+                ? this.occurrence_report_obj.can_user_edit
+                : 'false';
         },
         display_group_type: function () {
-            let group_type_string = this.occurrence_report_obj.group_type
+            let group_type_string = this.occurrence_report_obj.group_type;
             // to Capitalize only first character
-            return group_type_string.charAt(0).toUpperCase() + group_type_string.slice(1);
+            return (
+                group_type_string.charAt(0).toUpperCase() +
+                group_type_string.slice(1)
+            );
         },
     },
+    created: function () {
+        if (!this.occurrence_report_obj) {
+            this.fetchOccurrenceReport(this.$route.params.occurrence_report_id);
+        }
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.new_ocr_proposal;
+        window.addEventListener('beforeunload', vm.leaving);
+    },
+    beforeUnmount: function () {
+        window.removeEventListener('beforeunload', this.leaving);
+    },
     methods: {
         submit_text: function () {
             let vm = this;
@@ -165,33 +367,38 @@ export default {
         },
         save: async function () {
             let vm = this;
-            var missing_data = await vm.can_submit("");
+            var missing_data = await vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.savingOCRProposal = true;
             vm.isSaved = false;
             // add map geometry to the occurrence_report_obj
-            if (vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map) {
-                vm.occurrence_report_obj.ocr_geometry = vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.getJSONFeatures();
-
+            if (
+                vm.$refs.occurrence_report.$refs.ocr_location.$refs
+                    .component_map
+            ) {
+                vm.occurrence_report_obj.ocr_geometry =
+                    vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.getJSONFeatures();
             }
             let payload = { proposal: vm.occurrence_report_obj };
 
-            let deleted_features = this.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.deletedFeaturesProperty();
+            let deleted_features =
+                this.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.deletedFeaturesProperty();
             // Save right away if there are no deleted features, otherwise ask for confirmation
             let commence_saving = deleted_features.length == 0 ? true : false;
 
-            let warning_text = `${deleted_features.length} ${deleted_features.length == 1 ? 'feature' : 'features'
-                } will be deleted. Are you sure?`;
+            let warning_text = `${deleted_features.length} ${
+                deleted_features.length == 1 ? 'feature' : 'features'
+            } will be deleted. Are you sure?`;
             if (deleted_features.length > 0) {
                 await swal
                     .fire({
@@ -224,57 +431,62 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                const data = await response.json();
+            }).then(
+                async (response) => {
+                    const data = await response.json();
 
-                let swalHtml = '<p>Your occurrence report has been saved as a draft.</p>';
-                if (vm.saveExitOCRProposal) {
-                    swalHtml += '<p>It has <span class="fw-bold">NOT</span> been submitted.</p><p>You can find the draft on the occurrence report dashboard to continue working on the report later.</p>'
-                }
+                    let swalHtml =
+                        '<p>Your occurrence report has been saved as a draft.</p>';
+                    if (vm.saveExitOCRProposal) {
+                        swalHtml +=
+                            '<p>It has <span class="fw-bold">NOT</span> been submitted.</p><p>You can find the draft on the occurrence report dashboard to continue working on the report later.</p>';
+                    }
 
-                swal.fire({
-                    title: 'Occurrence Report Saved',
-                    html: swalHtml,
-                    icon: 'success',
-                    buttonsStyling: false,
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingOCRProposal = false;
-                this.occurrence_report_obj = Object.assign({}, data);
-                this.$nextTick(async () => {
-                    this.$refs.occurrence_report.$refs.ocr_location.incrementComponentMapKey();
-                });
-                vm.isSaved = true;
-                return data;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Save Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingOCRProposal = false;
-                vm.isSaved = false;
-            });
+                    swal.fire({
+                        title: 'Occurrence Report Saved',
+                        html: swalHtml,
+                        icon: 'success',
+                        buttonsStyling: false,
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingOCRProposal = false;
+                    this.occurrence_report_obj = Object.assign({}, data);
+                    this.$nextTick(async () => {
+                        this.$refs.occurrence_report.$refs.ocr_location.incrementComponentMapKey();
+                    });
+                    vm.isSaved = true;
+                    return data;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Save Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingOCRProposal = false;
+                    vm.isSaved = false;
+                }
+            );
         },
         save_exit: async function () {
             let vm = this;
             // this.submitting = true;
-            var missing_data = await vm.can_submit("");
+            var missing_data = await vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             this.saveExitOCRProposal = true;
@@ -291,12 +503,12 @@ export default {
         },
         save_wo_confirm: function (e) {
             let vm = this;
-            let formData = vm.set_formData()
+            let formData = vm.set_formData();
             fetch(vm.ocr_proposal_form_url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                }
+                },
             });
         },
         save_before_submit: async function (e) {
@@ -304,17 +516,22 @@ export default {
             let vm = this;
             vm.saveError = false;
             // add map geometry to the occurrence_report_obj
-            if (vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map) {
-                vm.occurrence_report_obj.ocr_geometry = vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.getJSONFeatures();
-
+            if (
+                vm.$refs.occurrence_report.$refs.ocr_location.$refs
+                    .component_map
+            ) {
+                vm.occurrence_report_obj.ocr_geometry =
+                    vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.getJSONFeatures();
             }
             let payload = { proposal: vm.occurrence_report_obj };
-            let deleted_features = this.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.deletedFeaturesProperty();
+            let deleted_features =
+                this.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.deletedFeaturesProperty();
             // Save right away if there are no deleted features, otherwise ask for confirmation
             let commence_saving = deleted_features.length == 0 ? true : false;
 
-            let warning_text = `${deleted_features.length} ${deleted_features.length == 1 ? 'feature' : 'features'
-                } will be deleted. Are you sure?`;
+            let warning_text = `${deleted_features.length} ${
+                deleted_features.length == 1 ? 'feature' : 'features'
+            } will be deleted. Are you sure?`;
             if (deleted_features.length > 0) {
                 await swal
                     .fire({
@@ -347,21 +564,24 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                console.log('saved before submit');
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.submitting = false;
-                vm.saveError = true;
-            });
+            }).then(
+                async (response) => {
+                    console.log('saved before submit');
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitting = false;
+                    vm.saveError = true;
+                }
+            );
             return result;
         },
         setdata: function (readonly) {
@@ -370,15 +590,12 @@ export default {
         setAmendmentData: function (amendment_request) {
             this.amendment_request = amendment_request;
 
-            if (amendment_request.length > 0)
-                this.hasAmendmentRequest = true;
-
+            if (amendment_request.length > 0) this.hasAmendmentRequest = true;
         },
         splitText: function (aText) {
             let newText = '';
-            newText = aText.split("\n");
+            newText = aText.split('\n');
             return newText;
-
         },
         leaving: function (e) {
             e.preventDefault();
@@ -388,15 +605,14 @@ export default {
             if (!vm.ocr_proposal_readonly && !vm.submitting) {
                 e.returnValue = dialogText;
                 return dialogText;
-            }
-            else {
+            } else {
                 return null;
             }
         },
         highlight_missing_fields: function () {
             let vm = this;
             for (var missing_field of vm.missing_fields) {
-                $("#" + missing_field.id).css("color", 'red');
+                $('#' + missing_field.id).css('color', 'red');
             }
         },
         validate: function () {
@@ -404,138 +620,179 @@ export default {
 
             // reset default colour
             for (var field of vm.missing_fields) {
-                $("#" + field.id).css("color", '#515151');
+                $('#' + field.id).css('color', '#515151');
             }
             vm.missing_fields = [];
 
             // get all required fields, that are not hidden in the DOM
-            var required_fields = $('input[type=text]:required, textarea:required, input[type=checkbox]:required, input[type=radio]:required, input[type=file]:required, select:required').not(':hidden');
+            var required_fields = $(
+                'input[type=text]:required, textarea:required, input[type=checkbox]:required, input[type=radio]:required, input[type=file]:required, select:required'
+            ).not(':hidden');
 
             // loop through all (non-hidden) required fields, and check data has been entered
             required_fields.each(function () {
-                var id = 'id_' + this.name
+                var id = 'id_' + this.name;
                 if (this.type == 'radio') {
-                    if (!$("input[name=" + this.name + "]").is(':checked')) {
-                        var text = $('#' + id).text()
-                        console.log('radio not checked: ' + this.type + ' ' + text)
+                    if (!$('input[name=' + this.name + ']').is(':checked')) {
+                        var text = $('#' + id).text();
+                        console.log(
+                            'radio not checked: ' + this.type + ' ' + text
+                        );
                         vm.missing_fields.push({ id: id, label: text });
                     }
                 }
 
                 if (this.type == 'checkbox') {
-                    var id = 'id_' + this.classList['value']
-                    if ($("[class=" + this.classList['value'] + "]:checked").length == 0) {
-                        var text = $('#' + id).text()
-                        console.log('checkbox not checked: ' + this.type + ' ' + text)
+                    var id = 'id_' + this.classList['value'];
+                    if (
+                        $('[class=' + this.classList['value'] + ']:checked')
+                            .length == 0
+                    ) {
+                        var text = $('#' + id).text();
+                        console.log(
+                            'checkbox not checked: ' + this.type + ' ' + text
+                        );
                         vm.missing_fields.push({ id: id, label: text });
                     }
                 }
 
                 if (this.type == 'select-one') {
                     if ($(this).val() == '') {
-                        var text = $('#' + id).text()  // this is the (question) label
+                        var text = $('#' + id).text(); // this is the (question) label
                         var id = 'id_' + $(this).prop('name'); // the label id
-                        console.log('selector not selected: ' + this.type + ' ' + text)
+                        console.log(
+                            'selector not selected: ' + this.type + ' ' + text
+                        );
                         vm.missing_fields.push({ id: id, label: text });
                     }
                 }
 
                 if (this.type == 'file') {
-                    var num_files = $('#' + id).attr('num_files')
-                    if (num_files == "0") {
-                        var text = $('#' + id).text()
-                        console.log('file not uploaded: ' + this.type + ' ' + this.name)
+                    var num_files = $('#' + id).attr('num_files');
+                    if (num_files == '0') {
+                        var text = $('#' + id).text();
+                        console.log(
+                            'file not uploaded: ' + this.type + ' ' + this.name
+                        );
                         vm.missing_fields.push({ id: id, label: text });
                     }
                 }
 
                 if (this.type == 'text') {
                     if (this.value == '') {
-                        var text = $('#' + id).text()
-                        console.log('text not provided: ' + this.type + ' ' + this.name)
+                        var text = $('#' + id).text();
+                        console.log(
+                            'text not provided: ' + this.type + ' ' + this.name
+                        );
                         vm.missing_fields.push({ id: id, label: text });
                     }
                 }
 
                 if (this.type == 'textarea') {
                     if (this.value == '') {
-                        var text = $('#' + id).text()
-                        console.log('textarea not provided: ' + this.type + ' ' + this.name)
+                        var text = $('#' + id).text();
+                        console.log(
+                            'textarea not provided: ' +
+                                this.type +
+                                ' ' +
+                                this.name
+                        );
                         vm.missing_fields.push({ id: id, label: text });
                     }
                 }
             });
 
-            return vm.missing_fields.length
+            return vm.missing_fields.length;
         },
         can_submit: async function (check_action) {
             let vm = this;
-            let blank_fields = []
+            let blank_fields = [];
             blank_fields = await vm.can_submit_occurrence_report(check_action);
 
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
-
         },
         can_submit_occurrence_report: async function (check_action) {
             let vm = this;
-            let blank_fields = []
-            if (vm.occurrence_report_obj.group_type == 'flora' || vm.occurrence_report_obj.group_type == 'fauna') {
-                if (vm.occurrence_report_obj.species_id == null || vm.occurrence_report_obj.species_id == '') {
-                    blank_fields.push(' Scientific Name is missing')
+            let blank_fields = [];
+            if (
+                vm.occurrence_report_obj.group_type == 'flora' ||
+                vm.occurrence_report_obj.group_type == 'fauna'
+            ) {
+                if (
+                    vm.occurrence_report_obj.species_id == null ||
+                    vm.occurrence_report_obj.species_id == ''
+                ) {
+                    blank_fields.push(' Scientific Name is missing');
                 }
-            }
-            else {
-                if (vm.occurrence_report_obj.community_id == null || vm.occurrence_report_obj.community_id == '') {
-                    blank_fields.push(' Community Name is missing')
+            } else {
+                if (
+                    vm.occurrence_report_obj.community_id == null ||
+                    vm.occurrence_report_obj.community_id == ''
+                ) {
+                    blank_fields.push(' Community Name is missing');
                 }
             }
-            if (check_action == "submit") {
-                await vm.save_before_submit()
-
-                if (!vm.occurrence_report_obj.submitter_information.submitter_category) {
-                    blank_fields.push(' Please select a submitter category')
+            if (check_action == 'submit') {
+                await vm.save_before_submit();
+
+                if (
+                    !vm.occurrence_report_obj.submitter_information
+                        .submitter_category
+                ) {
+                    blank_fields.push(' Please select a submitter category');
                 }
 
                 if (!vm.occurrence_report_obj.observation_date) {
-                    blank_fields.push(' Please enter the observation date')
+                    blank_fields.push(' Please enter the observation date');
                 }
 
-                if (!vm.occurrence_report_obj.number_of_observers || vm.occurrence_report_obj.number_of_observers == 0) {
-                    blank_fields.push(' Please add the details for at least one observer')
+                if (
+                    !vm.occurrence_report_obj.number_of_observers ||
+                    vm.occurrence_report_obj.number_of_observers == 0
+                ) {
+                    blank_fields.push(
+                        ' Please add the details for at least one observer'
+                    );
                 }
 
-                if (!vm.occurrence_report_obj.location || !vm.occurrence_report_obj.location.location_description) {
-                    blank_fields.push(' Please enter the location description')
+                if (
+                    !vm.occurrence_report_obj.location ||
+                    !vm.occurrence_report_obj.location.location_description
+                ) {
+                    blank_fields.push(' Please enter the location description');
                 }
                 let ocr_geometry = vm.occurrence_report_obj.ocr_geometry;
                 if (typeof ocr_geometry == 'string') {
-                    ocr_geometry = JSON.parse(ocr_geometry)
+                    ocr_geometry = JSON.parse(ocr_geometry);
                 }
-                if (!Array.isArray(ocr_geometry.features) || ocr_geometry.features.length == 0) {
-                    blank_fields.push(' Please add at least one location on the map')
-
+                if (
+                    !Array.isArray(ocr_geometry.features) ||
+                    ocr_geometry.features.length == 0
+                ) {
+                    blank_fields.push(
+                        ' Please add at least one location on the map'
+                    );
                 }
             }
-            return blank_fields
+            return blank_fields;
         },
         submit: async function () {
             let vm = this;
 
-            var missing_data = await vm.can_submit("submit");
+            var missing_data = await vm.can_submit('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
 
@@ -543,9 +800,12 @@ export default {
             vm.submitting = true;
 
             swal.fire({
-                title: vm.submit_text() + " Occurrence Report",
-                text: "Are you sure you want to " + vm.submit_text().toLowerCase() + " this occurrence report?",
-                icon: "question",
+                title: vm.submit_text() + ' Occurrence Report',
+                text:
+                    'Are you sure you want to ' +
+                    vm.submit_text().toLowerCase() +
+                    ' this occurrence report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: vm.submit_text(),
                 customClass: {
@@ -554,112 +814,76 @@ export default {
                 },
                 reverseButtons: true,
                 buttonsStyling: false,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    /* just save and submit - no payment required (probably application was pushed back by assessor for amendment */
-                    await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.occurrence_report_obj);
-                        fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report_obj.id + '/submit'), {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload),
-                        }).then(async (response) => {
-                            vm.occurrence_report_obj = await response.json();
-                            vm.$router.push({
-                                name: 'submit_ocr_proposal',
-                                params: { occurrence_report_obj: vm.occurrence_report_obj }
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        /* just save and submit - no payment required (probably application was pushed back by assessor for amendment */
+                        await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.occurrence_report_obj);
+                            fetch(
+                                helpers.add_endpoint_json(
+                                    api_endpoints.occurrence_report,
+                                    vm.occurrence_report_obj.id + '/submit'
+                                ),
+                                {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }
+                            ).then(
+                                async (response) => {
+                                    vm.occurrence_report_obj =
+                                        await response.json();
+                                    vm.$router.push({
+                                        name: 'submit_ocr_proposal',
+                                        params: {
+                                            occurrence_report_obj:
+                                                vm.occurrence_report_obj,
+                                        },
+                                    });
                                 },
-                            });
-                        });
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Submit Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                }
+                            );
+                        }
                     }
+                    vm.submitting = false;
+                },
+                (error) => {
+                    vm.submitting = false;
                 }
-                vm.submitting = false;
-
-            }, (error) => {
-                vm.submitting = false;
-            });
+            );
         },
         refreshFromResponse: function (data) {
             this.occurrence_report_obj = Object.assign({}, data);
         },
         fetchOccurrenceReport: function (id) {
             let vm = this;
-            fetch(`/api/occurrence_report/${id}/`).then(async (response) => {
-                const data = await response.json();
-                vm.occurrence_report_obj = Object.assign({}, data);
-            },
-                err => {
+            fetch(`/api/occurrence_report/${id}/`).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.occurrence_report_obj = Object.assign({}, data);
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         refreshOccurrenceReport: function () {
             this.fetchOccurrenceReport(this.$route.params.occurrence_report_id);
         },
     },
-    created: function () {
-        if (!this.occurrence_report_obj) {
-            this.fetchOccurrenceReport(this.$route.params.occurrence_report_id);
-        }
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.new_ocr_proposal;
-        window.addEventListener('beforeunload', vm.leaving);
-    },
-    beforeRouteEnter: function (to, from, next) {
-        if (to.params.occurrence_report_id) {
-            let vm = this;
-            fetch(`/api/occurrence_report/${to.params.occurrence_report_id}.json`).then(async (response) => {
-                next(async vm => {
-                    const data = await response.json();
-                    vm.loading.push('occurrence report proposal')
-                    vm.occurrence_report_obj = data;
-                    vm.loading.splice('fetching occurrence report proposal', 1);
-                    vm.setdata(vm.occurrence_report_obj.readonly);
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, to.params.occurrence_report_id + '/amendment_request')).then(async (response) => {
-                        vm.setAmendmentData(data);
-                    },
-                        err => {
-                            console.log(err);
-                        });
-                });
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-        else {
-            fetch('/api/occurrence_report.json', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                next(async vm => {
-                    vm.loading.push('fetching occurrence report proposal')
-                    vm.occurrence_report_obj = await response.json();
-                    vm.loading.splice('fetching occurrence report proposal', 1);
-                });
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-    },
-    beforeUnmount: function () {
-        window.removeEventListener('beforeunload', this.leaving);
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
index a2ce8425..d698a8b3 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
@@ -1,38 +1,69 @@
 <template id="external_occurrence_report_datatable">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Type:</label>
-                        <select class="form-select" v-model="filterOCRGroupType">
+                        <select
+                            v-model="filterOCRGroupType"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="option in group_types" :value="option.name">{{ option.display }}
+                            <option
+                                v-for="option in group_types"
+                                :value="option.name"
+                            >
+                                {{ option.display }}
                             </option>
                         </select>
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="ocr_scientific_name_lookup">Scientific Name:</label>
-                        <select id="ocr_scientific_name_lookup" name="ocr_scientific_name_lookup"
-                            ref="ocr_scientific_name_lookup" class="form-control" />
+                        <label for="ocr_scientific_name_lookup"
+                            >Scientific Name:</label
+                        >
+                        <select
+                            id="ocr_scientific_name_lookup"
+                            ref="ocr_scientific_name_lookup"
+                            name="ocr_scientific_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="ocr_community_name_lookup">Community Name:</label>
-                        <select id="ocr_community_name_lookup" name="ocr_community_name_lookup"
-                            ref="ocr_community_name_lookup" class="form-control" />
+                        <label for="ocr_community_name_lookup"
+                            >Community Name:</label
+                        >
+                        <select
+                            id="ocr_community_name_lookup"
+                            ref="ocr_community_name_lookup"
+                            name="ocr_community_name_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterOCRApplicationStatus">
+                        <select
+                            v-model="filterOCRApplicationStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in proposal_status" :value="status.value">{{ status.name }}</option>
+                            <option
+                                v-for="status in proposal_status"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
+                            </option>
                         </select>
                     </div>
                 </div>
@@ -40,15 +71,24 @@
         </CollapsibleFilters>
         <div v-if="addOCRVisibility" class="col-md-12 dropdown">
             <div class="text-end">
-                <button class="btn btn-primary dropdown-toggle mb-2" type="button" id="ocr_type"
-                    data-bs-toggle="dropdown" aria-expanded="false">
+                <button
+                    id="ocr_type"
+                    class="btn btn-primary dropdown-toggle mb-2"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                >
                     Report Occurrence
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="ocr_type">
                     <li v-for="group in group_types">
-                        <a class="dropdown-item" role="button"
-                            @click.prevent="createOccurrenceReport(group.id, group.display)">{{
-                                group.display }}
+                        <a
+                            class="dropdown-item"
+                            role="button"
+                            @click.prevent="
+                                createOccurrenceReport(group.id, group.display)
+                            "
+                            >{{ group.display }}
                         </a>
                     </li>
                 </ul>
@@ -56,26 +96,29 @@
         </div>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="occurrence_report_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="occurrence_report_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
 
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-
-
-import {
-    constants,
-    api_endpoints,
-    helpers
-} from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'ExternalOccurrenceReportDatatable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+        FormSection,
+    },
     props: {
         level: {
             type: String,
@@ -83,18 +126,18 @@ export default {
             validator: function (val) {
                 let options = ['internal', 'referral', 'external'];
                 return options.indexOf(val) != -1 ? true : false;
-            }
+            },
         },
         url: {
             type: String,
-            required: true
+            required: true,
         },
         profile: {
             type: Object,
             required: false,
             default: function () {
-                return null
-            }
+                return null;
+            },
         },
         filterOCRGroupType_cache: {
             type: String,
@@ -123,17 +166,29 @@ export default {
             datatable_id: 'ocuurrence-report-datatable-' + vm._uid,
 
             // selected values for filtering
-            filterOCRGroupType: sessionStorage.getItem(this.filterOCRGroupType_cache) ?
-                sessionStorage.getItem(this.filterOCRGroupType_cache) : 'all',
+            filterOCRGroupType: sessionStorage.getItem(
+                this.filterOCRGroupType_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRGroupType_cache)
+                : 'all',
 
-            filterOCRScientificName: sessionStorage.getItem(this.filterOCRScientificName_cache) ?
-                sessionStorage.getItem(this.filterOCRScientificName_cache) : 'all',
+            filterOCRScientificName: sessionStorage.getItem(
+                this.filterOCRScientificName_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRScientificName_cache)
+                : 'all',
 
-            filterOCRExCommunityName: sessionStorage.getItem(this.filterOCRExCommunityName_cache) ?
-                sessionStorage.getItem(this.filterOCRExCommunityName_cache) : 'all',
+            filterOCRExCommunityName: sessionStorage.getItem(
+                this.filterOCRExCommunityName_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRExCommunityName_cache)
+                : 'all',
 
-            filterOCRApplicationStatus: sessionStorage.getItem(this.filterOCRApplicationStatus_cache) ?
-                sessionStorage.getItem(this.filterOCRApplicationStatus_cache) : 'all',
+            filterOCRApplicationStatus: sessionStorage.getItem(
+                this.filterOCRApplicationStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterOCRApplicationStatus_cache)
+                : 'all',
 
             //Filter list for scientific name and common name
             group_types: [],
@@ -148,50 +203,19 @@ export default {
                 { value: 'closed', name: 'Closed' },
             ],
             proposal_status: [],
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-        FormSection,
-    },
-    watch: {
-        filterOCRGroupType: function () {
-            let vm = this;
-            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRGroupType_cache, vm.filterOCRGroupType);
-        },
-        filterOCRScientificName: function () {
-            let vm = this;
-            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRScientificName_cache, vm.filterOCRScientificName);
-        },
-        filterOCRExCommunityName: function () {
-            let vm = this;
-            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRExCommunityName_cache, vm.filterOCRExCommunityName);
-        },
-        filterOCRApplicationStatus: function () {
-            let vm = this;
-            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterOCRApplicationStatus_cache, vm.filterOCRApplicationStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                // Collapsible component exists
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterOCRGroupType === 'all' &&
+            if (
+                this.filterOCRGroupType === 'all' &&
                 this.filterOCRScientificName === 'all' &&
                 this.filterOCRExCommunityName === 'all' &&
-                this.filterOCRApplicationStatus === 'all') {
-                return false
+                this.filterOCRApplicationStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         addOCRVisibility: function () {
@@ -200,79 +224,87 @@ export default {
             return visibility;
         },
         datatable_headers: function () {
-            return ['ID', 'Number', 'Type', 'Scientific Name', 'Community Name', 'Status', 'Action']
+            return [
+                'ID',
+                'Number',
+                'Type',
+                'Scientific Name',
+                'Community Name',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "id",
+                data: 'id',
                 orderable: true,
                 searchable: false,
                 visible: false,
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_number: function () {
             return {
-                data: "occurrence_report_number",
+                data: 'occurrence_report_number',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_type: function () {
             return {
-                data: "group_type",
+                data: 'group_type',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "group_type__name",
-            }
+                name: 'group_type__name',
+            };
         },
         column_scientific_name: function () {
             return {
-                data: "scientific_name",
+                data: 'scientific_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "species__taxonomy__scientific_name",
-            }
+                name: 'species__taxonomy__scientific_name',
+            };
         },
         column_community_name: function () {
             return {
-                data: "community_name",
+                data: 'community_name',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (value, type) {
+                render: function (value, type) {
                     let result = helpers.dtPopover(value, 30, 'hover');
                     return type == 'export' ? value : result;
                 },
-                name: "community__taxonomy__community_name",
-            }
+                name: 'community__taxonomy__community_name',
+            };
         },
         column_status: function () {
             return {
-                data: "customer_status",
+                data: 'customer_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "customer_status",
-            }
+                name: 'customer_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (full.can_user_edit) {
                         if (full.processing_status == 'discarded') {
                             links += `<a href='#${full.id}' data-reinstate-ocr-proposal='${full.id}'>Reinstate</a><br/>`;
@@ -280,19 +312,18 @@ export default {
                             links += `<a href='/external/occurrence-report/${full.id}'>Continue</a><br/>`;
                             links += `<a href='#${full.id}' data-discard-ocr-proposal='${full.id}'>Discard</a><br/>`;
                         }
-                    }
-                    else if (full.can_user_view) {
+                    } else if (full.can_user_view) {
                         links += `<a href='/external/occurrence-report/${full.id}'>View</a><br />`;
                     }
                     links += `<a href='#${full.id}' data-copy-ocr-proposal='${full.id}'>Copy</a>`;
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
-            let columns = []
-            let search = null
+            let vm = this;
+            let columns = [];
+            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -301,7 +332,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -310,9 +341,9 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             columns = [
                 vm.column_id,
                 vm.column_number,
@@ -321,39 +352,46 @@ export default {
                 vm.column_community_name,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = false
-            buttons = buttons
+            ];
+            search = false;
+            buttons = buttons;
 
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 1 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
-                    "data": function (d) {
+                    url: this.url,
+                    dataSrc: 'data',
+                    data: function (d) {
                         d.filter_group_type = vm.filterOCRGroupType;
                         d.filter_scientific_name = vm.filterOCRScientificName;
                         d.filter_community_name = vm.filterOCRExCommunityName;
-                        d.filter_application_status = vm.filterOCRApplicationStatus
+                        d.filter_application_status =
+                            vm.filterOCRApplicationStatus;
                         d.is_internal = vm.is_internal;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -365,81 +403,178 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterOCRGroupType: function () {
+            let vm = this;
+            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRGroupType_cache,
+                vm.filterOCRGroupType
+            );
+        },
+        filterOCRScientificName: function () {
+            let vm = this;
+            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRScientificName_cache,
+                vm.filterOCRScientificName
+            );
+        },
+        filterOCRExCommunityName: function () {
+            let vm = this;
+            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRExCommunityName_cache,
+                vm.filterOCRExCommunityName
+            );
+        },
+        filterOCRApplicationStatus: function () {
+            let vm = this;
+            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterOCRApplicationStatus_cache,
+                vm.filterOCRApplicationStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                // Collapsible component exists
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
-        }
+        },
+    },
+    mounted: function () {
+        this.fetchFilterLists();
+        let vm = this;
+        $('a[data-toggle="collapse"]').on('click', function () {
+            var chev = $(this).children()[0];
+            window.setTimeout(function () {
+                $(chev).toggleClass(
+                    'glyphicon-chevron-down glyphicon-chevron-up'
+                );
+            }, 100);
+        });
+        this.$nextTick(() => {
+            vm.initialiseScientificNameLookup();
+            vm.initialiseCommunityNameLookup();
+            vm.addEventListeners();
+            if (
+                sessionStorage.getItem('filterOCRScientificName') != 'all' &&
+                sessionStorage.getItem('filterOCRScientificName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRScientificNameText'),
+                    vm.filterOCRScientificName,
+                    false,
+                    true
+                );
+                $('#ocr_scientific_name_lookup').append(newOption);
+            }
+            if (
+                sessionStorage.getItem('filterOCRExCommunityName') != 'all' &&
+                sessionStorage.getItem('filterOCRExCommunityName') != null
+            ) {
+                var newOption = new Option(
+                    sessionStorage.getItem('filterOCRExCommunityNameText'),
+                    vm.filterOCRExCommunityName,
+                    false,
+                    true
+                );
+                $('#ocr_community_name_lookup').append(newOption);
+            }
+        });
     },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_scientific_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Scientific Name",
-                ajax: {
-                    url: api_endpoints.species_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.ocr_scientific_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Scientific Name',
+                    ajax: {
+                        url: api_endpoints.species_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRScientificName = data;
-                    sessionStorage.setItem("filterOCRScientificNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRScientificNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRScientificName = 'all';
-                    sessionStorage.setItem("filterOCRScientificNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_scientific_name_lookup-results"]')
+                    sessionStorage.setItem('filterOCRScientificNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_scientific_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
         },
         initialiseCommunityNameLookup: function () {
             let vm = this;
-            $(vm.$refs.ocr_community_name_lookup).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Community Name",
-                ajax: {
-                    url: api_endpoints.communities_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
+            $(vm.$refs.ocr_community_name_lookup)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Community Name',
+                    ajax: {
+                        url: api_endpoints.communities_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRExCommunityName = data;
-                    sessionStorage.setItem("filterOCRExCommunityNameText", e.params.data.text);
-                }).
-                on("select2:unselect", function (e) {
+                    sessionStorage.setItem(
+                        'filterOCRExCommunityNameText',
+                        e.params.data.text
+                    );
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.filterOCRExCommunityName = 'all';
-                    sessionStorage.setItem("filterOCRExCommunityNameText", '');
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-ocr_community_name_lookup-results"]')
+                    sessionStorage.setItem('filterOCRExCommunityNameText', '');
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-ocr_community_name_lookup-results"]'
+                    );
                     // move focus to select2 field
                     searchField[0].focus();
                 });
@@ -447,17 +582,20 @@ export default {
         fetchFilterLists: function () {
             let vm = this;
             vm.proposal_status = vm.external_status;
-            fetch(api_endpoints.group_types_dict).then(async (response) => {
-                vm.group_types = await response.json();
-            }, (error) => {
-                console.log(error);
-            });
+            fetch(api_endpoints.group_types_dict).then(
+                async (response) => {
+                    vm.group_types = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         createOccurrenceReport: async function (group_type, group_type_name) {
             swal.fire({
                 title: `Add ${group_type_name} Occurrence Report`,
                 text: `Are you sure you want to add a new ${group_type_name} Occurrence Report?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: `Add ${group_type_name} Occurrence Report`,
                 reverseButtons: true,
@@ -466,11 +604,11 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newOCRId = null
+                    let newOCRId = null;
                     try {
-                        const createUrl = api_endpoints.occurrence_report + "/";
+                        const createUrl = api_endpoints.occurrence_report + '/';
                         let payload = new Object();
-                        payload.group_type_id = group_type
+                        payload.group_type_id = group_type;
                         let response = await fetch(createUrl, {
                             method: 'POST',
                             headers: {
@@ -482,8 +620,7 @@ export default {
                         if (data) {
                             newOCRId = data;
                         }
-                    }
-                    catch (err) {
+                    } catch (err) {
                         console.log(err);
                     }
                     this.$router.push({
@@ -496,9 +633,9 @@ export default {
         discardOCR: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Occurrence Report",
-                text: "Are you sure you want to discard this occurrence report?",
-                icon: "question",
+                title: 'Discard Occurrence Report',
+                text: 'Are you sure you want to discard this occurrence report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Occurrence Report',
                 customClass: {
@@ -508,11 +645,16 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
+                    fetch(
+                        api_endpoints.discard_ocr_proposal(
+                            occurrence_report_id
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: { 'Content-Type': 'application/json' },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Occurrence Report Discarded',
                                 text: 'The occurrence report has been discarded',
@@ -522,55 +664,70 @@ export default {
                                 },
                             });
                             vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         reinstateOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Report",
-                text: "Are you sure you want to reinstate this report?",
-                icon: "question",
+                title: 'Reinstate Report',
+                text: 'Are you sure you want to reinstate this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.reinstate_ocr_proposal(occurrence_report_id), {
-                        method: 'PATCH',
-                        headers: { 'Content-Type': 'application/json', }
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'Your report has been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.reinstate_ocr_proposal(
+                                occurrence_report_id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: { 'Content-Type': 'application/json' },
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'Your report has been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload(
+                                    helpers.enablePopovers,
+                                    false
+                                );
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         copyOCRProposal: function (occurrence_report_id) {
             let vm = this;
             swal.fire({
-                title: "Copy Occurrence Report",
+                title: 'Copy Occurrence Report',
                 text: `Are you sure you want to make a copy of occurrence report OCR${occurrence_report_id}?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Copy Occurrence Report',
                 customClass: {
@@ -580,55 +737,81 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, occurrence_report_id + '/copy'), {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json', }
-                    }).then(async (response) => {
-                        const ocr_copy = await response.json();
-                        swal.fire({
-                            title: 'Copied',
-                            text: `The occurrence report has been copied to ${ocr_copy.occurrence_report_number}. When you click OK, the new occurrence report will open in a new window.`,
-                            icon: 'success',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                            didClose: () => {
-                                vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload();
-                                const routeData = this.$router.resolve({
-                                    name: 'draft_ocr_proposal',
-                                    params: { occurrence_report_id: ocr_copy.id },
-                                    query: { action: 'edit' }
-                                });
-                                window.open(routeData.href, '_blank');
-                            }
-                        });
-                    }, (error) => {
-                        console.log(error);
-                    });
+                    fetch(
+                        helpers.add_endpoint_json(
+                            api_endpoints.occurrence_report,
+                            occurrence_report_id + '/copy'
+                        ),
+                        {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                        }
+                    ).then(
+                        async (response) => {
+                            const ocr_copy = await response.json();
+                            swal.fire({
+                                title: 'Copied',
+                                text: `The occurrence report has been copied to ${ocr_copy.occurrence_report_number}. When you click OK, the new occurrence report will open in a new window.`,
+                                icon: 'success',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                                didClose: () => {
+                                    vm.$refs.occurrence_report_datatable.vmDataTable.ajax.reload();
+                                    const routeData = this.$router.resolve({
+                                        name: 'draft_ocr_proposal',
+                                        params: {
+                                            occurrence_report_id: ocr_copy.id,
+                                        },
+                                        query: { action: 'edit' },
+                                    });
+                                    window.open(routeData.href, '_blank');
+                                },
+                            });
+                        },
+                        (error) => {
+                            console.log(error);
+                        }
+                    );
                 }
             });
         },
         addEventListeners: function () {
             let vm = this;
             // External Discard listener
-            vm.$refs.occurrence_report_datatable.vmDataTable.on('click', 'a[data-discard-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-ocr-proposal');
-                vm.discardOCR(id);
-            });
-            vm.$refs.occurrence_report_datatable.vmDataTable.on('click', 'a[data-reinstate-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-ocr-proposal');
-                vm.reinstateOCRProposal(id);
-            });
-            vm.$refs.occurrence_report_datatable.vmDataTable.on('click', 'a[data-copy-ocr-proposal]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-copy-ocr-proposal');
-                vm.copyOCRProposal(id);
-            });
-            vm.$refs.occurrence_report_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.occurrence_report_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-ocr-proposal');
+                    vm.discardOCR(id);
+                }
+            );
+            vm.$refs.occurrence_report_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-ocr-proposal');
+                    vm.reinstateOCRProposal(id);
+                }
+            );
+            vm.$refs.occurrence_report_datatable.vmDataTable.on(
+                'click',
+                'a[data-copy-ocr-proposal]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-copy-ocr-proposal');
+                    vm.copyOCRProposal(id);
+                }
+            );
+            vm.$refs.occurrence_report_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         check_assessor: function (proposal) {
             let vm = this;
@@ -636,46 +819,21 @@ export default {
                 {
                     if (proposal.assigned_officer == vm.profile.full_name)
                         return true;
-                    else
-                        return false;
+                    else return false;
                 }
-            }
-            else {
-                var assessor = proposal.allowed_assessors.filter(function (elem) {
-                    return (elem.id = vm.profile.id)
-                });
+            } else {
+                var assessor = proposal.allowed_assessors.filter(
+                    function (elem) {
+                        return (elem.id = vm.profile.id);
+                    }
+                );
 
-                if (assessor.length > 0)
-                    return true;
-                else
-                    return false;
+                if (assessor.length > 0) return true;
+                else return false;
             }
         },
     },
-    mounted: function () {
-        this.fetchFilterLists();
-        let vm = this;
-        $('a[data-toggle="collapse"]').on('click', function () {
-            var chev = $(this).children()[0];
-            window.setTimeout(function () {
-                $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-            }, 100);
-        });
-        this.$nextTick(() => {
-            vm.initialiseScientificNameLookup();
-            vm.initialiseCommunityNameLookup();
-            vm.addEventListeners();
-            if (sessionStorage.getItem("filterOCRScientificName") != 'all' && sessionStorage.getItem("filterOCRScientificName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRScientificNameText"), vm.filterOCRScientificName, false, true);
-                $('#ocr_scientific_name_lookup').append(newOption);
-            }
-            if (sessionStorage.getItem("filterOCRExCommunityName") != 'all' && sessionStorage.getItem("filterOCRExCommunityName") != null) {
-                var newOption = new Option(sessionStorage.getItem("filterOCRExCommunityNameText"), vm.filterOCRExCommunityName, false, true);
-                $('#ocr_community_name_lookup').append(newOption);
-            }
-        });
-    }
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -703,7 +861,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -728,7 +888,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
index a6f2b793..98bc33b7 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
@@ -3,41 +3,97 @@
         <div class="row">
             <div class="col-sm-12">
                 <div class="row">
-                    <div v-if="isOCRProposal" class="col-sm-offset-3 col-sm-6 borderDecoration">
-                        <div v-if="occurrence_report_obj.group_type == application_type_flora">
-                            <strong>Your flora occurrence report has been successfully submitted.</strong>
+                    <div
+                        v-if="isOCRProposal"
+                        class="col-sm-offset-3 col-sm-6 borderDecoration"
+                    >
+                        <div
+                            v-if="
+                                occurrence_report_obj.group_type ==
+                                application_type_flora
+                            "
+                        >
+                            <strong
+                                >Your flora occurrence report has been
+                                successfully submitted.</strong
+                            >
                             <br />
                         </div>
-                        <div v-else-if="occurrence_report_obj.group_type == application_type_fauna">
-                            <strong>Your fauna occurrence report has been successfully submitted.</strong>
+                        <div
+                            v-else-if="
+                                occurrence_report_obj.group_type ==
+                                application_type_fauna
+                            "
+                        >
+                            <strong
+                                >Your fauna occurrence report has been
+                                successfully submitted.</strong
+                            >
                             <br />
                         </div>
-                        <div v-else-if="occurrence_report_obj.group_type == application_type_community">
-                            <strong>Your community occurrence report has been successfully submitted.</strong>
+                        <div
+                            v-else-if="
+                                occurrence_report_obj.group_type ==
+                                application_type_community
+                            "
+                        >
+                            <strong
+                                >Your community occurrence report has been
+                                successfully submitted.</strong
+                            >
                             <br />
                         </div>
                         <table>
                             <tbody>
                                 <tr>
                                     <td><strong>Application:</strong></td>
-                                    <td><strong>{{ occurrence_report_obj.occurrence_report_number }}</strong></td>
+                                    <td>
+                                        <strong>{{
+                                            occurrence_report_obj.occurrence_report_number
+                                        }}</strong>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td><strong>Date/Time:</strong></td>
-                                    <td><strong> {{ formatDate(occurrence_report_obj.lodgement_date) }}</strong></td>
+                                    <td>
+                                        <strong>
+                                            {{
+                                                formatDate(
+                                                    occurrence_report_obj.lodgement_date
+                                                )
+                                            }}</strong
+                                        >
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>
                         <br />
-                        <label>You will receive a notification email if there is any incomplete information or documents
-                            missing from the proposal.</label>
-                        <router-link :to="{ name: 'external-occurrence-report-dash' }" style="margin-top:15px;"
-                            class="btn btn-primary">Back to home</router-link>
+                        <label
+                            >You will receive a notification email if there is
+                            any incomplete information or documents missing from
+                            the proposal.</label
+                        >
+                        <router-link
+                            :to="{ name: 'external-occurrence-report-dash' }"
+                            style="margin-top: 15px"
+                            class="btn btn-primary"
+                            >Back to home</router-link
+                        >
                     </div>
-                    <div v-else class="col-sm-offset-3 col-sm-6 borderDecoration">
-                        <strong>Sorry it looks like there isn't any application currently in your session.</strong>
-                        <br /><router-link :to="{ name: 'external-occurrence-report-dash' }" style="margin-top:15px;"
-                            class="btn btn-primary">Back to home</router-link>
+                    <div
+                        v-else
+                        class="col-sm-offset-3 col-sm-6 borderDecoration"
+                    >
+                        <strong
+                            >Sorry it looks like there isn't any application
+                            currently in your session.</strong
+                        >
+                        <br /><router-link
+                            :to="{ name: 'external-occurrence-report-dash' }"
+                            style="margin-top: 15px"
+                            class="btn btn-primary"
+                            >Back to home</router-link
+                        >
                     </div>
                 </div>
             </div>
@@ -45,23 +101,26 @@
     </div>
 </template>
 <script>
-
-import {
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
+    beforeRouteEnter: function (to, from, next) {
+        next((vm) => {
+            vm.occurrence_report_obj = to.params.occurrence_report_obj;
+            console.log(vm.occurrence_report_obj);
+        });
+    },
     data: function () {
         let vm = this;
         return {
-            "occurrence_report_obj": {},
-        }
+            occurrence_report_obj: {},
+        };
     },
     computed: {
         isOCRProposal: function () {
-            return this.occurrence_report_obj && this.occurrence_report_obj.id ? true : false;
+            return this.occurrence_report_obj && this.occurrence_report_obj.id
+                ? true
+                : false;
         },
         application_type_flora: function () {
             return api_endpoints.group_type_flora;
@@ -71,24 +130,18 @@ export default {
         },
         application_type_community: function () {
             return api_endpoints.group_type_community;
-        }
-    },
-    methods: {
-        formatDate: function (data) {
-            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
-        }
+        },
     },
     mounted: function () {
         let vm = this;
         vm.form = document.forms.new_ocr_proposal;
     },
-    beforeRouteEnter: function (to, from, next) {
-        next(vm => {
-            vm.occurrence_report_obj = to.params.occurrence_report_obj;
-            console.log(vm.occurrence_report_obj)
-        })
-    }
-}
+    methods: {
+        formatDate: function (data) {
+            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue b/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
index 03c1fe0b..3be04789 100644
--- a/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
@@ -1,139 +1,198 @@
 <template>
-    <div class="container" id="internalDash">
-        <ul class="nav nav-pills" id="pills-tab" role="tablist">
+    <div id="internalDash" class="container">
+        <ul id="pills-tab" class="nav nav-pills" role="tablist">
             <li class="nav-item">
                 <a
-                    class="nav-link"
                     id="pills-flora-tab"
+                    class="nav-link"
                     data-bs-toggle="pill"
                     href="#pills-flora"
                     role="tab"
                     aria-controls="pills-flora"
                     aria-selected="true"
                     @click="set_active_tab('flora')"
-                >Flora</a>
+                    >Flora</a
+                >
             </li>
             <li class="nav-item">
                 <a
-                    class="nav-link"
                     id="pills-fauna-tab"
+                    class="nav-link"
                     data-bs-toggle="pill"
                     href="#pills-fauna"
                     role="tab"
                     aria-controls="pills-fauna"
                     aria-selected="false"
                     @click="set_active_tab('fauna')"
-                >Fauna</a>
+                    >Fauna</a
+                >
             </li>
             <li class="nav-item">
                 <a
-                    class="nav-link"
                     id="pills-community-tab"
+                    class="nav-link"
                     data-bs-toggle="pill"
                     href="#pills-community"
                     role="tab"
                     aria-controls="pills-community"
                     aria-selected="false"
                     @click="set_active_tab('community')"
-                >Communities</a>
+                    >Communities</a
+                >
             </li>
         </ul>
 
-        <div class="tab-content" id="pills-tabContent">
-            <div class="tab-pane" id="pills-flora" role="tabpanel" aria-labelledby="pills-flora-tab">
-                <FormSection :formCollapse="false" label="Flora" Index="flora">
-                    <SpeciesFloraDashTable v-if="isFlora" ref="flora_table" level="external" :group_type_name="group_name"
-                    :group_type_id="getGroupId" :url="species_url" />
+        <div id="pills-tabContent" class="tab-content">
+            <div
+                id="pills-flora"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-flora-tab"
+            >
+                <FormSection :form-collapse="false" label="Flora" Index="flora">
+                    <SpeciesFloraDashTable
+                        v-if="isFlora"
+                        ref="flora_table"
+                        level="external"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_url"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-fauna" role="tabpanel" aria-labelledby="pills-fauna-tab">
-                <FormSection :formCollapse="false" label="Fauna" Index="fauna">
-                    <SpeciesFaunaDashTable v-if="isFauna" ref="fauna_table" level="external" :group_type_name="group_name"
-                    :group_type_id="getGroupId" :url="species_url"/>
+            <div
+                id="pills-fauna"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-fauna-tab"
+            >
+                <FormSection :form-collapse="false" label="Fauna" Index="fauna">
+                    <SpeciesFaunaDashTable
+                        v-if="isFauna"
+                        ref="fauna_table"
+                        level="external"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_url"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-community" role="tabpanel" aria-labelledby="pills-community-tab">
-                <FormSection :formCollapse="false" label="Community" Index="community">
-                    <CommunitiesDashTable v-if="isCommunity" ref="community_table" level="external" :group_type_name="group_name"
-                    :group_type_id="getGroupId" :url="community_url"/>
+            <div
+                id="pills-community"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-community-tab"
+            >
+                <FormSection
+                    :form-collapse="false"
+                    label="Community"
+                    Index="community"
+                >
+                    <CommunitiesDashTable
+                        v-if="isCommunity"
+                        ref="community_table"
+                        level="external"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="community_url"
+                    />
                 </FormSection>
             </div>
         </div>
-
     </div>
 </template>
 <script>
-import SpeciesFloraDashTable from '@common-utils/species_flora_dashboard.vue'
-import SpeciesFaunaDashTable from '@common-utils/species_fauna_dashboard.vue'
-import CommunitiesDashTable from '@common-utils/communities_dashboard.vue'
+import SpeciesFloraDashTable from '@common-utils/species_flora_dashboard.vue';
+import SpeciesFaunaDashTable from '@common-utils/species_fauna_dashboard.vue';
+import CommunitiesDashTable from '@common-utils/communities_dashboard.vue';
 
-import FormSection from '@/components/forms/section_toggle.vue'
-import {
-  api_endpoints,
-}
-from '@/utils/hooks'
+import FormSection from '@/components/forms/section_toggle.vue';
+import { api_endpoints } from '@/utils/hooks';
 export default {
     name: 'InternalSpeciesCommunitiesDashboard',
+    components: {
+        SpeciesFloraDashTable,
+        SpeciesFaunaDashTable,
+        CommunitiesDashTable,
+        FormSection,
+    },
     data() {
         let vm = this;
         return {
-            user_preference:'flora',
+            user_preference: 'flora',
             group_types: [],
             group_name: null,
             species_url: api_endpoints.species_paginated_external,
             community_url: api_endpoints.communities_paginated_external,
-        }
-    },
-    watch: {},
-    components: {
-        SpeciesFloraDashTable,
-        SpeciesFaunaDashTable,
-        CommunitiesDashTable,
-        FormSection,
+        };
     },
     computed: {
         /*------properties to show the user authenticated Tabs only-----------*/
-        showFloraTab: function(){
+        showFloraTab: function () {
             return this.group_types.includes('flora');
         },
-        showFaunaTab: function(){
+        showFaunaTab: function () {
             return this.group_types.includes('fauna');
         },
-        showCommunityTab: function(){
+        showCommunityTab: function () {
             return this.group_types.includes('community');
         },
         /*---------------------------------------------------------------------*/
         /*---------properties to load group related vue components-------------*/
-        isFlora: function(){
+        isFlora: function () {
             return this.group_name == 'flora';
         },
-        isFauna: function(){
+        isFauna: function () {
             return this.group_name == 'fauna';
         },
-        isCommunity: function(){
+        isCommunity: function () {
             return this.group_name == 'community';
         },
         /*---------------------------------------------------------------------*/
-        getGroupId: function(){
-            for(var i=0; i<this.group_types.length; i++){
-                if(this.group_name === this.group_types[i].name){
+        getGroupId: function () {
+            for (var i = 0; i < this.group_types.length; i++) {
+                if (this.group_name === this.group_types[i].name) {
                     return this.group_types[i].id;
                 }
             }
-        }
-
+        },
+    },
+    watch: {},
+    created: function () {
+        fetch(api_endpoints.group_types_dict).then(
+            async (response) => {
+                this.group_types = await response.json();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(function () {
+            chevron_toggle.init();
+            if (localStorage.getItem('speciesCommunitiesActiveTab') === null) {
+                vm.set_active_tab(vm.user_preference);
+            } else {
+                vm.set_active_tab(
+                    localStorage.getItem('speciesCommunitiesActiveTab')
+                );
+            }
+            this.getGroupId;
+        });
     },
     methods: {
-        set_tabs: function(){
+        set_tabs: function () {
             let vm = this;
             /* set user preference tab by default on load of dashboard (Note: doesn't affect on the load group component)*/
-            if(vm.user_preference === 'flora'){
+            if (vm.user_preference === 'flora') {
                 $('#pills-tab a[href="#pills-flora"]').tab('show');
             }
-            if(vm.user_preference === 'fauna'){
+            if (vm.user_preference === 'fauna') {
                 $('#pills-tab a[href="#pills-fauna"]').tab('show');
             }
-            if(vm.user_preference === 'community'){
+            if (vm.user_preference === 'community') {
                 $('#pills-tab a[href="#pills-community"]').tab('show');
             }
         },
@@ -148,83 +207,63 @@ export default {
                 this.filterGroupType = grouptype;
             }
         },*/
-        set_active_tab: function(group_name){
-            this.group_name=group_name;
+        set_active_tab: function (group_name) {
+            this.group_name = group_name;
             localStorage.setItem('speciesCommunitiesActiveTab', group_name);
-            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]')
-            let tab = bootstrap.Tab.getInstance(elem)
-            if(!tab)
-                tab = new bootstrap.Tab(elem)
-            tab.show()
+            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]');
+            let tab = bootstrap.Tab.getInstance(elem);
+            if (!tab) tab = new bootstrap.Tab(elem);
+            tab.show();
         },
     },
-    created: function () {
-        fetch(api_endpoints.group_types_dict).then(async (response) => {
-                this.group_types= await response.json();
-                },(error) => {
-                console.log(error);
-            });
-    },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(function(){
-            chevron_toggle.init();
-            if(localStorage.getItem('speciesCommunitiesActiveTab')===null){
-                vm.set_active_tab(vm.user_preference);
-            }
-            else{
-                vm.set_active_tab(localStorage.getItem('speciesCommunitiesActiveTab'));
-            }
-            this.getGroupId;
-        })
-    },
-
-}
+};
 </script>
 
 <style lang="css" scoped>
-    .section{
-        text-transform: capitalize;
-    }
-    .list-group{
-        margin-bottom: 0;
-    }
-    .fixed-top{
-        position: fixed;
-        top:56px;
-    }
+.section {
+    text-transform: capitalize;
+}
+.list-group {
+    margin-bottom: 0;
+}
+.fixed-top {
+    position: fixed;
+    top: 56px;
+}
 
-    .nav-item {
-        margin-bottom: 2px;
-    }
+.nav-item {
+    margin-bottom: 2px;
+}
 
-    .nav-item>li>a {
-        background-color: yellow !important;
-        color: #fff;
-    }
+.nav-item > li > a {
+    background-color: yellow !important;
+    color: #fff;
+}
 
-    .nav-item>li.active>a, .nav-item>li.active>a:hover, .nav-item>li.active>a:focus {
-      color: white;
-      background-color: blue;
-      border: 1px solid #888888;
-    }
+.nav-item > li.active > a,
+.nav-item > li.active > a:hover,
+.nav-item > li.active > a:focus {
+    color: white;
+    background-color: blue;
+    border: 1px solid #888888;
+}
 
-    .admin > div {
-      display: inline-block;
-      vertical-align: top;
-      margin-right: 1em;
-    }
-    .nav-pills .nav-link {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-top-left-radius: 0.5em;
-        border-top-right-radius: 0.5em;
-        margin-right: 0.25em;
-    }
-    .nav-pills .nav-link {
-        background: lightgray;
-    }
-    .nav-pills .nav-link.active {
-        background: gray;
-    }
+.admin > div {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 1em;
+}
+.nav-pills .nav-link {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    margin-right: 0.25em;
+}
+.nav-pills .nav-link {
+    background: lightgray;
+}
+.nav-pills .nav-link.active {
+    background: gray;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
index ecc67d3e..dad6636c 100755
--- a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
@@ -1,30 +1,61 @@
 <template lang="html">
-    <div v-if="species_community" class="container" id="externalSpeciesCommunity">
-        <div class="row" style="padding-bottom: 50px;">
-            <h3>{{ display_group_type }} {{ display_number }} - {{ display_name }}</h3>
-            <h4 v-if="species_community.conservation_status">{{
-                species_community.conservation_status.conservation_category }}</h4>
+    <div
+        v-if="species_community"
+        id="externalSpeciesCommunity"
+        class="container"
+    >
+        <div class="row" style="padding-bottom: 50px">
+            <h3>
+                {{ display_group_type }} {{ display_number }} -
+                {{ display_name }}
+            </h3>
+            <h4 v-if="species_community.conservation_status">
+                {{
+                    species_community.conservation_status.conservation_category
+                }}
+            </h4>
             <div class="col-md-3">
                 <div class="">
                     <div class="card card-default mb-3">
-                        <div class="card-header">
-                            Image
-                        </div>
+                        <div class="card-header">Image</div>
                         <div class="card-body card-collapse">
                             <div class="row">
                                 <div class="col-sm-12">
                                     <template v-if="uploadedID">
-                                        <div class="rounded"
-                                            :class="downloadingImage ? 'animated-background bg-secondary' : ''"
-                                            style="width:258px;" :style="downloadingImage ? 'height:258px;' : ''">
-                                            <img v-show="!downloadingImage" @load="onImageLoad" width="258"
-                                                :src="image_url" class="img-thumbnail img-fluid" :alt="display_name" />
+                                        <div
+                                            class="rounded"
+                                            :class="
+                                                downloadingImage
+                                                    ? 'animated-background bg-secondary'
+                                                    : ''
+                                            "
+                                            style="width: 258px"
+                                            :style="
+                                                downloadingImage
+                                                    ? 'height:258px;'
+                                                    : ''
+                                            "
+                                        >
+                                            <img
+                                                v-show="!downloadingImage"
+                                                width="258"
+                                                :src="image_url"
+                                                class="img-thumbnail img-fluid"
+                                                :alt="display_name"
+                                                @load="onImageLoad"
+                                            />
                                         </div>
                                     </template>
                                     <template v-else>
-                                        <div class="d-flex bg-light bg-gradient justify-content-center align-content-middle"
-                                            style="height:258px;">
-                                            <div class="align-self-center text-muted">No Image Available</div>
+                                        <div
+                                            class="d-flex bg-light bg-gradient justify-content-center align-content-middle"
+                                            style="height: 258px"
+                                        >
+                                            <div
+                                                class="align-self-center text-muted"
+                                            >
+                                                No Image Available
+                                            </div>
                                         </div>
                                     </template>
                                 </div>
@@ -38,18 +69,33 @@
                     <div class="">
                         <div class="row">
                             <form>
-                                <ProposalSpeciesCommunities ref="species_communities"
+                                <ProposalSpeciesCommunities
+                                    id="speciesCommunityStart"
+                                    ref="species_communities"
                                     :species_community="species_community"
-                                    :species_community_original="species_community" id="speciesCommunityStart"
-                                    :is_internal="false" :is_readonly="true">
+                                    :species_community_original="
+                                        species_community
+                                    "
+                                    :is_internal="false"
+                                    :is_readonly="true"
+                                >
                                 </ProposalSpeciesCommunities>
                                 <div class="row" style="margin-bottom: 50px">
-                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                    <div
+                                        class="navbar fixed-bottom"
+                                        style="background-color: #f5f5f5"
+                                    >
                                         <div class="container">
                                             <div class="col-md-6">
-                                                <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
-                                                    @click.prevent="returnToDashboard">
-                                                    Return to Dashboard</button>
+                                                <button
+                                                    class="btn btn-primary me-2 pull-left"
+                                                    style="margin-top: 5px"
+                                                    @click.prevent="
+                                                        returnToDashboard
+                                                    "
+                                                >
+                                                    Return to Dashboard
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
@@ -63,48 +109,98 @@
     </div>
 </template>
 <script>
-
-import datatable from '@vue-utils/datatable.vue'
-import ProposalSpeciesCommunities from '@/components/form_species_communities.vue'
+import datatable from '@vue-utils/datatable.vue';
+import ProposalSpeciesCommunities from '@/components/form_species_communities.vue';
 
 export default {
     name: 'ExternalSpeciesCommunity',
+    components: {
+        datatable,
+        ProposalSpeciesCommunities,
+    },
+    beforeRouteEnter: function (to, from, next) {
+        //-------------get species object if received species id
+        if (
+            to.query.group_type_name === 'flora' ||
+            to.query.group_type_name === 'fauna'
+        ) {
+            fetch(
+                `/api/external_species/${to.params.species_community_id}/`
+            ).then(
+                async (response) => {
+                    next(async (vm) => {
+                        vm.species_community = await response.json(); //--temp species_obj
+                        vm.uploadedID = vm.species_community.image_doc;
+                    });
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        }
+        //------get community object if received community id
+        else {
+            fetch(
+                `/api/external_community/${to.params.species_community_id}/`
+            ).then(
+                async (response) => {
+                    next(async (vm) => {
+                        vm.species_community = await response.json(); //--temp community_obj
+                        vm.uploadedID = vm.species_community.image_doc;
+                    });
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
+        }
+    },
     data: function () {
         return {
-            "species_community": null,
+            species_community: null,
             uploadedID: null,
             downloadingImage: true,
-        }
-    },
-    components: {
-        datatable,
-        ProposalSpeciesCommunities,
+        };
     },
     computed: {
         isCommunity: function () {
-            return this.species_community.group_type === "community"
+            return this.species_community.group_type === 'community';
         },
         display_group_type: function () {
-            let group_type_string = this.species_community.group_type
+            let group_type_string = this.species_community.group_type;
             // to Capitalize only first character
-            return group_type_string.charAt(0).toUpperCase() + group_type_string.slice(1);
+            return (
+                group_type_string.charAt(0).toUpperCase() +
+                group_type_string.slice(1)
+            );
         },
         display_number: function () {
-            return (this.species_community.group_type === "community") ?
-                this.species_community.community_number :
-                this.species_community.species_number;
+            return this.species_community.group_type === 'community'
+                ? this.species_community.community_number
+                : this.species_community.species_number;
         },
         display_name: function () {
-            return (this.species_community.group_type === "community") ?
-                (this.species_community.taxonomy_details != null) ? this.species_community.taxonomy_details.community_migrated_id : '' :
-                (this.species_community.taxonomy_details != null) ? this.species_community.taxonomy_details.scientific_name + " (" + this.species_community.taxonomy_details.taxon_name_id + ")" : '';
+            return this.species_community.group_type === 'community'
+                ? this.species_community.taxonomy_details != null
+                    ? this.species_community.taxonomy_details
+                          .community_migrated_id
+                    : ''
+                : this.species_community.taxonomy_details != null
+                  ? this.species_community.taxonomy_details.scientific_name +
+                    ' (' +
+                    this.species_community.taxonomy_details.taxon_name_id +
+                    ')'
+                  : '';
         },
         image_url: function () {
-            return (this.species_community.group_type === "community") ?
-                `/api/external_community/${this.species_community.id}/public_image/` :
-                `/api/external_species/${this.species_community.id}/public_image/`
+            return this.species_community.group_type === 'community'
+                ? `/api/external_community/${this.species_community.id}/public_image/`
+                : `/api/external_species/${this.species_community.id}/public_image/`;
         },
     },
+    mounted: function () {
+        let vm = this;
+    },
     methods: {
         onImageLoad: function () {
             this.downloadingImage = false;
@@ -112,49 +208,20 @@ export default {
         returnToDashboard: function () {
             let vm = this;
             vm.$router.push({
-                name: 'external-species-communities-dash'
+                name: 'external-species-communities-dash',
             });
         },
     },
-    mounted: function () {
-        let vm = this;
-    },
-    beforeRouteEnter: function (to, from, next) {
-        //-------------get species object if received species id
-        if (to.query.group_type_name === 'flora' || to.query.group_type_name === "fauna") {
-            fetch(`/api/external_species/${to.params.species_community_id}/`).then(async (response) => {
-                next(async vm => {
-                    vm.species_community = await response.json(); //--temp species_obj
-                    vm.uploadedID = vm.species_community.image_doc;
-                });
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-        //------get community object if received community id
-        else {
-            fetch(`/api/external_community/${to.params.species_community_id}/`).then(async (response) => {
-                next(async vm => {
-                    vm.species_community = await response.json(); //--temp community_obj
-                    vm.uploadedID = vm.species_community.image_doc;
-                });
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-    },
-}
+};
 </script>
 <style scoped>
 @keyframes placeHolderShimmer {
     0% {
-        background-position: -468px 0
+        background-position: -468px 0;
     }
 
     100% {
-        background-position: 468px 0
+        background-position: 468px 0;
     }
 }
 
@@ -165,7 +232,12 @@ export default {
     animation-name: placeHolderShimmer;
     animation-timing-function: linear;
     background: darkgray;
-    background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
+    background: linear-gradient(
+        to right,
+        #eeeeee 10%,
+        #dddddd 18%,
+        #eeeeee 33%
+    );
     background-size: 800px 104px;
     height: 100px;
     position: relative;
diff --git a/boranga/frontend/boranga/src/components/form_conservation_status.vue b/boranga/frontend/boranga/src/components/form_conservation_status.vue
index 8d7c6b8b..b8b82039 100644
--- a/boranga/frontend/boranga/src/components/form_conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/form_conservation_status.vue
@@ -1,57 +1,147 @@
 <template lang="html">
     <div>
         <div class="col-md-12">
-            <ul v-if="!is_external" class="nav nav-pills" id="pills-tab" role="tablist">
+            <ul
+                v-if="!is_external"
+                id="pills-tab"
+                class="nav nav-pills"
+                role="tablist"
+            >
                 <li class="nav-item">
-                    <a class="nav-link active" id="pills-status-tab" data-bs-toggle="pill" :href="'#' + statusBody"
-                        role="tab" :aria-controls="statusBody" aria-selected="true" @click="tabClicked()">
+                    <a
+                        id="pills-status-tab"
+                        class="nav-link active"
+                        data-bs-toggle="pill"
+                        :href="'#' + statusBody"
+                        role="tab"
+                        :aria-controls="statusBody"
+                        aria-selected="true"
+                        @click="tabClicked()"
+                    >
                         Status
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id="pills-documents-tab" data-bs-toggle="pill" :href="'#' + documentBody"
-                        role="tab" :aria-selected="documentBody" aria-selected="false" @click="tabClicked()">
+                    <a
+                        id="pills-documents-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + documentBody"
+                        role="tab"
+                        :aria-selected="documentBody"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Documents
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id="pills-related-items-tab" data-bs-toggle="pill" :href="'#' + relatedItemBody"
-                        role="tab" :aria-controls="relatedItemBody" aria-selected="false" @click="tabClicked()">
+                    <a
+                        id="pills-related-items-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + relatedItemBody"
+                        role="tab"
+                        :aria-controls="relatedItemBody"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Related Items
                     </a>
                 </li>
             </ul>
-            <div class="tab-content" id="pills-tabContent">
-                <div class="tab-pane fade show active" :id="statusBody" role="tabpanel"
-                    aria-labelledby="pills-status-tab">
-                    <CommunityStatus v-if="isCommunity" :key="reloadcount" ref="community_conservation_status"
-                        id="communityStatus" :is_external="is_external" :canEditStatus="canEditStatus"
-                        :conservation_status_obj="conservation_status_obj" :referral="referral"
-                        @saveConservationStatus="$emit('saveConservationStatus');">
+            <div id="pills-tabContent" class="tab-content">
+                <div
+                    :id="statusBody"
+                    class="tab-pane fade show active"
+                    role="tabpanel"
+                    aria-labelledby="pills-status-tab"
+                >
+                    <CommunityStatus
+                        v-if="isCommunity"
+                        id="communityStatus"
+                        :key="reloadcount"
+                        ref="community_conservation_status"
+                        :is_external="is_external"
+                        :can-edit-status="canEditStatus"
+                        :conservation_status_obj="conservation_status_obj"
+                        :referral="referral"
+                        @save-conservation-status="
+                            $emit('saveConservationStatus')
+                        "
+                    >
                     </CommunityStatus>
-                    <SpeciesStatus v-else :key="reloadcount + 'else'" ref="species_conservation_status"
-                        id="speciesStatus" :is_external="is_external" :canEditStatus="canEditStatus"
-                        :conservation_status_obj="conservation_status_obj" :referral="referral"
-                        @saveConservationStatus="$emit('saveConservationStatus');">
+                    <SpeciesStatus
+                        v-else
+                        id="speciesStatus"
+                        :key="reloadcount + 'else'"
+                        ref="species_conservation_status"
+                        :is_external="is_external"
+                        :can-edit-status="canEditStatus"
+                        :conservation_status_obj="conservation_status_obj"
+                        :referral="referral"
+                        @save-conservation-status="
+                            $emit('saveConservationStatus')
+                        "
+                    >
                     </SpeciesStatus>
-                    <CSDocuments v-if="!is_internal && !referral" :key="reloadcount + 'cs_documents'" ref="cs_documents"
-                        id="csDocuments" :is_internal="is_internal" :conservation_status_obj="conservation_status_obj">
+                    <CSDocuments
+                        v-if="!is_internal && !referral"
+                        id="csDocuments"
+                        :key="reloadcount + 'cs_documents'"
+                        ref="cs_documents"
+                        :is_internal="is_internal"
+                        :conservation_status_obj="conservation_status_obj"
+                    >
                     </CSDocuments>
-                    <SubmitterInformation v-if="conservation_status_obj.submitter_information"
-                        :key="reloadcount + 'submitter_information'" ref="submitter_information"
-                        id="submitter_information" :show_submitter_contact_details="show_submitter_contact_details"
-                        :submitter_information="conservation_status_obj.submitter_information"
-                        :disabled="!(conservation_status_obj.can_user_edit && conservation_status_obj.is_submitter) || referral" />
+                    <SubmitterInformation
+                        v-if="conservation_status_obj.submitter_information"
+                        id="submitter_information"
+                        :key="reloadcount + 'submitter_information'"
+                        ref="submitter_information"
+                        :show_submitter_contact_details="
+                            show_submitter_contact_details
+                        "
+                        :submitter_information="
+                            conservation_status_obj.submitter_information
+                        "
+                        :disabled="
+                            !(
+                                conservation_status_obj.can_user_edit &&
+                                conservation_status_obj.is_submitter
+                            ) || referral
+                        "
+                    />
                 </div>
-                <div class="tab-pane fade" :id="documentBody" role="tabpanel" aria-labelledby="pills-documents-tab">
-                    <CSDocuments :key="reloadcount" ref="cs_documents" id="csDocuments" :is_internal="is_internal"
-                        :conservation_status_obj="conservation_status_obj">
+                <div
+                    :id="documentBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-documents-tab"
+                >
+                    <CSDocuments
+                        id="csDocuments"
+                        :key="reloadcount"
+                        ref="cs_documents"
+                        :is_internal="is_internal"
+                        :conservation_status_obj="conservation_status_obj"
+                    >
                     </CSDocuments>
                 </div>
-                <div v-if="!is_external" class="tab-pane fade" :id="relatedItemBody" role="tabpanel"
-                    aria-labelledby="pills-related-items-tab">
-                    <RelatedItems :key="reloadcount" ref="cs_related_items" id="csRelatedItems"
-                        :ajax_url="related_items_ajax_url" :filter_list_url="related_items_filter_list_url">
+                <div
+                    v-if="!is_external"
+                    :id="relatedItemBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-related-items-tab"
+                >
+                    <RelatedItems
+                        id="csRelatedItems"
+                        :key="reloadcount"
+                        ref="cs_related_items"
+                        :ajax_url="related_items_ajax_url"
+                        :filter_list_url="related_items_filter_list_url"
+                    >
                     </RelatedItems>
                 </div>
             </div>
@@ -60,33 +150,40 @@
 </template>
 
 <script>
-import SubmitterInformation from '@/components/common/submitter_information.vue'
-import SpeciesStatus from '@/components/common/conservation_status/species_status.vue'
-import CommunityStatus from '@/components/common/conservation_status/community_status.vue'
-import CSDocuments from '@/components/common/conservation_status/cs_documents.vue'
-import RelatedItems from '@/components/common/table_related_items.vue'
+import SubmitterInformation from '@/components/common/submitter_information.vue';
+import SpeciesStatus from '@/components/common/conservation_status/species_status.vue';
+import CommunityStatus from '@/components/common/conservation_status/community_status.vue';
+import CSDocuments from '@/components/common/conservation_status/cs_documents.vue';
+import RelatedItems from '@/components/common/table_related_items.vue';
 
 export default {
+    components: {
+        SubmitterInformation,
+        SpeciesStatus,
+        CommunityStatus,
+        CSDocuments,
+        RelatedItems,
+    },
     props: {
         conservation_status_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         referral: {
             type: Object,
-            required: false
+            required: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
         canEditStatus: {
             type: Boolean,
-            default: true
+            default: true,
         },
     },
     emits: ['saveConservationStatus'],
@@ -98,29 +195,31 @@ export default {
             statusBody: 'statusBody' + vm._uid,
             documentBody: 'documentBody' + vm._uid,
             relatedItemBody: 'relatedItemBody' + vm._uid,
-        }
-    },
-    components: {
-        SubmitterInformation,
-        SpeciesStatus,
-        CommunityStatus,
-        CSDocuments,
-        RelatedItems,
+        };
     },
     computed: {
         show_submitter_contact_details: function () {
-            return 'ConservationStatusReferral' != this.$parent.$options.name
+            return 'ConservationStatusReferral' != this.$parent.$options.name;
         },
         isCommunity: function () {
-            return this.conservation_status_obj.group_type == "community"
+            return this.conservation_status_obj.group_type == 'community';
         },
         related_items_ajax_url: function () {
-            return '/api/conservation_status/' + this.conservation_status_obj.id + '/get_related_items/'
+            return (
+                '/api/conservation_status/' +
+                this.conservation_status_obj.id +
+                '/get_related_items/'
+            );
         },
         related_items_filter_list_url: function () {
-            return '/api/conservation_status/filter_list.json'
+            return '/api/conservation_status/filter_list.json';
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.new_conservation_status;
+        vm.eventListener();
+    },
     methods: {
         //----function to resolve datatable exceeding beyond the div
         tabClicked: function (param) {
@@ -130,12 +229,7 @@ export default {
             let vm = this;
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.new_conservation_status;
-        vm.eventListener();
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -156,20 +250,20 @@ export default {
     margin-bottom: 2px;
 }
 
-.nav-item>li>a {
+.nav-item > li > a {
     background-color: yellow !important;
     color: #fff;
 }
 
-.nav-item>li.active>a,
-.nav-item>li.active>a:hover,
-.nav-item>li.active>a:focus {
+.nav-item > li.active > a,
+.nav-item > li.active > a:hover,
+.nav-item > li.active > a:focus {
     color: white;
     background-color: blue;
     border: 1px solid #888888;
 }
 
-.admin>div {
+.admin > div {
     display: inline-block;
     vertical-align: top;
     margin-right: 1em;
diff --git a/boranga/frontend/boranga/src/components/form_occurrence.vue b/boranga/frontend/boranga/src/components/form_occurrence.vue
index 27d219f6..e0cc377b 100644
--- a/boranga/frontend/boranga/src/components/form_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/form_occurrence.vue
@@ -1,87 +1,210 @@
 <template lang="html">
     <div>
-        <div class="" :id="occurrenceBody">
-            <CommunityOccurrence v-if="isCommunity" ref="community_occurrence" id="communityOccurrence"
-                :occurrence_obj="occurrence_obj">
+        <div :id="occurrenceBody" class="">
+            <CommunityOccurrence
+                v-if="isCommunity"
+                id="communityOccurrence"
+                ref="community_occurrence"
+                :occurrence_obj="occurrence_obj"
+            >
             </CommunityOccurrence>
-            <SpeciesOccurrence v-else ref="species_occurrence" id="speciesOccurrence" :occurrence_obj="occurrence_obj">
+            <SpeciesOccurrence
+                v-else
+                id="speciesOccurrence"
+                ref="species_occurrence"
+                :occurrence_obj="occurrence_obj"
+            >
             </SpeciesOccurrence>
         </div>
         <div class="col-md-12">
             <ul id="pills-tab" class="nav nav-pills" role="tablist">
                 <li class="nav-item">
-                    <a id="pills-location-tab" class="nav-link active" data-bs-toggle="pill" :href="'#' + locationBody"
-                        role="tab" :aria-controls="locationBody" aria-selected="true" @click="tabClicked()">
+                    <a
+                        id="pills-location-tab"
+                        class="nav-link active"
+                        data-bs-toggle="pill"
+                        :href="'#' + locationBody"
+                        role="tab"
+                        :aria-controls="locationBody"
+                        aria-selected="true"
+                        @click="tabClicked()"
+                    >
                         Location
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-habitat-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + habitatBody"
-                        role="tab" aria-selected="false" @click="tabClicked()">
+                    <a
+                        id="pills-habitat-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + habitatBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Habitat
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-observation-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + observationBody"
-                        role="tab" aria-selected="false" @click="tabClicked()">
+                    <a
+                        id="pills-observation-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + observationBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Observation
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-documents-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + documentBody"
-                        role="tab" aria-selected="false" @click="tabClicked()">
+                    <a
+                        id="pills-documents-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + documentBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Documents
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-threats-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + threatBody" role="tab"
-                        aria-selected="false" @click="tabClicked()">
+                    <a
+                        id="pills-threats-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + threatBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Threats
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id="pills-related-items-tab" data-bs-toggle="pill" :href="'#' + relatedItemBody"
-                        role="tab" :aria-controls="relatedItemBody" aria-selected="false" @click="tabClicked()">
+                    <a
+                        id="pills-related-items-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + relatedItemBody"
+                        role="tab"
+                        :aria-controls="relatedItemBody"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Related Items
                     </a>
                 </li>
             </ul>
             <div id="pills-tabContent" class="tab-content">
-                <div :id="locationBody" class="tab-pane fade show active" role="tabpanel"
-                    aria-labelledby="pills-location-tab">
-                    <OCCLocations id="occLocation" :key="reloadcount" ref="occ_location" :is-external="is_external"
-                        :is-internal="is_internal" :can-edit-status="canEditStatus" :occurrence_obj="occurrence_obj"
-                        :referral="referral" @refreshFromResponse="refreshFromResponse">
+                <div
+                    :id="locationBody"
+                    class="tab-pane fade show active"
+                    role="tabpanel"
+                    aria-labelledby="pills-location-tab"
+                >
+                    <OCCLocations
+                        id="occLocation"
+                        :key="reloadcount"
+                        ref="occ_location"
+                        :is-external="is_external"
+                        :is-internal="is_internal"
+                        :can-edit-status="canEditStatus"
+                        :occurrence_obj="occurrence_obj"
+                        :referral="referral"
+                        @refresh-from-response="refreshFromResponse"
+                    >
                     </OCCLocations>
                 </div>
-                <div :id="habitatBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-habitat-tab">
-                    <OCCHabitat id="occhabitat" :key="reloadcount" ref="occ_habitat" :is_internal="is_internal"
-                        :occurrence_obj="occurrence_obj">
+                <div
+                    :id="habitatBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-habitat-tab"
+                >
+                    <OCCHabitat
+                        id="occhabitat"
+                        :key="reloadcount"
+                        ref="occ_habitat"
+                        :is_internal="is_internal"
+                        :occurrence_obj="occurrence_obj"
+                    >
                     </OCCHabitat>
                 </div>
-                <div :id="observationBody" class="tab-pane fade" role="tabpanel"
-                    aria-labelledby="pills-observation-tab">
-                    <OCCObservation id="occObservation" :key="reloadcount" ref="occ_observation"
-                        :is_internal="is_internal" :occurrence_obj="occurrence_obj">
+                <div
+                    :id="observationBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-observation-tab"
+                >
+                    <OCCObservation
+                        id="occObservation"
+                        :key="reloadcount"
+                        ref="occ_observation"
+                        :is_internal="is_internal"
+                        :occurrence_obj="occurrence_obj"
+                    >
                     </OCCObservation>
                 </div>
-                <div :id="documentBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-documents-tab">
-                    <OCCDocuments id="occDocuments" :key="reloadcount" ref="occ_documents" :is_internal="is_internal"
-                        :is_external="is_external" :occurrence_obj="occurrence_obj">
+                <div
+                    :id="documentBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-documents-tab"
+                >
+                    <OCCDocuments
+                        id="occDocuments"
+                        :key="reloadcount"
+                        ref="occ_documents"
+                        :is_internal="is_internal"
+                        :is_external="is_external"
+                        :occurrence_obj="occurrence_obj"
+                    >
                     </OCCDocuments>
                 </div>
-                <div :id="threatBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-threats-tab">
-                    <OCCThreats id="occThreats" :key="reloadcount" ref="occ_threats" :is_internal="is_internal"
-                        :occurrence_obj="occurrence_obj">
+                <div
+                    :id="threatBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-threats-tab"
+                >
+                    <OCCThreats
+                        id="occThreats"
+                        :key="reloadcount"
+                        ref="occ_threats"
+                        :is_internal="is_internal"
+                        :occurrence_obj="occurrence_obj"
+                    >
                     </OCCThreats>
                 </div>
-                <div :id="reportBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-report-tab">
-                </div>
-                <div :id="sitesBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-sites-tab">
-                </div>
-                <div :id="relatedItemBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-sites-tab">
-                    <RelatedItems :key="reloadcount" ref="occurrence_related_items" id="occurrenceRelatedItems"
-                        :ajax_url="related_items_ajax_url" :filter_list_url="related_items_filter_list_url">
+                <div
+                    :id="reportBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-report-tab"
+                ></div>
+                <div
+                    :id="sitesBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-sites-tab"
+                ></div>
+                <div
+                    :id="relatedItemBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-sites-tab"
+                >
+                    <RelatedItems
+                        id="occurrenceRelatedItems"
+                        :key="reloadcount"
+                        ref="occurrence_related_items"
+                        :ajax_url="related_items_ajax_url"
+                        :filter_list_url="related_items_filter_list_url"
+                    >
                     </RelatedItems>
                 </div>
             </div>
@@ -93,11 +216,11 @@
 import OCCLocations from '@/components/common/occurrence/occ_locations.vue';
 import OCCHabitat from '@/components/common/occurrence/occ_habitat.vue';
 import OCCObservation from '@/components/common/occurrence/occ_observation.vue';
-import RelatedItems from '@/components/common/table_related_items.vue'
+import RelatedItems from '@/components/common/table_related_items.vue';
 import OCCDocuments from '@/components/common/occurrence/occ_documents.vue';
 import OCCThreats from '@/components/common/occurrence/occ_threats.vue';
-import SpeciesOccurrence from '@/components/common/occurrence/species_occurrence.vue'
-import CommunityOccurrence from '@/components/common/occurrence/community_occurrence.vue'
+import SpeciesOccurrence from '@/components/common/occurrence/species_occurrence.vue';
+import CommunityOccurrence from '@/components/common/occurrence/community_occurrence.vue';
 
 export default {
     components: {
@@ -151,10 +274,14 @@ export default {
     },
     computed: {
         isCommunity: function () {
-            return this.occurrence_obj.group_type == "community"
+            return this.occurrence_obj.group_type == 'community';
         },
         related_items_ajax_url: function () {
-            return '/api/occurrence/' + this.occurrence_obj.id + '/get_related_items/';
+            return (
+                '/api/occurrence/' +
+                this.occurrence_obj.id +
+                '/get_related_items/'
+            );
         },
         related_items_filter_list_url: function () {
             return '/api/occurrence/filter_list.json';
@@ -201,20 +328,20 @@ export default {
     margin-bottom: 2px;
 }
 
-.nav-item>li>a {
+.nav-item > li > a {
     background-color: yellow !important;
     color: #fff;
 }
 
-.nav-item>li.active>a,
-.nav-item>li.active>a:hover,
-.nav-item>li.active>a:focus {
+.nav-item > li.active > a,
+.nav-item > li.active > a:hover,
+.nav-item > li.active > a:focus {
     color: white;
     background-color: blue;
     border: 1px solid #888888;
 }
 
-.admin>div {
+.admin > div {
     display: inline-block;
     vertical-align: top;
     margin-right: 1em;
diff --git a/boranga/frontend/boranga/src/components/form_occurrence_report.vue b/boranga/frontend/boranga/src/components/form_occurrence_report.vue
index 52317106..40971779 100644
--- a/boranga/frontend/boranga/src/components/form_occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/form_occurrence_report.vue
@@ -1,78 +1,187 @@
 <template lang="html">
     <div>
-        <div class="" :id="occurrenceReportBody">
-            <OCRProfile ref="ocr_profile" id="ocrProfile" :is_external="is_external" :referral="referral"
-                :show_observer_contact_information="show_observer_contact_information"
-                :occurrence_report_obj="occurrence_report_obj" @refreshOccurrenceReport="refreshOccurrenceReport()" @saveOccurrenceReport="saveOccurrenceReport()">
+        <div :id="occurrenceReportBody" class="">
+            <OCRProfile
+                id="ocrProfile"
+                ref="ocr_profile"
+                :is_external="is_external"
+                :referral="referral"
+                :show_observer_contact_information="
+                    show_observer_contact_information
+                "
+                :occurrence_report_obj="occurrence_report_obj"
+                @refresh-occurrence-report="refreshOccurrenceReport()"
+                @save-occurrence-report="saveOccurrenceReport()"
+            >
             </OCRProfile>
-            <SubmitterInformation v-if="occurrence_report_obj.submitter_information" :key="reloadcount"
-                ref="submitter_information" id="submitter_information"
+            <SubmitterInformation
+                v-if="occurrence_report_obj.submitter_information"
+                id="submitter_information"
+                :key="reloadcount"
+                ref="submitter_information"
                 :show_submitter_contact_details="show_submitter_contact_details"
-                :submitter_information="occurrence_report_obj.submitter_information"
-                :disabled="!(occurrence_report_obj.can_user_edit && occurrence_report_obj.is_submitter) || referral" />
+                :submitter_information="
+                    occurrence_report_obj.submitter_information
+                "
+                :disabled="
+                    !(
+                        occurrence_report_obj.can_user_edit &&
+                        occurrence_report_obj.is_submitter
+                    ) || referral
+                "
+            />
         </div>
         <div class="col-md-12">
             <ul id="pills-tab" class="nav nav-pills" role="tablist">
                 <li class="nav-item">
-                    <a id="pills-location-tab" class="nav-link active" data-bs-toggle="pill" :href="'#' + locationBody"
-                        role="tab" :aria-controls="locationBody" aria-selected="true" @click="tabClicked('location')">
+                    <a
+                        id="pills-location-tab"
+                        class="nav-link active"
+                        data-bs-toggle="pill"
+                        :href="'#' + locationBody"
+                        role="tab"
+                        :aria-controls="locationBody"
+                        aria-selected="true"
+                        @click="tabClicked('location')"
+                    >
                         Location
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-habitat-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + habitatBody"
-                        role="tab" aria-selected="false" @click="tabClicked('habitat')">
+                    <a
+                        id="pills-habitat-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + habitatBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked('habitat')"
+                    >
                         Habitat
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-observation-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + observationBody"
-                        role="tab" aria-selected="false" @click="tabClicked('observation')">
+                    <a
+                        id="pills-observation-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + observationBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked('observation')"
+                    >
                         Observation
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-documents-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + documentBody"
-                        role="tab" aria-selected="false" @click="tabClicked('documents')">
+                    <a
+                        id="pills-documents-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + documentBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked('documents')"
+                    >
                         Documents
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a id="pills-threats-tab" class="nav-link" data-bs-toggle="pill" :href="'#' + threatBody" role="tab"
-                        aria-selected="false" @click="tabClicked('threats')">
+                    <a
+                        id="pills-threats-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + threatBody"
+                        role="tab"
+                        aria-selected="false"
+                        @click="tabClicked('threats')"
+                    >
                         Threats
                     </a>
                 </li>
             </ul>
             <div id="pills-tabContent" class="tab-content">
-                <div :id="locationBody" class="tab-pane fade show active" role="tabpanel"
-                    aria-labelledby="pills-location-tab">
-                    <OCRLocation id="ocrLocation" :key="reloadcount" ref="ocr_location" :is_external="is_external"
-                        :is_internal="is_internal" :can-edit-status="canEditStatus"
-                        :occurrence_report_obj="occurrence_report_obj" :referral="referral"
-                        @refreshFromResponse="refreshFromResponse">
+                <div
+                    :id="locationBody"
+                    class="tab-pane fade show active"
+                    role="tabpanel"
+                    aria-labelledby="pills-location-tab"
+                >
+                    <OCRLocation
+                        id="ocrLocation"
+                        :key="reloadcount"
+                        ref="ocr_location"
+                        :is_external="is_external"
+                        :is_internal="is_internal"
+                        :can-edit-status="canEditStatus"
+                        :occurrence_report_obj="occurrence_report_obj"
+                        :referral="referral"
+                        @refresh-from-response="refreshFromResponse"
+                    >
                     </OCRLocation>
                 </div>
-                <div :id="habitatBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-habitat-tab">
-                    <OCRHabitat id="ocrhabitat" :key="reloadcount" ref="ocr_habitat" :is_internal="is_internal"
-                        :is_external="is_external" :occurrence_report_obj="occurrence_report_obj">
+                <div
+                    :id="habitatBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-habitat-tab"
+                >
+                    <OCRHabitat
+                        id="ocrhabitat"
+                        :key="reloadcount"
+                        ref="ocr_habitat"
+                        :is_internal="is_internal"
+                        :is_external="is_external"
+                        :occurrence_report_obj="occurrence_report_obj"
+                    >
                     </OCRHabitat>
                 </div>
-                <div :id="observationBody" class="tab-pane fade" role="tabpanel"
-                    aria-labelledby="pills-observation-tab">
-                    <OCRObservation id="ocrObservation" :key="reloadcount" ref="ocr_observation"
-                        :is_internal="is_internal" :is_external="is_external"
-                        :occurrence_report_obj="occurrence_report_obj">
+                <div
+                    :id="observationBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-observation-tab"
+                >
+                    <OCRObservation
+                        id="ocrObservation"
+                        :key="reloadcount"
+                        ref="ocr_observation"
+                        :is_internal="is_internal"
+                        :is_external="is_external"
+                        :occurrence_report_obj="occurrence_report_obj"
+                    >
                     </OCRObservation>
                 </div>
-                <div :id="documentBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-documents-tab">
-                    <OCRDocuments id="ocrDocuments" :key="reloadcount" ref="ocr_documents" :is_internal="is_internal"
-                        :is_external="is_external" :occurrence_report_obj="occurrence_report_obj">
+                <div
+                    :id="documentBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-documents-tab"
+                >
+                    <OCRDocuments
+                        id="ocrDocuments"
+                        :key="reloadcount"
+                        ref="ocr_documents"
+                        :is_internal="is_internal"
+                        :is_external="is_external"
+                        :occurrence_report_obj="occurrence_report_obj"
+                    >
                     </OCRDocuments>
                 </div>
-                <div :id="threatBody" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-threats-tab">
-                    <OCRThreats id="ocrThreats" :key="reloadcount" ref="ocr_threats" :is_internal="is_internal"
-                        :is_external="is_external" :occurrence_report_obj="occurrence_report_obj">
+                <div
+                    :id="threatBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-threats-tab"
+                >
+                    <OCRThreats
+                        id="ocrThreats"
+                        :key="reloadcount"
+                        ref="ocr_threats"
+                        :is_internal="is_internal"
+                        :is_external="is_external"
+                        :occurrence_report_obj="occurrence_report_obj"
+                    >
                     </OCRThreats>
                 </div>
             </div>
@@ -84,7 +193,7 @@
 import OCRLocation from '@/components/common/occurrence/ocr_location.vue';
 import OCRHabitat from '@/components/common/occurrence/ocr_habitat.vue';
 import OCRObservation from '@/components/common/occurrence/ocr_observation.vue';
-import SubmitterInformation from '@/components/common/submitter_information.vue'
+import SubmitterInformation from '@/components/common/submitter_information.vue';
 import OCRDocuments from '@/components/common/occurrence/ocr_documents.vue';
 import OCRThreats from '@/components/common/occurrence/ocr_threats.vue';
 import OCRProfile from '@/components/common/occurrence/occurrence_report_profile.vue';
@@ -125,7 +234,11 @@ export default {
             default: true,
         },
     },
-    emits: ['refreshFromResponse', 'refreshOccurrenceReport', 'saveOccurrenceReport'],
+    emits: [
+        'refreshFromResponse',
+        'refreshOccurrenceReport',
+        'saveOccurrenceReport',
+    ],
     data: function () {
         let vm = this;
         return {
@@ -143,7 +256,7 @@ export default {
     },
     computed: {
         show_submitter_contact_details: function () {
-            return 'OccurrenceReportReferral' != this.$parent.$options.name
+            return 'OccurrenceReportReferral' != this.$parent.$options.name;
         },
         related_items_ajax_url: function () {
             return (
@@ -170,9 +283,7 @@ export default {
         });
     },
     methods: {
-        tabClicked: function (param) {
-
-        },
+        tabClicked: function (param) {},
         refreshFromResponse: function () {
             this.$emit('refreshFromResponse');
         },
@@ -204,20 +315,20 @@ export default {
     margin-bottom: 2px;
 }
 
-.nav-item>li>a {
+.nav-item > li > a {
     background-color: yellow !important;
     color: #fff;
 }
 
-.nav-item>li.active>a,
-.nav-item>li.active>a:hover,
-.nav-item>li.active>a:focus {
+.nav-item > li.active > a,
+.nav-item > li.active > a:hover,
+.nav-item > li.active > a:focus {
     color: white;
     background-color: blue;
     border: 1px solid #888888;
 }
 
-.admin>div {
+.admin > div {
     display: inline-block;
     vertical-align: top;
     margin-right: 1em;
diff --git a/boranga/frontend/boranga/src/components/form_species_combine.vue b/boranga/frontend/boranga/src/components/form_species_combine.vue
index c2780cf2..f5db4234 100644
--- a/boranga/frontend/boranga/src/components/form_species_combine.vue
+++ b/boranga/frontend/boranga/src/components/form_species_combine.vue
@@ -1,195 +1,227 @@
 <template lang="html">
     <div>
         <div class="col-md-12">
-
-            <ul v-if="is_internal" class="nav nav-pills" id="pills-tab" role="tablist">
-              <li class="nav-item">
-                <a
-                    class="nav-link active"
-                    id="pills-profile-tab"
-                    data-bs-toggle="pill"
-                    :href="'#' + profileBody"
-                    role="tab"
-                    :aria-controls="profileBody"
-                    aria-selected="true">
-                  Profile
-                </a>
-              </li>
-              <li class="nav-item">
-                <a
-                    class="nav-link"
-                    id="pills-documents-tab"
-                    data-bs-toggle="pill"
-                    :href="'#' + documentBody"
-                    role="tab"
-                    aria-controls="pills-documents"
-                    :aria-selected="documentBody"
-                    @click="tabClicked()">
-                  Documents
-                </a>
-              </li>
-              <li class="nav-item">
-                <a
-                    class="nav-link"
-                    id="pills-threats-tab"
-                    data-bs-toggle="pill"
-                    :href="'#' + threatBody "
-                    role="tab"
-                    :aria-controls="threatBody"
-                    aria-selected="false"
-                    @click="tabClicked()">
-                  Threats
-                </a>
-              </li>
+            <ul
+                v-if="is_internal"
+                id="pills-tab"
+                class="nav nav-pills"
+                role="tablist"
+            >
+                <li class="nav-item">
+                    <a
+                        id="pills-profile-tab"
+                        class="nav-link active"
+                        data-bs-toggle="pill"
+                        :href="'#' + profileBody"
+                        role="tab"
+                        :aria-controls="profileBody"
+                        aria-selected="true"
+                    >
+                        Profile
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a
+                        id="pills-documents-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + documentBody"
+                        role="tab"
+                        aria-controls="pills-documents"
+                        :aria-selected="documentBody"
+                        @click="tabClicked()"
+                    >
+                        Documents
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a
+                        id="pills-threats-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + threatBody"
+                        role="tab"
+                        :aria-controls="threatBody"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
+                        Threats
+                    </a>
+                </li>
             </ul>
-            <div class="tab-content" id="pills-tabContent">
-              <div class="tab-pane fade show active" :id="profileBody" role="tabpanel" aria-labelledby="pills-profile-tab">
-                <SpeciesProfile
-                    ref="species_information"
-                    id="speciesInformation"
-                    :is_internal="is_internal"
-                    :species_community="species_community"
-                    :original_species_combine_list="original_species_combine_list">
-                </SpeciesProfile>
-              </div>
-              <div class="tab-pane fade" :id="documentBody" role="tabpanel" aria-labelledby="pills-documents-tab">
-                <div v-for="species in original_species_combine_list">
-                    <SpeciesDocuments
-                        :key="reloadcount"
-                        ref="species_documents"
-                        id="speciesDocuments"
+            <div id="pills-tabContent" class="tab-content">
+                <div
+                    :id="profileBody"
+                    class="tab-pane fade show active"
+                    role="tabpanel"
+                    aria-labelledby="pills-profile-tab"
+                >
+                    <SpeciesProfile
+                        id="speciesInformation"
+                        ref="species_information"
                         :is_internal="is_internal"
                         :species_community="species_community"
-                        :species_original="species">
-                    </SpeciesDocuments>
+                        :original_species_combine_list="
+                            original_species_combine_list
+                        "
+                    >
+                    </SpeciesProfile>
                 </div>
-              </div>
-              <div class="tab-pane fade" :id="threatBody" role="tabpanel" aria-labelledby="pills-threats-tab">
-                <div v-for="species in original_species_combine_list">
-                    <SpeciesThreats
-                        :key="reloadcount"
-                        ref="species_threats"
-                        id="speciesThreats"
-                        :is_internal="is_internal"
-                        :species_community="species_community"
-                        :species_original="species">
-                    </SpeciesThreats>
+                <div
+                    :id="documentBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-documents-tab"
+                >
+                    <div v-for="species in original_species_combine_list">
+                        <SpeciesDocuments
+                            id="speciesDocuments"
+                            :key="reloadcount"
+                            ref="species_documents"
+                            :is_internal="is_internal"
+                            :species_community="species_community"
+                            :species_original="species"
+                        >
+                        </SpeciesDocuments>
+                    </div>
+                </div>
+                <div
+                    :id="threatBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-threats-tab"
+                >
+                    <div v-for="species in original_species_combine_list">
+                        <SpeciesThreats
+                            id="speciesThreats"
+                            :key="reloadcount"
+                            ref="species_threats"
+                            :is_internal="is_internal"
+                            :species_community="species_community"
+                            :species_original="species"
+                        >
+                        </SpeciesThreats>
+                    </div>
                 </div>
-              </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import SpeciesProfile from '@/components/common/species_communities/species_combine/species_combine_profile.vue'
-    import SpeciesDocuments from '@/components/common/species_communities/species_combine/species_combine_documents.vue'
-    import SpeciesThreats from '@/components/common/species_communities/species_combine/species_combine_threats.vue'
+import SpeciesProfile from '@/components/common/species_communities/species_combine/species_combine_profile.vue';
+import SpeciesDocuments from '@/components/common/species_communities/species_combine/species_combine_documents.vue';
+import SpeciesThreats from '@/components/common/species_communities/species_combine/species_combine_threats.vue';
 
-    export default {
-        props:{
-            original_species_combine_list:{
-                type: Array,
-                required:true
-            },
-            species_community:{
-                type: Object,
-                required:true
-            },
-            is_external:{
-              type: Boolean,
-              default: false
-            },
-            is_internal:{
-              type: Boolean,
-              default: false
-            },
+export default {
+    components: {
+        SpeciesProfile,
+        SpeciesDocuments,
+        SpeciesThreats,
+    },
+    props: {
+        original_species_combine_list: {
+            type: Array,
+            required: true,
         },
-        data:function () {
-            let vm = this;
-            return{
-                profileBody: 'profileBody' + vm._uid,
-                documentBody: 'documentBody' + vm._uid,
-                threatBody: 'threatBody' + vm._uid,
-                values:null,
-                reloadcount:0,
-            }
+        species_community: {
+            type: Object,
+            required: true,
         },
-        components: {
-            SpeciesProfile,
-            SpeciesDocuments,
-            SpeciesThreats,
+        is_external: {
+            type: Boolean,
+            default: false,
         },
-        computed:{
-            related_items_ajax_url: function(){
-                return '/api/species/' + this.species_community.id + '/get_related_items/'
-            },
-            related_items_filter_list_url: function(){
-                return '/api/species/filter_list.json'
-            },
+        is_internal: {
+            type: Boolean,
+            default: false,
         },
-        methods:{
-            //----function to resolve datatable exceeding beyond the div
-            tabClicked: function(param){
-                this.reloadcount = this.reloadcount+1;
-            },
-            eventListener: function(){
-              let vm=this;
-            },
+    },
+    data: function () {
+        let vm = this;
+        return {
+            profileBody: 'profileBody' + vm._uid,
+            documentBody: 'documentBody' + vm._uid,
+            threatBody: 'threatBody' + vm._uid,
+            values: null,
+            reloadcount: 0,
+        };
+    },
+    computed: {
+        related_items_ajax_url: function () {
+            return (
+                '/api/species/' +
+                this.species_community.id +
+                '/get_related_items/'
+            );
         },
-        mounted: function() {
+        related_items_filter_list_url: function () {
+            return '/api/species/filter_list.json';
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        //vm.set_tabs();
+        vm.form = document.forms.new_species;
+        vm.eventListener();
+    },
+    methods: {
+        //----function to resolve datatable exceeding beyond the div
+        tabClicked: function (param) {
+            this.reloadcount = this.reloadcount + 1;
+        },
+        eventListener: function () {
             let vm = this;
-            //vm.set_tabs();
-            vm.form = document.forms.new_species;
-            vm.eventListener();
-        }
-
-    }
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
-    .section{
-        text-transform: capitalize;
-    }
-    .list-group{
-        margin-bottom: 0;
-    }
-    .fixed-top{
-        position: fixed;
-        top:56px;
-    }
+.section {
+    text-transform: capitalize;
+}
+.list-group {
+    margin-bottom: 0;
+}
+.fixed-top {
+    position: fixed;
+    top: 56px;
+}
 
-    .nav-item {
-        margin-bottom: 2px;
-    }
+.nav-item {
+    margin-bottom: 2px;
+}
 
-    .nav-item>li>a {
-        background-color: yellow !important;
-        color: #fff;
-    }
+.nav-item > li > a {
+    background-color: yellow !important;
+    color: #fff;
+}
 
-    .nav-item>li.active>a, .nav-item>li.active>a:hover, .nav-item>li.active>a:focus {
-      color: white;
-      background-color: blue;
-      border: 1px solid #888888;
-    }
+.nav-item > li.active > a,
+.nav-item > li.active > a:hover,
+.nav-item > li.active > a:focus {
+    color: white;
+    background-color: blue;
+    border: 1px solid #888888;
+}
 
-        .admin > div {
-          display: inline-block;
-          vertical-align: top;
-          margin-right: 1em;
-        }
-    .nav-pills .nav-link {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-top-left-radius: 0.5em;
-        border-top-right-radius: 0.5em;
-        margin-right: 0.25em;
-    }
-    .nav-pills .nav-link {
-        background: lightgray;
-    }
-    .nav-pills .nav-link.active {
-        background: gray;
-    }
+.admin > div {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 1em;
+}
+.nav-pills .nav-link {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    margin-right: 0.25em;
+}
+.nav-pills .nav-link {
+    background: lightgray;
+}
+.nav-pills .nav-link.active {
+    background: gray;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/form_species_communities.vue b/boranga/frontend/boranga/src/components/form_species_communities.vue
index b7cc2802..43d9c470 100755
--- a/boranga/frontend/boranga/src/components/form_species_communities.vue
+++ b/boranga/frontend/boranga/src/components/form_species_communities.vue
@@ -1,66 +1,168 @@
 <template lang="html">
     <div>
         <div class="col-md-12">
-            <ul class="nav nav-pills" id="pills-tab" role="tablist" v-if="is_internal || is_public">
+            <ul
+                v-if="is_internal || is_public"
+                id="pills-tab"
+                class="nav nav-pills"
+                role="tablist"
+            >
                 <li class="nav-item">
-                    <a class="nav-link active" id="pills-profile-tab" data-bs-toggle="pill" :href="'#' + profileBody"
-                        role="tab" :aria-controls="profileBody" aria-selected="true">
+                    <a
+                        id="pills-profile-tab"
+                        class="nav-link active"
+                        data-bs-toggle="pill"
+                        :href="'#' + profileBody"
+                        role="tab"
+                        :aria-controls="profileBody"
+                        aria-selected="true"
+                    >
                         Profile
                     </a>
                 </li>
-                <li class="nav-item" v-if="is_internal">
-                    <a class="nav-link" id="pills-documents-tab" data-bs-toggle="pill" :href="'#' + documentBody"
-                        role="tab" aria-controls="pills-documents" :aria-selected="documentBody" @click="tabClicked()">
+                <li v-if="is_internal" class="nav-item">
+                    <a
+                        id="pills-documents-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + documentBody"
+                        role="tab"
+                        aria-controls="pills-documents"
+                        :aria-selected="documentBody"
+                        @click="tabClicked()"
+                    >
                         Documents
                     </a>
                 </li>
-                <li class="nav-item" v-if="is_internal || threats_public">
-                    <a class="nav-link" id="pills-threats-tab" data-bs-toggle="pill" :href="'#' + threatBody"
-                        role="tab" :aria-controls="threatBody" aria-selected="false" @click="tabClicked()">
+                <li v-if="is_internal || threats_public" class="nav-item">
+                    <a
+                        id="pills-threats-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + threatBody"
+                        role="tab"
+                        :aria-controls="threatBody"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Threats
                     </a>
                 </li>
-                <li class="nav-item" v-if="is_internal">
-                    <a class="nav-link" id="pills-related-items-tab" data-bs-toggle="pill" :href="'#' + relatedItemBody"
-                        role="tab" :aria-controls="relatedItemBody" aria-selected="false" @click="tabClicked()">
+                <li v-if="is_internal" class="nav-item">
+                    <a
+                        id="pills-related-items-tab"
+                        class="nav-link"
+                        data-bs-toggle="pill"
+                        :href="'#' + relatedItemBody"
+                        role="tab"
+                        :aria-controls="relatedItemBody"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
                         Related Items
                     </a>
                 </li>
             </ul>
-            <div class="tab-content" id="pills-tabContent">
-                <div v-if="is_internal || is_public" class="tab-pane fade show active" :id="profileBody" role="tabpanel"
-                    aria-labelledby="pills-profile-tab">
-                    <Community v-if="isCommunity" ref="community_information" id="communityInformation"
-                        :is_internal="is_internal" :species_community="species_community" :species_community_original="species_community_original" :is_readonly="is_readonly">
+            <div id="pills-tabContent" class="tab-content">
+                <div
+                    v-if="is_internal || is_public"
+                    :id="profileBody"
+                    class="tab-pane fade show active"
+                    role="tabpanel"
+                    aria-labelledby="pills-profile-tab"
+                >
+                    <Community
+                        v-if="isCommunity"
+                        id="communityInformation"
+                        ref="community_information"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :species_community_original="species_community_original"
+                        :is_readonly="is_readonly"
+                    >
                     </Community>
-                    <Species v-else ref="species_information" id="speciesInformation" :is_internal="is_internal"
-                        :species_community="species_community" :species_community_original="species_community_original" :is_readonly="is_readonly"
-                        :rename_species="rename_species">
+                    <Species
+                        v-else
+                        id="speciesInformation"
+                        ref="species_information"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :species_community_original="species_community_original"
+                        :is_readonly="is_readonly"
+                        :rename_species="rename_species"
+                    >
                     </Species>
                 </div>
-                <div v-if="is_internal" class="tab-pane fade" :id="documentBody" role="tabpanel" aria-labelledby="pills-documents-tab">
-                    <CommunityDocuments v-if="isCommunity" :key="reloadcount" ref="community_documents"
-                        id="communityDocuments" :is_internal="is_internal" :species_community="species_community"
-                        :is_readonly="is_readonly">
+                <div
+                    v-if="is_internal"
+                    :id="documentBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-documents-tab"
+                >
+                    <CommunityDocuments
+                        v-if="isCommunity"
+                        id="communityDocuments"
+                        :key="reloadcount"
+                        ref="community_documents"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :is_readonly="is_readonly"
+                    >
                     </CommunityDocuments>
-                    <SpeciesDocuments v-else :key="`${reloadcount}-else`" ref="species_documents" id="speciesDocuments"
-                        :is_internal="is_internal" :species_community="species_community" :is_readonly="is_readonly">
+                    <SpeciesDocuments
+                        v-else
+                        id="speciesDocuments"
+                        :key="`${reloadcount}-else`"
+                        ref="species_documents"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :is_readonly="is_readonly"
+                    >
                     </SpeciesDocuments>
                 </div>
-                <div v-if="is_internal || threats_public" class="tab-pane fade" :id="threatBody" role="tabpanel" aria-labelledby="pills-threats-tab">
-                    <CommunityThreats v-if="isCommunity" :key="reloadcount" ref="community_threats"
-                        id="communityThreats" :is_internal="is_internal" :species_community="species_community"
-                        :is_readonly="is_readonly">
+                <div
+                    v-if="is_internal || threats_public"
+                    :id="threatBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-threats-tab"
+                >
+                    <CommunityThreats
+                        v-if="isCommunity"
+                        id="communityThreats"
+                        :key="reloadcount"
+                        ref="community_threats"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :is_readonly="is_readonly"
+                    >
                     </CommunityThreats>
-                    <SpeciesThreats v-else :key="`${reloadcount}-else`" ref="species_threats" id="speciesThreats"
-                        :is_internal="is_internal" :species_community="species_community" :is_readonly="is_readonly">
+                    <SpeciesThreats
+                        v-else
+                        id="speciesThreats"
+                        :key="`${reloadcount}-else`"
+                        ref="species_threats"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :is_readonly="is_readonly"
+                    >
                     </SpeciesThreats>
                 </div>
-                <div v-if="is_internal" class="tab-pane fade" :id="relatedItemBody" role="tabpanel"
-                    aria-labelledby="pills-related-items-tab">
-                    <RelatedItems :key="reloadcount" ref="species_communities_related_items"
-                        id="speciesCommunitiesRelatedItems" :ajax_url="related_items_ajax_url"
-                        :filter_list_url="related_items_filter_list_url">
+                <div
+                    v-if="is_internal"
+                    :id="relatedItemBody"
+                    class="tab-pane fade"
+                    role="tabpanel"
+                    aria-labelledby="pills-related-items-tab"
+                >
+                    <RelatedItems
+                        id="speciesCommunitiesRelatedItems"
+                        :key="reloadcount"
+                        ref="species_communities_related_items"
+                        :ajax_url="related_items_ajax_url"
+                        :filter_list_url="related_items_filter_list_url"
+                    >
                     </RelatedItems>
                 </div>
             </div>
@@ -69,39 +171,48 @@
 </template>
 
 <script>
-import Species from '@/components/common/species_communities/species_profile.vue'
-import Community from '@/components/common/species_communities/community_profile.vue'
-import SpeciesDocuments from '@/components/common/species_communities/species_documents.vue'
-import CommunityDocuments from '@/components/common/species_communities/community_documents.vue'
-import SpeciesThreats from '@/components/common/species_communities/species_threats.vue'
-import CommunityThreats from '@/components/common/species_communities/community_threats.vue'
-import RelatedItems from '@/components/common/table_related_items.vue'
+import Species from '@/components/common/species_communities/species_profile.vue';
+import Community from '@/components/common/species_communities/community_profile.vue';
+import SpeciesDocuments from '@/components/common/species_communities/species_documents.vue';
+import CommunityDocuments from '@/components/common/species_communities/community_documents.vue';
+import SpeciesThreats from '@/components/common/species_communities/species_threats.vue';
+import CommunityThreats from '@/components/common/species_communities/community_threats.vue';
+import RelatedItems from '@/components/common/table_related_items.vue';
 
 export default {
+    components: {
+        Species,
+        Community,
+        SpeciesDocuments,
+        CommunityDocuments,
+        SpeciesThreats,
+        CommunityThreats,
+        RelatedItems,
+    },
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         species_community_original: {
             type: Object,
-            required: true
+            required: true,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         rename_species: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -113,65 +224,65 @@ export default {
             relatedItemBody: 'relatedItemBody' + vm._uid,
             values: null,
             reloadcount: 0,
-        }
-    },
-    components: {
-        Species,
-        Community,
-        SpeciesDocuments,
-        CommunityDocuments,
-        SpeciesThreats,
-        CommunityThreats,
-        RelatedItems,
+        };
     },
     computed: {
         isCommunity: function () {
-            return this.species_community.group_type == "community";
+            return this.species_community.group_type == 'community';
         },
-        is_public: function() {
+        is_public: function () {
             if (this.isCommunity) {
-                return this.species_community.publishing_status.community_public
+                return this.species_community.publishing_status
+                    .community_public;
             }
-            return this.species_community.publishing_status.species_public
-
+            return this.species_community.publishing_status.species_public;
         },
-        threats_public: function() {
+        threats_public: function () {
             if (this.isCommunity) {
-                return this.species_community.publishing_status.threats_public
+                return this.species_community.publishing_status.threats_public;
             }
-            return this.is_public && this.species_community.publishing_status.threats_public
+            return (
+                this.is_public &&
+                this.species_community.publishing_status.threats_public
+            );
         },
         related_items_ajax_url: function () {
             if (this.isCommunity) {
-                return '/api/community/' + this.species_community.id + '/get_related_items/';
-            }
-            else {
-                return '/api/species/' + this.species_community.id + '/get_related_items/';
+                return (
+                    '/api/community/' +
+                    this.species_community.id +
+                    '/get_related_items/'
+                );
+            } else {
+                return (
+                    '/api/species/' +
+                    this.species_community.id +
+                    '/get_related_items/'
+                );
             }
         },
         related_items_filter_list_url: function () {
             if (this.isCommunity) {
                 return '/api/community/filter_list.json';
-            }
-            else {
+            } else {
                 return '/api/species/filter_list.json';
             }
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.new_species;
+    },
     methods: {
         tabClicked: function (param) {
             this.reloadcount = this.reloadcount + 1;
         },
-        refreshSpeciesCommunity: function() {
+        refreshSpeciesCommunity: function () {
             let vm = this;
             vm.$parent.refreshSpeciesCommunity();
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.new_species;
-    }
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -192,20 +303,20 @@ export default {
     margin-bottom: 2px;
 }
 
-.nav-item>li>a {
+.nav-item > li > a {
     background-color: yellow !important;
     color: #fff;
 }
 
-.nav-item>li.active>a,
-.nav-item>li.active>a:hover,
-.nav-item>li.active>a:focus {
+.nav-item > li.active > a,
+.nav-item > li.active > a:hover,
+.nav-item > li.active > a:focus {
     color: white;
     background-color: blue;
     border: 1px solid #888888;
 }
 
-.admin>div {
+.admin > div {
     display: inline-block;
     vertical-align: top;
     margin-right: 1em;
diff --git a/boranga/frontend/boranga/src/components/form_species_split.vue b/boranga/frontend/boranga/src/components/form_species_split.vue
index 551bf2f5..3b3f8714 100644
--- a/boranga/frontend/boranga/src/components/form_species_split.vue
+++ b/boranga/frontend/boranga/src/components/form_species_split.vue
@@ -1,87 +1,118 @@
 <template lang="html">
     <div>
         <div class="col-md-12">
-            <ul v-if="is_internal" class="nav nav-pills" id="pills-tab" role="tablist">
-              <li class="nav-item">
-                <a
-                    class="nav-link active"
-                    id="pills-profile-tab"
-                    data-bs-toggle="pill"
-                    :href="'#' + profileBody"
-                    role="tab"
-                    :aria-controls="profileBody"
-                    aria-selected="true">
-                  Profile
-                </a>
-              </li>
-              <li class="nav-item">
-                <a
+            <ul
+                v-if="is_internal"
+                class="nav nav-pills"
+                id="pills-tab"
+                role="tablist"
+            >
+                <li class="nav-item">
+                    <a
+                        class="nav-link active"
+                        id="pills-profile-tab"
+                        data-bs-toggle="pill"
+                        :href="'#' + profileBody"
+                        role="tab"
+                        :aria-controls="profileBody"
+                        aria-selected="true"
+                    >
+                        Profile
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a
+                        class="nav-link"
+                        id="pills-documents-tab"
+                        data-bs-toggle="pill"
+                        :href="'#' + documentBody"
+                        role="tab"
+                        aria-controls="pills-documents"
+                        :aria-selected="documentBody"
+                        @click="tabClicked()"
+                    >
+                        Documents
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a
+                        id="pills-threats-tab"
                     class="nav-link"
-                    id="pills-documents-tab"
-                    data-bs-toggle="pill"
-                    :href="'#' + documentBody"
-                    role="tab"
-                    aria-controls="pills-documents"
-                    :aria-selected="documentBody"
-                    @click="tabClicked()">
-                  Documents
-                </a>
-              </li>
-              <li class="nav-item">
-                <a
-                    class="nav-link"
-                    id="pills-threats-tab"
-                    data-bs-toggle="pill"
-                    :href="'#' + threatBody "
-                    role="tab"
-                    :aria-controls="threatBody"
-                    aria-selected="false"
-                    @click="tabClicked()">
-                  Threats
-                </a>
-              </li>
+                        data-bs-toggle="pill"
+                        :href="'#' + threatBody"
+                        role="tab"
+                        :aria-controls="threatBody"
+                        aria-selected="false"
+                        @click="tabClicked()"
+                    >
+                        Threats
+                    </a>
+                </li>
             </ul>
-            <div class="tab-content" id="pills-tabContent">
-              <div class="tab-pane fade show active" :id="profileBody" role="tabpanel" aria-labelledby="pills-profile-tab">
-                <SpeciesProfile
-                    ref="species_information"
-                    id="speciesInformation"
-                    :is_internal="is_internal"
-                    :species_community="species_community"
-                    :species_original="species_original">
-                </SpeciesProfile>
-              </div>
-              <div class="tab-pane fade" :id="documentBody" role="tabpanel" aria-labelledby="pills-documents-tab">
-                <SpeciesDocuments
-                    :key="reloadcount"
+            <div id="pills-tabContent" class="tab-content">
+                <div
+                    class="tab-pane fade show active"
+                    :id="profileBody"
+                    role="tabpanel"
+                    aria-labelledby="pills-profile-tab"
+                >
+                    <SpeciesProfile
+                        ref="species_information"
+                        id="speciesInformation"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :species_original="species_original"
+                    >
+                    </SpeciesProfile>
+                </div>
+                <div
+                    class="tab-pane fade"
+                    :id="documentBody"
+                    role="tabpanel"
+                    aria-labelledby="pills-documents-tab"
+                >
+                    <SpeciesDocuments
+                        :key="reloadcount"
+                        id="speciesDocuments"
                     ref="species_documents"
-                    id="speciesDocuments"
-                    :is_internal="is_internal"
-                    :species_community="species_community"
-                    :species_original="species_original">
-                </SpeciesDocuments>
-              </div>
-              <div class="tab-pane fade" :id="threatBody" role="tabpanel" aria-labelledby="pills-threats-tab">
-                <SpeciesThreats
-                    :key="reloadcount"
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :species_original="species_original"
+                    >
+                    </SpeciesDocuments>
+                </div>
+                <div
+                    class="tab-pane fade"
+                    :id="threatBody"
+                    role="tabpanel"
+                    aria-labelledby="pills-threats-tab"
+                >
+                    <SpeciesThreats
+                        :key="reloadcount"
+                        id="speciesThreats"
                     ref="species_threats"
-                    id="speciesThreats"
-                    :is_internal="is_internal"
-                    :species_community="species_community"
-                    :species_original="species_original">
-                </SpeciesThreats>
-              </div>
+                        :is_internal="is_internal"
+                        :species_community="species_community"
+                        :species_original="species_original"
+                    >
+                    </SpeciesThreats>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import SpeciesProfile from '@/components/common/species_communities/species_split/species_split_profile.vue'
-    import SpeciesDocuments from '@/components/common/species_communities/species_split/species_split_documents.vue'
-    import SpeciesThreats from '@/components/common/species_communities/species_split/species_split_threats.vue'
+import SpeciesProfile from '@/components/common/species_communities/species_split/species_split_profile.vue';
+import SpeciesDocuments from '@/components/common/species_communities/species_split/species_split_documents.vue';
+import SpeciesThreats from '@/components/common/species_communities/species_split/species_split_threats.vue';
 
-    export default {
+export default {
+        components: {
+            SpeciesProfile,
+            SpeciesDocuments,
+            SpeciesThreats,
+        },
         props:{
             species_original:{
                 type: Object,
@@ -113,28 +144,26 @@
                 threat_selection:null,
             }
         },
-        components: {
-            SpeciesProfile,
-            SpeciesDocuments,
-            SpeciesThreats,
+    computed: {
+        related_items_ajax_url: function () {
+            return (
+                '/api/species/' +
+                this.species_community.id +
+                '/get_related_items/'
+            );
         },
-        computed:{
-            related_items_ajax_url: function(){
-                return '/api/species/' + this.species_community.id + '/get_related_items/'
-            },
-            related_items_filter_list_url: function(){
-                return '/api/species/filter_list.json'
-            },
+        related_items_filter_list_url: function () {
+            return '/api/species/filter_list.json';
+        },
+        mounted: function() {
+            let vm = this;
+            vm.form = document.forms.new_species;
         },
         methods:{
             //----function to resolve datatable exceeding beyond the div
             tabClicked: function(param){
                 this.reloadcount = this.reloadcount+1;
             },
-        },
-        mounted: function() {
-            let vm = this;
-            vm.form = document.forms.new_species;
         }
-    }
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/forms/checkbox.vue b/boranga/frontend/boranga/src/components/forms/checkbox.vue
index 52d1a461..c360524f 100755
--- a/boranga/frontend/boranga/src/components/forms/checkbox.vue
+++ b/boranga/frontend/boranga/src/components/forms/checkbox.vue
@@ -3,13 +3,24 @@
         <div class="form-group">
             <div class="checkbox">
                 <label :id="id"></label>
-                <input :onclick="isClickable" ref="Checkbox" :name="name" type="checkbox" :class="group" data-parsley-required :data-conditions="options" @change="handleChange" :checked="isChecked" :required="isRequired"/>
+                <input
+                    ref="Checkbox"
+                    :onclick="isClickable"
+                    :name="name"
+                    type="checkbox"
+                    :class="group"
+                    data-parsley-required
+                    :data-conditions="options"
+                    :checked="isChecked"
+                    :required="isRequired"
+                    @change="handleChange"
+                />
                 {{ label }}
                 <template v-if="help_text">
-                  <HelpText :help_text="help_text" />
+                    <HelpText :help_text="help_text" />
                 </template>
                 <template v-if="help_text_url">
-                  <HelpTextUrl :help_text_url="help_text_url" />
+                    <HelpTextUrl :help_text_url="help_text_url" />
                 </template>
             </div>
         </div>
@@ -17,48 +28,60 @@
 </template>
 
 <script>
-import HelpText from './help_text.vue'
-import HelpTextUrl from './help_text_url.vue'
+import HelpText from './help_text.vue';
+import HelpTextUrl from './help_text_url.vue';
 export default {
-  props: ['name', 'label', 'value', 'group', 'id', 'help_text', 'help_text_url', 'conditions', "handleChange","readonly", "isRequired"],
-  components: {HelpText, HelpTextUrl},
-  data: function() {
-    let vm = this;
-    if(vm.readonly) {
-      return { isClickable: "return false;" }
-    } else {
-      return { isClickable: "return true;" }
-    }
-  },
-  computed: {
-    isChecked: function() {
-      return (this.value == 'on');
+    components: { HelpText, HelpTextUrl },
+    props: [
+        'name',
+        'label',
+        'value',
+        'group',
+        'id',
+        'help_text',
+        'help_text_url',
+        'conditions',
+        'handleChange',
+        'readonly',
+        'isRequired',
+    ],
+    data: function () {
+        let vm = this;
+        if (vm.readonly) {
+            return { isClickable: 'return false;' };
+        } else {
+            return { isClickable: 'return true;' };
+        }
     },
-    options: function() {
-      return JSON.stringify(this.conditions);
-    }
-  },
-  mounted:function () {
-      let vm = this;
-      if (vm.isChecked) {
-          var input = this.$refs.Checkbox;
-          var e = document.createEvent('HTMLEvents');
-          e.initEvent('change', true, true);
+    computed: {
+        isChecked: function () {
+            return this.value == 'on';
+        },
+        options: function () {
+            return JSON.stringify(this.conditions);
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        if (vm.isChecked) {
+            var input = this.$refs.Checkbox;
+            var e = document.createEvent('HTMLEvents');
+            e.initEvent('change', true, true);
 
-          /* replacing input.disabled with onclick because disabled checkbox does NOT get posted with form on submit */
-          if(vm.readonly) {
-              vm.isClickable = "return false;";
-          } else {
-              vm.isClickable = "return true;";
-		  }
-          input.dispatchEvent(e);
-      }
-  }
-}
+            /* replacing input.disabled with onclick because disabled checkbox does NOT get posted with form on submit */
+            if (vm.readonly) {
+                vm.isClickable = 'return false;';
+            } else {
+                vm.isClickable = 'return true;';
+            }
+            input.dispatchEvent(e);
+        }
+    },
+};
 </script>
 
 <style lang="css">
-    input {
-        box-shadow:none;
-    }
+input {
+    box-shadow: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/collapsible_component.vue b/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
index 14766683..042309e0 100644
--- a/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
+++ b/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
@@ -1,19 +1,34 @@
 <template lang="html">
     <div class="toggle_filters_wrapper rounded mb-3">
-        <div data-bs-toggle="collapse" :data-bs-target="'#' + target_elem_id" :id="button_elem_id"
-            class="toggle_filters_button collapsed d-flex align-items-center" @click="toggle_filters_button_clicked">
+        <div
+            :id="button_elem_id"
+            data-bs-toggle="collapse"
+            :data-bs-target="'#' + target_elem_id"
+            class="toggle_filters_button collapsed d-flex align-items-center"
+            @click="toggle_filters_button_clicked"
+        >
             <div class="me-auto ps-1 title">{{ component_title }}</div>
             <div class="me-2">
-                <i :id="warning_icon_id" :title="warning_icon_title"
-                    class="fa-solid fa-exclamation-circle fa-2x filter_warning_icon"></i>
+                <i
+                    :id="warning_icon_id"
+                    :title="warning_icon_title"
+                    class="fa-solid fa-exclamation-circle fa-2x filter_warning_icon"
+                ></i>
             </div>
             <div class="me-2">
-                <i :id="chevron_elem_id" class="rotate_icon fa-solid fa-chevron-down"></i>
+                <i
+                    :id="chevron_elem_id"
+                    class="rotate_icon fa-solid fa-chevron-down"
+                ></i>
             </div>
         </div>
 
-        <div class="collapse border-top mt-1" :id="target_elem_id" :class="collapsed ? 'collapse' : 'collapse show'"
-            :aria-expanded="collapsed ? 'false' : 'true'">
+        <div
+            :id="target_elem_id"
+            class="collapse border-top mt-1"
+            :class="collapsed ? 'collapse' : 'collapse show'"
+            :aria-expanded="collapsed ? 'false' : 'true'"
+        >
             <slot></slot>
         </div>
     </div>
@@ -22,7 +37,7 @@
 <script>
 import { v4 as uuid } from 'uuid';
 export default {
-    name: "CollapsibleComponent",
+    name: 'CollapsibleComponent',
     props: {
         component_title: {
             type: String,
@@ -34,16 +49,6 @@ export default {
             default: true,
         },
     },
-    watch: {
-        filters_expanded: function () {
-            let chevron_icon = $('#' + this.chevron_elem_id)
-            if (this.filters_expanded) {
-                chevron_icon.addClass('chev_rotated')
-            } else {
-                chevron_icon.removeClass('chev_rotated')
-            }
-        }
-    },
     data: function () {
         return {
             target_elem_id: 'target_elem_' + uuid(),
@@ -53,31 +58,43 @@ export default {
             warning_icon_title: '',
             display_icon: false,
             filters_expanded: null,
-        }
+        };
+    },
+    watch: {
+        filters_expanded: function () {
+            let chevron_icon = $('#' + this.chevron_elem_id);
+            if (this.filters_expanded) {
+                chevron_icon.addClass('chev_rotated');
+            } else {
+                chevron_icon.removeClass('chev_rotated');
+            }
+        },
+    },
+    mounted: function () {
+        this.$nextTick(function () {
+            this.$emit('created');
+        });
     },
     methods: {
         toggle_filters_button_clicked: function (e) {
             // Bootstrap add a 'collapsed' class name to the element
-            let filters_expanded_when_clicked = $('#' + this.button_elem_id).hasClass('collapsed')
-            this.filters_expanded = !filters_expanded_when_clicked
+            let filters_expanded_when_clicked = $(
+                '#' + this.button_elem_id
+            ).hasClass('collapsed');
+            this.filters_expanded = !filters_expanded_when_clicked;
         },
         show_warning_icon: function (show) {
-            let warning_icon = $('#' + this.warning_icon_id)
+            let warning_icon = $('#' + this.warning_icon_id);
             if (show) {
-                warning_icon.css('opacity', 1)
-                this.warning_icon_title = 'filter(s) applied'
+                warning_icon.css('opacity', 1);
+                this.warning_icon_title = 'filter(s) applied';
             } else {
-                warning_icon.css('opacity', 0)
-                this.warning_icon_title = ''
+                warning_icon.css('opacity', 0);
+                this.warning_icon_title = '';
             }
         },
     },
-    mounted: function () {
-        this.$nextTick(function () {
-            this.$emit('created')
-        })
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/forms/comment.vue b/boranga/frontend/boranga/src/components/forms/comment.vue
index 0c4851af..c6cf08a5 100755
--- a/boranga/frontend/boranga/src/components/forms/comment.vue
+++ b/boranga/frontend/boranga/src/components/forms/comment.vue
@@ -3,10 +3,19 @@
         <div class="col-md-12">
             <div class="form-group">
                 <div class="row">
-                  <label :id="id" class="col-md-3" for="label" >Deficiency</label>
-                  <div class="col-md-9">
-                      <textarea :readonly="readonly" :data-question="question" class="form-control deficiency" :name="name" :value="value" :required="isRequired"></textarea>
-                  </div>
+                    <label :id="id" class="col-md-3" for="label"
+                        >Deficiency</label
+                    >
+                    <div class="col-md-9">
+                        <textarea
+                            :readonly="readonly"
+                            :data-question="question"
+                            class="form-control deficiency"
+                            :name="name"
+                            :value="value"
+                            :required="isRequired"
+                        ></textarea>
+                    </div>
                 </div>
             </div>
         </div>
@@ -15,8 +24,8 @@
 
 <script>
 export default {
-    props:["name","question","value", "id", "readonly", "isRequired"]
-}
+    props: ['name', 'question', 'value', 'id', 'readonly', 'isRequired'],
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue b/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue
index c50a853c..9482b47f 100755
--- a/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue
+++ b/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue
@@ -1,30 +1,55 @@
 <template>
     <div>
         <template v-if="assessorMode && !assessor_readonly">
-        <template v-if="!showingComment">
-            <a v-if="comment_value != null && comment_value != undefined && comment_value != ''" href="" @click.prevent="toggleComment"><i style="color:red" class="fa fa-comment-o">&nbsp;</i></a>
-            <a v-else href="" @click.prevent="toggleComment"><i class="fa fa-comment-o">&nbsp;</i></a>
+            <template v-if="!showingComment">
+                <a
+                    v-if="
+                        comment_value != null &&
+                        comment_value != undefined &&
+                        comment_value != ''
+                    "
+                    href=""
+                    @click.prevent="toggleComment"
+                    ><i style="color: red" class="fa fa-comment-o">&nbsp;</i></a
+                >
+                <a v-else href="" @click.prevent="toggleComment"
+                    ><i class="fa fa-comment-o">&nbsp;</i></a
+                >
+            </template>
+            <a v-else href="" @click.prevent="toggleComment"
+                ><i class="fa fa-ban">&nbsp;</i></a
+            >
         </template>
-        <a href="" v-else  @click.prevent="toggleComment"><i class="fa fa-ban">&nbsp;</i></a>
-        </template>
-        <Comment :question="label" :readonly="assessor_readonly" :name="name+'-comment-field'" v-show="showingComment && assessorMode" :value="comment_value"/> 
+        <Comment
+            v-show="showingComment && assessorMode"
+            :question="label"
+            :readonly="assessor_readonly"
+            :name="name + '-comment-field'"
+            :value="comment_value"
+        />
     </div>
 </template>
 <script>
-import Comment from './comment.vue'
+import Comment from './comment.vue';
 export default {
-    props:["name","comment_value","assessorMode","label","assessor_readonly"],
-    components: {Comment},
-    data(){
+    components: { Comment },
+    props: [
+        'name',
+        'comment_value',
+        'assessorMode',
+        'label',
+        'assessor_readonly',
+    ],
+    data() {
         let vm = this;
         return {
-            showingComment: false
-        }
+            showingComment: false,
+        };
     },
     methods: {
-        toggleComment(){
-            this.showingComment = ! this.showingComment;
-        }
-    }
-}
+        toggleComment() {
+            this.showingComment = !this.showingComment;
+        },
+    },
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/forms/declarations.vue b/boranga/frontend/boranga/src/components/forms/declarations.vue
index 3f36ea14..cc4ab5a3 100755
--- a/boranga/frontend/boranga/src/components/forms/declarations.vue
+++ b/boranga/frontend/boranga/src/components/forms/declarations.vue
@@ -1,30 +1,50 @@
 <template lang="html">
     <div class="form-group">
         <label :id="id">
-            <input ref="Checkbox" :name="name" type="checkbox" @change="handleDeclaration" data-parsley-required :checked="isChecked" :required="isRequired"/>
-            {{label}}
+            <input
+                ref="Checkbox"
+                :name="name"
+                type="checkbox"
+                data-parsley-required
+                :checked="isChecked"
+                :required="isRequired"
+                @change="handleDeclaration"
+            />
+            {{ label }}
         </label>
 
         <template v-if="help_text">
             <p class="help-block">{{ help_text }}</p>
         </template>
         <template v-if="help_text_url">
-            <HelpTextUrl  :help_text_url="help_text_assessor_url" assessorMode={assessorMode} isForAssessor={true} />
-        </template> 
+            <HelpTextUrl
+                :help_text_url="help_text_assessor_url"
+                assessor-mode="{assessorMode}"
+                is-for-assessor="{true}"
+            />
+        </template>
     </div>
 </template>
 
 <script>
-import HelpText from './help_text.vue'
-import HelpTextUrl from './help_text_url.vue'
+import HelpText from './help_text.vue';
+import HelpTextUrl from './help_text_url.vue';
 export default {
-    props:['name','label', 'id', 'help_text',"handleDeclaration", "isRequired", "help_text_url"],
-    computed:{
-        isChecked:function () {
-            return (this.value == 'on');
-        }
+    props: [
+        'name',
+        'label',
+        'id',
+        'help_text',
+        'handleDeclaration',
+        'isRequired',
+        'help_text_url',
+    ],
+    computed: {
+        isChecked: function () {
+            return this.value == 'on';
+        },
     },
-    mounted:function () {
+    mounted: function () {
         let vm = this;
         if (vm.isChecked) {
             var input = this.$refs.Checkbox;
@@ -32,9 +52,8 @@ export default {
             e.initEvent('change', true, true);
             input.dispatchEvent(e);
         }
-    }
-}
+    },
+};
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/forms/filefield.vue b/boranga/frontend/boranga/src/components/forms/filefield.vue
index dcfb1377..533e94f2 100755
--- a/boranga/frontend/boranga/src/components/forms/filefield.vue
+++ b/boranga/frontend/boranga/src/components/forms/filefield.vue
@@ -3,15 +3,29 @@
         <div v-if="has_uploaded_docs">
             <div class="row">
                 <div class="col-sm-6">
-                    <label class="control-label pull-left" for="Name">Uploaded Documents</label>
+                    <label class="control-label pull-left" for="Name"
+                        >Uploaded Documents</label
+                    >
                 </div>
                 <div class="col-sm-6">
-                    <div class="input-group date" ref="due_date" style="width: 70%;">
+                    <div
+                        ref="due_date"
+                        class="input-group date"
+                        style="width: 70%"
+                    >
                         <div v-for="v in uploaded_documents" class="row">
                             <span>
-                                <a :href="v._file" target="_blank">{{ v.name }}</a> &nbsp;
-                                <a @click="delete_document(v)" class="fa fa-trash-o" title="Remove file"
-                                    :filename="v.name" style="cursor: pointer; color:red;"></a>
+                                <a :href="v._file" target="_blank">{{
+                                    v.name
+                                }}</a>
+                                &nbsp;
+                                <a
+                                    class="fa fa-trash-o"
+                                    title="Remove file"
+                                    :filename="v.name"
+                                    style="cursor: pointer; color: red"
+                                    @click="delete_document(v)"
+                                ></a>
                             </span>
                         </div>
                     </div>
@@ -22,14 +36,32 @@
             <div class="row">
                 <div class="col-sm-12">
                     <div v-for="n in repeat">
-                        <div v-if="isRepeatable || (!isRepeatable && num_documents() == 0)">
+                        <div
+                            v-if="
+                                isRepeatable ||
+                                (!isRepeatable && num_documents() == 0)
+                            "
+                        >
                             <span class="btn btn-primary btn-file">
                                 <i class="bi bi-file-earmark-arrow-up me-1"></i>
-                                <input :name="name" type="file" :data-que="n" :accept="fileTypes"
-                                    @change="handleChange($event)" :required="isRequired" />
+                                <input
+                                    :name="name"
+                                    type="file"
+                                    :data-que="n"
+                                    :accept="fileTypes"
+                                    :required="isRequired"
+                                    @change="handleChange($event)"
+                                />
                                 <template v-if="isRepeatable">
-                                    Attach <template v-if="isRepeatable && files && files.length > 0">Another
-                                    </template>Document
+                                    Attach
+                                    <template
+                                        v-if="
+                                            isRepeatable &&
+                                            files &&
+                                            files.length > 0
+                                        "
+                                        >Another </template
+                                    >Document
                                 </template>
                                 <template v-else>
                                     <template v-if="files && files.length > 0">
@@ -47,28 +79,42 @@
         </div>
         <div v-if="files && files.length > 0" class="mt-3 pt-3 border-top">
             <div class="mt-3">
-                <ul class="list-group" :class="isRepeatable ? 'list-group-numbered' : ''">
+                <ul
+                    class="list-group"
+                    :class="isRepeatable ? 'list-group-numbered' : ''"
+                >
                     <li v-for="v in files" class="list-group-item">
-                        <i class="bi bi-file-earmark-text-fill text-secondary"></i> {{ v.name }} &nbsp;
-                        <a @click="pop_file(v)" class="bi bi-trash" title="Remove file" :filename="v.name"
-                            style="cursor: pointer; color:red;"></a>
+                        <i
+                            class="bi bi-file-earmark-text-fill text-secondary"
+                        ></i>
+                        {{ v.name }} &nbsp;
+                        <a
+                            class="bi bi-trash"
+                            title="Remove file"
+                            :filename="v.name"
+                            style="cursor: pointer; color: red"
+                            @click="pop_file(v)"
+                        ></a>
                     </li>
                 </ul>
             </div>
         </div>
-        <span v-if="show_spinner"><span class="spinner-border spinner-border-sm" role="status"
-                aria-hidden="true"></span>
-            <span class="visually-hidden">Loading...</span></span>
+        <span v-if="show_spinner"
+            ><span
+                class="spinner-border spinner-border-sm"
+                role="status"
+                aria-hidden="true"
+            ></span>
+            <span class="visually-hidden">Loading...</span></span
+        >
     </div>
 </template>
 
 <script>
-import {
-    helpers
-}
-    from '@/utils/hooks'
+import { helpers } from '@/utils/hooks';
 
 export default {
+    components: {},
     props: {
         proposal_id: null,
         required_doc_id: null,
@@ -79,49 +125,49 @@ export default {
         value: {
             default: function () {
                 return null;
-            }
+            },
         },
         fileTypesOrig: {
             default: function () {
                 var file_types =
-                    "image/*," +
-                    "video/*," +
-                    "audio/*," +
-                    "application/pdf,text/csv,application/msword,application/vnd.ms-excel,application/x-msaccess," +
-                    "application/x-7z-compressed,application/x-bzip,application/x-bzip2,application/zip," +
-                    ".dbf,.gdb,.gpx,.prj,.shp,.shx," +
-                    ".json,.kml,.gpx";
+                    'image/*,' +
+                    'video/*,' +
+                    'audio/*,' +
+                    'application/pdf,text/csv,application/msword,application/vnd.ms-excel,application/x-msaccess,' +
+                    'application/x-7z-compressed,application/x-bzip,application/x-bzip2,application/zip,' +
+                    '.dbf,.gdb,.gpx,.prj,.shp,.shx,' +
+                    '.json,.kml,.gpx';
                 return file_types;
-            }
+            },
         },
         fileTypes: {
             default: function () {
                 return [
-                    "image/*",
-                    "video/*",
-                    "audio/*",
-                    "application/pdf",
-                    "text/csv",
-                    "application/msword",
-                    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-                    "application/vnd.ms-excel",
-                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-                    "application/x-msaccess",
-                    "application/x-7z-compressed",
-                    "application/x-bzip",
-                    "application/x-bzip2",
-                    "application/zip",
-                    ".dbf",
-                    ".gdb",
-                    ".gpx",
-                    ".prj",
-                    ".shp",
-                    ".shx",
-                    ".json",
-                    ".kml",
-                    ".gpx"
+                    'image/*',
+                    'video/*',
+                    'audio/*',
+                    'application/pdf',
+                    'text/csv',
+                    'application/msword',
+                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                    'application/vnd.ms-excel',
+                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                    'application/x-msaccess',
+                    'application/x-7z-compressed',
+                    'application/x-bzip',
+                    'application/x-bzip2',
+                    'application/zip',
+                    '.dbf',
+                    '.gdb',
+                    '.gpx',
+                    '.prj',
+                    '.shp',
+                    '.shx',
+                    '.json',
+                    '.kml',
+                    '.gpx',
                 ].join(',');
-            }
+            },
         },
 
         isRepeatable: Boolean,
@@ -129,31 +175,33 @@ export default {
         delete_url: String,
         uploaded_documents: Array,
     },
-    components: {},
     data: function () {
         return {
             repeat: 1,
             files: [],
             _files: [
                 {
-                    'file': null,
-                    'name': ''
-                }
+                    file: null,
+                    name: '',
+                },
             ],
             showingComment: false,
             show_spinner: false,
             documents: [],
             filename: null,
-        }
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         has_uploaded_docs: function () {
-            return this.uploaded_documents && this.uploaded_documents.length > 0;
-        }
+            return (
+                this.uploaded_documents && this.uploaded_documents.length > 0
+            );
+        },
     },
+    mounted: function () {},
     methods: {
         reset_files() {
             this.files = [];
@@ -167,9 +215,11 @@ export default {
                 let el = $(e.target).attr('data-que');
                 let avail = $('input[name=' + e.target.name + ']');
 
-                avail = [...avail.map(id => {
-                    return $(avail[id]).attr('data-que');
-                })];
+                avail = [
+                    ...avail.map((id) => {
+                        return $(avail[id]).attr('data-que');
+                    }),
+                ];
                 avail.pop();
                 if (vm.repeat == 1) {
                     vm.repeat += 1;
@@ -178,12 +228,12 @@ export default {
                         vm.repeat += 1;
                     }
                 }
-                $(e.target).css({ 'display': 'none' });
-                $(e.target.parentElement).css({ 'display': 'none' });//to hide <span> element btn-link
+                $(e.target).css({ display: 'none' });
+                $(e.target.parentElement).css({ display: 'none' }); //to hide <span> element btn-link
             } else {
                 vm.files = [];
             }
-            vm.add_file(e)
+            vm.add_file(e);
         },
         add_file(e) {
             let vm = this;
@@ -200,7 +250,10 @@ export default {
             }
 
             if (!file_updated) {
-                vm.files.push({ name: e.target.files[0].name, file: e.target.files[0] });
+                vm.files.push({
+                    name: e.target.files[0].name,
+                    file: e.target.files[0],
+                });
             }
         },
         pop_file(v) {
@@ -218,19 +271,22 @@ export default {
             }
 
             if (!file_updated) {
-                vm.files.push({ name: e.target.files[0].name, file: e.target.files[0] });
+                vm.files.push({
+                    name: e.target.files[0].name,
+                    file: e.target.files[0],
+                });
             }
         },
         delete_document: function (file) {
             /* deletes, previously saved file, from the server */
             let vm = this;
             vm.show_spinner = true;
-            var data = { id: file.id, name: file.name }
+            var data = { id: file.id, name: file.name };
 
             swal({
-                title: "Delete Document",
-                text: "Are you sure you want to delete this document?",
-                type: "question",
+                title: 'Delete Document',
+                text: 'Are you sure you want to delete this document?',
+                type: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Delete Document',
                 customClass: {
@@ -238,23 +294,28 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then(() => {
-                fetch(vm.delete_url, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(data)
-                }).then(async (response) => {
-                    const data = await response.json();
-                    vm.uploaded_documents = data;
-                    vm.$emit('refreshFromResponse', data);
-                    vm.show_spinner = false;
-                }, err => {
-                    console.log(err);
-                });
-            }, (error) => {
-            });
+            }).then(
+                () => {
+                    fetch(vm.delete_url, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(data),
+                    }).then(
+                        async (response) => {
+                            const data = await response.json();
+                            vm.uploaded_documents = data;
+                            vm.$emit('refreshFromResponse', data);
+                            vm.show_spinner = false;
+                        },
+                        (err) => {
+                            console.log(err);
+                        }
+                    );
+                },
+                (error) => {}
+            );
         },
         num_documents: function () {
             let vm = this;
@@ -264,10 +325,7 @@ export default {
             return 0;
         },
     },
-    mounted: function () {
-    }
-}
-
+};
 </script>
 
 <style scoped lang="css">
@@ -280,7 +338,7 @@ input {
     overflow: hidden;
 }
 
-.btn-file input[type=file] {
+.btn-file input[type='file'] {
     position: absolute;
     top: 0;
     right: 0;
diff --git a/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue b/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue
index 7d7e6ebc..800e3c30 100644
--- a/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue
+++ b/boranga/frontend/boranga/src/components/forms/filefield_immediate.vue
@@ -7,15 +7,24 @@
                         &nbsp;
                     </span>
                     <span v-else class="fa fa-file"> &nbsp; </span>
-                    <a :href="Object.hasOwn(v, 'secure_url')
-                            ? v.secure_url
-                            : v.file
-                        " target="_blank">
+                    <a
+                        :href="
+                            Object.hasOwn(v, 'secure_url')
+                                ? v.secure_url
+                                : v.file
+                        "
+                        target="_blank"
+                    >
                         {{ v.name }}
                     </a>
                     <span v-if="!readonly">
-                        &nbsp;<a class="bi bi-trash3" title="Remove file" :filename="v.name"
-                            style="cursor: pointer; color: red" @click="delete_document(v)"></a>
+                        &nbsp;<a
+                            class="bi bi-trash3"
+                            title="Remove file"
+                            :filename="v.name"
+                            style="cursor: pointer; color: red"
+                            @click="delete_document(v)"
+                        ></a>
                     </span>
                 </div>
             </li>
@@ -25,17 +34,33 @@
                 <span class="visually-hidden">Loading...</span>
             </div>
         </div>
-        <div v-if="
-            (isRepeatable || (!isRepeatable && numDocuments === 0)) &&
-            !show_spinner &&
-            !readonly
-        ">
-            <input :id="name" :key="name" :name="name" :multiple="multiple" type="file" :accept="fileTypes" class=""
-                :class="ffu_input_element_classname" @change="handleChangeWrapper" />
+        <div
+            v-if="
+                (isRepeatable || (!isRepeatable && numDocuments === 0)) &&
+                !show_spinner &&
+                !readonly
+            "
+        >
+            <input
+                :id="name"
+                :key="name"
+                :name="name"
+                :multiple="multiple"
+                type="file"
+                :accept="fileTypes"
+                class=""
+                :class="ffu_input_element_classname"
+                @change="handleChangeWrapper"
+            />
             <div v-if="replace_button_by_text">
-                <span :id="'button-' + name" class="btn btn-primary ffu-input-text" @click="button_clicked(name)">
+                <span
+                    :id="'button-' + name"
+                    class="btn btn-primary ffu-input-text"
+                    @click="button_clicked(name)"
+                >
                     <i class="fa fa-upload" aria-hidden="true"></i>&nbsp;
-                    {{ text_string }}</span>
+                    {{ text_string }}</span
+                >
             </div>
         </div>
     </div>
diff --git a/boranga/frontend/boranga/src/components/forms/group.vue b/boranga/frontend/boranga/src/components/forms/group.vue
index e669e9fe..d0f318fc 100755
--- a/boranga/frontend/boranga/src/components/forms/group.vue
+++ b/boranga/frontend/boranga/src/components/forms/group.vue
@@ -2,23 +2,35 @@
     <div class="top-buffer bottom-buffer">
         <div class="panel panel-default">
             <div class="panel-body">
-                <label :id="id" class="inline">{{label}}</label>
-                    <!--<i data-toggle="tooltip" v-if="help_text" data-placement="right" class="fa fa-question-circle" :title="help_text"> &nbsp; </i>-->
+                <label :id="id" class="inline">{{ label }}</label>
+                <!--<i data-toggle="tooltip" v-if="help_text" data-placement="right" class="fa fa-question-circle" :title="help_text"> &nbsp; </i>-->
                 <template v-if="help_text">
-                    <HelpText :help_text="help_text" /> 
+                    <HelpText :help_text="help_text" />
                 </template>
 
                 <template v-if="help_text_url">
-                    <HelpTextUrl :help_text_url="help_text_url" /> 
+                    <HelpTextUrl :help_text_url="help_text_url" />
                 </template>
-                
-                <a class="collapse-link-top pull-right" @click.prevent="expand"><span class="glyphicon glyphicon-chevron-down"></span></a>
-                <div class="children-anchor-point collapse in" style="padding-left: 0px"></div>
-                <span :class="{'hidden':isRemovable}" v-if="isPreviewMode">
-                    <a :id="'remove_'+name" >Remove {{label}}</a>
+
+                <a class="collapse-link-top pull-right" @click.prevent="expand"
+                    ><span class="glyphicon glyphicon-chevron-down"></span
+                ></a>
+                <div
+                    class="children-anchor-point collapse in"
+                    style="padding-left: 0px"
+                ></div>
+                <span v-if="isPreviewMode" :class="{ hidden: isRemovable }">
+                    <a :id="'remove_' + name">Remove {{ label }}</a>
                 </span>
-                <a class="collapse-link-bottom pull-right"  @click.prevent="minimize"><span class="glyphicon glyphicon-chevron-up"></span></a>
-                <div :class="{'row':true,'collapse':true, 'in':isExpanded}" style="margin-top:10px;" >
+                <a
+                    class="collapse-link-bottom pull-right"
+                    @click.prevent="minimize"
+                    ><span class="glyphicon glyphicon-chevron-up"></span
+                ></a>
+                <div
+                    :class="{ row: true, collapse: true, in: isExpanded }"
+                    style="margin-top: 10px"
+                >
                     <div class="col-sm-12">
                         <slot></slot>
                     </div>
@@ -29,34 +41,43 @@
 </template>
 
 <script>
-import HelpText from './help_text.vue'
-import HelpTextUrl from './help_text_url.vue'
+import HelpText from './help_text.vue';
+import HelpTextUrl from './help_text_url.vue';
 export default {
-    name:"group",
-    props:["label", "name", "id", "help_text", "help_text_url", "isRemovable","isPreviewMode"],
-    data:function () {
-        return{
-            isExpanded:true
-        }
+    name: 'Group',
+    components: { HelpText, HelpTextUrl },
+    props: [
+        'label',
+        'name',
+        'id',
+        'help_text',
+        'help_text_url',
+        'isRemovable',
+        'isPreviewMode',
+    ],
+    data: function () {
+        return {
+            isExpanded: true,
+        };
+    },
+    mounted: function () {
+        var vm = this;
+        $('[data-toggle="tooltip"]').tooltip();
     },
-    components: {HelpText, HelpTextUrl},
-    methods:{
-        expand:function(e) {
+    methods: {
+        expand: function (e) {
             this.isExpanded = true;
         },
-        minimize:function(e) {
+        minimize: function (e) {
             this.isExpanded = false;
-        }
+        },
     },
-    mounted:function () {
-        var vm =this;
-        $('[data-toggle="tooltip"]').tooltip();
-    }
-}
+};
 </script>
 
 <style lang="css">
-    .collapse-link-top,.collapse-link-bottom{
-        cursor:pointer;
-    }
+.collapse-link-top,
+.collapse-link-bottom {
+    cursor: pointer;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/help_text.vue b/boranga/frontend/boranga/src/components/forms/help_text.vue
index 2aa48c54..97890ebc 100755
--- a/boranga/frontend/boranga/src/components/forms/help_text.vue
+++ b/boranga/frontend/boranga/src/components/forms/help_text.vue
@@ -1,53 +1,58 @@
 <template lang="html">
-
-  
-        <span v-if="help_text">
-            <template v-if="!isForAssessor">
-                <template v-if="!showingHelpText">
-                    <a href="" @click.prevent="toggleHelpText"><i class="fa fa-question-circle" style="color:blue">&nbsp;</i></a>
-                </template>
-                    <a v-else href="" @click.prevent="toggleHelpText"><i class="fa fa-question-circle" style="color:blue">&nbsp;</i></a>
+    <span v-if="help_text">
+        <template v-if="!isForAssessor">
+            <template v-if="!showingHelpText">
+                <a href="" @click.prevent="toggleHelpText"
+                    ><i class="fa fa-question-circle" style="color: blue"
+                        >&nbsp;</i
+                    ></a
+                >
             </template>
-
-            <template v-else>
+            <a v-else href="" @click.prevent="toggleHelpText"
+                ><i class="fa fa-question-circle" style="color: blue"
+                    >&nbsp;</i
+                ></a
+            >
+        </template>
+
+        <template v-else>
             <template v-if="assessorMode">
                 <template v-if="!showingHelpText">
-                    <a href="" @click.prevent="toggleHelpText"><i class="fa fa-question-circle" style="color:green">&nbsp;</i></a>
+                    <a href="" @click.prevent="toggleHelpText"
+                        ><i class="fa fa-question-circle" style="color: green"
+                            >&nbsp;</i
+                        ></a
+                    >
                 </template>
-                    <a v-else href="" @click.prevent="toggleHelpText"><i class="fa fa-question-circle" style="color:green">&nbsp;</i></a>
-            </template>
+                <a v-else href="" @click.prevent="toggleHelpText"
+                    ><i class="fa fa-question-circle" style="color: green"
+                        >&nbsp;</i
+                    ></a
+                >
             </template>
-            <HelpTextDisplay v-show="showingHelpText" :help_text="help_text" />
-        </span>
-     
+        </template>
+        <HelpTextDisplay v-show="showingHelpText" :help_text="help_text" />
+    </span>
 </template>
 
- 
-
-
-
 <script>
-import HelpTextDisplay from './help_text_display.vue'
+import HelpTextDisplay from './help_text_display.vue';
 export default {
-    props:["help_text","assessorMode","isForAssessor"],
-
-components: { HelpTextDisplay },
-data: function() {
-  return{
-    showingHelpText: false,
-    pBody: 'pBody'
-    }
-  },
-
- methods:{
-         toggleHelpText(){
-            this.showingHelpText = ! this.showingHelpText;
+    components: { HelpTextDisplay },
+    props: ['help_text', 'assessorMode', 'isForAssessor'],
+    data: function () {
+        return {
+            showingHelpText: false,
+            pBody: 'pBody',
+        };
+    },
+
+    methods: {
+        toggleHelpText() {
+            this.showingHelpText = !this.showingHelpText;
         },
-   }
-}
+    },
+};
 </script>
 
-<style lang="css">
-</style>
-
-
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/forms/help_text_display.vue b/boranga/frontend/boranga/src/components/forms/help_text_display.vue
index 68a095dc..86684d38 100755
--- a/boranga/frontend/boranga/src/components/forms/help_text_display.vue
+++ b/boranga/frontend/boranga/src/components/forms/help_text_display.vue
@@ -3,7 +3,7 @@
         <div class="col-md-12">
             <div class="form-group">
                 <div class="row">
-                  <p class="col-md-9" v-html="help_text"></p>
+                    <p class="col-md-9" v-html="help_text"></p>
                 </div>
             </div>
         </div>
@@ -12,8 +12,8 @@
 
 <script>
 export default {
-    props:["help_text"]
-}
+    props: ['help_text'],
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/forms/help_text_url.vue b/boranga/frontend/boranga/src/components/forms/help_text_url.vue
index 8279b233..486eb188 100755
--- a/boranga/frontend/boranga/src/components/forms/help_text_url.vue
+++ b/boranga/frontend/boranga/src/components/forms/help_text_url.vue
@@ -1,25 +1,28 @@
 <template lang="html">
     <span v-if="help_text_url">
         <template v-if="!isForAssessor">
-            <a :href="help_text_url" target="_blank"><i class="fa fa-question-circle" style="color:blue">&nbsp;</i></a>
+            <a :href="help_text_url" target="_blank"
+                ><i class="fa fa-question-circle" style="color: blue"
+                    >&nbsp;</i
+                ></a
+            >
         </template>
 
         <template v-else></template>
         <template v-if="assessorMode">
-            <a :href="help_text_url" target="_blank"><i class="fa fa-question-circle" style="color:green">&nbsp;</i></a>
+            <a :href="help_text_url" target="_blank"
+                ><i class="fa fa-question-circle" style="color: green"
+                    >&nbsp;</i
+                ></a
+            >
         </template>
     </span>
 </template>
 
-
-
 <script>
 export default {
-    props:["help_text_url","assessorMode","isForAssessor"],
-}
+    props: ['help_text_url', 'assessorMode', 'isForAssessor'],
+};
 </script>
 
-<style lang="css">
-</style>
-
-
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/forms/iframe.vue b/boranga/frontend/boranga/src/components/forms/iframe.vue
index 77679769..c5db5fa7 100755
--- a/boranga/frontend/boranga/src/components/forms/iframe.vue
+++ b/boranga/frontend/boranga/src/components/forms/iframe.vue
@@ -3,10 +3,19 @@
         <div class="form-group">
             <div class="row">
                 <div class="embed-container">
-                    <iframe :width="width" :height="height" :frameborder="frameborder" :scrolling="scrolling" :marginheight="marginheight" :marginwidth="marginwidth" :title="title" :src="src"></iframe>
+                    <iframe
+                        :width="width"
+                        :height="height"
+                        :frameborder="frameborder"
+                        :scrolling="scrolling"
+                        :marginheight="marginheight"
+                        :marginwidth="marginwidth"
+                        :title="title"
+                        :src="src"
+                    ></iframe>
                 </div>
 
-<!--
+                <!--
               <iframe width="1000" height="800" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Apiary Sites Beekeeper's Map (WBV)" src="http://dpaw.maps.arcgis.com/apps/Embed/index.html?webmap=d89e2089045c40dcb3d56bafc60dadb3&extent=95.5777,-38.2527,149.5425,-12.3581&home=true&zoom=true&scale=true&search=true&searchextent=true&details=true&basemap_gallery=true&disable_scroll=true&theme=light">
     </iframe>
 -->
@@ -17,21 +26,35 @@
 
 <script>
 export default {
-    props:["src", "title", "name", "width", "height", "frameborder", "scrolling", "marginheight", "marginwidth"]
-}
+    props: [
+        'src',
+        'title',
+        'name',
+        'width',
+        'height',
+        'frameborder',
+        'scrolling',
+        'marginheight',
+        'marginwidth',
+    ],
+};
 </script>
 
 <style lang="css">
-  .embed-container {
-    position: relative; padding-bottom: 80%; height: 0; max-width: 100%;
-
-  }
-
-  .embed-container iframe,
-
-  .embed-container object,
+.embed-container {
+    position: relative;
+    padding-bottom: 80%;
+    height: 0;
+    max-width: 100%;
+}
 
-  .embed-container iframe{
-    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-  }
+.embed-container iframe,
+.embed-container object,
+.embed-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/label.vue b/boranga/frontend/boranga/src/components/forms/label.vue
index 561da5cb..3cb069ee 100755
--- a/boranga/frontend/boranga/src/components/forms/label.vue
+++ b/boranga/frontend/boranga/src/components/forms/label.vue
@@ -6,9 +6,8 @@
 
 <script>
 export default {
-    props:["value", "id"]
-}
+    props: ['value', 'id'],
+};
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/forms/radio.vue b/boranga/frontend/boranga/src/components/forms/radio.vue
index de096992..c8dcf1c7 100755
--- a/boranga/frontend/boranga/src/components/forms/radio.vue
+++ b/boranga/frontend/boranga/src/components/forms/radio.vue
@@ -2,15 +2,34 @@
     <div v-if="readonly">
         <div class="radio">
             <label :id="id">
-                <input ref="radioB" :name="name" disabled type="radio" :value="value" @change="handleChange"  :required="isRequired" :data-conditions="options" :checked="isChecked"/>{{ label}}
+                <input
+                    ref="radioB"
+                    :name="name"
+                    disabled
+                    type="radio"
+                    :value="value"
+                    :required="isRequired"
+                    :data-conditions="options"
+                    :checked="isChecked"
+                    @change="handleChange"
+                />{{ label }}
             </label>
         </div>
-        <input type="hidden" :name="name" :value="savedValue"/>
+        <input type="hidden" :name="name" :value="savedValue" />
     </div>
     <div v-else>
         <div class="radio">
             <label :id="id">
-                <input ref="radioB" :name="name" type="radio" :value="value" @change="handleChange"  :required="isRequired" :data-conditions="options" :checked="isChecked"/>{{ label}}
+                <input
+                    ref="radioB"
+                    :name="name"
+                    type="radio"
+                    :value="value"
+                    :required="isRequired"
+                    :data-conditions="options"
+                    :checked="isChecked"
+                    @change="handleChange"
+                />{{ label }}
             </label>
         </div>
     </div>
@@ -18,17 +37,27 @@
 
 <script>
 export default {
-    name:"radiobuttons",
-    props:["value","label", "id", "name","isRequired","handleChange","conditions","savedValue","readonly"],
-    computed:{
-        isChecked:function () {
+    name: 'Radiobuttons',
+    props: [
+        'value',
+        'label',
+        'id',
+        'name',
+        'isRequired',
+        'handleChange',
+        'conditions',
+        'savedValue',
+        'readonly',
+    ],
+    computed: {
+        isChecked: function () {
             return this.value == this.savedValue;
         },
-        options:function () {
+        options: function () {
             return JSON.stringify(this.conditions);
-        }
+        },
     },
-    mounted:function () {
+    mounted: function () {
         if (this.value == this.savedValue) {
             var input = this.$refs.radioB;
             var e = document.createEvent('HTMLEvents');
@@ -36,22 +65,22 @@ export default {
             var disabledStatus = input.disabled;
             try {
                 /* Firefox will not fire events for disabled widgets, so (temporarily) enabling them */
-                if(disabledStatus) {
+                if (disabledStatus) {
                     input.disabled = false;
                 }
                 input.dispatchEvent(e);
             } finally {
-                if(disabledStatus) {
+                if (disabledStatus) {
                     input.disabled = true;
                 }
             }
         }
-    }
-}
+    },
+};
 </script>
 
 <style lang="css">
-    input {
-        box-shadow:none;
-    }
+input {
+    box-shadow: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/readonly_file.vue b/boranga/frontend/boranga/src/components/forms/readonly_file.vue
index 92703620..8661beff 100755
--- a/boranga/frontend/boranga/src/components/forms/readonly_file.vue
+++ b/boranga/frontend/boranga/src/components/forms/readonly_file.vue
@@ -1,15 +1,14 @@
 <template lang="html">
     <div class="form-group">
-      <label :id="id" for="label" >{{ label }}</label>
-      <p>{{ value }}</p>
+        <label :id="id" for="label">{{ label }}</label>
+        <p>{{ value }}</p>
     </div>
 </template>
 
 <script>
 export default {
-    props:["value", "label", "id"]
-}
+    props: ['value', 'label', 'id'],
+};
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/forms/readonly_text.vue b/boranga/frontend/boranga/src/components/forms/readonly_text.vue
index 2227bcf5..7466c8dc 100755
--- a/boranga/frontend/boranga/src/components/forms/readonly_text.vue
+++ b/boranga/frontend/boranga/src/components/forms/readonly_text.vue
@@ -2,10 +2,16 @@
     <div class="col-md-12">
         <div v-show="box_view" class="form-group">
             <div class="row">
-              <label :id="id" class="col-md-3" for="label" >{{ label }}</label>
-              <div class="col-md-9">
-                  <textarea :readonly="readonly" :type="type" class="form-control" :name="name" :value="value"></textarea>
-              </div>
+                <label :id="id" class="col-md-3" for="label">{{ label }}</label>
+                <div class="col-md-9">
+                    <textarea
+                        :readonly="readonly"
+                        :type="type"
+                        class="form-control"
+                        :name="name"
+                        :value="value"
+                    ></textarea>
+                </div>
             </div>
         </div>
     </div>
@@ -13,9 +19,8 @@
 
 <script>
 export default {
-    props:["box_view","type","name","value", "id", "label","readonly"]
-}
+    props: ['box_view', 'type', 'name', 'value', 'id', 'label', 'readonly'],
+};
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/forms/section.vue b/boranga/frontend/boranga/src/components/forms/section.vue
index a050b0a6..1e9387e8 100644
--- a/boranga/frontend/boranga/src/components/forms/section.vue
+++ b/boranga/frontend/boranga/src/components/forms/section.vue
@@ -1,54 +1,68 @@
 <template lang="html">
-    <div class="panel panel-default" >
-      <div class="panel-heading">
-        <h3 class="panel-title">{{label}}
-            <a :href="'#'+section_id" class="panelClicker" data-toggle="collapse" expanded="true" :aria-controls="section_id">
-                <span class="glyphicon glyphicon-chevron-down pull-right "></span>
-            </a>
-        </h3>
-      </div>
-      <div class="panel-body collapse in" :id="section_id">
-          <slot></slot>
-      </div>
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                {{ label }}
+                <a
+                    :href="'#' + section_id"
+                    class="panelClicker"
+                    data-toggle="collapse"
+                    expanded="true"
+                    :aria-controls="section_id"
+                >
+                    <span
+                        class="glyphicon glyphicon-chevron-down pull-right"
+                    ></span>
+                </a>
+            </h3>
+        </div>
+        <div :id="section_id" class="panel-body collapse in">
+            <slot></slot>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-    name:"section",
-    props:["label","Key"],
-    data:function () {
+    name: 'Section',
+    props: ['label', 'Key'],
+    data: function () {
         return {
-            title:"Section title",
-            eventInitialised: false
-        }
+            title: 'Section title',
+            eventInitialised: false,
+        };
     },
-    computed:{
-        section_id:function () {
-            return "section_"+this.Key
-        }
+    computed: {
+        section_id: function () {
+            return 'section_' + this.Key;
+        },
     },
-    updated:function () {
+    updated: function () {
         let vm = this;
-        vm.$nextTick(()=>{
-            if (!vm.eventInitialised){
-                $('.panelClicker[data-toggle="collapse"]').on('click',function () {
-                    var chev = $(this).children()[0];
-                    window.setTimeout(function () {
-                        $(chev).toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
-                    },100);
-                });
+        vm.$nextTick(() => {
+            if (!vm.eventInitialised) {
+                $('.panelClicker[data-toggle="collapse"]').on(
+                    'click',
+                    function () {
+                        var chev = $(this).children()[0];
+                        window.setTimeout(function () {
+                            $(chev).toggleClass(
+                                'glyphicon-chevron-down glyphicon-chevron-up'
+                            );
+                        }, 100);
+                    }
+                );
                 this.eventInitialised = true;
             }
         });
-    }
-}
+    },
+};
 </script>
 
 <style lang="css">
-    h3.panel-title{
-        font-weight: bold;
-        font-size: 25px;
-        padding:20px;
-    }
+h3.panel-title {
+    font-weight: bold;
+    font-size: 25px;
+    padding: 20px;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/section_toggle.vue b/boranga/frontend/boranga/src/components/forms/section_toggle.vue
index 8da1c154..765bf0c5 100644
--- a/boranga/frontend/boranga/src/components/forms/section_toggle.vue
+++ b/boranga/frontend/boranga/src/components/forms/section_toggle.vue
@@ -1,28 +1,56 @@
 <template lang="html">
-    <div class="card section-wrapper" :id="custom_id">
+    <div :id="custom_id" class="card section-wrapper">
         <div class="card-header h4 fw-bold p-4">
-            <div class='row show_hide_switch' :id="'show_hide_switch_' + section_body_id" aria-expanded="true"
-                :aria-controls="section_body_id" @click="toggle_show_hide">
-                <div class='col-11' :style="'color:' + customColor">
-                    {{ label }} <span v-if="subtitle" class="h6" :class="subtitleClass">{{ subtitle }}</span>
+            <div
+                :id="'show_hide_switch_' + section_body_id"
+                class="row show_hide_switch"
+                aria-expanded="true"
+                :aria-controls="section_body_id"
+                @click="toggle_show_hide"
+            >
+                <div class="col-11" :style="'color:' + customColor">
+                    {{ label }}
+                    <span v-if="subtitle" class="h6" :class="subtitleClass">{{
+                        subtitle
+                    }}</span>
                     <!-- to display the assessor and referral comments textboxes -->
                     <template v-if="displayCommentSection">
                         <template v-if="!isShowComment">
-                            <a v-if="has_comment_value" href="" @click.prevent="toggleComment"><i style="color:red"
-                                    class="far fa-comment">&nbsp;</i></a>
-                            <a v-else href="" @click.prevent="toggleComment"><i class="far fa-comment">&nbsp;</i></a>
+                            <a
+                                v-if="has_comment_value"
+                                href=""
+                                @click.prevent="toggleComment"
+                                ><i style="color: red" class="far fa-comment"
+                                    >&nbsp;</i
+                                ></a
+                            >
+                            <a v-else href="" @click.prevent="toggleComment"
+                                ><i class="far fa-comment">&nbsp;</i></a
+                            >
                         </template>
-                        <a href="" v-else-if="isShowComment" @click.prevent="toggleComment"><i
-                                class="fa fa-ban">&nbsp;</i></a>
+                        <a
+                            v-else-if="isShowComment"
+                            href=""
+                            @click.prevent="toggleComment"
+                            ><i class="fa fa-ban">&nbsp;</i></a
+                        >
                     </template>
                 </div>
-                <div class='col-1 text-end'>
-                    <i :id="chevron_elem_id" class="bi fw-bold chevron-toggle" :data-bs-target="'#' + section_body_id">
+                <div class="col-1 text-end">
+                    <i
+                        :id="chevron_elem_id"
+                        class="bi fw-bold chevron-toggle"
+                        :data-bs-target="'#' + section_body_id"
+                    >
                     </i>
                 </div>
             </div>
         </div>
-        <div :class="detailsClass" :id='section_body_id' :style="'color:' + customColor">
+        <div
+            :id="section_body_id"
+            :class="detailsClass"
+            :style="'color:' + customColor"
+        >
             <slot></slot>
         </div>
     </div>
@@ -32,7 +60,7 @@
 import { v4 as uuid } from 'uuid';
 
 export default {
-    name: "FormSection",
+    name: 'FormSection',
     props: {
         label: {},
         subtitle: {
@@ -61,13 +89,13 @@ export default {
         displayCommentSection: {
             type: Boolean,
             default: false,
-        }
+        },
     },
     data: function () {
         return {
             custom_id: uuid(),
             chevron_elem_id: 'chevron_elem_' + uuid(),
-        }
+        };
     },
     computed: {
         detailsClass: function () {
@@ -78,28 +106,29 @@ export default {
             return classText;
         },
         section_header_id: function () {
-            return "section_header_" + this.Index;
+            return 'section_header_' + this.Index;
         },
         section_body_id: function () {
-            return "section_body_" + this.Index;
+            return 'section_body_' + this.Index;
         },
     },
+    mounted: function () {
+        chevron_toggle.init();
+    },
     methods: {
         toggle_show_hide: function () {
             // Bootstrap add a 'collapsed' class name to the element
-            let elem_expanded_when_clicked = $('#show_hide_switch_' + this.section_body_id).hasClass('collapsed')
-            this.elem_expanded = !elem_expanded_when_clicked
-            this.$emit('toggle-collapse')
+            let elem_expanded_when_clicked = $(
+                '#show_hide_switch_' + this.section_body_id
+            ).hasClass('collapsed');
+            this.elem_expanded = !elem_expanded_when_clicked;
+            this.$emit('toggle-collapse');
         },
         toggleComment: function () {
-            this.$emit('toggleComment', !this.isShowComment)
+            this.$emit('toggleComment', !this.isShowComment);
         },
-
     },
-    mounted: function () {
-        chevron_toggle.init()
-    },
-}
+};
 </script>
 
 <style scoped>
diff --git a/boranga/frontend/boranga/src/components/forms/select.vue b/boranga/frontend/boranga/src/components/forms/select.vue
index d27cf164..6ebd35e2 100755
--- a/boranga/frontend/boranga/src/components/forms/select.vue
+++ b/boranga/frontend/boranga/src/components/forms/select.vue
@@ -7,167 +7,266 @@
                 <HelpText :help_text="help_text" />
             </template>
             <template v-if="help_text_assessor && assessorMode">
-                <HelpText  :help_text="help_text_assessor" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
+                <HelpText
+                    :help_text="help_text_assessor"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
             <template v-if="help_text_url">
                 <HelpText :help_text_url="help_text_url" />
             </template>
             <template v-if="help_text_assessor_url && assessorMode">
-                <HelpTextUrl  :help_text_url="help_text_assessor_url" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
-
+                <HelpTextUrl
+                    :help_text_url="help_text_assessor_url"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
             <template v-if="assessorMode && !assessor_readonly">
                 <template v-if="!showingComment">
-                    <a v-if="comment_value != null && comment_value != undefined && comment_value != ''" href="" @click.prevent="toggleComment"><i style="color:red" class="fa fa-comment-o">&nbsp;</i></a>
-                    <a v-else href="" @click.prevent="toggleComment"><i class="fa fa-comment-o">&nbsp;</i></a>
+                    <a
+                        v-if="
+                            comment_value != null &&
+                            comment_value != undefined &&
+                            comment_value != ''
+                        "
+                        href=""
+                        @click.prevent="toggleComment"
+                        ><i style="color: red" class="fa fa-comment-o"
+                            >&nbsp;</i
+                        ></a
+                    >
+                    <a v-else href="" @click.prevent="toggleComment"
+                        ><i class="fa fa-comment-o">&nbsp;</i></a
+                    >
                 </template>
-                <a href="" v-else  @click.prevent="toggleComment"><i class="fa fa-ban">&nbsp;</i></a>
+                <a v-else href="" @click.prevent="toggleComment"
+                    ><i class="fa fa-ban">&nbsp;</i></a
+                >
             </template>
-     
+
             <template v-if="readonly">
-                <select v-if="!isMultiple" disabled ref="selectB" :id="selectid" :name="name" class="form-control" :data-conditions="cons" style="width:100%">
+                <select
+                    v-if="!isMultiple"
+                    :id="selectid"
+                    ref="selectB"
+                    disabled
+                    :name="name"
+                    class="form-control"
+                    :data-conditions="cons"
+                    style="width: 100%"
+                >
                     <option value="">Select...</option>
-                    <option v-for="op in options"  :value="op.value" @change="handleChange" :selected="op.value == value">{{ op.label }}</option>
+                    <option
+                        v-for="op in options"
+                        :value="op.value"
+                        :selected="op.value == value"
+                        @change="handleChange"
+                    >
+                        {{ op.label }}
+                    </option>
                 </select>
-                <select v-else disabled ref="selectB" :id="selectid" class="form-control" multiple style="width:100%">
+                <select
+                    v-else
+                    :id="selectid"
+                    ref="selectB"
+                    disabled
+                    class="form-control"
+                    multiple
+                    style="width: 100%"
+                >
                     <option value="">Select...</option>
-                    <option v-for="op in options"  :value="op.value" :selected="multipleSelection(op.value)">{{ op.label }}</option>
+                    <option
+                        v-for="op in options"
+                        :value="op.value"
+                        :selected="multipleSelection(op.value)"
+                    >
+                        {{ op.label }}
+                    </option>
                 </select>
                 <template v-if="isMultiple">
-                    <input v-for="v in value" input type="hidden" :name="name" :value="v" :required="isRequired"/>
+                    <input
+                        v-for="v in value"
+                        input
+                        type="hidden"
+                        :name="name"
+                        :value="v"
+                        :required="isRequired"
+                    />
                 </template>
                 <template v-else>
-                    <input type="hidden" :name="name" :value="value" :required="isRequired"/>
+                    <input
+                        type="hidden"
+                        :name="name"
+                        :value="value"
+                        :required="isRequired"
+                    />
                 </template>
             </template>
             <template v-else>
-                <select v-if="!isMultiple" ref="selectB" :id="selectid" :name="name" class="form-control" :data-conditions="cons" style="width:100%" :required="isRequired">
+                <select
+                    v-if="!isMultiple"
+                    :id="selectid"
+                    ref="selectB"
+                    :name="name"
+                    class="form-control"
+                    :data-conditions="cons"
+                    style="width: 100%"
+                    :required="isRequired"
+                >
                     <option value="">Select...</option>
-                    <option v-for="op in options"  :value="op.value" @change="handleChange" :selected="op.value == value">{{ op.label }}</option>
+                    <option
+                        v-for="op in options"
+                        :value="op.value"
+                        :selected="op.value == value"
+                        @change="handleChange"
+                    >
+                        {{ op.label }}
+                    </option>
                 </select>
-                <select v-else ref="selectB" :id="selectid" :name="name" class="form-control" multiple style="width:100%" :required="isRequired">
+                <select
+                    v-else
+                    :id="selectid"
+                    ref="selectB"
+                    :name="name"
+                    class="form-control"
+                    multiple
+                    style="width: 100%"
+                    :required="isRequired"
+                >
                     <option value="">Select...</option>
-                    <option v-for="op in options"  :value="op.value" :selected="multipleSelection(op.value)">{{ op.label }}</option>
+                    <option
+                        v-for="op in options"
+                        :value="op.value"
+                        :selected="multipleSelection(op.value)"
+                    >
+                        {{ op.label }}
+                    </option>
                 </select>
             </template>
         </div>
 
-        
-        <Comment :question="label" :readonly="assessor_readonly" :name="name+'-comment-field'" v-show="showingComment && assessorMode" :value="comment_value"/> 
-
-
+        <Comment
+            v-show="showingComment && assessorMode"
+            :question="label"
+            :readonly="assessor_readonly"
+            :name="name + '-comment-field'"
+            :value="comment_value"
+        />
     </div>
 </template>
 
 <script>
 var select2 = require('select2');
-import Comment from './comment.vue'
-import HelpText from './help_text.vue'
-import HelpTextUrl from './help_text_url.vue'
+import Comment from './comment.vue';
+import HelpText from './help_text.vue';
+import HelpTextUrl from './help_text_url.vue';
 export default {
-    props:{
-        'name':String,
-        'label':String,
-        'id': String,
-        'isRequired': String,
-        'help_text':String,
-        'help_text_assessor':String,
-        'help_text_url':String,
-        'help_text_assessor_url':String,
-        "value":[String,Array],
-        "comment_value": String,
-        "assessor_readonly": Boolean,
-        "options":Array,
-        "conditions":Object,
-        "handleChange":null,
-        "isMultiple":{
-            default:function () {
+    components: { Comment, HelpText, HelpTextUrl },
+    props: {
+        name: String,
+        label: String,
+        id: String,
+        isRequired: String,
+        help_text: String,
+        help_text_assessor: String,
+        help_text_url: String,
+        help_text_assessor_url: String,
+        value: [String, Array],
+        comment_value: String,
+        assessor_readonly: Boolean,
+        options: Array,
+        conditions: Object,
+        handleChange: null,
+        isMultiple: {
+            default: function () {
                 return false;
-            }
+            },
         },
-        "assessorMode":{
-            default:function () {
+        assessorMode: {
+            default: function () {
                 return false;
-            }
+            },
         },
-        'readonly': Boolean
+        readonly: Boolean,
     },
-    data:function () {
-        let vm =this;
-        return{
-            selected: (this.isMultiple) ? [] : "",
-            selectid: "select"+vm._uid,
+    data: function () {
+        let vm = this;
+        return {
+            selected: this.isMultiple ? [] : '',
+            selectid: 'select' + vm._uid,
             multipleSelected: [],
             showingComment: false,
-           
-        }
+        };
     },
-    computed:{
-        cons:function () {
+    computed: {
+        cons: function () {
             return JSON.stringify(this.conditions);
         },
     },
-    components: { Comment, HelpText, HelpTextUrl,},
-    methods:{
-        toggleComment(){
-            this.showingComment = ! this.showingComment;
+    mounted: function () {
+        this.init();
+    },
+    methods: {
+        toggleComment() {
+            this.showingComment = !this.showingComment;
         },
-       
 
-        multipleSelection: function(val){
-            if (Array.isArray(this.value)){
-                if (this.value.find(v => v == val)){
+        multipleSelection: function (val) {
+            if (Array.isArray(this.value)) {
+                if (this.value.find((v) => v == val)) {
+                    return true;
+                }
+            } else {
+                if (this.value == val) {
                     return true;
                 }
-            }else{
-                if (this.value == val){return true;}
             }
             return false;
         },
-        init:function () {
-            let vm =this;
+        init: function () {
+            let vm = this;
             setTimeout(function (e) {
-                   $('#'+vm.selectid).select2({
-                       "theme": "bootstrap",
-                       allowClear: true,
-                       placeholder:"Select..."
-                   }).
-                   on("select2:select",function (e) {
-                       var selected = $(e.currentTarget);
-                       vm.handleChange(selected[0])
-                       e.preventDefault();
-                        if( vm.isMultiple){
+                $('#' + vm.selectid)
+                    .select2({
+                        theme: 'bootstrap',
+                        allowClear: true,
+                        placeholder: 'Select...',
+                    })
+                    .on('select2:select', function (e) {
+                        var selected = $(e.currentTarget);
+                        vm.handleChange(selected[0]);
+                        e.preventDefault();
+                        if (vm.isMultiple) {
                             vm.multipleSelected = selected.val();
                         }
-                   }).
-                   on("select2:unselect",function (e) {
+                    })
+                    .on('select2:unselect', function (e) {
                         var selected = $(e.currentTarget);
-                        vm.handleChange(selected[0])
+                        vm.handleChange(selected[0]);
                         e.preventDefault();
-                        if( vm.isMultiple){
+                        if (vm.isMultiple) {
                             vm.multipleSelected = selected.val();
                         }
-                   });
-                   if (vm.value) {
-                       vm.handleChange(vm.$refs.selectB);
-                   }
-               },100);
-        }
+                    });
+                if (vm.value) {
+                    vm.handleChange(vm.$refs.selectB);
+                }
+            }, 100);
+        },
     },
-    mounted:function () {
-        this.init();
-    }
-}
+};
 </script>
 
 <style lang="css">
 .select2-container {
-  width: 100% !important;
+    width: 100% !important;
 }
 
 input {
-    box-shadow:none;
+    box-shadow: none;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/table.vue b/boranga/frontend/boranga/src/components/forms/table.vue
index 481af65c..a978d0a7 100644
--- a/boranga/frontend/boranga/src/components/forms/table.vue
+++ b/boranga/frontend/boranga/src/components/forms/table.vue
@@ -6,59 +6,110 @@
                 <HelpText :help_text="help_text" />
             </template>
             <template v-if="help_text_assessor && assessorMode">
-                <HelpText :help_text="help_text_assessor" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
+                <HelpText
+                    :help_text="help_text_assessor"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
             <template v-if="help_text_url">
                 <HelpTextUrl :help_text_url="help_text_url" />
             </template>
             <template v-if="help_text_assessor_url && assessorMode">
-                <HelpTextUrl :help_text_url="help_text_assessor_url" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
+                <HelpTextUrl
+                    :help_text_url="help_text_assessor_url"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
-            <template v-if="assessorMode && !assessor_readonly && wc_version != 1.0">
+            <template
+                v-if="assessorMode && !assessor_readonly && wc_version != 1.0"
+            >
                 <template v-if="!showingComment">
-                    <a v-if="comment_value != null && comment_value != undefined && comment_value != ''" href="" @click.prevent="toggleComment"><i style="color:red" class="fa fa-comment-o">&nbsp;</i></a>
-                    <a v-else href="" @click.prevent="toggleComment"><i class="fa fa-comment-o">&nbsp;</i></a>
+                    <a
+                        v-if="
+                            comment_value != null &&
+                            comment_value != undefined &&
+                            comment_value != ''
+                        "
+                        href=""
+                        @click.prevent="toggleComment"
+                        ><i style="color: red" class="fa fa-comment-o"
+                            >&nbsp;</i
+                        ></a
+                    >
+                    <a v-else href="" @click.prevent="toggleComment"
+                        ><i class="fa fa-comment-o">&nbsp;</i></a
+                    >
                 </template>
-                <a href="" v-else  @click.prevent="toggleComment"><i class="fa fa-ban">&nbsp;</i></a>
+                <a v-else href="" @click.prevent="toggleComment"
+                    ><i class="fa fa-ban">&nbsp;</i></a
+                >
             </template>
 
             <!-- the next line required for saving value JSON-ified table to application.data - creates an invisible field -->
-            <textarea readonly="readonly" class="form-control" rows="5" :name="name" style="display:none;">{{ value }}</textarea><br/>
+            <textarea
+                readonly="readonly"
+                class="form-control"
+                rows="5"
+                :name="name"
+                style="display: none"
+                >{{ value }}</textarea
+            ><br />
 
             <div id="content-editable-table">
-              <table class="table table-striped editable-table">
-                <thead v-if="table.thead.length">
-                  <tr>
-                    <th v-for="(heading, index) in table.thead">
-                      {{ table.thead[index] }}
-                    </th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                  <tr v-for="row in table.tbody">
-                    <td v-for="(value, index) in row">
-                        <!-- <input type="text" v-model="row[index]" /> -->
-                        <input :readonly="readonly" class="tbl_input" :type="col_types[index]" min="0" v-model="row[index]" :required="isRequired" :onclick="isClickable"/>
-                    </td>
-                    <td v-if="!readonly">
-                        <a class="fa fa-trash-o" v-on:click="deleteRow(row)" title="Delete row" style="cursor: pointer; color:red;"></a>
-                    </td>
-                  </tr>
-
-                  <tr>
-                    <td v-if="!readonly">
-                      <button class="btn btn-primary" type="button" v-on:click="addRow()" title="Add Row">+</button>
-                    </td>
-                  </tr>
-                </tbody>
-
-              </table>
-
-              <!-- for debugging -->
-              <!--
+                <table class="table table-striped editable-table">
+                    <thead v-if="table.thead.length">
+                        <tr>
+                            <th v-for="(heading, index) in table.thead">
+                                {{ table.thead[index] }}
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        <tr v-for="row in table.tbody">
+                            <td v-for="(value, index) in row">
+                                <!-- <input type="text" v-model="row[index]" /> -->
+                                <input
+                                    v-model="row[index]"
+                                    :readonly="readonly"
+                                    class="tbl_input"
+                                    :type="col_types[index]"
+                                    min="0"
+                                    :required="isRequired"
+                                    :onclick="isClickable"
+                                />
+                            </td>
+                            <td v-if="!readonly">
+                                <a
+                                    class="fa fa-trash-o"
+                                    title="Delete row"
+                                    style="cursor: pointer; color: red"
+                                    @click="deleteRow(row)"
+                                ></a>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td v-if="!readonly">
+                                <button
+                                    class="btn btn-primary"
+                                    type="button"
+                                    title="Add Row"
+                                    @click="addRow()"
+                                >
+                                    +
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <!-- for debugging -->
+                <!--
               <pre class="output">
                 {{ value }}
               </pre>
@@ -67,19 +118,19 @@
               </pre>
               -->
             </div>
-
         </div>
         <!--<Comment :question="label" :readonly="assessor_readonly" :name="name+'-comment-field'" v-show="showingComment && assessorMode" :value="comment_value"/> -->
     </div>
 </template>
 
 <script>
-import Comment from './comment.vue'
-import HelpText from './help_text.vue'
-import HelpTextUrl from './help_text_url.vue'
+import Comment from './comment.vue';
+import HelpText from './help_text.vue';
+import HelpTextUrl from './help_text_url.vue';
 export default {
+    components: { Comment, HelpText, HelpTextUrl },
     //props:["name","value", "id", "isRequired", "help_text","help_text_assessor","assessorMode","label","readonly","comment_value","assessor_readonly", "help_text_url", "help_text_assessor_url"],
-    props:{
+    props: {
         headers: [],
         name: String,
         label: String,
@@ -91,17 +142,17 @@ export default {
         help_text_assessor: String,
         help_text_url: String,
         help_text_assessor_url: String,
-        assessorMode:{
-            default:function(){
+        assessorMode: {
+            default: function () {
                 return false;
-            }
+            },
         },
-        value:{
-            default:function () {
+        value: {
+            default: function () {
                 return null;
-            }
+            },
         },
-        readonly:Boolean,
+        readonly: Boolean,
 
         /*
         tableJSON:{
@@ -119,11 +170,8 @@ export default {
             }
         }
         */
-
     },
 
-    components: {Comment, HelpText, HelpTextUrl},
-
     /* Example schema config
        {
         "type": "table",
@@ -132,101 +180,65 @@ export default {
         "label": "The first table in section 2"
        }
     */
-    data(){
+    data() {
         let vm = this;
-        var value  =JSON.parse(vm.value);
+        var value = JSON.parse(vm.value);
 
-        var headers = JSON.parse(vm.headers)
+        var headers = JSON.parse(vm.headers);
         var col_headers = Object.keys(headers);
         vm.col_types = Object.values(headers);
 
         // setup initial empty row for display
         var init_row = [];
-        for(var i = 0, length = col_headers.length; i < length; i++) { init_row.push('')  }
+        for (var i = 0, length = col_headers.length; i < length; i++) {
+            init_row.push('');
+        }
 
         if (value == null) {
             vm.table = {
-                    //thead: ['Heading 1'],
-                    thead: col_headers,
-                    tbody: [
-                        //['No header specified']
-                        init_row
-                    ]
-            }
+                //thead: ['Heading 1'],
+                thead: col_headers,
+                tbody: [
+                    //['No header specified']
+                    init_row,
+                ],
+            };
         } else {
             vm.table = {
-                    thead: value['thead'],
-                    tbody: value['tbody']
-            }
+                thead: value['thead'],
+                tbody: value['tbody'],
+            };
         }
 
-        if(vm.readonly) {
-            return { isClickable: "return false;" }
+        if (vm.readonly) {
+            return { isClickable: 'return false;' };
         } else {
-            return { isClickable: "return true;" }
+            return { isClickable: 'return true;' };
         }
 
         return {
             showingComment: false,
-        }
-
+        };
     },
-    methods: {
-        toggleComment(){
-            this.showingComment = ! this.showingComment;
-        },
 
-        updateTableJSON: function() {
-          let vm = this;
-          vm.tableJSON = JSON.stringify(vm.table);
-          vm.value = vm.tableJSON;
-        },
-
-        addRow: function() {
-          let vm = this;
-          var newRow = [];
-
-          for(var i = 0, length = vm.table.thead.length; i < length; i++) {
-            //newRow.push('R:' + (vm.table.tbody.length + 1) + ' V:' + (i + 1))
-            newRow.push('')
-          }
-
-          vm.table.tbody.push(newRow);
-
-          vm.updateTableJSON();
-        },
-
-        deleteRow: function(row) {
-            let vm = this;
-
-            // pop row from data structure
-            vm.table.tbody = vm.table.tbody.filter(function(item) {
-                return item !== row
-            })
-            vm.updateTableJSON();
-        }
-
-    },
-
-    computed:{
-        wc_version: function (){
+    computed: {
+        wc_version: function () {
             return this.$root.wc_version;
         },
     },
 
-
-    mounted:function () {
+    mounted: function () {
         let vm = this;
 
         vm.updateTableJSON();
 
         //$('#content-editable-table').on('change', '[type="text"]', function() {
-        $('#content-editable-table').on('change', '.tbl_input', function() {
+        $('#content-editable-table').on('change', '.tbl_input', function () {
             vm.updateTableJSON();
         });
 
-        $("#content-editable-table").on("click", ".ibtnDel", function (event) {
-            $(this).closest("tr").remove();
+        $('#content-editable-table').on('click', '.ibtnDel', function (event) {
+            $(this).closest('tr').remove();
         });
 
         if (vm.isChecked) {
@@ -235,40 +247,72 @@ export default {
             e.initEvent('change', true, true);
 
             /* replacing input.disabled with onclick because disabled checkbox does NOT get posted with form on submit */
-            if(vm.readonly) {
-                vm.isClickable = "return false;";
+            if (vm.readonly) {
+                vm.isClickable = 'return false;';
             } else {
-                vm.isClickable = "return true;";
+                vm.isClickable = 'return true;';
             }
             input.dispatchEvent(e);
         }
+    },
+    methods: {
+        toggleComment() {
+            this.showingComment = !this.showingComment;
+        },
 
-    }
-}
+        updateTableJSON: function () {
+            let vm = this;
+            vm.tableJSON = JSON.stringify(vm.table);
+            vm.value = vm.tableJSON;
+        },
+
+        addRow: function () {
+            let vm = this;
+            var newRow = [];
+
+            for (var i = 0, length = vm.table.thead.length; i < length; i++) {
+                //newRow.push('R:' + (vm.table.tbody.length + 1) + ' V:' + (i + 1))
+                newRow.push('');
+            }
+
+            vm.table.tbody.push(newRow);
+
+            vm.updateTableJSON();
+        },
+
+        deleteRow: function (row) {
+            let vm = this;
+
+            // pop row from data structure
+            vm.table.tbody = vm.table.tbody.filter(function (item) {
+                return item !== row;
+            });
+            vm.updateTableJSON();
+        },
+    },
+};
 </script>
 
 <style scoped lang="css">
-    .container {
-      padding: 30px;
-      width: 100%;
-    }
-
-    .editable-table {
+.container {
+    padding: 30px;
+    width: 100%;
+}
 
-      [type="text"] {
+.editable-table {
+    [type='text'] {
         background: none;
         border: none;
         display: block;
         width: 100%;
-      }
     }
+}
 
-    .output {
-      white-space: normal;
-    }
+.output {
+    white-space: normal;
+}
 
-    input[id="header"] {
-        outline-style: none;
-    }
+input[id='header'] {
+    outline-style: none;
+}
 </style>
-
diff --git a/boranga/frontend/boranga/src/components/forms/text-area.vue b/boranga/frontend/boranga/src/components/forms/text-area.vue
index 26304a6c..c1736aa2 100755
--- a/boranga/frontend/boranga/src/components/forms/text-area.vue
+++ b/boranga/frontend/boranga/src/components/forms/text-area.vue
@@ -6,53 +6,102 @@
                 <HelpText :help_text="help_text" />
             </template>
             <template v-if="help_text_assessor && assessorMode">
-                <HelpText :help_text="help_text_assessor" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
+                <HelpText
+                    :help_text="help_text_assessor"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
             <template v-if="help_text_url">
                 <HelpTextUrl :help_text_url="help_text_url" />
             </template>
             <template v-if="help_text_assessor_url && assessorMode">
-                <HelpTextUrl :help_text_url="help_text_assessor_url" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
-
+                <HelpTextUrl
+                    :help_text_url="help_text_assessor_url"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
             <template v-if="assessorMode && !assessor_readonly">
                 <template v-if="!showingComment">
-                    <a v-if="comment_value != null && comment_value != undefined && comment_value != ''" href="" @click.prevent="toggleComment"><i style="color:red" class="fa fa-comment-o">&nbsp;</i></a>
-                    <a v-else href="" @click.prevent="toggleComment"><i class="fa fa-comment-o">&nbsp;</i></a>
+                    <a
+                        v-if="
+                            comment_value != null &&
+                            comment_value != undefined &&
+                            comment_value != ''
+                        "
+                        href=""
+                        @click.prevent="toggleComment"
+                        ><i style="color: red" class="fa fa-comment-o"
+                            >&nbsp;</i
+                        ></a
+                    >
+                    <a v-else href="" @click.prevent="toggleComment"
+                        ><i class="fa fa-comment-o">&nbsp;</i></a
+                    >
                 </template>
-                <a href="" v-else  @click.prevent="toggleComment"><i class="fa fa-ban">&nbsp;</i></a>
+                <a v-else href="" @click.prevent="toggleComment"
+                    ><i class="fa fa-ban">&nbsp;</i></a
+                >
             </template>
-            <textarea :readonly="readonly" class="form-control" rows="5" :name="name" :required="isRequired">{{ value }}</textarea><br/>
+            <textarea
+                :readonly="readonly"
+                class="form-control"
+                rows="5"
+                :name="name"
+                :required="isRequired"
+                >{{ value }}</textarea
+            ><br />
         </div>
-        <Comment :question="label" :readonly="assessor_readonly" :name="name+'-comment-field'" v-show="showingComment && assessorMode" :value="comment_value"/> 
+        <Comment
+            v-show="showingComment && assessorMode"
+            :question="label"
+            :readonly="assessor_readonly"
+            :name="name + '-comment-field'"
+            :value="comment_value"
+        />
     </div>
 </template>
 
 <script>
-import Comment from './comment.vue'
-import HelpText from './help_text.vue'
-import HelpTextUrl from './help_text_url.vue'
+import Comment from './comment.vue';
+import HelpText from './help_text.vue';
+import HelpTextUrl from './help_text_url.vue';
 export default {
-    props:["name","value", "id", "isRequired", "help_text","help_text_assessor","assessorMode","label","readonly","comment_value","assessor_readonly", "help_text_url", "help_text_assessor_url"],
-    components: {Comment, HelpText, HelpTextUrl},
-    data(){
+    components: { Comment, HelpText, HelpTextUrl },
+    props: [
+        'name',
+        'value',
+        'id',
+        'isRequired',
+        'help_text',
+        'help_text_assessor',
+        'assessorMode',
+        'label',
+        'readonly',
+        'comment_value',
+        'assessor_readonly',
+        'help_text_url',
+        'help_text_assessor_url',
+    ],
+    data() {
         let vm = this;
         return {
-            showingComment: false
-        }
+            showingComment: false,
+        };
     },
     methods: {
-        toggleComment(){
-            this.showingComment = ! this.showingComment;
-        }
-    }
-}
+        toggleComment() {
+            this.showingComment = !this.showingComment;
+        },
+    },
+};
 </script>
 
 <style lang="css">
-    input {
-        box-shadow:none;
-    }
+input {
+    box-shadow: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/text.vue b/boranga/frontend/boranga/src/components/forms/text.vue
index 023b215d..93361cd8 100755
--- a/boranga/frontend/boranga/src/components/forms/text.vue
+++ b/boranga/frontend/boranga/src/components/forms/text.vue
@@ -1,58 +1,108 @@
 <template lang="html">
     <div>
         <div class="form-group">
-            <label :id="id" for="label" class="inline" >{{ label }}</label>
+            <label :id="id" for="label" class="inline">{{ label }}</label>
             <template v-if="help_text">
                 <HelpText :help_text="help_text" />
             </template>
             <template v-if="help_text_assessor && assessorMode">
-                <HelpText :help_text="help_text_assessor" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
+                <HelpText
+                    :help_text="help_text_assessor"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
             <template v-if="help_text_url">
                 <HelpTextUrl :help_text_url="help_text_url" />
             </template>
             <template v-if="help_text_assessor_url && assessorMode">
-                <HelpTextUrl :help_text_url="help_text_assessor_url" assessorMode={assessorMode} isForAssessor={true} />
-            </template> 
-
+                <HelpTextUrl
+                    :help_text_url="help_text_assessor_url"
+                    assessor-mode="{assessorMode}"
+                    is-for-assessor="{true}"
+                />
+            </template>
 
             <template v-if="assessorMode && !assessor_readonly">
                 <template v-if="!showingComment">
-                    <a v-if="comment_value != null && comment_value != undefined && comment_value != ''" href="" @click.prevent="toggleComment"><i style="color:red" class="fa fa-comment-o">&nbsp;</i></a>
-                    <a v-else href="" @click.prevent="toggleComment"><i class="fa fa-comment-o">&nbsp;</i></a>
+                    <a
+                        v-if="
+                            comment_value != null &&
+                            comment_value != undefined &&
+                            comment_value != ''
+                        "
+                        href=""
+                        @click.prevent="toggleComment"
+                        ><i style="color: red" class="fa fa-comment-o"
+                            >&nbsp;</i
+                        ></a
+                    >
+                    <a v-else href="" @click.prevent="toggleComment"
+                        ><i class="fa fa-comment-o">&nbsp;</i></a
+                    >
                 </template>
-                <a href="" v-else  @click.prevent="toggleComment"><i class="fa fa-ban">&nbsp;</i></a>
+                <a v-else href="" @click.prevent="toggleComment"
+                    ><i class="fa fa-ban">&nbsp;</i></a
+                >
             </template>
-            <input :readonly="readonly" :type="type" class="form-control" :name="name" :value="value" :required="isRequired" />
+            <input
+                :readonly="readonly"
+                :type="type"
+                class="form-control"
+                :name="name"
+                :value="value"
+                :required="isRequired"
+            />
         </div>
-        <Comment :question="label" :readonly="assessor_readonly" :name="name+'-comment-field'" v-show="showingComment && assessorMode" :value="comment_value"/> 
+        <Comment
+            v-show="showingComment && assessorMode"
+            :question="label"
+            :readonly="assessor_readonly"
+            :name="name + '-comment-field'"
+            :value="comment_value"
+        />
     </div>
 </template>
 
 <script>
-import Comment from './comment.vue'
-import HelpText from './help_text.vue'
-import HelpTextUrl from './help_text_url.vue'
+import Comment from './comment.vue';
+import HelpText from './help_text.vue';
+import HelpTextUrl from './help_text_url.vue';
 export default {
-    props:["type","name","id", "comment_value","value","isRequired","help_text","help_text_assessor","assessorMode","label","readonly","assessor_readonly", "help_text_url", "help_text_assessor_url"],
-    components: {Comment, HelpText, HelpTextUrl},
-    data(){
+    components: { Comment, HelpText, HelpTextUrl },
+    props: [
+        'type',
+        'name',
+        'id',
+        'comment_value',
+        'value',
+        'isRequired',
+        'help_text',
+        'help_text_assessor',
+        'assessorMode',
+        'label',
+        'readonly',
+        'assessor_readonly',
+        'help_text_url',
+        'help_text_assessor_url',
+    ],
+    data() {
         let vm = this;
         return {
-            showingComment: false
-        }
+            showingComment: false,
+        };
     },
     methods: {
-        toggleComment(){
-            this.showingComment = ! this.showingComment;
-        }
-    }
-}
+        toggleComment() {
+            this.showingComment = !this.showingComment;
+        },
+    },
+};
 </script>
 
 <style lang="css">
-    input {
-        box-shadow:none;
-    }
+input {
+    box-shadow: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/forms/text_info.vue b/boranga/frontend/boranga/src/components/forms/text_info.vue
index b4934d83..8c2b1dac 100755
--- a/boranga/frontend/boranga/src/components/forms/text_info.vue
+++ b/boranga/frontend/boranga/src/components/forms/text_info.vue
@@ -1,15 +1,20 @@
 <template lang="html">
     <div class="form-group">
         <label :id="id" for="label" v-html="label"></label>
-        <input readonly="true" type="text" class="form-control" :name="name" :value="value" />
+        <input
+            readonly="true"
+            type="text"
+            class="form-control"
+            :name="name"
+            :value="value"
+        />
     </div>
 </template>
 
 <script>
 export default {
-    props:["label", "name", "value", "id"]
-}
+    props: ['label', 'name', 'value', 'id'],
+};
 </script>
 
-<style lang="css">
-</style>
+<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/internal/Home.vue b/boranga/frontend/boranga/src/components/internal/Home.vue
index b53298cb..75f3d9ce 100644
--- a/boranga/frontend/boranga/src/components/internal/Home.vue
+++ b/boranga/frontend/boranga/src/components/internal/Home.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="profile" class="container" id="internal-home">
+    <div v-if="profile" id="internal-home" class="container">
         <h2 class="mb-4">
             Welcome back {{ profile ? profile.first_name : '' }}
         </h2>
@@ -8,31 +8,47 @@
                 <div class="col-4">
                     <div class="card">
                         <div class="card-body">
-                            <h4 class="card-title mb-3">My Profile<i class="bi bi-person-fill ps-2 text-primary"></i>
+                            <h4 class="card-title mb-3">
+                                My Profile<i
+                                    class="bi bi-person-fill ps-2 text-primary"
+                                ></i>
                             </h4>
                             <div class="table-responsive">
-                                <table class="table table-sm ">
+                                <table class="table table-sm">
                                     <tbody>
                                         <tr>
-                                            <td scope="row" class="fw-bold">Name</td>
+                                            <td scope="row" class="fw-bold">
+                                                Name
+                                            </td>
                                             <td>{{ profile.full_name }}</td>
                                         </tr>
                                         <tr>
-                                            <td scope="row" class="fw-bold">Email</td>
+                                            <td scope="row" class="fw-bold">
+                                                Email
+                                            </td>
                                             <td>{{ profile.email }}</td>
                                         </tr>
                                         <tr v-if="profile.phone_number">
-                                            <td scope="row" class="fw-bold">Phone Number</td>
+                                            <td scope="row" class="fw-bold">
+                                                Phone Number
+                                            </td>
                                             <td>{{ profile.phone_number }}</td>
                                         </tr>
                                         <tr v-if="profile.mobile_number">
-                                            <td scope="row" class="fw-bold">Mobile</td>
+                                            <td scope="row" class="fw-bold">
+                                                Mobile
+                                            </td>
                                             <td>{{ profile.mobile_number }}</td>
                                         </tr>
                                     </tbody>
                                 </table>
-                                <a role="button" class="btn btn-primary btn-sm" href="/ledger-ui/accounts">
-                                    Manage Account <i class="bi bi-person-gear"></i>
+                                <a
+                                    role="button"
+                                    class="btn btn-primary btn-sm"
+                                    href="/ledger-ui/accounts"
+                                >
+                                    Manage Account
+                                    <i class="bi bi-person-gear"></i>
                                 </a>
                             </div>
                         </div>
@@ -41,26 +57,41 @@
                 <div class="col-4">
                     <div class="card">
                         <div class="card-body">
-                            <h4 class="card-title mb-3">My Area of Interest<i
-                                    class="bi bi-search-heart ps-2 text-primary"></i></h4>
+                            <h4 class="card-title mb-3">
+                                My Area of Interest<i
+                                    class="bi bi-search-heart ps-2 text-primary"
+                                ></i>
+                            </h4>
                             <div class="mb-4">
-                                <select class="form-select text-muted" name="area-of-interest" id="area-of-interest"
-                                    placeholder="Name" v-model="profile.area_of_interest"
-                                    @change="updateAreaOfInterest">
-                                    <option :value="null">No Specific Area</option>
+                                <select
+                                    id="area-of-interest"
+                                    v-model="profile.area_of_interest"
+                                    class="form-select text-muted"
+                                    name="area-of-interest"
+                                    placeholder="Name"
+                                    @change="updateAreaOfInterest"
+                                >
+                                    <option :value="null">
+                                        No Specific Area
+                                    </option>
                                     <option value="flora">Flora</option>
                                     <option value="fauna">Fauna</option>
-                                    <option value="community">Communities</option>
+                                    <option value="community">
+                                        Communities
+                                    </option>
                                 </select>
                             </div>
                             <div id="emailHelp" class="form-text">
-                                <p>This setting controls which tab will automatically be
-                                    opened
-                                    when browsing the Species and Communities, Conservation Status and Occurrences
-                                    pages.</p>
                                 <p>
-                                    If you are planning to access more than one area regularly it is recommended
-                                    that you leave this set as 'No Specific Area'
+                                    This setting controls which tab will
+                                    automatically be opened when browsing the
+                                    Species and Communities, Conservation Status
+                                    and Occurrences pages.
+                                </p>
+                                <p>
+                                    If you are planning to access more than one
+                                    area regularly it is recommended that you
+                                    leave this set as 'No Specific Area'
                                 </p>
                             </div>
                         </div>
@@ -69,17 +100,30 @@
                 <div class="col-4">
                     <div class="card">
                         <div class="card-body">
-                            <h4 class="card-title mb-3">My Groups<i class="bi bi-people-fill ps-2 text-primary"></i>
+                            <h4 class="card-title mb-3">
+                                My Groups<i
+                                    class="bi bi-people-fill ps-2 text-primary"
+                                ></i>
                             </h4>
-                            <p class="card-text text-muted">You are a member of the following groups:</p>
-                            <span v-for="group in profile.groups" class="badge bg-primary me-2 p-2 mb-2">{{ group
-                                }}</span>
+                            <p class="card-text text-muted">
+                                You are a member of the following groups:
+                            </p>
+                            <span
+                                v-for="group in profile.groups"
+                                :key="group"
+                                class="badge bg-primary me-2 p-2 mb-2"
+                                >{{ group }}</span
+                            >
                             <div v-if="profile.is_superuser" class="mt-3">
-                                <span class="badge bg-success me-2 p-2 mb-2">You are a Superuser</span>
+                                <span class="badge bg-success me-2 p-2 mb-2"
+                                    >You are a Superuser</span
+                                >
                             </div>
                             <div v-if="profile.is_superuser">
-                                <small class="text-muted">* Superusers are a member of every group by
-                                    default</small>
+                                <small class="text-muted"
+                                    >* Superusers are a member of every group by
+                                    default</small
+                                >
                             </div>
                         </div>
                     </div>
@@ -90,14 +134,14 @@
 </template>
 
 <script>
-import { api_endpoints } from '@/utils/hooks'
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
-    name: 'Home',
-    data: function() {
+    name: 'HomeComponent',
+    data: function () {
         return {
             profile: null,
-        }
+        };
     },
     computed: {
         lastLogin: function () {
@@ -106,6 +150,13 @@ export default {
             }
             let localDate = new Date(this.profile.last_login);
             return `${localDate.toLocaleDateString()} at ${localDate.toLocaleTimeString()}`;
+        },
+    },
+    created: function () {
+        // env variable is set in base.html template from django
+        var user_is_authenticated = `${env['user_is_authenticated']}`;
+        if (user_is_authenticated.toString() === 'true') {
+            this.fetchProfile();
         }
     },
     methods: {
@@ -116,13 +167,18 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify({ area_of_interest: vm.profile.area_of_interest })
-            }).then(async (response) => {
-                const json = await response.json();
-                vm.profile.area_of_interest = json.area_of_interest;
-            }, (error) => {
-                console.log(error);
-            });
+                body: JSON.stringify({
+                    area_of_interest: vm.profile.area_of_interest,
+                }),
+            }).then(
+                async (response) => {
+                    const json = await response.json();
+                    vm.profile.area_of_interest = json.area_of_interest;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
             // Reset default tabs for each page
             localStorage.removeItem('speciesCommunitiesActiveTab');
             localStorage.removeItem('conservationStatusActiveTab');
@@ -134,20 +190,16 @@ export default {
                 method: 'GET',
                 headers: {
                     'Content-Type': 'application/json',
+                },
+            }).then(
+                async (response) => {
+                    vm.profile = await response.json();
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }).then(async (response) => {
-                vm.profile = await response.json();
-            }, (error) => {
-
-            });
-        }
+            );
+        },
     },
-    created: function () {
-        // env variable is set in base.html template from django
-        var user_is_authenticated = `${env['user_is_authenticated']}`
-        if (user_is_authenticated.toString() === 'true') {
-            this.fetchProfile();
-        }
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
index f3bfcdf2..eacabf35 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
@@ -1,18 +1,40 @@
 <template lang="html">
     <div id="internal-conservation-status-proposal-amend">
-        <modal id="amendment-request-modal" transition="modal fade" @ok="ok()" @cancel="cancel()" title="Amendment Request" large>
+        <modal
+            id="amendment-request-modal"
+            transition="modal fade"
+            title="Amendment Request"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col-sm-offset-2 col-sm-8">
                                     <div class="form-group">
-                                        <label class="control-label pull-left" for="Name">Reason</label>
-                                        <select class="form-select" name="reason" ref="reason"
-                                            v-model="amendment.reason">
-                                            <option v-for="r in reason_choices" :value="r.key">{{ r.value }}</option>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Reason</label
+                                        >
+                                        <select
+                                            ref="reason"
+                                            v-model="amendment.reason"
+                                            class="form-select"
+                                            name="reason"
+                                        >
+                                            <option
+                                                v-for="r in reason_choices"
+                                                :value="r.key"
+                                            >
+                                                {{ r.value }}
+                                            </option>
                                         </select>
                                     </div>
                                 </div>
@@ -20,20 +42,40 @@
                             <div class="row mb-3">
                                 <div class="col-sm-offset-2 col-sm-8">
                                     <div class="form-group">
-                                        <label class="control-label pull-left" for="Name">Details</label>
-                                        <textarea class="form-control" name="name" v-model="amendment.text"
-                                            id="amendment_text"></textarea>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Details</label
+                                        >
+                                        <textarea
+                                            id="amendment_text"
+                                            v-model="amendment.text"
+                                            class="form-control"
+                                            name="name"
+                                        ></textarea>
                                     </div>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col-sm-offset-2 col-sm-8">
                                     <div class="form-group">
-                                        <div class="input-group date" ref="add_attachments" style="width: 70%;">
-                                            <FileField2 ref="filefield"
-                                                :uploaded_documents="amendment.cs_amendment_request_documents"
-                                                :delete_url="delete_url" :proposal_id="conservation_status_id"
-                                                :isRepeatable="true" name="amendment_request_file" />
+                                        <div
+                                            ref="add_attachments"
+                                            class="input-group date"
+                                            style="width: 70%"
+                                        >
+                                            <FileField2
+                                                ref="filefield"
+                                                :uploaded_documents="
+                                                    amendment.cs_amendment_request_documents
+                                                "
+                                                :delete_url="delete_url"
+                                                :proposal_id="
+                                                    conservation_status_id
+                                                "
+                                                :is-repeatable="true"
+                                                name="amendment_request_file"
+                                            />
                                         </div>
                                     </div>
                                 </div>
@@ -47,14 +89,13 @@
 </template>
 
 <script>
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import FileField2 from '@/components/forms/filefield.vue';
 
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import FileField2 from '@/components/forms/filefield.vue'
-
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'amendment-request',
+    name: 'AmendmentRequest',
     components: {
         modal,
         alert,
@@ -84,7 +125,7 @@ export default {
             errors: false,
             errorString: '',
             validation_form: null,
-        }
+        };
     },
     computed: {
         showError: function () {
@@ -92,11 +133,24 @@ export default {
             return vm.errors;
         },
         delete_url: function () {
-            return (this.amendment.id) ? '/api/cs_amendment_request/' + this.amendment.id + '/delete_document/' : '';
-        }
+            return this.amendment.id
+                ? '/api/cs_amendment_request/' +
+                      this.amendment.id +
+                      '/delete_document/'
+                : '';
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.amendForm;
+        vm.fetchAmendmentChoices();
+        vm.addFormValidations();
+        this.$nextTick(() => {
+            vm.eventListerners();
+        });
+        //console.log(validate);
     },
     methods: {
-
         ok: function () {
             let vm = this;
             if ($(vm.form).valid()) {
@@ -112,7 +166,7 @@ export default {
             this.amendment = {
                 reason: '',
                 reason_id: null,
-                conservation_status: this.conservation_status_id
+                conservation_status: this.conservation_status_id,
             };
             this.errors = false;
             $(this.$refs.reason).val(null).trigger('change');
@@ -122,17 +176,20 @@ export default {
         },
         fetchAmendmentChoices: function () {
             let vm = this;
-            fetch('/api/proposal_amendment_request_reason_choices.json').then(async (response) => {
-                vm.reason_choices = await response.json();
-            }, (error) => {
-                console.log(error);
-            });
+            fetch('/api/proposal_amendment_request_reason_choices.json').then(
+                async (response) => {
+                    vm.reason_choices = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         sendData: function () {
             let vm = this;
             vm.errors = false;
             let amendment = JSON.parse(JSON.stringify(vm.amendment));
-            let formData = new FormData()
+            let formData = new FormData();
             var files = vm.$refs.filefield.files;
             $.each(files, function (idx, v) {
                 var file = v['file'];
@@ -153,52 +210,55 @@ export default {
                 headers: {
                     'Content-Type': 'multipart/form-data',
                 },
-            }).then((response) => {
-                swal.fire({
-                    title: 'Sent',
-                    text: 'An email has been sent to proponent with the request to amend this Proposal',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.amendingProposal = true;
-                vm.close();
-                //vm.$emit('refreshFromResponse',response);
-                fetch(`/api/conservation_status/${vm.conservation_status_id}/internal_conservation_status.json`).then((response) => {
-                    vm.$emit('refreshFromResponse', response);
-
-                }, (error) => {
+            }).then(
+                (response) => {
+                    swal.fire({
+                        title: 'Sent',
+                        text: 'An email has been sent to proponent with the request to amend this Proposal',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.amendingProposal = true;
+                    vm.close();
+                    //vm.$emit('refreshFromResponse',response);
+                    fetch(
+                        `/api/conservation_status/${vm.conservation_status_id}/internal_conservation_status.json`
+                    ).then(
+                        (response) => {
+                            vm.$emit('refreshFromResponse', response);
+                        },
+                        (error) => {
+                            console.log(error);
+                        }
+                    );
+                    vm.$router.push({ path: '/internal/conservation-status' }); //Navigate to dashboard after creating Amendment request
+                },
+                (error) => {
                     console.log(error);
-                });
-                vm.$router.push({ path: '/internal/conservation-status' }); //Navigate to dashboard after creating Amendment request
-
-            }, (error) => {
-                console.log(error);
-                vm.errors = true;
-                vm.errorString = helpers.apiVueResourceError(error);
-                vm.amendingProposal = true;
-
-            });
-
-
+                    vm.errors = true;
+                    vm.errorString = helpers.apiVueResourceError(error);
+                    vm.amendingProposal = true;
+                }
+            );
         },
         addFormValidations: function () {
             let vm = this;
             vm.validation_form = $(vm.form).validate({
                 rules: {
-                    reason: "required"
-
-
+                    reason: 'required',
                 },
                 messages: {
-                    reason: "field is required",
-
+                    reason: 'field is required',
                 },
                 showErrors: function (errorMap, errorList) {
                     $.each(this.validElements(), function (index, element) {
                         var $element = $(element);
-                        $element.attr("data-original-title", "").parents('.form-group').removeClass('has-error');
+                        $element
+                            .attr('data-original-title', '')
+                            .parents('.form-group')
+                            .removeClass('has-error');
                     });
                     // destroy tooltips on valid elements
                     // commented below (Priya) as gives error for .tooltipz
@@ -208,47 +268,39 @@ export default {
                         var error = errorList[i];
                         $(error.element)
                             .tooltip({
-                                trigger: "focus"
+                                trigger: 'focus',
                             })
-                            .attr("data-original-title", error.message)
-                            .parents('.form-group').addClass('has-error');
+                            .attr('data-original-title', error.message)
+                            .parents('.form-group')
+                            .addClass('has-error');
                     }
-                }
+                },
             });
         },
         eventListerners: function () {
             let vm = this;
 
             // Intialise select2
-            $(vm.$refs.reason).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Reason",
-                dropdownParent: $('#amendment-request-modal .modal-body'),
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.reason)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Reason',
+                    dropdownParent: $('#amendment-request-modal .modal-body'),
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.amendment.reason = selected.val();
                     vm.amendment.reason_id = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.amendment.reason = selected.val();
                     vm.amendment.reason_id = selected.val();
                 });
-        }
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.amendForm;
-        vm.fetchAmendmentChoices();
-        vm.addFormValidations();
-        this.$nextTick(() => {
-            vm.eventListerners();
-        });
-        //console.log(validate);
-    }
-}
+};
 </script>
 
 <style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue
index d1dc79f9..d10166f8 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/back_to_assessor.vue
@@ -1,20 +1,45 @@
 <template lang="html">
     <div id="internal-conservation-status-proposal-back-to-assessor">
-        <modal id="back-to-assessor-modal" transition="modal fade" @ok="ok()" @cancel="close()"
-            :title="`Send CS${conservation_status_id} Back to Assessor`" okText="Back to Assessor" large>
+        <modal
+            id="back-to-assessor-modal"
+            transition="modal fade"
+            :title="`Send CS${conservation_status_id} Back to Assessor`"
+            ok-text="Back to Assessor"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <form class="form-horizontal needs-validation" id="back-to-assessor-form" name="back-to-assessor-form" novalidate>
-                        <alert v-if="errors" type="danger"><strong>{{ errors }}</strong></alert>
+                    <form
+                        id="back-to-assessor-form"
+                        class="form-horizontal needs-validation"
+                        name="back-to-assessor-form"
+                        novalidate
+                    >
+                        <alert v-if="errors" type="danger"
+                            ><strong>{{ errors }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col">
                                     <div class="form-group">
-                                        <label class="control-label mb-3" for="Name">Reason / Comments</label>
-                                        <textarea class="form-control" name="approver_comment" ref="approver_comment"
-                                            required v-model="approver_comment"></textarea>
+                                        <label
+                                            class="control-label mb-3"
+                                            for="Name"
+                                            >Reason / Comments</label
+                                        >
+                                        <textarea
+                                            ref="approver_comment"
+                                            v-model="approver_comment"
+                                            class="form-control"
+                                            name="approver_comment"
+                                            required
+                                        ></textarea>
                                         <div class="invalid-feedback">
-                                            Please enter the reason for sending the Conservation Status Proposal back to the Assessor.
+                                            Please enter the reason for sending
+                                            the Conservation Status Proposal
+                                            back to the Assessor.
                                         </div>
                                     </div>
                                 </div>
@@ -28,12 +53,12 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 
 export default {
-    name: 'back-to-assessor',
+    name: 'BackToAssessor',
     components: {
         modal,
         alert,
@@ -43,14 +68,14 @@ export default {
             type: Number,
         },
     },
+    emits: ['refreshFromResponse'],
     data: function () {
         return {
             approver_comment: null,
             isModalOpen: false,
             errors: null,
-        }
+        };
     },
-    emits: ['refreshFromResponse'],
     watch: {
         isModalOpen: function (val) {
             if (val) {
@@ -58,7 +83,7 @@ export default {
                     $(this.$refs.approver_comment).focus();
                 });
             }
-        }
+        },
     },
     methods: {
         ok: function () {
@@ -80,18 +105,28 @@ export default {
         backToAssessor: function () {
             let vm = this;
             vm.errors = null;
-            let data = { 'status': 'with_assessor', 'approver_comment': vm.approver_comment }
-            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_id + '/switch_status')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-            })
-                .then((response) => {
+            let data = {
+                status: 'with_assessor',
+                approver_comment: vm.approver_comment,
+            };
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.conservation_status,
+                    vm.conservation_status_id + '/switch_status'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(data),
+                }
+            ).then(
+                (response) => {
                     vm.$emit('refreshFromResponse', response);
                     this.close();
-                }, (error) => {
+                },
+                (error) => {
                     swal.fire({
                         title: 'Application Error',
                         text: helpers.apiVueResourceError(error),
@@ -100,8 +135,9 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue
index d14cc27c..a288ead7 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue
@@ -2,23 +2,33 @@
     <div id="communityConservationStatusHistory">
         <modal
             transition="modal fade"
-            :title="'Conservation Status CS'
-            + conservationStatusId + ' - '
-            + conservationListId + ' - Community '+ communityId +' - History'"
+            :title="
+                'Conservation Status CS' +
+                conservationStatusId +
+                ' - ' +
+                conservationListId +
+                ' - Community ' +
+                communityId +
+                ' - History'
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
-                                <div v-if="conservationStatusId" class="col-lg-12">
+                                <div
+                                    v-if="conservationStatusId"
+                                    class="col-lg-12"
+                                >
                                     <datatable
                                         :id="datatable_id"
                                         ref="history_datatable"
@@ -26,14 +36,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'CS'+conservationStatusId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'ConservationStatus'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'CS' + conservationStatusId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'ConservationStatus'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -53,7 +65,7 @@ import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
 
 export default {
-    name: 'communityConservationStatusHistory',
+    name: 'CommunityConservationStatusHistory',
     components: {
         modal,
         alert,
@@ -79,8 +91,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -118,16 +129,28 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.conservationstatus.fields.conservation_status_number) {
-                        return full.data.conservationstatus.fields.conservation_status_number+'-'+full.revision_sequence;
+                    if (
+                        full.data.conservationstatus.fields
+                            .conservation_status_number
+                    ) {
+                        return (
+                            full.data.conservationstatus.fields
+                                .conservation_status_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "CS"+full.data.conservationstatus.pk+'-'+full.revision_sequence;
+                        return (
+                            'CS' +
+                            full.data.conservationstatus.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -154,14 +177,14 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.conservationstatus.fields.conservation_status_number;
+                    return full.data.conservationstatus.fields
+                        .conservation_status_number;
                 },
                 name: 'conservation_status_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -174,7 +197,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -187,7 +209,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -237,7 +258,6 @@ export default {
         },
         column_list: function () {
             return {
-
                 data: 'data.data.conservationlist.fields.code',
                 defaultContent: '',
                 orderable: false,
@@ -255,21 +275,20 @@ export default {
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.conservationstatus.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.conservationstatus.fields.processing_status;
+                    return full.data.conservationstatus.fields
+                        .processing_status;
                 },
                 name: 'processing_status',
             };
         },
         column_comment: function () {
             return {
-
                 data: 'data.data.conservationstatus.fields.comment',
                 defaultContent: '',
                 orderable: false,
@@ -279,7 +298,7 @@ export default {
                     //return full.data.conservationstatus.fields.comment;
                     let value = full.data.conservationstatus.fields.comment;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'comment',
             };
@@ -290,11 +309,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -322,7 +341,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_conservation_status(this.conservationStatusId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_conservation_status(
+                            this.conservationStatusId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -332,8 +354,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -341,65 +363,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                    helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index 094ee62c..b88f6652 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -1,71 +1,173 @@
 <template lang="html">
-    <div v-if="conservation_status_obj" class="container" id="internalConservationStatus">
-        <div class="row" style="padding-bottom: 50px;">
-            <h3><span class="text-capitalize">{{ conservation_status_obj.group_type }}</span> {{
-                conservation_status_obj.conservation_status_number }} <span class="text-capitalize" v-if="identifier"> -
-                    {{ identifier
-                    }}</span>
+    <div
+        v-if="conservation_status_obj"
+        id="internalConservationStatus"
+        class="container"
+    >
+        <div class="row" style="padding-bottom: 50px">
+            <h3>
+                <span class="text-capitalize">{{
+                    conservation_status_obj.group_type
+                }}</span>
+                {{ conservation_status_obj.conservation_status_number }}
+                <span v-if="identifier" class="text-capitalize">
+                    - {{ identifier }}</span
+                >
             </h3>
             <div class="col-md-3">
-                <CommsLogs :comms_url="comms_url" :logs_url="logs_url" :comms_add_url="comms_add_url"
-                    :disable_add_entry="!conservation_status_obj.can_add_log" class="mb-3" />
+                <CommsLogs
+                    :comms_url="comms_url"
+                    :logs_url="logs_url"
+                    :comms_add_url="comms_add_url"
+                    :disable_add_entry="!conservation_status_obj.can_add_log"
+                    class="mb-3"
+                />
 
-                <Submission :submitter_first_name="submitter_first_name" :submitter_last_name="submitter_last_name"
+                <Submission
+                    :submitter_first_name="submitter_first_name"
+                    :submitter_last_name="submitter_last_name"
                     :lodgement_date="conservation_status_obj.lodgement_date"
-                    :is_new_contributor="conservation_status_obj.is_new_contributor" class="mb-3" />
+                    :is_new_contributor="
+                        conservation_status_obj.is_new_contributor
+                    "
+                    class="mb-3"
+                />
 
                 <div class="card card-default sticky-top">
-                    <div class="card-header">
-                        Workflow
-                    </div>
+                    <div class="card-header">Workflow</div>
                     <div class="card-body">
                         <strong>Status</strong><br />
                         {{ conservation_status_obj.processing_status }}
                         <template
-                            v-if="conservation_status_obj.processing_status == 'On Agenda' && conservation_status_obj.most_recent_meeting">
+                            v-if="
+                                conservation_status_obj.processing_status ==
+                                    'On Agenda' &&
+                                conservation_status_obj.most_recent_meeting
+                            "
+                        >
                             <p class="my-2">
                                 <strong>
-                                    <template v-if="conservation_status_obj.most_recent_meeting_completed">Meeting
-                                        Completed<i class="bi bi-check-circle-fill ms-2 text-success"></i></template>
-                                    <template v-else>Awaiting Meeting<i
-                                            class="bi bi-hourglass-split ms-2 text-secondary"></i></template>
-                                </strong><br />
-                                <a :href="`/internal/meetings/${conservation_status_obj.most_recent_meeting.id}?action=edit`"
-                                    target="_blank">{{
-                                        conservation_status_obj.most_recent_meeting.title ?
-                                            conservation_status_obj.most_recent_meeting.title : 'Meeting Draft' }}<i
-                                        class="bi bi-box-arrow-up-right ms-2"></i></a>
+                                    <template
+                                        v-if="
+                                            conservation_status_obj.most_recent_meeting_completed
+                                        "
+                                        >Meeting Completed<i
+                                            class="bi bi-check-circle-fill ms-2 text-success"
+                                        ></i
+                                    ></template>
+                                    <template v-else
+                                        >Awaiting Meeting<i
+                                            class="bi bi-hourglass-split ms-2 text-secondary"
+                                        ></i
+                                    ></template> </strong
+                                ><br />
+                                <a
+                                    :href="`/internal/meetings/${conservation_status_obj.most_recent_meeting.id}?action=edit`"
+                                    target="_blank"
+                                    >{{
+                                        conservation_status_obj
+                                            .most_recent_meeting.title
+                                            ? conservation_status_obj
+                                                  .most_recent_meeting.title
+                                            : 'Meeting Draft'
+                                    }}<i
+                                        class="bi bi-box-arrow-up-right ms-2"
+                                    ></i
+                                ></a>
                             </p>
                         </template>
                     </div>
-                    <div v-if="conservation_status_obj.processing_status != 'Draft'" class="card-body border-top">
+                    <div
+                        v-if="
+                            conservation_status_obj.processing_status != 'Draft'
+                        "
+                        class="card-body border-top"
+                    >
                         <div class="row">
                             <div class="col-sm-12">
                                 <strong>Currently assigned to</strong><br />
                                 <div class="form-group">
                                     <template
-                                        v-if="['Proposed For Agenda', 'Ready For Agenda', 'On Agenda', 'Proposed DeListed', 'Unlocked', 'Approved', 'Closed', 'DeListed'].includes(conservation_status_obj.processing_status)">
-                                        <select ref="assigned_officer" :disabled="!canAction || canLock"
-                                            class="form-control" v-model="conservation_status_obj.assigned_approver">
-                                            <option v-for="member in conservation_status_obj.allowed_assessors"
-                                                :value="member.id">{{ member.first_name }} {{ member.last_name }}
+                                        v-if="
+                                            [
+                                                'Proposed For Agenda',
+                                                'Ready For Agenda',
+                                                'On Agenda',
+                                                'Proposed DeListed',
+                                                'Unlocked',
+                                                'Approved',
+                                                'Closed',
+                                                'DeListed',
+                                            ].includes(
+                                                conservation_status_obj.processing_status
+                                            )
+                                        "
+                                    >
+                                        <select
+                                            ref="assigned_officer"
+                                            v-model="
+                                                conservation_status_obj.assigned_approver
+                                            "
+                                            :disabled="!canAction || canLock"
+                                            class="form-control"
+                                        >
+                                            <option
+                                                v-for="member in conservation_status_obj.allowed_assessors"
+                                                :value="member.id"
+                                            >
+                                                {{ member.first_name }}
+                                                {{ member.last_name }}
                                             </option>
                                         </select>
-                                        <a v-if="conservation_status_obj.can_user_assign_to_self"
-                                            @click.prevent="assignRequestUser()" class="float-end" role="button">Assign
-                                            to me</a>
+                                        <a
+                                            v-if="
+                                                conservation_status_obj.can_user_assign_to_self
+                                            "
+                                            class="float-end"
+                                            role="button"
+                                            @click.prevent="assignRequestUser()"
+                                            >Assign >Assign to me</a
+                                        >
                                     </template>
                                     <template
-                                        v-else-if="['With Assessor', 'With Referral', 'Deferred'].includes(conservation_status_obj.processing_status)">
-                                        <select ref="assigned_officer" :disabled="!canAction" class="form-control"
-                                            v-model="conservation_status_obj.assigned_officer">
-                                            <option v-for="member in conservation_status_obj.allowed_assessors"
-                                                :value="member.id">{{ member.first_name }} {{ member.last_name }}
+                                        v-else-if="
+                                            [
+                                                'With Assessor',
+                                                'With Referral',
+                                                'Deferred',
+                                            ].includes(
+                                                conservation_status_obj.processing_status
+                                            )
+                                        "
+                                    >
+                                        <select
+                                            ref="assigned_officer"
+                                            v-model="
+                                                conservation_status_obj.assigned_officer
+                                            "
+                                            :disabled="!canAction"
+                                            class="form-control"
+                                        >
+                                            <option
+                                                v-for="member in conservation_status_obj.allowed_assessors"
+                                                :value="member.id"
+                                            >
+                                                {{ member.first_name }}
+                                                {{ member.last_name }}
                                             </option>
                                         </select>
-                                        <a v-if="canAssess && conservation_status_obj.assigned_officer != conservation_status_obj.current_assessor.id"
-                                            @click.prevent="assignRequestUser()" class="float-end" role="button">Assign
-                                            to me</a>
+                                        <a
+                                            v-if="
+                                                canAssess &&
+                                                conservation_status_obj.assigned_officer !=
+                                                    conservation_status_obj
+                                                        .current_assessor.id
+                                            "
+                                            class="float-end"
+                                            role="button"
+                                            @click.prevent="assignRequestUser()"
+                                            >Assign >Assign to me</a
+                                        >
                                     </template>
                                 </div>
                             </div>
@@ -76,32 +178,67 @@
                             <div class="col-sm-12">
                                 <strong>Referrals</strong><br />
                                 <div class="form-group mb-3">
-                                    <select :disabled="!canLimitedAction" ref="referees" class="form-control">
-                                    </select>
-                                    <template v-if='!sendingReferral'>
+                                    <select
+                                        ref="referees"
+                                        :disabled="!canLimitedAction"
+                                        class="form-control"
+                                    ></select>
+                                    <template v-if="!sendingReferral">
                                         <template v-if="selected_referral">
-                                            <label class="control-label mt-2" for="referral_text">Comments</label>
-                                            <textarea class="form-control" name="referral_text" ref="referral_text"
-                                                v-model="referral_text"></textarea>
-                                            <a v-if="canLimitedAction" @click.prevent="sendReferral()" class="float-end"
-                                                role="button">Send</a>
+                                            <label
+                                                class="control-label mt-2"
+                                                for="referral_text"
+                                                >Comments</label
+                                            >
+                                            <textarea
+                                                ref="referral_text"
+                                                v-model="referral_text"
+                                                class="form-control"
+                                                name="referral_text"
+                                            ></textarea>
+                                            <a
+                                                v-if="canLimitedAction"
+                                                class="float-end"
+                                                role="button"
+                                                @click.prevent="sendReferral()"
+                                                >Send</a
+                                            >
                                         </template>
                                     </template>
                                     <template v-else>
-                                        <span v-if="canLimitedAction" @click.prevent="sendReferral()" disabled
-                                            class="text-primary float-end" role="button">
-                                            Sending Referral <span class="spinner-border spinner-border-sm"
-                                                role="status" aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span>
+                                        <span
+                                            v-if="canLimitedAction"
+                                            disabled
+                                            class="text-primary float-end"
+                                            role="button"
+                                            @click.prevent="sendReferral()"
+                                        >
+                                            Sending Referral
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
                                         </span>
                                     </template>
                                 </div>
-                                <div v-if="
-                                    conservation_status_obj.external_referral_invites &&
-                                    conservation_status_obj.external_referral_invites.length > 0
-                                ">
-                                    <div class="fw-bold mb-1">External Referee Invites</div>
-                                    <table class="table table-sm table-hover table-referrals">
+                                <div
+                                    v-if="
+                                        conservation_status_obj.external_referral_invites &&
+                                        conservation_status_obj
+                                            .external_referral_invites.length >
+                                            0
+                                    "
+                                >
+                                    <div class="fw-bold mb-1">
+                                        External Referee Invites
+                                    </div>
+                                    <table
+                                        class="table table-sm table-hover table-referrals"
+                                    >
                                         <thead>
                                             <tr>
                                                 <th scope="col">Referee</th>
@@ -110,32 +247,56 @@
                                             </tr>
                                         </thead>
                                         <tbody>
-                                            <tr v-for="external_referee_invite in conservation_status_obj.external_referral_invites"
-                                                :key="external_referee_invite.id">
+                                            <tr
+                                                v-for="external_referee_invite in conservation_status_obj.external_referral_invites"
+                                                :key="
+                                                    external_referee_invite.id
+                                                "
+                                            >
                                                 <td class="truncate-name">
-                                                    {{ external_referee_invite.full_name }}
+                                                    {{
+                                                        external_referee_invite.full_name
+                                                    }}
                                                 </td>
                                                 <td>Pending</td>
                                                 <td class="text-center">
-                                                    <a role="button" data-bs-toggle="popover"
-                                                        data-bs-trigger="hover focus" :data-bs-content="'Send a reminder to ' +
+                                                    <a
+                                                        role="button"
+                                                        data-bs-toggle="popover"
+                                                        data-bs-trigger="hover focus"
+                                                        :data-bs-content="
+                                                            'Send a reminder to ' +
                                                             external_referee_invite.full_name
-                                                            " data-bs-placement="bottom" @click.prevent="
-                                                                remindExternalReferee(
-                                                                    external_referee_invite
-                                                                )
-                                                                "><i class="fa fa-bell text-warning"
-                                                            aria-hidden="true"></i>
+                                                        "
+                                                        data-bs-placement="bottom"
+                                                        @click.prevent="
+                                                            remindExternalReferee(
+                                                                external_referee_invite
+                                                            )
+                                                        "
+                                                        ><i
+                                                            class="fa fa-bell text-warning"
+                                                            aria-hidden="true"
+                                                        ></i>
                                                     </a>
-                                                    <a role="button" data-bs-toggle="popover"
-                                                        data-bs-trigger="hover focus" :data-bs-content="'Retract the external referee invite sent to ' +
+                                                    <a
+                                                        role="button"
+                                                        data-bs-toggle="popover"
+                                                        data-bs-trigger="hover focus"
+                                                        :data-bs-content="
+                                                            'Retract the external referee invite sent to ' +
                                                             external_referee_invite.full_name
-                                                            " data-bs-placement="bottom" @click.prevent="
-                                                                retractExternalRefereeInvite(
-                                                                    external_referee_invite
-                                                                )
-                                                                "><i class="fa fa-times-circle text-danger"
-                                                            aria-hidden="true"></i>
+                                                        "
+                                                        data-bs-placement="bottom"
+                                                        @click.prevent="
+                                                            retractExternalRefereeInvite(
+                                                                external_referee_invite
+                                                            )
+                                                        "
+                                                        ><i
+                                                            class="fa fa-times-circle text-danger"
+                                                            aria-hidden="true"
+                                                        ></i>
                                                     </a>
                                                 </td>
                                             </tr>
@@ -144,15 +305,32 @@
                                 </div>
 
                                 <template
-                                    v-if="conservation_status_obj.latest_referrals && conservation_status_obj.latest_referrals.length > 0">
+                                    v-if="
+                                        conservation_status_obj.latest_referrals &&
+                                        conservation_status_obj.latest_referrals
+                                            .length > 0
+                                    "
+                                >
                                     <div>
                                         <div class="fw-bold mb-1">
                                             Recent Referrals
-                                            <small class="text-secondary fw-lighter">(Showing {{
-                                                conservation_status_obj.latest_referrals.length }} of
-                                                {{ conservation_status_obj.referrals.length }})</small>
+                                            <small
+                                                class="text-secondary fw-lighter"
+                                                >(Showing
+                                                {{
+                                                    conservation_status_obj
+                                                        .latest_referrals.length
+                                                }}
+                                                of
+                                                {{
+                                                    conservation_status_obj
+                                                        .referrals.length
+                                                }})</small
+                                            >
                                         </div>
-                                        <table class="table table-sm table-hover table-referrals">
+                                        <table
+                                            class="table table-sm table-hover table-referrals"
+                                        >
                                             <thead>
                                                 <tr>
                                                     <th>Referee</th>
@@ -161,45 +339,104 @@
                                                 </tr>
                                             </thead>
                                             <tbody>
-                                                <tr v-for="r in conservation_status_obj.latest_referrals">
+                                                <tr
+                                                    v-for="r in conservation_status_obj.latest_referrals"
+                                                >
                                                     <td class="truncate-name">
-                                                        {{ r.referral.first_name }} {{
-                                                            r.referral.last_name }}
+                                                        {{
+                                                            r.referral
+                                                                .first_name
+                                                        }}
+                                                        {{
+                                                            r.referral.last_name
+                                                        }}
                                                     </td>
                                                     <td>
-                                                        {{ r.processing_status }}
+                                                        {{
+                                                            r.processing_status
+                                                        }}
                                                     </td>
                                                     <td>
-                                                        <template v-if="r.processing_status == 'Awaiting'">
-                                                            <a v-if="canLimitedAction" role="button"
-                                                                data-bs-toggle="popover" data-bs-trigger="hover"
-                                                                :data-bs-content="'Send a reminder to ' +
-                                                                    r.referral['fullname']
-                                                                    " data-bs-placement="bottom"
+                                                        <template
+                                                            v-if="
+                                                                r.processing_status ==
+                                                                'Awaiting'
+                                                            "
+                                                        >
+                                                            <a
+                                                                v-if="
+                                                                    canLimitedAction
+                                                                "
+                                                                role="button"
+                                                                data-bs-toggle="popover"
+                                                                data-bs-trigger="hover"
+                                                                :data-bs-content="
+                                                                    'Send a reminder to ' +
+                                                                    r.referral[
+                                                                        'fullname'
+                                                                    ]
+                                                                "
+                                                                data-bs-placement="bottom"
                                                                 data-bs-container="body"
-                                                                @click.prevent="remindReferral(r)"><i
+                                                                @click.prevent="
+                                                                    remindReferral(
+                                                                        r
+                                                                    )
+                                                                "
+                                                                ><i
                                                                     class="fa fa-bell text-warning"
-                                                                    aria-hidden="true"></i>
+                                                                    aria-hidden="true"
+                                                                ></i>
                                                             </a>
-                                                            <a role="button" data-bs-toggle="popover"
-                                                                data-bs-trigger="hover" :data-bs-content="'Recall the referral request sent to ' +
-                                                                    r.referral['fullname']
-                                                                    " data-bs-placement="bottom"
+                                                            <a
+                                                                role="button"
+                                                                data-bs-toggle="popover"
+                                                                data-bs-trigger="hover"
+                                                                :data-bs-content="
+                                                                    'Recall the referral request sent to ' +
+                                                                    r.referral[
+                                                                        'fullname'
+                                                                    ]
+                                                                "
+                                                                data-bs-placement="bottom"
                                                                 data-bs-container="body"
-                                                                @click.prevent="recallReferral(r)"><i
+                                                                @click.prevent="
+                                                                    recallReferral(
+                                                                        r
+                                                                    )
+                                                                "
+                                                                ><i
                                                                     class="fa fa-times-circle text-danger"
-                                                                    aria-hidden="true"></i>
+                                                                    aria-hidden="true"
+                                                                ></i>
                                                             </a>
                                                         </template>
                                                         <template v-else>
-                                                            <template v-if="canLimitedAction"><a role="button"
-                                                                    data-bs-toggle="popover" data-bs-trigger="hover"
-                                                                    :data-bs-content="'Resend this referral request to ' +
-                                                                        r.referral['fullname']
-                                                                        " data-bs-container="body"
-                                                                    @click.prevent="resendReferral(r)"><i
+                                                            <template
+                                                                v-if="
+                                                                    canLimitedAction
+                                                                "
+                                                                ><a
+                                                                    role="button"
+                                                                    data-bs-toggle="popover"
+                                                                    data-bs-trigger="hover"
+                                                                    :data-bs-content="
+                                                                        'Resend this referral request to ' +
+                                                                        r
+                                                                            .referral[
+                                                                            'fullname'
+                                                                        ]
+                                                                    "
+                                                                    data-bs-container="body"
+                                                                    @click.prevent="
+                                                                        resendReferral(
+                                                                            r
+                                                                        )
+                                                                    "
+                                                                    ><i
                                                                         class="fa fa-envelope text-primary"
-                                                                        aria-hidden="true"></i>
+                                                                        aria-hidden="true"
+                                                                    ></i>
                                                                 </a>
                                                             </template>
                                                         </template>
@@ -207,16 +444,26 @@
                                                 </tr>
                                             </tbody>
                                         </table>
-                                        <CSMoreReferrals @refreshFromResponse="refreshFromResponse"
-                                            :conservation_status_obj="conservation_status_obj"
-                                            :canAction="canLimitedAction" :isFinalised="isFinalised"
-                                            :referral_url="referralListURL" />
+                                        <CSMoreReferrals
+                                            :conservation_status_obj="
+                                                conservation_status_obj
+                                            "
+                                            :can-action="canLimitedAction"
+                                            :is-finalised="isFinalised"
+                                            :referral_url="referralListURL"
+                                            @refresh-from-response="
+                                                refreshFromResponse
+                                            "
+                                        />
                                     </div>
                                 </template>
                             </div>
                         </div>
                     </div>
-                    <div v-if="show_finalised_actions" class="card-body border-top">
+                    <div
+                        v-if="show_finalised_actions"
+                        class="card-body border-top"
+                    >
                         <div class="row">
                             <div class="col-sm-12">
                                 <div class="row mb-2">
@@ -225,34 +472,61 @@
                                     </div>
                                 </div>
                                 <template
-                                    v-if="hasAssessorMode && conservation_status_obj.processing_status == 'Approved'">
+                                    v-if="
+                                        hasAssessorMode &&
+                                        conservation_status_obj.processing_status ==
+                                            'Approved'
+                                    "
+                                >
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="proposeDelist()">Propose Delist</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="proposeDelist()"
+                                            >
+                                                Propose Delist</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                                 <template v-if="canAction && canUnlock">
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="unlockConservationStatus()">Unlock</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    unlockConservationStatus()
+                                                "
+                                            >
+                                                Unlock</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                                 <template v-if="canAction && canLock">
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="lockConservationStatus()">Lock</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    lockConservationStatus()
+                                                "
+                                            >
+                                                Lock</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                             </div>
                         </div>
                     </div>
-                    <div v-if="!isFinalised && canAction" class="card-body border-top">
+                    <div
+                        v-if="!isFinalised && canAction"
+                        class="card-body border-top"
+                    >
                         <div class="row">
                             <div class="col-sm-12">
                                 <div class="row mb-2">
@@ -260,96 +534,200 @@
                                         <strong>Action</strong><br />
                                     </div>
                                 </div>
-                                <template v-if="conservation_status_obj.processing_status == 'With Assessor'">
+                                <template
+                                    v-if="
+                                        conservation_status_obj.processing_status ==
+                                        'With Assessor'
+                                    "
+                                >
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="amendmentRequest()">Request
-                                                Amendment</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    amendmentRequest()
+                                                "
+                                            >
+                                                Request Amendment</button
+                                            ><br />
                                         </div>
                                     </div>
-                                    <div class="row mb-2"
-                                        v-if="conservation_status_obj.approval_level == 'minister' && conservation_status_obj.processing_status == 'With Assessor'">
+                                    <div
+                                        v-if="
+                                            conservation_status_obj.approval_level ==
+                                                'minister' &&
+                                            conservation_status_obj.processing_status ==
+                                                'With Assessor'
+                                        "
+                                        class="row mb-2"
+                                    >
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="proposedReadyForAgenda()">Propose for
-                                                Agenda</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    proposedReadyForAgenda()
+                                                "
+                                            >
+                                                Propose for Agenda</button
+                                            ><br />
                                         </div>
                                     </div>
-                                    <div class="row mb-2" v-if="conservation_status_obj.approval_level == 'immediate'">
+                                    <div
+                                        v-if="
+                                            conservation_status_obj.approval_level ==
+                                            'immediate'
+                                        "
+                                        class="row mb-2"
+                                    >
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="declineProposal()">Decline</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    declineProposal()
+                                                "
+                                            >
+                                                Decline</button
+                                            ><br />
                                         </div>
                                     </div>
-                                    <div class="row mb-2" v-if="conservation_status_obj.approval_level == 'immediate'">
+                                    <div
+                                        v-if="
+                                            conservation_status_obj.approval_level ==
+                                            'immediate'
+                                        "
+                                        class="row mb-2"
+                                    >
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="issueProposal()">Approve</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="issueProposal()"
+                                            >
+                                                Approve</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                                 <template
-                                    v-if="conservation_status_obj.processing_status == 'Proposed For Agenda' && conservation_status_obj.approval_level == 'minister'">
+                                    v-if="
+                                        conservation_status_obj.processing_status ==
+                                            'Proposed For Agenda' &&
+                                        conservation_status_obj.approval_level ==
+                                            'minister'
+                                    "
+                                >
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="readyForAgenda">Confirm Ready for
-                                                Agenda</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="readyForAgenda"
+                                            >
+                                                Confirm Ready for Agenda</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                                 <template v-if="canApproveOrDeclineOnAgendaCS">
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="issueProposal()">Approve</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="issueProposal()"
+                                            >
+                                                Approve</button
+                                            ><br />
                                         </div>
                                     </div>
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="declineProposal()">Decline</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    declineProposal()
+                                                "
+                                            >
+                                                Decline</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
-                                <template v-else-if="conservation_status_obj.processing_status == 'Proposed DeListed'">
+                                <template
+                                    v-else-if="
+                                        conservation_status_obj.processing_status ==
+                                        'Proposed DeListed'
+                                    "
+                                >
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="switchStatus('approved')">Revert To
-                                                Approved</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    switchStatus('approved')
+                                                "
+                                            >
+                                                Revert To Approved</button
+                                            ><br />
                                         </div>
                                     </div>
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="delistProposal()">Confirm Delisting</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    delistProposal()
+                                                "
+                                            >
+                                                Confirm Delisting</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                                 <template v-if="canSendBackToAssessor">
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="backToAssessor">Back To
-                                                Assessor</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="backToAssessor"
+                                            >
+                                                Back To Assessor</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                                 <template v-if="canDefer">
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="deferProposal()">Defer</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="deferProposal()"
+                                            >
+                                                Defer</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
                                 <template v-if="canDiscard">
                                     <div class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button style="width:90%;" class="btn btn-primary"
-                                                @click.prevent="discardCSProposal()">Discard</button><br />
+                                            <button
+                                                style="width: 90%"
+                                                class="btn btn-primary"
+                                                @click.prevent="
+                                                    discardCSProposal()
+                                                "
+                                            >
+                                                Discard</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </template>
@@ -362,66 +740,188 @@
                 <div class="row">
                     <div class="">
                         <div class="row">
-                            <form :action="species_community_cs_form_url" method="post" name="new_conservation_status"
-                                enctype="multipart/form-data">
-                                <ProposalConservationStatus ref="conservation_status"
-                                    :conservation_status_obj="conservation_status_obj" :canEditStatus="canEditStatus"
-                                    id="ConservationStatusStart" :is_internal="true"
-                                    @saveConservationStatus="save_wo()">
+                            <form
+                                :action="species_community_cs_form_url"
+                                method="post"
+                                name="new_conservation_status"
+                                enctype="multipart/form-data"
+                            >
+                                <ProposalConservationStatus
+                                    id="ConservationStatusStart"
+                                    ref="conservation_status"
+                                    :conservation_status_obj="
+                                        conservation_status_obj
+                                    "
+                                    :can-edit-status="canEditStatus"
+                                    :is_internal="true"
+                                    @save-conservation-status="save_wo()"
+                                >
                                 </ProposalConservationStatus>
-                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                <input type='hidden' name="conservation_status_id" :value="1" />
+                                <input
+                                    type="hidden"
+                                    name="csrfmiddlewaretoken"
+                                    :value="csrf_token"
+                                />
+                                <input
+                                    type="hidden"
+                                    name="conservation_status_id"
+                                    :value="1"
+                                />
                                 <div class="row" style="margin-bottom: 50px">
-                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                    <div
+                                        class="navbar fixed-bottom"
+                                        style="background-color: #f5f5f5"
+                                    >
                                         <!--the below as internal proposal submission ELSE just saving proposal changes -->
                                         <div class="container">
                                             <div class="col-md-6">
-                                                <p class="pull-right" style="margin-top:5px;">
-                                                    <router-link class="btn btn-primary"
-                                                        :to="{ name: 'internal-conservation-status-dash' }">Back to
-                                                        Dashboard</router-link>
+                                                <p
+                                                    class="pull-right"
+                                                    style="margin-top: 5px"
+                                                >
+                                                    <router-link
+                                                        class="btn btn-primary"
+                                                        :to="{
+                                                            name: 'internal-conservation-status-dash',
+                                                        }"
+                                                        >Back to
+                                                        Dashboard</router-link
+                                                    >
                                                 </p>
                                             </div>
-                                            <div v-if="conservation_status_obj.internal_user_edit"
-                                                class="col-md-6 text-end">
-                                                <button v-if="savingConservationStatus" class="btn btn-primary me-2"
-                                                    style="margin-top:5px;" disabled>Save and Continue <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                            <div
+                                                v-if="
+                                                    conservation_status_obj.internal_user_edit
+                                                "
+                                                class="col-md-6 text-end"
+                                            >
+                                                <button
+                                                    v-if="
+                                                        savingConservationStatus
+                                                    "
+                                                    class="btn btn-primary me-2"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save and Continue
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary me-2"
+                                                    style="margin-top: 5px"
+                                                    :disabled="
+                                                        saveExitConservationStatus ||
+                                                        submitConservationStatus
+                                                    "
                                                     @click.prevent="save()"
-                                                    :disabled="saveExitConservationStatus || submitConservationStatus">Save
-                                                    and Continue</button>
+                                                >
+                                                    Save Save and Continue
+                                                </button>
 
-                                                <button v-if="saveExitConservationStatus" class="btn btn-primary me-2"
-                                                    style="margin-top:5px;" disabled>Save and Exit <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                                <button
+                                                    v-if="
+                                                        saveExitConservationStatus
+                                                    "
+                                                    class="btn btn-primary me-2"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save and Exit
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary me-2"
+                                                    style="margin-top: 5px"
+                                                    :disabled="
+                                                        savingConservationStatus ||
+                                                        submitConservationStatus
+                                                    "
                                                     @click.prevent="save_exit()"
-                                                    :disabled="savingConservationStatus || submitConservationStatus">Save
-                                                    and Exit</button>
+                                                >
+                                                    Save Save and Exit
+                                                </button>
 
-                                                <button v-if="submitConservationStatus" class="btn btn-primary"
-                                                    style="margin-top:5px;" disabled>Submit <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary" style="margin-top:5px;"
+                                                <button
+                                                    v-if="
+                                                        submitConservationStatus
+                                                    "
+                                                    class="btn btn-primary"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Submit
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary"
+                                                    style="margin-top: 5px"
+                                                    :disbaled="
+                                                        saveExitConservationStatus ||
+                                                        savingConservationStatus
+                                                    "
                                                     @click.prevent="submit()"
-                                                    :disbaled="saveExitConservationStatus || savingConservationStatus">Submit</button>
+                                                >
+                                                    Submit
+                                                </button>
                                             </div>
-                                            <div v-else-if="hasAssessorMode" class="col-md-6 text-end">
-                                                <button v-if="savingConservationStatus" class="btn btn-primary"
-                                                    style="margin-top:5px;" disabled>Save Changes <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary" style="margin-top:5px;"
-                                                    @click.prevent="save()">Save
-                                                    Changes</button>
+                                            <div
+                                                v-else-if="hasAssessorMode"
+                                                class="col-md-6 text-end"
+                                            >
+                                                <button
+                                                    v-if="
+                                                        savingConservationStatus
+                                                    "
+                                                    class="btn btn-primary"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save Changes
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary"
+                                                    style="margin-top: 5px"
+                                                    @click.prevent="save()"
+                                                >
+                                                    Save Changes
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
@@ -432,54 +932,116 @@
                 </div>
             </div>
         </div>
-        <AmendmentRequest ref="amendment_request" :conservation_status_id="conservation_status_obj.id"
-            @refreshFromResponse="refreshFromResponse"></AmendmentRequest>
-        <BackToAssessor ref="back_to_assessor_modal" :conservation_status_id="conservation_status_obj.id"
-            @refreshFromResponse="refreshFromResponse"></BackToAssessor>
-        <Defer ref="defer_modal" :conservation_status="conservation_status_obj"
-            @refreshFromResponse="refreshFromResponse">
+        <AmendmentRequest
+            ref="amendment_request"
+            :conservation_status_id="conservation_status_obj.id"
+            @refresh-from-response="refreshFromResponse"
+        ></AmendmentRequest>
+        <BackToAssessor
+            ref="back_to_assessor_modal"
+            :conservation_status_id="conservation_status_obj.id"
+            @refresh-from-response="refreshFromResponse"
+        ></BackToAssessor>
+        <Defer
+            ref="defer_modal"
+            :conservation_status="conservation_status_obj"
+            @refresh-from-response="refreshFromResponse"
+        >
         </Defer>
-        <ProposeForAgenda ref="propose_for_agenda" :conservation_status_id="conservation_status_obj.id"
-            @refreshFromResponse="refreshFromResponse"></ProposeForAgenda>
-        <ReadyForAgenda ref="ready_for_agenda" :conservation_status_id="conservation_status_obj.id"
-            @refreshFromResponse="refreshFromResponse"></ReadyForAgenda>
-        <ProposedDecline ref="proposed_decline" :processing_status="conservation_status_obj.processing_status"
-            :conservation_status_id="conservation_status_obj.id" @refreshFromResponse="refreshFromResponse">
+        <ProposeForAgenda
+            ref="propose_for_agenda"
+            :conservation_status_id="conservation_status_obj.id"
+            @refresh-from-response="refreshFromResponse"
+        ></ProposeForAgenda>
+        <ReadyForAgenda
+            ref="ready_for_agenda"
+            :conservation_status_id="conservation_status_obj.id"
+            @refresh-from-response="refreshFromResponse"
+        ></ReadyForAgenda>
+        <ProposedDecline
+            ref="proposed_decline"
+            :processing_status="conservation_status_obj.processing_status"
+            :conservation_status_id="conservation_status_obj.id"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ProposedDecline>
-        <ProposedApproval ref="proposed_approval" :processing_status="conservation_status_obj.processing_status"
-            :conservation_status_id="conservation_status_obj.id" :isApprovalLevelDocument="isApprovalLevelDocument"
-            @refreshFromResponse="refreshFromResponse" />
-        <ProposeDelist ref="propose_delist" :processing_status="conservation_status_obj.processing_status"
-            :conservation_status_id="conservation_status_obj.id" @refreshFromResponse="refreshFromResponse">
+        <ProposedApproval
+            ref="proposed_approval"
+            :processing_status="conservation_status_obj.processing_status"
+            :conservation_status_id="conservation_status_obj.id"
+            :is-approval-level-document="isApprovalLevelDocument"
+            @refresh-from-response="refreshFromResponse"
+        />
+        <ProposeDelist
+            ref="propose_delist"
+            :processing_status="conservation_status_obj.processing_status"
+            :conservation_status_id="conservation_status_obj.id"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ProposeDelist>
-        <InviteExternalReferee ref="inviteExternalReferee" :pk="conservation_status_obj.id" model="conservation_status"
-            :email="external_referee_email" @externalRefereeInviteSent="externalRefereeInviteSent" />
+        <InviteExternalReferee
+            ref="inviteExternalReferee"
+            :pk="conservation_status_obj.id"
+            model="conservation_status"
+            :email="external_referee_email"
+            @external-referee-invite-sent="externalRefereeInviteSent"
+        />
     </div>
 </template>
 <script>
-
-import datatable from '@vue-utils/datatable.vue'
-import CommsLogs from '@common-utils/comms_logs.vue'
-import Submission from '@common-utils/submission.vue'
-import AmendmentRequest from './amendment_request.vue'
-import BackToAssessor from './back_to_assessor.vue'
-import Defer from './defer.vue'
-import ProposeForAgenda from './propose_for_agenda.vue'
-import ReadyForAgenda from './ready_for_agenda.vue'
-import ProposedDecline from './proposal_proposed_decline.vue'
-import ProposeDelist from './proposal_propose_delist.vue'
-import ProposedApproval from './proposed_issuance.vue'
-import InviteExternalReferee from '@common-utils/invite_external_referee.vue'
-import CSMoreReferrals from '@common-utils/conservation_status/cs_more_referrals.vue'
-import ProposalConservationStatus from '@/components/form_conservation_status.vue'
-import {
-    api_endpoints,
-    constants,
-    helpers
-}
-    from '@/utils/hooks'
+import datatable from '@vue-utils/datatable.vue';
+import CommsLogs from '@common-utils/comms_logs.vue';
+import Submission from '@common-utils/submission.vue';
+import AmendmentRequest from './amendment_request.vue';
+import BackToAssessor from './back_to_assessor.vue';
+import Defer from './defer.vue';
+import ProposeForAgenda from './propose_for_agenda.vue';
+import ReadyForAgenda from './ready_for_agenda.vue';
+import ProposedDecline from './proposal_proposed_decline.vue';
+import ProposeDelist from './proposal_propose_delist.vue';
+import ProposedApproval from './proposed_issuance.vue';
+import InviteExternalReferee from '@common-utils/invite_external_referee.vue';
+import CSMoreReferrals from '@common-utils/conservation_status/cs_more_referrals.vue';
+import ProposalConservationStatus from '@/components/form_conservation_status.vue';
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 export default {
     name: 'InternalConservationStatus',
+    components: {
+        datatable,
+        CommsLogs,
+        Defer,
+        Submission,
+        ProposalConservationStatus,
+        AmendmentRequest,
+        BackToAssessor,
+        ProposeForAgenda,
+        CSMoreReferrals,
+        ProposedDecline,
+        ProposeDelist,
+        ProposedApproval,
+        ReadyForAgenda,
+        InviteExternalReferee,
+    },
+    filters: {
+        formatDate: function (data) {
+            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        },
+    },
+    beforeRouteEnter: function (to, from, next) {
+        fetch(
+            `/api/conservation_status/${to.params.conservation_status_id}/internal_conservation_status.json`
+        ).then(
+            async (response) => {
+                next(async (vm) => {
+                    const data = await response.json();
+                    vm.conservation_status_obj = data.conservation_status_obj;
+                });
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    },
     data: function () {
         let vm = this;
         return {
@@ -501,193 +1063,247 @@ export default {
             changingStatus: false,
             external_referee_email: '',
             DATE_TIME_FORMAT: 'DD/MM/YYYY HH:mm:ss',
-            comms_url: helpers.add_endpoint_json(api_endpoints.conservation_status, vm.$route.params.conservation_status_id + '/comms_log'),
-            comms_add_url: helpers.add_endpoint_json(api_endpoints.conservation_status, vm.$route.params.conservation_status_id + '/add_comms_log'),
-            logs_url: helpers.add_endpoint_json(api_endpoints.conservation_status, vm.$route.params.conservation_status_id + '/action_log'),
+            comms_url: helpers.add_endpoint_json(
+                api_endpoints.conservation_status,
+                vm.$route.params.conservation_status_id + '/comms_log'
+            ),
+            comms_add_url: helpers.add_endpoint_json(
+                api_endpoints.conservation_status,
+                vm.$route.params.conservation_status_id + '/add_comms_log'
+            ),
+            logs_url: helpers.add_endpoint_json(
+                api_endpoints.conservation_status,
+                vm.$route.params.conservation_status_id + '/action_log'
+            ),
             initialisedSelects: false,
             cs_proposal_readonly: true,
             isSaved: false,
-        }
-    },
-    components: {
-        datatable,
-        CommsLogs,
-        Defer,
-        Submission,
-        ProposalConservationStatus,
-        AmendmentRequest,
-        BackToAssessor,
-        ProposeForAgenda,
-        CSMoreReferrals,
-        ProposedDecline,
-        ProposeDelist,
-        ProposedApproval,
-        ReadyForAgenda,
-        InviteExternalReferee
-    },
-    filters: {
-        formatDate: function (data) {
-            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
-        }
+        };
     },
     computed: {
         identifier: function () {
             if (this.conservation_status_obj) {
                 if (this.conservation_status_obj.group_type == 'community') {
-                    return this.conservation_status_obj.community_name ? this.conservation_status_obj.community_name : '';
+                    return this.conservation_status_obj.community_name
+                        ? this.conservation_status_obj.community_name
+                        : '';
                 } else {
-                    return this.conservation_status_obj.scientific_name ? this.conservation_status_obj.scientific_name : '';
+                    return this.conservation_status_obj.scientific_name
+                        ? this.conservation_status_obj.scientific_name
+                        : '';
                 }
             }
 
             return '';
         },
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         referralListURL: function () {
-            return this.conservation_status_obj != null ? helpers.add_endpoint_json(api_endpoints.cs_referrals, 'datatable_list') + '?conservation_status=' + this.conservation_status_obj.id : '';
+            return this.conservation_status_obj != null
+                ? helpers.add_endpoint_json(
+                      api_endpoints.cs_referrals,
+                      'datatable_list'
+                  ) +
+                      '?conservation_status=' +
+                      this.conservation_status_obj.id
+                : '';
         },
         species_community_cs_form_url: function () {
             return `/api/conservation_status/${this.conservation_status_obj.id}/conservation_status_save.json`;
         },
         submitter_first_name: function () {
             if (this.conservation_status_obj.submitter) {
-                return this.conservation_status_obj.submitter.first_name
+                return this.conservation_status_obj.submitter.first_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_last_name: function () {
             if (this.conservation_status_obj.submitter) {
-                return this.conservation_status_obj.submitter.last_name
+                return this.conservation_status_obj.submitter.last_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_id: function () {
             if (this.conservation_status_obj.submitter) {
-                return this.conservation_status_obj.submitter.id
+                return this.conservation_status_obj.submitter.id;
             } else {
                 //eturn this.conservation_status_obj.applicant_obj.id
             }
         },
         submitter_email: function () {
             if (this.conservation_status_obj.submitter) {
-                return this.conservation_status_obj.submitter.email
+                return this.conservation_status_obj.submitter.email;
             } else {
                 //return this.conservation_status_obj.applicant_obj.email
             }
         },
         canEditStatus: function () {
-            return this.conservation_status_obj ? this.conservation_status_obj.can_user_edit : 'false';
+            return this.conservation_status_obj
+                ? this.conservation_status_obj.can_user_edit
+                : 'false';
         },
         isFinalised: function () {
-            return this.conservation_status_obj.processing_status == 'Declined' ||
+            return (
+                this.conservation_status_obj.processing_status == 'Declined' ||
                 this.conservation_status_obj.processing_status == 'Approved' ||
                 this.conservation_status_obj.processing_status == 'Closed' ||
                 this.conservation_status_obj.processing_status == 'Unlocked' ||
-                this.conservation_status_obj.processing_status == 'DeListed';
+                this.conservation_status_obj.processing_status == 'DeListed'
+            );
         },
         canLimitedAction: function () {
-            return this.conservation_status_obj
-                && (
-                    this.conservation_status_obj.processing_status == 'With Assessor'
-                    || this.conservation_status_obj.processing_status == 'With Referral'
-                )
-                && !this.isFinalised
-                && (
-                    this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_officer)
-                && this.conservation_status_obj.assessor_mode.assessor_can_assess;
+            return (
+                this.conservation_status_obj &&
+                (this.conservation_status_obj.processing_status ==
+                    'With Assessor' ||
+                    this.conservation_status_obj.processing_status ==
+                        'With Referral') &&
+                !this.isFinalised &&
+                this.conservation_status_obj.current_assessor.id ==
+                    this.conservation_status_obj.assigned_officer &&
+                this.conservation_status_obj.assessor_mode.assessor_can_assess
+            );
         },
         canAction: function () {
             if (!this.conservation_status_obj) {
                 return false;
             }
             if (this.isFinalised) {
-                return this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_approver;
-            }
-            else if (['Proposed For Agenda', 'Ready For Agenda', 'Proposed DeListed', 'Unlocked'].includes(this.conservation_status_obj.processing_status)) {
-                return this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_approver
-                    && this.conservation_status_obj.assessor_mode.assessor_can_assess;
-            }
-            else if (['With Assessor', 'With Referral'].includes(this.conservation_status_obj.processing_status)) {
-                return this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_officer
-                    && this.conservation_status_obj.assessor_mode.assessor_can_assess;
-            }
-            else if (this.conservation_status_obj.processing_status == 'Deferred') {
-                return this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                    (
-                        this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_officer
-                    );
-            }
-            else if (this.conservation_status_obj.processing_status == 'On Agenda') {
-                return this.conservation_status_obj.assessor_mode.assessor_can_assess && this.conservation_status_obj.most_recent_meeting_completed &&
-                    (
-                        this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_approver
-                    );
-            }
-            else {
-                return this.conservation_status_obj.processing_status == 'Draft'
-                    && this.conservation_status_obj.internal_application
-                    && this.conservation_status_obj.internal_user_edit
+                return (
+                    this.conservation_status_obj.current_assessor.id ==
+                    this.conservation_status_obj.assigned_approver
+                );
+            } else if (
+                [
+                    'Proposed For Agenda',
+                    'Ready For Agenda',
+                    'Proposed DeListed',
+                    'Unlocked',
+                ].includes(this.conservation_status_obj.processing_status)
+            ) {
+                return (
+                    this.conservation_status_obj.current_assessor.id ==
+                        this.conservation_status_obj.assigned_approver &&
+                    this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess
+                );
+            } else if (
+                ['With Assessor', 'With Referral'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            ) {
+                return (
+                    this.conservation_status_obj.current_assessor.id ==
+                        this.conservation_status_obj.assigned_officer &&
+                    this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess
+                );
+            } else if (
+                this.conservation_status_obj.processing_status == 'Deferred'
+            ) {
+                return (
+                    this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess &&
+                    this.conservation_status_obj.current_assessor.id ==
+                        this.conservation_status_obj.assigned_officer
+                );
+            } else if (
+                this.conservation_status_obj.processing_status == 'On Agenda'
+            ) {
+                return (
+                    this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess &&
+                    this.conservation_status_obj
+                        .most_recent_meeting_completed &&
+                    this.conservation_status_obj.current_assessor.id ==
+                        this.conservation_status_obj.assigned_approver
+                );
+            } else {
+                return (
+                    this.conservation_status_obj.processing_status == 'Draft' &&
+                    this.conservation_status_obj.internal_application &&
+                    this.conservation_status_obj.internal_user_edit
+                );
             }
         },
         canRefer: function () {
-            return this.conservation_status_obj && ['With Assessor', 'With Referral'].includes(this.conservation_status_obj.processing_status)
-                && !this.isFinalised &&
-                (
-                    this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_officer)
-                && this.conservation_status_obj.assessor_mode.assessor_can_assess;
+            return (
+                this.conservation_status_obj &&
+                ['With Assessor', 'With Referral'].includes(
+                    this.conservation_status_obj.processing_status
+                ) &&
+                !this.isFinalised &&
+                this.conservation_status_obj.current_assessor.id ==
+                    this.conservation_status_obj.assigned_officer &&
+                this.conservation_status_obj.assessor_mode.assessor_can_assess
+            );
         },
         canAssess: function () {
-            return this.conservation_status_obj &&
-                this.conservation_status_obj.assessor_mode.assessor_can_assess ||
-                this.conservation_status_obj.approver_process;
+            return (
+                (this.conservation_status_obj &&
+                    this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess) ||
+                this.conservation_status_obj.approver_process
+            );
         },
         canSendBackToAssessor: function () {
-            return this.conservation_status_obj &&
+            return (
+                this.conservation_status_obj &&
                 this.conservation_status_obj.approval_level == 'minister' &&
                 [
                     constants.PROPOSAL_STATUS.PROPOSED_FOR_AGENDA.TEXT,
                     constants.PROPOSAL_STATUS.READY_FOR_AGENDA.TEXT,
                     constants.PROPOSAL_STATUS.DEFERRED.TEXT,
                 ].includes(this.conservation_status_obj.processing_status) &&
-                this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                (
-                    this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_officer
-                );
+                this.conservation_status_obj.assessor_mode
+                    .assessor_can_assess &&
+                this.conservation_status_obj.current_assessor.id ==
+                    this.conservation_status_obj.assigned_officer
+            );
         },
         canApproveOrDeclineOnAgendaCS: function () {
-            return this.conservation_status_obj &&
+            return (
+                this.conservation_status_obj &&
                 this.conservation_status_obj.approval_level == 'minister' &&
                 this.conservation_status_obj.processing_status == 'On Agenda' &&
                 this.conservation_status_obj.most_recent_meeting_completed &&
-                this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                (
-                    this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_approver
-                );
+                this.conservation_status_obj.assessor_mode
+                    .assessor_can_assess &&
+                this.conservation_status_obj.current_assessor.id ==
+                    this.conservation_status_obj.assigned_approver
+            );
         },
         canDefer: function () {
-            return this.conservation_status_obj &&
-                [
-                    constants.PROPOSAL_STATUS.WITH_ASSESSOR.TEXT,
-                    constants.PROPOSAL_STATUS.READY_FOR_AGENDA.TEXT,
-                ].includes(this.conservation_status_obj.processing_status) ||
-                (
-                    this.conservation_status_obj.processing_status == constants.PROPOSAL_STATUS.ON_AGENDA.TEXT &&
-                    this.conservation_status_obj.most_recent_meeting_completed
-                ) &&
-                this.conservation_status_obj.assessor_mode.assessor_can_assess &&
-                (
-                    this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_officer ||
-                    this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_approver
-                );
+            return (
+                (this.conservation_status_obj &&
+                    [
+                        constants.PROPOSAL_STATUS.WITH_ASSESSOR.TEXT,
+                        constants.PROPOSAL_STATUS.READY_FOR_AGENDA.TEXT,
+                    ].includes(
+                        this.conservation_status_obj.processing_status
+                    )) ||
+                (this.conservation_status_obj.processing_status ==
+                    constants.PROPOSAL_STATUS.ON_AGENDA.TEXT &&
+                    this.conservation_status_obj
+                        .most_recent_meeting_completed &&
+                    this.conservation_status_obj.assessor_mode
+                        .assessor_can_assess &&
+                    (this.conservation_status_obj.current_assessor.id ==
+                        this.conservation_status_obj.assigned_officer ||
+                        this.conservation_status_obj.current_assessor.id ==
+                            this.conservation_status_obj.assigned_approver))
+            );
         },
         hasAssessorMode: function () {
-            return this.conservation_status_obj && (
-                this.conservation_status_obj.assessor_mode.has_assessor_mode ||
-                this.conservation_status_obj.assessor_mode.has_unlocked_mode);
+            return (
+                this.conservation_status_obj &&
+                (this.conservation_status_obj.assessor_mode.has_assessor_mode ||
+                    this.conservation_status_obj.assessor_mode
+                        .has_unlocked_mode)
+            );
         },
         isApprovalLevelDocument: function () {
             return false;
@@ -696,18 +1312,31 @@ export default {
             return this.conservation_status_obj.internal_user_edit;
         },
         canUnlock: function () {
-            return this.conservation_status_obj &&
-                this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_approver &&
-                ['Approved', 'Closed', 'Declined', 'DeListed'].includes(this.conservation_status_obj.processing_status);
+            return (
+                this.conservation_status_obj &&
+                this.conservation_status_obj.current_assessor.id ==
+                    this.conservation_status_obj.assigned_approver &&
+                ['Approved', 'Closed', 'Declined', 'DeListed'].includes(
+                    this.conservation_status_obj.processing_status
+                )
+            );
         },
         canLock: function () {
-            return this.conservation_status_obj &&
-                this.conservation_status_obj.current_assessor.id == this.conservation_status_obj.assigned_approver &&
-                this.conservation_status_obj.processing_status === "Unlocked";
+            return (
+                this.conservation_status_obj &&
+                this.conservation_status_obj.current_assessor.id ==
+                    this.conservation_status_obj.assigned_approver &&
+                this.conservation_status_obj.processing_status === 'Unlocked'
+            );
         },
         show_finalised_actions: function () {
-            return (this.hasAssessorMode && this.conservation_status_obj.processing_status == 'Approved') || this.canAction && (this.canUnlock || this.canLock);
-        }
+            return (
+                (this.hasAssessorMode &&
+                    this.conservation_status_obj.processing_status ==
+                        'Approved') ||
+                (this.canAction && (this.canUnlock || this.canLock))
+            );
+        },
     },
     watch: {
         canRefer: function (newVal, oldVal) {
@@ -718,99 +1347,136 @@ export default {
             }
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.fetchDeparmentUsers();
+    },
+    created: function () {
+        if (!this.conservation_status_obj) {
+            this.fetchConservationStatus();
+        }
+    },
+    updated: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.initialiseSelects();
+            vm.form = document.forms.new_conservation_status;
+        });
+    },
     methods: {
         commaToNewline(s) {
             return s.replace(/[,;]/g, '\n');
         },
         unlockConservationStatus: async function () {
             let vm = this;
-            await fetch(`/api/conservation_status/${vm.conservation_status_obj.id}/unlock_conservation_status.json`, {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                const data = await response.json();
-                vm.conservation_status_obj = Object.assign({}, data);
-                swal.fire({
-                    title: 'Conservation Status Unlocked',
-                    icon: 'success',
-                    showConfirmButton: false,
-                    timer: 1500,
-
-                });
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Unlock Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            await fetch(
+                `/api/conservation_status/${vm.conservation_status_obj.id}/unlock_conservation_status.json`,
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-            });
+                }
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.conservation_status_obj = Object.assign({}, data);
+                    swal.fire({
+                        title: 'Conservation Status Unlocked',
+                        icon: 'success',
+                        showConfirmButton: false,
+                        timer: 1500,
+                    });
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Unlock Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                }
+            );
         },
         lockConservationStatus: function () {
             let vm = this;
             swal.fire({
-                title: "Lock Conservation Status",
-                text: "Are you sure you want to lock this approved conservation status?",
-                icon: "question",
+                title: 'Lock Conservation Status',
+                text: 'Are you sure you want to lock this approved conservation status?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Lock Conservation Status',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(`/api/conservation_status/${vm.conservation_status_obj.id}/lock_conservation_status.json`, {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then(async (response) => {
-                            const data = await response.json();
-                            vm.conservation_status_obj = Object.assign({}, data);
-                            swal.fire({
-                                title: 'Conservation Status Locked',
-                                icon: 'success',
-                                showConfirmButton: false,
-                                timer: 1200,
-                            });
-                        }, (error) => {
-                            console.log(error);
-                        });
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            `/api/conservation_status/${vm.conservation_status_obj.id}/lock_conservation_status.json`,
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                            }
+                        ).then(
+                            async (response) => {
+                                const data = await response.json();
+                                vm.conservation_status_obj = Object.assign(
+                                    {},
+                                    data
+                                );
+                                swal.fire({
+                                    title: 'Conservation Status Locked',
+                                    icon: 'success',
+                                    showConfirmButton: false,
+                                    timer: 1200,
+                                });
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         discardCSProposal: function () {
             let vm = this;
             swal.fire({
-                title: "Discard Proposal",
-                text: "Are you sure you want to discard this proposal?",
-                icon: "question",
+                title: 'Discard Proposal',
+                text: 'Are you sure you want to discard this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Proposal',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    fetch(api_endpoints.discard_cs_proposal(vm.conservation_status_obj.id), {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then((response) => {
+                    fetch(
+                        api_endpoints.discard_cs_proposal(
+                            vm.conservation_status_obj.id
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'Your proposal has been discarded',
@@ -820,11 +1486,13 @@ export default {
                                 },
                             });
                             vm.$router.push({
-                                name: 'internal-conservation-status-dash'
+                                name: 'internal-conservation-status-dash',
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
@@ -850,24 +1518,29 @@ export default {
             let vm = this;
             swal.fire({
                 title: `Delist Conservation Status ${this.conservation_status_obj.conservation_status_number}`,
-                text: "Are you sure you want to delist this conservation status?",
-                icon: "question",
+                text: 'Are you sure you want to delist this conservation status?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Delist',
                 reverseButtons: true,
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
-                }
+                    cancelButton: 'btn btn-secondary',
+                },
             }).then((result) => {
                 if (result.isConfirmed) {
-                    fetch(api_endpoints.delist_cs_proposal(vm.conservation_status_obj.id), {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then((response) => {
+                    fetch(
+                        api_endpoints.delist_cs_proposal(
+                            vm.conservation_status_obj.id
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Delisted',
                                 text: `Conservation Status ${this.conservation_status_obj.conservation_status_number} has been delisted.`,
@@ -877,32 +1550,49 @@ export default {
                                 },
                             });
                             vm.$router.push({
-                                name: 'internal-conservation-status-dash'
+                                name: 'internal-conservation-status-dash',
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         proposedApproval: function () {
-            if (this.conservation_status_obj.conservationstatusissuanceapprovaldetails &&
-                Object.keys(this.conservation_status_obj.conservationstatusissuanceapprovaldetails).length > 0) {
-                this.$refs.proposed_approval.approval = helpers.copyObject(this.conservation_status_obj.conservationstatusissuanceapprovaldetails);
+            if (
+                this.conservation_status_obj
+                    .conservationstatusissuanceapprovaldetails &&
+                Object.keys(
+                    this.conservation_status_obj
+                        .conservationstatusissuanceapprovaldetails
+                ).length > 0
+            ) {
+                this.$refs.proposed_approval.approval = helpers.copyObject(
+                    this.conservation_status_obj
+                        .conservationstatusissuanceapprovaldetails
+                );
             }
             this.$refs.proposed_approval.isModalOpen = true;
         },
         validateConservationStatus: function () {
             let required_fields = [];
-            if (this.conservation_status_obj.processing_status == 'With Assessor') {
+            if (
+                this.conservation_status_obj.processing_status ==
+                'With Assessor'
+            ) {
                 required_fields = [
-                    { 'id': 'change_code_id', 'display': 'Change Type' },
-                    { 'id': 'approval_level', 'display': 'Appplicable Workflow' }
+                    { id: 'change_code_id', display: 'Change Type' },
+                    { id: 'approval_level', display: 'Appplicable Workflow' },
                 ];
             }
             let missing_fields = [];
             for (let field of required_fields) {
-                if (this.conservation_status_obj[field.id] == null || this.conservation_status_obj[field.id] == '') {
+                if (
+                    this.conservation_status_obj[field.id] == null ||
+                    this.conservation_status_obj[field.id] == ''
+                ) {
                     missing_fields.push(field.display);
                 }
             }
@@ -923,35 +1613,59 @@ export default {
             if (!this.validateConservationStatus()) {
                 return;
             }
-            if (this.conservation_status_obj.conservationstatusissuanceapprovaldetails &&
-                Object.keys(this.conservation_status_obj.conservationstatusissuanceapprovaldetails).length > 0) {
-                this.$refs.proposed_approval.approval = helpers.copyObject(this.conservation_status_obj.conservationstatusissuanceapprovaldetails);
+            if (
+                this.conservation_status_obj
+                    .conservationstatusissuanceapprovaldetails &&
+                Object.keys(
+                    this.conservation_status_obj
+                        .conservationstatusissuanceapprovaldetails
+                ).length > 0
+            ) {
+                this.$refs.proposed_approval.approval = helpers.copyObject(
+                    this.conservation_status_obj
+                        .conservationstatusissuanceapprovaldetails
+                );
             }
             this.$refs.proposed_approval.state = 'final_approval';
-            this.$refs.proposed_approval.isApprovalLevelDocument = this.isApprovalLevelDocument;
+            this.$refs.proposed_approval.isApprovalLevelDocument =
+                this.isApprovalLevelDocument;
             this.$refs.proposed_approval.isModalOpen = true;
         },
         proposedDecline: function () {
             this.save_wo();
-            this.$refs.proposed_decline.decline = this.conservation_status_obj.conservationstatusdeclineddetails != null ? helpers.copyObject(this.conservation_status_obj.conservationstatusdeclineddetails) : {};
+            this.$refs.proposed_decline.decline =
+                this.conservation_status_obj
+                    .conservationstatusdeclineddetails != null
+                    ? helpers.copyObject(
+                          this.conservation_status_obj
+                              .conservationstatusdeclineddetails
+                      )
+                    : {};
             this.$refs.proposed_decline.isModalOpen = true;
         },
         declineProposal: function () {
-            this.$refs.proposed_decline.decline = this.conservation_status_obj.conservationstatusdeclineddetails != null ? helpers.copyObject(this.conservation_status_obj.conservationstatusdeclineddetails) : {};
+            this.$refs.proposed_decline.decline =
+                this.conservation_status_obj
+                    .conservationstatusdeclineddetails != null
+                    ? helpers.copyObject(
+                          this.conservation_status_obj
+                              .conservationstatusdeclineddetails
+                      )
+                    : {};
             this.$refs.proposed_decline.isModalOpen = true;
         },
         save: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.isSaved = false;
@@ -964,50 +1678,53 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Your changes have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingConservationStatus = false;
-                vm.isSaved = true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Save Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingConservationStatus = false;
-                vm.isSaved = false;
-            });
+            }).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Your changes have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingConservationStatus = false;
+                    vm.isSaved = true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Save Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingConservationStatus = false;
+                    vm.isSaved = false;
+                }
+            );
         },
         save_exit: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.saveExitConservationStatus = true;
             await this.save(e).then(() => {
                 if (vm.isSaved === true) {
                     vm.$router.push({
-                        name: 'internal-conservation-status-dash'
+                        name: 'internal-conservation-status-dash',
                     });
                 } else {
                     vm.saveExitConservationStatus = false;
@@ -1026,130 +1743,164 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.submitConservationStatus = false;
-                vm.saveError = true;
-            });
+            }).then(
+                async (response) => {},
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitConservationStatus = false;
+                    vm.saveError = true;
+                }
+            );
             return result;
         },
         validateConservationStatusListsCategories: function (blank_fields) {
             let required_fields = [
-                { 'id': 'wa_legislative_list_id', 'display': 'WA Legislative List' },
-                { 'id': 'wa_priority_list_id', 'display': 'WA Priority List' },
+                {
+                    id: 'wa_legislative_list_id',
+                    display: 'WA Legislative List',
+                },
+                { id: 'wa_priority_list_id', display: 'WA Priority List' },
             ];
             for (let field of required_fields) {
-                if (this.conservation_status_obj[field.id] != null && this.conservation_status_obj[field.id] != '') {
+                if (
+                    this.conservation_status_obj[field.id] != null &&
+                    this.conservation_status_obj[field.id] != ''
+                ) {
                     return blank_fields;
                 }
             }
-            blank_fields.push(`At least one of the following fields are required: ${required_fields.map(f => f.display).join(', ')}`);
+            blank_fields.push(
+                `At least one of the following fields are required: ${required_fields.map((f) => f.display).join(', ')}`
+            );
             return blank_fields;
         },
         can_submit: function (check_action) {
             let vm = this;
-            let blank_fields = []
+            let blank_fields = [];
             blank_fields = vm.can_submit_conservation_status(check_action);
 
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
         can_submit_conservation_status: function (check_action) {
             let vm = this;
-            let blank_fields = []
-            if (vm.conservation_status_obj.group_type == 'flora' || vm.conservation_status_obj.group_type == 'fauna') {
-                if (vm.conservation_status_obj.species_taxonomy_id == null || vm.conservation_status_obj.species_taxonomy_id == '') {
-                    blank_fields.push(' Scientific Name is missing')
+            let blank_fields = [];
+            if (
+                vm.conservation_status_obj.group_type == 'flora' ||
+                vm.conservation_status_obj.group_type == 'fauna'
+            ) {
+                if (
+                    vm.conservation_status_obj.species_taxonomy_id == null ||
+                    vm.conservation_status_obj.species_taxonomy_id == ''
+                ) {
+                    blank_fields.push(' Scientific Name is missing');
                 }
-            }
-            else {
-                if (vm.conservation_status_obj.community_id == null || vm.conservation_status_obj.community_id == '') {
-                    blank_fields.push(' Community Name is missing')
+            } else {
+                if (
+                    vm.conservation_status_obj.community_id == null ||
+                    vm.conservation_status_obj.community_id == ''
+                ) {
+                    blank_fields.push(' Community Name is missing');
                 }
             }
-            if (check_action == "submit") {
-                vm.validateConservationStatusListsCategories(blank_fields)
-                if (vm.conservation_status_obj.comment == null || vm.conservation_status_obj.comment == '') {
-                    blank_fields.push(' Please enter some comments regarding your conservation status proposal.')
+            if (check_action == 'submit') {
+                vm.validateConservationStatusListsCategories(blank_fields);
+                if (
+                    vm.conservation_status_obj.comment == null ||
+                    vm.conservation_status_obj.comment == ''
+                ) {
+                    blank_fields.push(
+                        ' Please enter some comments regarding your conservation status proposal.'
+                    );
                 }
             }
-            return blank_fields
+            return blank_fields;
         },
         submit: async function () {
             let vm = this;
 
-            var missing_data = vm.can_submit("submit");
+            var missing_data = vm.can_submit('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.submitConservationStatus = true;
             swal.fire({
-                title: "Submit Proposal",
-                text: "Are you sure you want to submit this conservation status proposal?",
-                icon: "question",
+                title: 'Submit Proposal',
+                text: 'Are you sure you want to submit this conservation status proposal?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Submit Proposal",
+                confirmButtonText: 'Submit Proposal',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.conservation_status_obj);
-                        fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_obj.id + '/submit'), {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload),
-                        }).then(async (response) => {
-                            vm.conservation_status_obj = await response.json();
-                            vm.$router.push({
-                                name: 'internal-conservation-status-dash'
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+                reverseButtons: true,
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        let result = await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.conservation_status_obj);
+                            fetch(
+                                helpers.add_endpoint_json(
+                                    api_endpoints.conservation_status,
+                                    vm.conservation_status_obj.id + '/submit'
+                                ),
+                                {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }
+                            ).then(
+                                async (response) => {
+                                    vm.conservation_status_obj =
+                                        await response.json();
+                                    vm.$router.push({
+                                        name: 'internal-conservation-status-dash',
+                                    });
                                 },
-                            });
-                        });
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Submit Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                }
+                            );
+                        }
+                    } else {
+                        vm.submitConservationStatus = false;
                     }
-                } else {
+                },
+                (error) => {
                     vm.submitConservationStatus = false;
                 }
-            }, (error) => {
-                vm.submitConservationStatus = false;
-            });
+            );
         },
         save_wo: function () {
             let vm = this;
@@ -1161,9 +1912,10 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-            }, err => {
-            });
+            }).then(
+                async (response) => {},
+                (err) => {}
+            );
         },
         refreshFromResponse: async function (response) {
             const data = await response.json();
@@ -1179,48 +1931,87 @@ export default {
             let vm = this;
             let unassign = true;
             let data = {};
-            if (['Proposed DeListed', 'Ready For Agenda', 'Approved', 'Closed', 'DeListed'].includes(vm.conservation_status_obj.processing_status)) {
-                unassign = vm.conservation_status_obj.assigned_approver != null && vm.conservation_status_obj.assigned_approver != 'undefined' ? false : true;
-                data = { 'assessor_id': vm.conservation_status_obj.assigned_approver };
-            }
-            else {
-                unassign = vm.conservation_status_obj.assigned_officer != null && vm.conservation_status_obj.assigned_officer != 'undefined' ? false : true;
-                data = { 'assessor_id': vm.conservation_status_obj.assigned_officer };
+            if (
+                [
+                    'Proposed DeListed',
+                    'Ready For Agenda',
+                    'Approved',
+                    'Closed',
+                    'DeListed',
+                ].includes(vm.conservation_status_obj.processing_status)
+            ) {
+                unassign =
+                    vm.conservation_status_obj.assigned_approver != null &&
+                    vm.conservation_status_obj.assigned_approver != 'undefined'
+                        ? false
+                        : true;
+                data = {
+                    assessor_id: vm.conservation_status_obj.assigned_approver,
+                };
+            } else {
+                unassign =
+                    vm.conservation_status_obj.assigned_officer != null &&
+                    vm.conservation_status_obj.assigned_officer != 'undefined'
+                        ? false
+                        : true;
+                data = {
+                    assessor_id: vm.conservation_status_obj.assigned_officer,
+                };
             }
             if (!unassign) {
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assign_to')), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(data),
-                }).then(async (response) => {
-                    const data = await response.json();
-                    vm.conservation_status_obj = data;
-                    vm.original_conservation_status_obj = helpers.copyObject(data);
-                    vm.updateAssignedOfficerSelect();
-                }, (error) => {
-                    vm.conservation_status_obj = helpers.copyObject(vm.original_conservation_status_obj)
-                    vm.updateAssignedOfficerSelect();
-                    swal.fire({
-                        title: 'Application Error',
-                        text: helpers.apiVueResourceError(error),
-                        icon: 'error',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_obj.id + '/assign_to'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
                         },
-                    });
-                });
-            }
-            else {
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/unassign')))
-                    .then(async (response) => {
+                        body: JSON.stringify(data),
+                    }
+                ).then(
+                    async (response) => {
                         const data = await response.json();
                         vm.conservation_status_obj = data;
-                        vm.original_conservation_status_obj = helpers.copyObject(data);
+                        vm.original_conservation_status_obj =
+                            helpers.copyObject(data);
                         vm.updateAssignedOfficerSelect();
-                    }, (error) => {
-                        vm.conservation_status_obj = helpers.copyObject(vm.original_conservation_status_obj)
+                    },
+                    (error) => {
+                        vm.conservation_status_obj = helpers.copyObject(
+                            vm.original_conservation_status_obj
+                        );
+                        vm.updateAssignedOfficerSelect();
+                        swal.fire({
+                            title: 'Application Error',
+                            text: helpers.apiVueResourceError(error),
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                    }
+                );
+            } else {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_obj.id + '/unassign'
+                    )
+                ).then(
+                    async (response) => {
+                        const data = await response.json();
+                        vm.conservation_status_obj = data;
+                        vm.original_conservation_status_obj =
+                            helpers.copyObject(data);
+                        vm.updateAssignedOfficerSelect();
+                    },
+                    (error) => {
+                        vm.conservation_status_obj = helpers.copyObject(
+                            vm.original_conservation_status_obj
+                        );
 
                         vm.updateAssignedOfficerSelect();
                         swal.fire({
@@ -1231,34 +2022,55 @@ export default {
                                 confirmButton: 'btn btn-primary',
                             },
                         });
-                    });
+                    }
+                );
             }
         },
         updateAssignedOfficerSelect: function () {
             let vm = this;
-            if (['Proposed DeListed', 'Ready For Agenda', 'Approved', 'Closed', 'DeListed'].includes(vm.conservation_status_obj.processing_status)) {
-                $(vm.$refs.assigned_officer).val(vm.conservation_status_obj.assigned_approver);
+            if (
+                [
+                    'Proposed DeListed',
+                    'Ready For Agenda',
+                    'Approved',
+                    'Closed',
+                    'DeListed',
+                ].includes(vm.conservation_status_obj.processing_status)
+            ) {
+                $(vm.$refs.assigned_officer).val(
+                    vm.conservation_status_obj.assigned_approver
+                );
                 $(vm.$refs.assigned_officer).trigger('change');
-            }
-            else {
-                $(vm.$refs.assigned_officer).val(vm.conservation_status_obj.assigned_officer);
+            } else {
+                $(vm.$refs.assigned_officer).val(
+                    vm.conservation_status_obj.assigned_officer
+                );
                 $(vm.$refs.assigned_officer).trigger('change');
             }
         },
         assignRequestUser: function () {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assign_request_user')))
-                .then(async (response) => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.conservation_status,
+                    vm.conservation_status_obj.id + '/assign_request_user'
+                )
+            ).then(
+                async (response) => {
                     const data = await response.json();
                     vm.conservation_status_obj = data;
-                    vm.original_conservation_status_obj = helpers.copyObject(data);
+                    vm.original_conservation_status_obj =
+                        helpers.copyObject(data);
                     vm.updateAssignedOfficerSelect();
                     vm.$nextTick(() => {
                         vm.initialisedSelects = false;
                         vm.initialiseSelects();
                     });
-                }, (error) => {
-                    vm.conservation_status_obj = helpers.copyObject(vm.original_conservation_status_obj)
+                },
+                (error) => {
+                    vm.conservation_status_obj = helpers.copyObject(
+                        vm.original_conservation_status_obj
+                    );
                     vm.updateAssignedOfficerSelect();
                     swal.fire({
                         title: 'Application Error',
@@ -1268,39 +2080,61 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         initialiseAssignedOfficerSelect: function (reinit = false) {
             let vm = this;
             if (reinit) {
-                $(vm.$refs.assigned_officer).data('select2') ? $(vm.$refs.assigned_officer).select2('destroy') : '';
+                $(vm.$refs.assigned_officer).data('select2')
+                    ? $(vm.$refs.assigned_officer).select2('destroy')
+                    : '';
             }
             // Assigned officer select
-            $(vm.$refs.assigned_officer).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Officer"
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.assigned_officer)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Officer',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    if (['Ready For Agenda', 'Proposed DeListed', 'Approved', 'Closed', 'DeListed'].includes(vm.conservation_status_obj.processing_status)) {
-                        vm.conservation_status_obj.assigned_approver = selected.val();
-                    }
-                    else {
-                        vm.conservation_status_obj.assigned_officer = selected.val();
+                    if (
+                        [
+                            'Ready For Agenda',
+                            'Proposed DeListed',
+                            'Approved',
+                            'Closed',
+                            'DeListed',
+                        ].includes(vm.conservation_status_obj.processing_status)
+                    ) {
+                        vm.conservation_status_obj.assigned_approver =
+                            selected.val();
+                    } else {
+                        vm.conservation_status_obj.assigned_officer =
+                            selected.val();
                     }
                     vm.assignTo();
-                }).on("select2:unselecting", function (e) {
+                })
+                .on('select2:unselecting', function (e) {
                     var self = $(this);
                     setTimeout(() => {
                         self.select2('close');
                     }, 0);
-                }).on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    if (['Ready For Agenda', 'Proposed DeListed', 'Approved', 'Closed', 'DeListed'].includes(vm.conservation_status_obj.processing_status)) {
+                    if (
+                        [
+                            'Ready For Agenda',
+                            'Proposed DeListed',
+                            'Approved',
+                            'Closed',
+                            'DeListed',
+                        ].includes(vm.conservation_status_obj.processing_status)
+                    ) {
                         vm.conservation_status_obj.assigned_approver = null;
-                    }
-                    else {
+                    } else {
                         vm.conservation_status_obj.assigned_officer = null;
                     }
                     vm.assignTo();
@@ -1309,73 +2143,78 @@ export default {
         fetchDeparmentUsers: function () {
             let vm = this;
             vm.loading.push('Loading Department Users');
-            fetch(api_endpoints.department_users).then(async (response) => {
-                vm.department_users = await response.json();
-                vm.loading.splice('Loading Department Users', 1);
-            }, (error) => {
-                console.log(error);
-                vm.loading.splice('Loading Department Users', 1);
-            })
+            fetch(api_endpoints.department_users).then(
+                async (response) => {
+                    vm.department_users = await response.json();
+                    vm.loading.splice('Loading Department Users', 1);
+                },
+                (error) => {
+                    console.log(error);
+                    vm.loading.splice('Loading Department Users', 1);
+                }
+            );
         },
         initialiseSelects: function () {
             let vm = this;
             if (!vm.initialisedSelects) {
-                $(vm.$refs.referees).select2({
-                    minimumInputLength: 2,
-                    "theme": "bootstrap-5",
-                    allowClear: true,
-                    placeholder: "Search for a Referree",
-                    ajax: {
-                        url: api_endpoints.users_api + '/get_referees/',
-                        dataType: 'json',
-                        data: function (params) {
-                            var query = {
-                                term: params.term,
-                                type: 'public',
-                            }
-                            return query;
-                        },
-                        processResults: function (data, params) {
-                            if (Object.keys(data.results).length == 0) {
-                                swal.fire({
-                                    title: 'No Referee Found',
-                                    text: 'Would you like to invite a new external referee to the system?',
-                                    icon: 'warning',
-                                    showCancelButton: true,
-                                    reverseButtons: true,
-                                    confirmButtonText: 'Yes',
-                                    cancelButtonText: 'No',
-                                    buttonsStyling: false,
-                                    customClass: {
-                                        confirmButton: 'btn btn-primary',
-                                        cancelButton: 'btn btn-secondary me-2',
-                                    },
-                                }).then(async (result) => {
-                                    if (result.isConfirmed) {
-                                        vm.external_referee_email =
-                                            params.term;
-                                        vm.$refs.inviteExternalReferee.isModalOpen = true;
-                                        $(vm.$refs.referees).select2(
-                                            'close'
-                                        );
-                                    }
-                                });
-                            }
-                            return data;
+                $(vm.$refs.referees)
+                    .select2({
+                        minimumInputLength: 2,
+                        theme: 'bootstrap-5',
+                        allowClear: true,
+                        placeholder: 'Search for a Referree',
+                        ajax: {
+                            url: api_endpoints.users_api + '/get_referees/',
+                            dataType: 'json',
+                            data: function (params) {
+                                var query = {
+                                    term: params.term,
+                                    type: 'public',
+                                };
+                                return query;
+                            },
+                            processResults: function (data, params) {
+                                if (Object.keys(data.results).length == 0) {
+                                    swal.fire({
+                                        title: 'No Referee Found',
+                                        text: 'Would you like to invite a new external referee to the system?',
+                                        icon: 'warning',
+                                        showCancelButton: true,
+                                        reverseButtons: true,
+                                        confirmButtonText: 'Yes',
+                                        cancelButtonText: 'No',
+                                        buttonsStyling: false,
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                            cancelButton:
+                                                'btn btn-secondary me-2',
+                                        },
+                                    }).then(async (result) => {
+                                        if (result.isConfirmed) {
+                                            vm.external_referee_email =
+                                                params.term;
+                                            vm.$refs.inviteExternalReferee.isModalOpen = true;
+                                            $(vm.$refs.referees).select2(
+                                                'close'
+                                            );
+                                        }
+                                    });
+                                }
+                                return data;
+                            },
                         },
-                    },
-                })
-                    .on("select2:select", function (e) {
+                    })
+                    .on('select2:select', function (e) {
                         let data = e.params.data.id;
                         vm.selected_referral = data;
                         vm.$nextTick(() => {
                             vm.$refs.referral_text.focus();
                         });
                     })
-                    .on("select2:unselect", function (e) {
+                    .on('select2:unselect', function (e) {
                         var selected = $(e.currentTarget);
                         vm.selected_referral = null;
-                    })
+                    });
                 vm.initialiseAssignedOfficerSelect();
                 vm.initialisedSelects = true;
             }
@@ -1383,7 +2222,7 @@ export default {
         externalRefereeInviteSent: function (response) {
             let vm = this;
             vm.refreshFromResponse(response);
-            $(vm.$refs.referees).val(null).trigger("change");
+            $(vm.$refs.referees).val(null).trigger('change');
             vm.enablePopovers();
             vm.selected_referral = '';
             vm.referral_text = '';
@@ -1433,12 +2272,14 @@ export default {
                         helpers.add_endpoint_join(
                             api_endpoints.cs_external_referee_invites,
                             `/${external_referee_invite.id}/retract/`
-                        ), {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        }
+                    )
                         .then((response) => {
                             this.fetchConservationStatus();
                             swal.fire({
@@ -1472,121 +2313,158 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(async (response) => {
-                let data = { 'email': vm.selected_referral, 'text': vm.referral_text };
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/assesor_send_referral')), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
+                let data = {
+                    email: vm.selected_referral,
+                    text: vm.referral_text,
+                };
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_obj.id + '/assesor_send_referral'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(data),
+                    }
+                ).then(
+                    async (response) => {
+                        const data = await response.json();
+                        vm.sendingReferral = false;
+                        vm.original_conservation_status_obj =
+                            helpers.copyObject(data);
+                        vm.conservation_status_obj = data;
+                        swal.fire({
+                            title: 'Referral Sent',
+                            text: `The referral has been sent to ${vm.selected_referral}`,
+                            icon: 'success',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        vm.enablePopovers();
+                        $(vm.$refs.referees).val(null).trigger('change');
+                        vm.selected_referral = '';
+                        vm.referral_text = '';
                     },
-                    body: JSON.stringify(data),
-                }).then(async (response) => {
+                    (error) => {
+                        console.log(error);
+                        swal.fire({
+                            title: 'Referral Error',
+                            text: helpers.apiVueResourceError(error),
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        vm.sendingReferral = false;
+                    }
+                );
+            });
+        },
+        remindReferral: function (r) {
+            let vm = this;
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.cs_referrals,
+                    r.id + '/remind'
+                )
+            ).then(
+                async (response) => {
                     const data = await response.json();
-                    vm.sendingReferral = false;
-                    vm.original_conservation_status_obj = helpers.copyObject(data);
+                    vm.original_conservation_status_obj =
+                        helpers.copyObject(data);
                     vm.conservation_status_obj = data;
                     swal.fire({
-                        title: 'Referral Sent',
-                        text: `The referral has been sent to ${vm.selected_referral}`,
+                        title: 'Referral Reminder',
+                        text: `A reminder has been sent to ${r.referral.fullname}`,
                         icon: 'success',
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                    vm.enablePopovers();
-                    $(vm.$refs.referees).val(null).trigger("change");
-                    vm.selected_referral = '';
-                    vm.referral_text = '';
-                }, (error) => {
-                    console.log(error);
+                },
+                (error) => {
                     swal.fire({
-                        title: 'Referral Error',
+                        title: 'Referral Reminder Error',
                         text: helpers.apiVueResourceError(error),
                         icon: 'error',
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                    vm.sendingReferral = false;
-                });
-            });
+                }
+            );
         },
-        remindReferral: function (r) {
+        recallReferral: function (r) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/remind')).then(async (response) => {
-                const data = await response.json();
-                vm.original_conservation_status_obj = helpers.copyObject(data);
-                vm.conservation_status_obj = data;
-                swal.fire({
-                    title: 'Referral Reminder',
-                    text: `A reminder has been sent to ${r.referral.fullname}`,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    }
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.cs_referrals,
+                    r.id + '/recall'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.original_conservation_status_obj =
+                        helpers.copyObject(data);
+                    vm.conservation_status_obj = data;
+                    $('.popover').hide();
+                    vm.enablePopovers();
                     swal.fire({
-                        title: 'Referral Reminder Error',
-                        text: helpers.apiVueResourceError(error),
-                        icon: 'error',
+                        title: 'Referral Recall',
+                        text: `The referral has been recalled from ${r.referral.fullname}`,
+                        icon: 'success',
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
-        },
-        recallReferral: function (r) {
-            let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/recall'), {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
                 },
-            }).then(async (response) => {
-                const data = await response.json();
-                vm.original_conservation_status_obj = helpers.copyObject(data);
-                vm.conservation_status_obj = data;
-                $(".popover").hide()
-                vm.enablePopovers();
-                swal.fire({
-                    title: 'Referral Recall',
-                    text: `The referral has been recalled from ${r.referral.fullname}`,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    }
-                });
-            },
-                error => {
+                (error) => {
                     swal.fire({
                         title: 'Referral Recall Error',
                         text: helpers.apiVueResourceError(error),
                         icon: 'error',
                         customClass: {
                             confirmButton: 'btn btn-primary',
-                        }
+                        },
                     });
-                });
+                }
+            );
         },
         resendReferral: function (r) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, r.id + '/resend')).then(async (response) => {
-                const data = await response.json();
-                vm.original_conservation_status_obj = helpers.copyObject(data);
-                vm.conservation_status_obj = data;
-                $(".popover").hide()
-                vm.enablePopovers();
-                swal.fire({
-                    title: 'Referral Resent',
-                    text: `The referral has been resent to ${r.referral.fullname}`,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.cs_referrals,
+                    r.id + '/resend'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.original_conservation_status_obj =
+                        helpers.copyObject(data);
+                    vm.conservation_status_obj = data;
+                    $('.popover').hide();
+                    vm.enablePopovers();
+                    swal.fire({
+                        title: 'Referral Resent',
+                        text: `The referral has been resent to ${r.referral.fullname}`,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Referral Resent Error',
                         text: helpers.apiVueResourceError(error),
@@ -1595,7 +2473,8 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         deferProposal: function () {
             this.$refs.defer_modal.isModalOpen = true;
@@ -1605,27 +2484,46 @@ export default {
         },
         switchStatus: function (status) {
             let vm = this;
-            if (vm.conservation_status_obj.processing_status == 'Proposed DeListed' && status == 'with_assessor') {
-                let data = { 'status': status, 'approver_comment': vm.approver_comment }
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/switch_status')), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(data),
-                })
-                    .then(async (response) => {
+            if (
+                vm.conservation_status_obj.processing_status ==
+                    'Proposed DeListed' &&
+                status == 'with_assessor'
+            ) {
+                let data = {
+                    status: status,
+                    approver_comment: vm.approver_comment,
+                };
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_obj.id + '/switch_status'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(data),
+                    }
+                ).then(
+                    async (response) => {
                         const data = await response.json();
                         vm.conservation_status_obj = data;
-                        vm.original_conservation_status_obj = helpers.copyObject(data);
+                        vm.original_conservation_status_obj =
+                            helpers.copyObject(data);
                         vm.approver_comment = '';
                         vm.$nextTick(() => {
                             vm.initialiseAssignedOfficerSelect(true);
                             vm.updateAssignedOfficerSelect();
                         });
-                        vm.$router.push({ path: '/internal/conservation-status/' });
-                    }, (error) => {
-                        vm.conservation_status_obj = helpers.copyObject(vm.original_conservation_status_obj)
+                        vm.$router.push({
+                            path: '/internal/conservation-status/',
+                        });
+                    },
+                    (error) => {
+                        vm.conservation_status_obj = helpers.copyObject(
+                            vm.original_conservation_status_obj
+                        );
                         swal.fire({
                             title: 'Application Error',
                             text: helpers.apiVueResourceError(error),
@@ -1634,30 +2532,43 @@ export default {
                                 confirmButton: 'btn btn-primary',
                             },
                         });
-                    });
-            }
-            else {
-                let data = { 'status': status, 'approver_comment': vm.approver_comment }
+                    }
+                );
+            } else {
+                let data = {
+                    status: status,
+                    approver_comment: vm.approver_comment,
+                };
                 vm.changingStatus = true;
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, (vm.conservation_status_obj.id + '/switch_status')), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(data),
-                })
-                    .then(async (response) => {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_obj.id + '/switch_status'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(data),
+                    }
+                ).then(
+                    async (response) => {
                         const data = await response.json();
                         vm.conservation_status_obj = data;
-                        vm.original_conservation_status_obj = helpers.copyObject(data);
+                        vm.original_conservation_status_obj =
+                            helpers.copyObject(data);
                         vm.approver_comment = '';
                         vm.$nextTick(() => {
                             vm.initialiseAssignedOfficerSelect(true);
                             vm.updateAssignedOfficerSelect();
                         });
                         vm.changingStatus = false;
-                    }, (error) => {
-                        vm.conservation_status_obj = helpers.copyObject(vm.original_conservation_status_obj)
+                    },
+                    (error) => {
+                        vm.conservation_status_obj = helpers.copyObject(
+                            vm.original_conservation_status_obj
+                        );
                         swal.fire({
                             title: 'Application Error',
                             text: helpers.apiVueResourceError(error),
@@ -1667,7 +2578,8 @@ export default {
                             },
                         });
                         vm.changingStatus = false;
-                    });
+                    }
+                );
             }
         },
         enablePopovers: function () {
@@ -1675,47 +2587,26 @@ export default {
                 $(function () {
                     $('[data-bs-toggle="popover"]').each(function () {
                         new bootstrap.Popover(this);
-                    })
-                })
+                    });
+                });
             });
         },
         fetchConservationStatus: function () {
             let vm = this;
-            fetch('/api/conservation_status/' + vm.$route.params.conservation_status_id + '/internal_conservation_status.json').then(async (response) => {
-                const data = await response.json();
-                vm.conservation_status_obj = data.conservation_status_obj;
-            },
-                err => {
+            fetch(
+                '/api/conservation_status/' +
+                    vm.$route.params.conservation_status_id +
+                    '/internal_conservation_status.json'
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.conservation_status_obj = data.conservation_status_obj;
+                },
+                (err) => {
                     console.log(err);
-                });
-        },
-    },
-    mounted: function () {
-        let vm = this;
-        vm.fetchDeparmentUsers();
-    },
-    created: function () {
-        if (!this.conservation_status_obj) {
-            this.fetchConservationStatus();
-        }
-    },
-    updated: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.initialiseSelects();
-            vm.form = document.forms.new_conservation_status;
-        });
-    },
-    beforeRouteEnter: function (to, from, next) {
-        fetch(`/api/conservation_status/${to.params.conservation_status_id}/internal_conservation_status.json`).then(async (response) => {
-            next(async vm => {
-                const data = await response.json();
-                vm.conservation_status_obj = data.conservation_status_obj;
-            });
+                }
+            );
         },
-            err => {
-                console.log(err);
-            });
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue
index 76c9ce42..caa88708 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue
@@ -2,17 +2,24 @@
     <div id="conservationStatusDocumentHistory">
         <modal
             transition="modal fade"
-            :title="'Conservation Status CS'+ conservationStatusId +' - Document D' + documentId + ' - History ' "
+            :title="
+                'Conservation Status CS' +
+                conservationStatusId +
+                ' - Document D' +
+                documentId +
+                ' - History '
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +31,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'D'+documentId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'ConservationStatusDocument'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'D' + documentId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'ConservationStatusDocument'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -73,8 +82,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -112,16 +120,28 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.conservationstatusdocument.fields.document_number) {
-                        return full.data.conservationstatusdocument.fields.document_number+'-'+full.revision_sequence;
+                    if (
+                        full.data.conservationstatusdocument.fields
+                            .document_number
+                    ) {
+                        return (
+                            full.data.conservationstatusdocument.fields
+                                .document_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "D"+full.data.conservationstatusdocument.pk+'-'+full.revision_sequence;
+                        return (
+                            'D' +
+                            full.data.conservationstatusdocument.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -149,14 +169,18 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.conservationstatusdocument.fields.document_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.conservationstatusdocument.fields
+                            .document_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'document_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -169,7 +193,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -182,7 +205,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -202,10 +224,14 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.conservationstatusdocument.fields.document_category) {
-                        return full.data.conservationstatusdocument.fields.document_category.document_category_name;
+                    if (
+                        full.data.conservationstatusdocument.fields
+                            .document_category
+                    ) {
+                        return full.data.conservationstatusdocument.fields
+                            .document_category.document_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_category', //_name',
@@ -213,17 +239,20 @@ export default {
         },
         column_sub_category: function () {
             return {
-
                 data: 'data.data.conservationstatusdocument.fields.document_sub_category',
                 defaultContent: '',
                 orderable: false,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.conservationstatusdocument.fields.document_sub_category) {
-                        return full.data.conservationstatusdocument.fields.document_sub_category.document_sub_category_name;
+                    if (
+                        full.data.conservationstatusdocument.fields
+                            .document_sub_category
+                    ) {
+                        return full.data.conservationstatusdocument.fields
+                            .document_sub_category.document_sub_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_sub_category',
@@ -238,15 +267,25 @@ export default {
                 searchable: true,
                 visible: true,
                 mRender: function (row, type, full) {
-                    let links='';
-                    if(full.data.conservationstatusdocument.fields.active){
-                        let value = full.data.conservationstatusdocument.fields.name;
+                    let links = '';
+                    if (full.data.conservationstatusdocument.fields.active) {
+                        let value =
+                            full.data.conservationstatusdocument.fields.name;
                         let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                        links+='<span><a href="/private-media/'+ full.data.conservationstatusdocument.fields._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                    }else{
-                        let value = full.data.conservationstatusdocument.fields.name;
+                        links +=
+                            '<span><a href="/private-media/' +
+                            full.data.conservationstatusdocument.fields._file +
+                            '" target="_blank">' +
+                            result.text +
+                            '</a> ' +
+                            result.link +
+                            '</span>';
+                    } else {
+                        let value =
+                            full.data.conservationstatusdocument.fields.name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        links += type == 'export' ? value : '<s>' + result + '</s>';
+                        links +=
+                            type == 'export' ? value : '<s>' + result + '</s>';
                     }
                     return links;
                 },
@@ -262,9 +301,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    let value = full.data.conservationstatusdocument.fields.description;
+                    let value =
+                        full.data.conservationstatusdocument.fields.description;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'description',
             };
@@ -275,11 +315,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -306,7 +346,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_conservation_status_document(this.documentId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_conservation_status_document(
+                            this.documentId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -316,8 +359,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -325,84 +368,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
index 42f70d79..08467d01 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
@@ -1,90 +1,170 @@
 <template>
-    <div class="container" id="internalConservationStatusDash">
-        <ul class="nav nav-pills" id="pills-tab" role="tablist">
+    <div id="internalConservationStatusDash" class="container">
+        <ul id="pills-tab" class="nav nav-pills" role="tablist">
             <li class="nav-item">
-                <a class="nav-link" id="pills-flora-tab" data-bs-toggle="pill" href="#pills-flora" role="tab"
-                    aria-controls="pills-flora" aria-selected="true" @click="set_active_tab('flora')">Flora</a>
+                <a
+                    id="pills-flora-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-flora"
+                    role="tab"
+                    aria-controls="pills-flora"
+                    aria-selected="true"
+                    @click="set_active_tab('flora')"
+                    >Flora</a
+                >
             </li>
             <li class="nav-item">
-                <a class="nav-link" id="pills-fauna-tab" data-bs-toggle="pill" href="#pills-fauna" role="tab"
-                    aria-controls="pills-fauna" aria-selected="false" @click="set_active_tab('fauna')">Fauna</a>
+                <a
+                    id="pills-fauna-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-fauna"
+                    role="tab"
+                    aria-controls="pills-fauna"
+                    aria-selected="false"
+                    @click="set_active_tab('fauna')"
+                    >Fauna</a
+                >
             </li>
             <li class="nav-item">
-                <a class="nav-link" id="pills-community-tab" data-bs-toggle="pill" href="#pills-community" role="tab"
-                    aria-controls="pills-community" aria-selected="false"
-                    @click="set_active_tab('community')">Communities</a>
+                <a
+                    id="pills-community-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-community"
+                    role="tab"
+                    aria-controls="pills-community"
+                    aria-selected="false"
+                    @click="set_active_tab('community')"
+                    >Communities</a
+                >
             </li>
         </ul>
-        <div class="tab-content" id="pills-tabContent">
-            <div class="tab-pane" id="pills-flora" role="tabpanel" aria-labelledby="pills-flora-tab">
-                <FormSection v-if="showConservationStatusDatatables" :formCollapse="false"
-                    label="Conservation Status - Flora" Index="flora">
-                    <ConservationStatusFloraDashTable v-if="isFlora" ref="flora_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_cs_url"
-                        :profile="profile" />
+        <div id="pills-tabContent" class="tab-content">
+            <div
+                id="pills-flora"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-flora-tab"
+            >
+                <FormSection
+                    v-if="showConservationStatusDatatables"
+                    :form-collapse="false"
+                    label="Conservation Status - Flora"
+                    Index="flora"
+                >
+                    <ConservationStatusFloraDashTable
+                        v-if="isFlora"
+                        ref="flora_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_cs_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection :formCollapse="false" label="Conservation Status - Flora Applications Referred To Me"
-                    Index="flora_cs">
-                    <CSFloraReferralsDashTable v-if="isFlora" ref="flora_referral_table" :group_type_name="group_name"
-                        :group_type_id="getGroupId" :url="species_cs_referrals_url" />
+                <FormSection
+                    :form-collapse="false"
+                    label="Conservation Status - Flora Applications Referred To Me"
+                    Index="flora_cs"
+                >
+                    <CSFloraReferralsDashTable
+                        v-if="isFlora"
+                        ref="flora_referral_table"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_cs_referrals_url"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-fauna" role="tabpanel" aria-labelledby="pills-fauna-tab">
-                <FormSection v-if="showConservationStatusDatatables" :formCollapse="false"
-                    label="Conservation Status - Fauna" Index="fauna">
-                    <ConservationStatusFaunaDashTable v-if="isFauna" ref="fauna_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_cs_url"
-                        :profile="profile" />
+            <div
+                id="pills-fauna"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-fauna-tab"
+            >
+                <FormSection
+                    v-if="showConservationStatusDatatables"
+                    :form-collapse="false"
+                    label="Conservation Status - Fauna"
+                    Index="fauna"
+                >
+                    <ConservationStatusFaunaDashTable
+                        v-if="isFauna"
+                        ref="fauna_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_cs_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection :formCollapse="false" label="Conservation Status - Fauna Applications Referred To Me"
-                    Index="fauna_cs">
-                    <CSFaunaReferralsDashTable v-if="isFauna" ref="fauna_referral_table" :group_type_name="group_name"
-                        :group_type_id="getGroupId" :url="species_cs_referrals_url" />
+                <FormSection
+                    :form-collapse="false"
+                    label="Conservation Status - Fauna Applications Referred To Me"
+                    Index="fauna_cs"
+                >
+                    <CSFaunaReferralsDashTable
+                        v-if="isFauna"
+                        ref="fauna_referral_table"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_cs_referrals_url"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-community" role="tabpanel" aria-labelledby="pills-community-tab">
-                <FormSection v-if="showConservationStatusDatatables" :formCollapse="false"
-                    label="Conservation Status - Community" Index="community">
-                    <ConservationStatusCommunityDashTable v-if="isCommunity" ref="community_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="community_cs_url"
-                        :profile="profile" />
+            <div
+                id="pills-community"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-community-tab"
+            >
+                <FormSection
+                    v-if="showConservationStatusDatatables"
+                    :form-collapse="false"
+                    label="Conservation Status - Community"
+                    Index="community"
+                >
+                    <ConservationStatusCommunityDashTable
+                        v-if="isCommunity"
+                        ref="community_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="community_cs_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection :formCollapse="false" label="Conservation Status - Community Applications Referred To Me"
-                    Index="community_cs">
-                    <CSCommunityReferralsDashTable v-if="isCommunity" ref="community_referral_table"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="community_cs_referrals_url" />
+                <FormSection
+                    :form-collapse="false"
+                    label="Conservation Status - Community Applications Referred To Me"
+                    Index="community_cs"
+                >
+                    <CSCommunityReferralsDashTable
+                        v-if="isCommunity"
+                        ref="community_referral_table"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="community_cs_referrals_url"
+                    />
                 </FormSection>
             </div>
         </div>
     </div>
 </template>
 <script>
-import ConservationStatusFloraDashTable from '@common-utils/conservation_status_flora_dashboard.vue'
-import ConservationStatusFaunaDashTable from '@common-utils/conservation_status_fauna_dashboard.vue'
-import ConservationStatusCommunityDashTable from '@common-utils/conservation_status_community_dashboard.vue'
-import CSFloraReferralsDashTable from '@common-utils/cs_flora_referrals_dashboard.vue'
-import CSFaunaReferralsDashTable from '@common-utils/cs_fauna_referrals_dashboard.vue'
-import CSCommunityReferralsDashTable from '@common-utils/cs_community_referrals_dashboard.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-import {
-    api_endpoints,
-    constants
-}
-    from '@/utils/hooks'
+import ConservationStatusFloraDashTable from '@common-utils/conservation_status_flora_dashboard.vue';
+import ConservationStatusFaunaDashTable from '@common-utils/conservation_status_fauna_dashboard.vue';
+import ConservationStatusCommunityDashTable from '@common-utils/conservation_status_community_dashboard.vue';
+import CSFloraReferralsDashTable from '@common-utils/cs_flora_referrals_dashboard.vue';
+import CSFaunaReferralsDashTable from '@common-utils/cs_fauna_referrals_dashboard.vue';
+import CSCommunityReferralsDashTable from '@common-utils/cs_community_referrals_dashboard.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
+import { api_endpoints, constants } from '@/utils/hooks';
 
 export default {
     name: 'InternalConservationStatusDashboard',
-    data() {
-        return {
-            group_types: [],
-            group_name: null,
-            species_cs_url: api_endpoints.species_conservation_status_paginated_internal,
-            species_cs_referrals_url: api_endpoints.species_conservation_status_referrals_paginated_internal,
-            community_cs_url: api_endpoints.community_conservation_status_paginated_internal,
-            community_cs_referrals_url: api_endpoints.community_conservation_status_referrals_paginated_internal,
-            profile: null,
-        }
-    },
     components: {
         ConservationStatusFloraDashTable,
         ConservationStatusFaunaDashTable,
@@ -94,6 +174,21 @@ export default {
         CSCommunityReferralsDashTable,
         FormSection,
     },
+    data() {
+        return {
+            group_types: [],
+            group_name: null,
+            species_cs_url:
+                api_endpoints.species_conservation_status_paginated_internal,
+            species_cs_referrals_url:
+                api_endpoints.species_conservation_status_referrals_paginated_internal,
+            community_cs_url:
+                api_endpoints.community_conservation_status_paginated_internal,
+            community_cs_referrals_url:
+                api_endpoints.community_conservation_status_referrals_paginated_internal,
+            profile: null,
+        };
+    },
     computed: {
         isFlora: function () {
             return this.group_name == 'flora';
@@ -112,60 +207,72 @@ export default {
             }
         },
         showConservationStatusDatatables: function () {
-            return this.profile && this.profile.groups.some(i => [
-                constants.GROUPS.READ_ONLY_USERS,
-                constants.GROUPS.CONSERVATION_STATUS_ASSESSORS,
-                constants.GROUPS.CONSERVATION_STATUS_APPROVERS,
-                constants.GROUPS.OCCURRENCE_APPROVERS,
-                constants.GROUPS.OCCURRENCE_ASSESSORS,
-                constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS,
-                constants.GROUPS.INTERNAL_CONTRIBUTORS
-            ].includes(i));
-        }
+            return (
+                this.profile &&
+                this.profile.groups.some((i) =>
+                    [
+                        constants.GROUPS.READ_ONLY_USERS,
+                        constants.GROUPS.CONSERVATION_STATUS_ASSESSORS,
+                        constants.GROUPS.CONSERVATION_STATUS_APPROVERS,
+                        constants.GROUPS.OCCURRENCE_APPROVERS,
+                        constants.GROUPS.OCCURRENCE_ASSESSORS,
+                        constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS,
+                        constants.GROUPS.INTERNAL_CONTRIBUTORS,
+                    ].includes(i)
+                )
+            );
+        },
+    },
+    created: function () {
+        fetch(api_endpoints.group_types_dict).then(
+            async (response) => {
+                this.group_types = await response.json();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+        this.fetchProfile();
+    },
+    mounted: function () {
+        chevron_toggle.init();
     },
     methods: {
         set_active_tab: function (group_name) {
             this.group_name = group_name;
-            if(!this.profile || !this.profile.area_of_interest){
-                localStorage.setItem("conservationStatusActiveTab", group_name);
+            if (!this.profile || !this.profile.area_of_interest) {
+                localStorage.setItem('conservationStatusActiveTab', group_name);
             }
-            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]')
-            let tab = bootstrap.Tab.getInstance(elem)
-            if (!tab)
-                tab = new bootstrap.Tab(elem)
-            tab.show()
+            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]');
+            let tab = bootstrap.Tab.getInstance(elem);
+            if (!tab) tab = new bootstrap.Tab(elem);
+            tab.show();
         },
         fetchProfile: function () {
             let vm = this;
-            fetch(api_endpoints.profile).then(async (response) => {
-                vm.profile = await response.json();
-                vm.$nextTick(() => {
-                    if (vm.profile && vm.profile.area_of_interest) {
-                        vm.set_active_tab(vm.profile.area_of_interest);
-                        return;
-                    }
-                    let conservationStatusActiveTab = localStorage.getItem('conservationStatusActiveTab')
-                    if (conservationStatusActiveTab === null) {
-                        vm.set_active_tab('flora');
-                    } else {
-                        vm.set_active_tab(conservationStatusActiveTab);
-                    }
-                })
-            }, (error) => {
-                console.log(error);
-            });
-        }
-    },
-    created: function () {
-        fetch(api_endpoints.group_types_dict).then(async (response) => {
-            this.group_types = await response.json();
-        }, (error) => {
-            console.log(error);
-        });
-        this.fetchProfile();
-    },
-    mounted: function () {
-        chevron_toggle.init();
+            fetch(api_endpoints.profile).then(
+                async (response) => {
+                    vm.profile = await response.json();
+                    vm.$nextTick(() => {
+                        if (vm.profile && vm.profile.area_of_interest) {
+                            vm.set_active_tab(vm.profile.area_of_interest);
+                            return;
+                        }
+                        let conservationStatusActiveTab = localStorage.getItem(
+                            'conservationStatusActiveTab'
+                        );
+                        if (conservationStatusActiveTab === null) {
+                            vm.set_active_tab('flora');
+                        } else {
+                            vm.set_active_tab(conservationStatusActiveTab);
+                        }
+                    });
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue
index 8e9b5fc0..f5e234c3 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/defer.vue
@@ -1,20 +1,46 @@
 <template lang="html">
     <div id="internal-conservation-status-proposal-defer">
-        <modal id="defer-cs-modal" transition="modal fade" @ok="ok()" @cancel="close()"
-            :title="`Defer CS${conservation_status.id} `" okText="Defer" large>
+        <modal
+            id="defer-cs-modal"
+            transition="modal fade"
+            :title="`Defer CS${conservation_status.id} `"
+            ok-text="Defer"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <form class="form-horizontal needs-validation" id="defer-form" name="defer-form" novalidate>
-                        <alert v-if="errors" type="danger"><strong>{{ errors }}</strong></alert>
+                    <form
+                        id="defer-form"
+                        class="form-horizontal needs-validation"
+                        name="defer-form"
+                        novalidate
+                    >
+                        <alert v-if="errors" type="danger"
+                            ><strong>{{ errors }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col">
                                     <div class="form-group">
-                                        <label class="control-label mb-3" for="reason">Reason / Comments</label>
-                                        <textarea class="form-control" id="reason" name="reason" ref="reason" required
-                                            v-model="reason"></textarea>
+                                        <label
+                                            class="control-label mb-3"
+                                            for="reason"
+                                            >Reason / Comments</label
+                                        >
+                                        <textarea
+                                            id="reason"
+                                            ref="reason"
+                                            v-model="reason"
+                                            class="form-control"
+                                            name="reason"
+                                            required
+                                        ></textarea>
                                         <div class="invalid-feedback">
-                                            Please enter the reason for deferring the Conservation Status Proposal.
+                                            Please enter the reason for
+                                            deferring the Conservation Status
+                                            Proposal.
                                         </div>
                                     </div>
                                 </div>
@@ -22,18 +48,29 @@
                             <div class="row mb-3">
                                 <div class="col">
                                     <alert type="warning">
-                                        Entering a review date is not mandatory but is
-                                        highly recommended
-                                        to ensure that the Conservation Status Proposal is reviewed in a timely manner.
+                                        Entering a review date is not mandatory
+                                        but is highly recommended to ensure that
+                                        the Conservation Status Proposal is
+                                        reviewed in a timely manner.
                                     </alert>
                                 </div>
                             </div>
-                            <div class=" row mb-3">
+                            <div class="row mb-3">
                                 <div class="col">
                                     <div class="form-group">
-                                        <label class="control-label mb-3" for="review-due-date">Review Due Date</label>
-                                        <input type="date" class="form-control" id="review-due-date"
-                                            name="review-due-date" ref="review-due-date" v-model="reviewDueDate" />
+                                        <label
+                                            class="control-label mb-3"
+                                            for="review-due-date"
+                                            >Review Due Date</label
+                                        >
+                                        <input
+                                            id="review-due-date"
+                                            ref="review-due-date"
+                                            v-model="reviewDueDate"
+                                            type="date"
+                                            class="form-control"
+                                            name="review-due-date"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -46,12 +83,12 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 
 export default {
-    name: 'defer',
+    name: 'Defer',
     components: {
         modal,
         alert,
@@ -61,24 +98,25 @@ export default {
             type: Object,
         },
     },
+    emits: ['refreshFromResponse'],
     data: function () {
         return {
             reason: null,
             reviewDueDate: null,
             isModalOpen: false,
             errors: null,
-        }
+        };
     },
-    emits: ['refreshFromResponse'],
     watch: {
         isModalOpen: function (val) {
             if (val) {
                 this.$nextTick(() => {
                     $(this.$refs.reason).focus();
-                    this.reviewDueDate = this.conservation_status.review_due_date;
+                    this.reviewDueDate =
+                        this.conservation_status.review_due_date;
                 });
             }
-        }
+        },
     },
     methods: {
         ok: function () {
@@ -100,16 +138,17 @@ export default {
         defer: function () {
             let vm = this;
             vm.errors = null;
-            let data = { 'review_due_date': vm.reviewDueDate, 'reason': vm.reason }
+            let data = { review_due_date: vm.reviewDueDate, reason: vm.reason };
             fetch(api_endpoints.defer_cs_proposal(vm.conservation_status.id), {
                 method: 'PATCH',
-                headers: { 'Content-Type': 'application/json', },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(data),
-            })
-                .then((response) => {
+            }).then(
+                (response) => {
                     vm.$emit('refreshFromResponse', response);
                     this.close();
-                }, (error) => {
+                },
+                (error) => {
                     swal.fire({
                         title: 'Application Error',
                         text: helpers.apiVueResourceError(error),
@@ -118,8 +157,9 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
index bc18e387..116c25ba 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
@@ -1,167 +1,246 @@
-<template lang="html">
-    <div id="proposal-proposed-delist">
-        <modal transition="modal fade" @ok="validateForm()" @cancel="cancel()" :title="title" large>
-            <div class="container-fluid">
-                <div class="row">
-                    <form class="form-horizontal needs-validation" id="delistForm" name="delistForm" novalidate>
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
-                        <div class="col-sm-12">
-                            <div class="form-group">
-                                <div class="row mb-3">
-                                    <div class="col-sm-12">
-                                        <label class="control-label" for="efective_to">Effective To</label>
-                                        <input type="date" style="width: 70%;" class="form-control" id="efective_to"
-                                            name="efective_to" ref="efective_to" v-model="delist.effective_to"
-                                            :max="new Date().toISOString().split('T')[0]" required />
-                                        <div class="invalid-feedback">
-                                            Please provide an effective to date.
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row mb-3">
-                                    <div class="col-sm-12">
-                                        <label class="control-label" for="Name">Reason for proposing to delist</label>
-                                        <textarea style="width: 70%;" class="form-control" id="reason" name="reason"
-                                            ref="reason" v-model="delist.reason" required></textarea>
-                                        <div class="invalid-feedback">
-                                            Please provide a reason for proposing to delist.
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <button type="button" v-if="delistingProposal" disabled class="btn btn-primary">Processing <span
-                        class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    <span class="visually-hidden">Loading...</span></button>
-                <button type="button" v-else class="btn btn-primary" @click="validateForm()">Propose Delist</button>
-            </div>
-        </modal>
-    </div>
-</template>
-
-<script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
-const calculateDefaultDate = () => {
-    const now = new Date();
-    now.setHours(9, 0, 0, 0);  // Set time to 9:00 AM
-
-    const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
-    const day = String(now.getDate()).padStart(2, '0');
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-};
-export default {
-    name: 'Propose-Delist-Proposal',
-    components: {
-        modal,
-        alert
-    },
-    props: {
-        conservation_status_id: {
-            type: Number,
-            required: true
-        },
-        processing_status: {
-            type: String,
-            required: true
-        },
-    },
-    data: function () {
-        return {
-            isModalOpen: false,
-            form: null,
-            delist: {
-                effective_to: new Date().toISOString().split('T')[0]
-            },
-            delistingProposal: false,
-            errors: false,
-            validation_form: null,
-            errorString: '',
-            successString: '',
-            success: false,
-        }
-    },
-    watch: {
-        isModalOpen: function (val) {
-            if (val) {
-                this.$nextTick(() => {
-                    this.$refs['efective_to'].focus();
-                });
-            }
-        }
-    },
-    computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-        title: function () {
-            return `Propose Delist Conservation Status CS${this.conservation_status_id}`;
-        }
-    },
-    methods: {
-        cancel: function () {
-            this.close();
-        },
-        close: function () {
-            this.isModalOpen = false;
-            this.delist = { effective_to: new Date().toISOString().split('T')[0] };
-            this.errors = false;
-            $('.was-validated').removeClass('was-validated');
-        },
-        validateForm: function () {
-            let vm = this;
-            if (vm.form.checkValidity()) {
-                vm.sendData();
-            } else {
-                vm.form.classList.add('was-validated');
-                $('#delistForm').find(':invalid').first().focus();
-            }
-            return false;
-        },
-        sendData: function () {
-            let vm = this;
-            vm.errors = false;
-            let delist = JSON.parse(JSON.stringify(vm.delist));
-            vm.delistingProposal = true;
-            if (vm.processing_status == 'Approved') {
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/propose_delist'), {
-                    method: 'PATCH',
-                    headers: { 'Content-Type': 'application/json', },
-                    body: JSON.stringify(delist),
-                }).then((response) => {
-                    vm.delistingProposal = false;
-                    vm.close();
-                    vm.$emit('refreshFromResponse', response);
-                    vm.$router.push({ path: '/internal/conservation-status/' }); //Navigate to dashboard after propose delist.
-                }, (error) => {
-                    vm.errors = true;
-                    vm.delistingProposal = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
-            } else {
-                vm.close();
-            }
-        },
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.delistForm;
-    }
-}
-</script>
-<style scoped>
-.error {
-    color: red;
-}
-</style>
+<template lang="html">
+    <div id="proposal-proposed-delist">
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="validateForm()"
+            @cancel="cancel()"
+        >
+            <div class="container-fluid">
+                <div class="row">
+                    <form
+                        id="delistForm"
+                        class="form-horizontal needs-validation"
+                        name="delistForm"
+                        novalidate
+                    >
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
+                        <div class="col-sm-12">
+                            <div class="form-group">
+                                <div class="row mb-3">
+                                    <div class="col-sm-12">
+                                        <label
+                                            class="control-label"
+                                            for="efective_to"
+                                            >Effective To</label
+                                        >
+                                        <input
+                                            id="efective_to"
+                                            ref="efective_to"
+                                            v-model="delist.effective_to"
+                                            type="date"
+                                            style="width: 70%"
+                                            class="form-control"
+                                            name="efective_to"
+                                            :max="
+                                                new Date()
+                                                    .toISOString()
+                                                    .split('T')[0]
+                                            "
+                                            required
+                                        />
+                                        <div class="invalid-feedback">
+                                            Please provide an effective to date.
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="row mb-3">
+                                    <div class="col-sm-12">
+                                        <label class="control-label" for="Name"
+                                            >Reason for proposing to
+                                            delist</label
+                                        >
+                                        <textarea
+                                            id="reason"
+                                            ref="reason"
+                                            v-model="delist.reason"
+                                            style="width: 70%"
+                                            class="form-control"
+                                            name="reason"
+                                            required
+                                        ></textarea>
+                                        <div class="invalid-feedback">
+                                            Please provide a reason for
+                                            proposing to delist.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        v-if="delistingProposal"
+                        type="button"
+                        disabled
+                        class="btn btn-primary"
+                    >
+                        Processing
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
+                    <button
+                        v-else
+                        type="button"
+                        class="btn btn-primary"
+                        @click="validateForm()"
+                    >
+                        Propose Delist
+                    </button>
+                </div>
+            </template>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
+const calculateDefaultDate = () => {
+    const now = new Date();
+    now.setHours(9, 0, 0, 0); // Set time to 9:00 AM
+
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+};
+export default {
+    name: 'ProposeDelistProposal',
+    components: {
+        modal,
+        alert,
+    },
+    props: {
+        conservation_status_id: {
+            type: Number,
+            required: true,
+        },
+        processing_status: {
+            type: String,
+            required: true,
+        },
+    },
+    data: function () {
+        return {
+            isModalOpen: false,
+            form: null,
+            delist: {
+                effective_to: new Date().toISOString().split('T')[0],
+            },
+            delistingProposal: false,
+            errors: false,
+            validation_form: null,
+            errorString: '',
+            successString: '',
+            success: false,
+        };
+    },
+    computed: {
+        showError: function () {
+            var vm = this;
+            return vm.errors;
+        },
+        title: function () {
+            return `Propose Delist Conservation Status CS${this.conservation_status_id}`;
+        },
+    },
+    watch: {
+        isModalOpen: function (val) {
+            if (val) {
+                this.$nextTick(() => {
+                    this.$refs['efective_to'].focus();
+                });
+            }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.delistForm;
+    },
+    methods: {
+        cancel: function () {
+            this.close();
+        },
+        close: function () {
+            this.isModalOpen = false;
+            this.delist = {
+                effective_to: new Date().toISOString().split('T')[0],
+            };
+            this.errors = false;
+            $('.was-validated').removeClass('was-validated');
+        },
+        validateForm: function () {
+            let vm = this;
+            if (vm.form.checkValidity()) {
+                vm.sendData();
+            } else {
+                vm.form.classList.add('was-validated');
+                $('#delistForm').find(':invalid').first().focus();
+            }
+            return false;
+        },
+        sendData: function () {
+            let vm = this;
+            vm.errors = false;
+            let delist = JSON.parse(JSON.stringify(vm.delist));
+            vm.delistingProposal = true;
+            if (vm.processing_status == 'Approved') {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_id + '/propose_delist'
+                    ),
+                    {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(delist),
+                    }
+                ).then(
+                    (response) => {
+                        vm.delistingProposal = false;
+                        vm.close();
+                        vm.$emit('refreshFromResponse', response);
+                        vm.$router.push({
+                            path: '/internal/conservation-status/',
+                        }); //Navigate to dashboard after propose delist.
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.delistingProposal = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
+            } else {
+                vm.close();
+            }
+        },
+    },
+};
+</script>
+<style scoped>
+.error {
+    color: red;
+}
+</style>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
index bad19415..418aa802 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
@@ -1,139 +1,202 @@
-<template lang="html">
-    <div id="proposal-proposed-decline">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large>
-            <div class="container-fluid">
-                <div class="row">
-                    <form class="form-horizontal" name="declineForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
-                        <div class="col-sm-12">
-                            <div class="form-group">
-                                <div class="row mb-3">
-                                    <div class="col-sm-12">
-                                        <label class="control-label" for="Name">Details</label>
-                                        <textarea style="width: 70%;" class="form-control" name="reason" ref="reason"
-                                            v-model="decline.reason"></textarea>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <div class="row" mb-3>
-                                    <div class="col-sm-12">
-                                        <label class="control-label" for="Name">CC email</label>
-                                        <input type="text" style="width: 70%;" class="form-control" name="cc_email"
-                                            v-model="decline.cc_email" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <button type="button" v-if="decliningProposal" disabled class="btn btn-primary" @click="ok">Processing
-                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    <span class="visually-hidden">Loading...</span></button>
-                <button type="button" v-else class="btn btn-primary" @click="ok">Decline</button>
-            </div>
-        </modal>
-    </div>
-</template>
-
-<script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
-export default {
-    name: 'Decline-Proposal',
-    components: {
-        modal,
-        alert
-    },
-    props: {
-        conservation_status_id: {
-            type: Number,
-            required: true
-        },
-        processing_status: {
-            type: String,
-            required: true
-        },
-    },
-    data: function () {
-        return {
-            isModalOpen: false,
-            form: null,
-            decline: {},
-            decliningProposal: false,
-            errors: false,
-            validation_form: null,
-            errorString: '',
-            successString: '',
-            success: false,
-        }
-    },
-    watch: {
-        isModalOpen: function (val) {
-            if (val) {
-                this.$nextTick(() => {
-                    this.$refs['reason'].focus();
-                });
-            }
-        }
-    },
-    computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-        title: function () {
-            return `Decline Conservation Status CS${this.conservation_status_id}`;
-        }
-    },
-    methods: {
-        ok: function () {
-            let vm = this;
-            if ($(vm.form).valid()) {
-                vm.sendData();
-            }
-        },
-        cancel: function () {
-            this.close();
-        },
-        close: function () {
-            this.isModalOpen = false;
-            this.decline = {};
-            this.errors = false;
-            $('.has-error').removeClass('has-error');
-        },
-        sendData: function () {
-            let vm = this;
-            vm.errors = false;
-            let decline = JSON.parse(JSON.stringify(vm.decline));
-            vm.decliningProposal = true;
-            if (vm.processing_status == 'With Assessor' || vm.processing_status == 'On Agenda') {
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/final_decline'), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(decline)
-                }).then((response) => {
-                    vm.decliningProposal = false;
-                    vm.close();
-                    vm.$emit('refreshFromResponse', response);
-                    vm.$router.push({ path: '/internal/conservation-status/' }); //Navigate to dashboard after propose decline.
-                }, (error) => {
-                    vm.errors = true;
-                    vm.decliningProposal = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
-            }
-        },
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.declineForm;
-    }
-}
-</script>
+<template lang="html">
+    <div id="proposal-proposed-decline">
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
+            <div class="container-fluid">
+                <div class="row">
+                    <form class="form-horizontal" name="declineForm">
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
+                        <div class="col-sm-12">
+                            <div class="form-group">
+                                <div class="row mb-3">
+                                    <div class="col-sm-12">
+                                        <label class="control-label" for="Name"
+                                            >Details</label
+                                        >
+                                        <textarea
+                                            ref="reason"
+                                            v-model="decline.reason"
+                                            style="width: 70%"
+                                            class="form-control"
+                                            name="reason"
+                                        ></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="row" mb-3>
+                                    <div class="col-sm-12">
+                                        <label class="control-label" for="Name"
+                                            >CC email</label
+                                        >
+                                        <input
+                                            v-model="decline.cc_email"
+                                            type="text"
+                                            style="width: 70%"
+                                            class="form-control"
+                                            name="cc_email"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        v-if="decliningProposal"
+                        type="button"
+                        disabled
+                        class="btn btn-primary"
+                        @click="ok"
+                    >
+                        Processing
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
+                    <button
+                        v-else
+                        type="button"
+                        class="btn btn-primary"
+                        @click="ok"
+                    >
+                        Decline
+                    </button>
+                </div>
+            </template>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
+export default {
+    name: 'DeclineProposal',
+    components: {
+        modal,
+        alert,
+    },
+    props: {
+        conservation_status_id: {
+            type: Number,
+            required: true,
+        },
+        processing_status: {
+            type: String,
+            required: true,
+        },
+    },
+    data: function () {
+        return {
+            isModalOpen: false,
+            form: null,
+            decline: {},
+            decliningProposal: false,
+            errors: false,
+            validation_form: null,
+            errorString: '',
+            successString: '',
+            success: false,
+        };
+    },
+    computed: {
+        showError: function () {
+            var vm = this;
+            return vm.errors;
+        },
+        title: function () {
+            return `Decline Conservation Status CS${this.conservation_status_id}`;
+        },
+    },
+    watch: {
+        isModalOpen: function (val) {
+            if (val) {
+                this.$nextTick(() => {
+                    this.$refs['reason'].focus();
+                });
+            }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.declineForm;
+    },
+    methods: {
+        ok: function () {
+            let vm = this;
+            if ($(vm.form).valid()) {
+                vm.sendData();
+            }
+        },
+        cancel: function () {
+            this.close();
+        },
+        close: function () {
+            this.isModalOpen = false;
+            this.decline = {};
+            this.errors = false;
+            $('.has-error').removeClass('has-error');
+        },
+        sendData: function () {
+            let vm = this;
+            vm.errors = false;
+            let decline = JSON.parse(JSON.stringify(vm.decline));
+            vm.decliningProposal = true;
+            if (
+                vm.processing_status == 'With Assessor' ||
+                vm.processing_status == 'On Agenda'
+            ) {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_id + '/final_decline'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(decline),
+                    }
+                ).then(
+                    (response) => {
+                        vm.decliningProposal = false;
+                        vm.close();
+                        vm.$emit('refreshFromResponse', response);
+                        vm.$router.push({
+                            path: '/internal/conservation-status/',
+                        }); //Navigate to dashboard after propose decline.
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.decliningProposal = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
+            }
+        },
+    },
+};
+</script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
index 26271d93..2bb7afc7 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
@@ -1,22 +1,45 @@
 <template lang="html">
     <div id="internal-conservation-status-proposal-propose-for-agenda">
-        <modal id="propose-for-agenda-modal" transition="modal fade" @ok="ok()" @cancel="close()"
-            :title="`Propose CS${conservation_status_id} for Agenda`" okText="Propose for Agenda" large>
+        <modal
+            id="propose-for-agenda-modal"
+            transition="modal fade"
+            :title="`Propose CS${conservation_status_id} for Agenda`"
+            ok-text="Propose for Agenda"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <form class="form-horizontal needs-validation" id="propose-for-agenda-form"
-                        name="propose-for-agenda-form" novalidate>
-                        <alert v-if="errors" type="danger"><strong>{{ errors }}</strong></alert>
+                    <form
+                        id="propose-for-agenda-form"
+                        class="form-horizontal needs-validation"
+                        name="propose-for-agenda-form"
+                        novalidate
+                    >
+                        <alert v-if="errors" type="danger"
+                            ><strong>{{ errors }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col">
                                     <div class="form-group">
-                                        <label class="control-label mb-3" for="Name">Recommended Action (Decline or
-                                            Approve) / Comments</label>
-                                        <textarea class="form-control" name="assessor_comment" ref="assessor_comment"
-                                            required v-model="assessor_comment"></textarea>
+                                        <label
+                                            class="control-label mb-3"
+                                            for="Name"
+                                            >Recommended Action (Decline or
+                                            Approve) / Comments</label
+                                        >
+                                        <textarea
+                                            ref="assessor_comment"
+                                            v-model="assessor_comment"
+                                            class="form-control"
+                                            name="assessor_comment"
+                                            required
+                                        ></textarea>
                                         <div class="invalid-feedback">
-                                            Please enter your recommended action and any other comments.
+                                            Please enter your recommended action
+                                            and any other comments.
                                         </div>
                                     </div>
                                 </div>
@@ -30,9 +53,9 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'ProposeForAgenda',
@@ -45,14 +68,14 @@ export default {
             type: Number,
         },
     },
+    emits: ['refreshFromResponse'],
     data: function () {
         return {
             assessor_comment: null,
             isModalOpen: false,
             errors: null,
-        }
+        };
     },
-    emits: ['refreshFromResponse'],
     watch: {
         isModalOpen: function (val) {
             if (val) {
@@ -60,7 +83,7 @@ export default {
                     $(this.$refs.assessor_comment).focus();
                 });
             }
-        }
+        },
     },
     methods: {
         ok: function () {
@@ -81,19 +104,30 @@ export default {
         },
         proposeForAgenda: function () {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/proposed_for_agenda'), {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.conservation_status,
+                    vm.conservation_status_id + '/proposed_for_agenda'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        assessor_comment: vm.assessor_comment,
+                    }),
+                }
+            ).then(
+                (response) => {
+                    vm.$router.push({ path: '/internal/conservation-status/' });
                 },
-                body: JSON.stringify({ 'assessor_comment': vm.assessor_comment }),
-            }).then((response) => {
-                vm.$router.push({ path: '/internal/conservation-status/' });
-            }, (error) => {
-                vm.errors = true;
-                vm.errorString = helpers.apiVueResourceError(error);
-            });
-        }
+                (error) => {
+                    vm.errors = true;
+                    vm.errorString = helpers.apiVueResourceError(error);
+                }
+            );
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
index 06523ceb..4f193fdb 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
@@ -1,270 +1,382 @@
-<template lang="html">
-    <div id="proposedIssuanceApproval">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large>
-            <div class="container-fluid">
-                <div class="row">
-                    <form class="form-horizontal" name="approvalForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
-                        <alert type="danger" v-if="!isEffectiveDateValid"><strong>Please select Effective To Date that
-                                is after Effective From Date</strong></alert>
-                        <div class="col-sm-12">
-                            <div class="form-group">
-                                <div class="row mb-3">
-                                    <div class="col-sm-4">
-                                        <label class="control-label pull-left" for="Name">Effective From Date</label>
-                                    </div>
-                                    <div class="col-sm-8">
-                                        <div class="input-group date" style="width: 70%;">
-                                            <input type="date" class="form-control" ref="start_date"
-                                                v-model="approval.effective_from_date">
-                                        </div>
-                                        <small style="color: red;" v-show="showstartDateError">This field is
-                                            required</small>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <div class="row mb-3">
-                                    <div class="col-sm-4">
-                                        <label class="control-label pull-left" for="Name">Details</label>
-                                    </div>
-                                    <div class="col-sm-8">
-                                        <textarea name="approval_details" ref="approval_details" class="form-control"
-                                            style="width:70%;" v-model="approval.details"
-                                            @blur="validateDetails($event)"></textarea>
-                                        <small style="color: red;" v-show="showDetailsError">This field is
-                                            required</small>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <div class="row mb-3">
-                                    <div class="col-sm-4">
-                                        <label class="control-label pull-left" for="Name">CC email</label>
-                                    </div>
-                                    <div class="col-sm-8">
-                                        <input type="text" class="form-control" name="approval_cc" style="width:70%;"
-                                            v-model="approval.cc_email">
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="form-group"
-                                v-if="processing_status == 'With Assessor' || processing_status == 'On Agenda'">
-                                <div class="row mb-3">
-                                    <div class="col-sm-4">
-                                        <label class="control-label pull-left">Approval Document</label>
-                                    </div>
-                                    <div class="col-sm-8">
-                                        <FileField2 ref="filefield" :proposal_id="conservation_status_id"
-                                            :isRepeatable="false" name="cs_approval_file" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <button type="button" v-if="issuingApproval" disabled class="btn btn-primary" @click="ok">Processing
-                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    <span class="visually-hidden">Loading...</span></button>
-                <button type="button" v-else class="btn btn-primary" @click="ok">{{ ok_button_text }}</button>
-            </div>
-        </modal>
-    </div>
-</template>
-
-<script>
-
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import FileField2 from '@/components/forms/filefield.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
-export default {
-    name: 'Proposed-Approval',
-    components: {
-        modal,
-        alert,
-        FileField2,
-    },
-    props: {
-        conservation_status_id: {
-            type: Number,
-            required: true
-        },
-        processing_status: {
-            type: String,
-            required: true
-        },
-    },
-    data: function () {
-        return {
-            isModalOpen: false,
-            approval: {
-                'effective_from_date': new Date().toISOString().slice(0, 10),
-            },
-            uploadedFile: null,
-            state: 'proposed_approval',
-            issuingApproval: false,
-            validation_form: null,
-            errors: false,
-            showtoDateError: false,
-            showstartDateError: false,
-            showDetailsError: false,
-            errorString: '',
-            successString: '',
-            success: false,
-            datepickerOptions: {
-                format: 'DD/MM/YYYY',
-                showClear: true,
-                useCurrent: false,
-                keepInvalid: true,
-                allowInputToggle: true
-            },
-        }
-    },
-    watch: {
-        isModalOpen: function (val) {
-            if (val) {
-                this.$nextTick(() => {
-                    this.$refs.start_date.focus();
-                });
-            }
-        }
-    },
-    computed: {
-        csrf_token: function () {
-            return helpers.getCookie('csrftoken')
-        },
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-        isEffectiveDateValid: function () {
-            if (this.approval.effective_from_date && this.approval.effective_to_date) {
-                const fromDate = new Date(this.approval.effective_from_date);
-                const toDate = new Date(this.approval.effective_to_date);
-                return fromDate < toDate;
-            }
-            else {
-                return true;
-            }
-        },
-        ok_button_text: function () {
-            if (this.state == 'proposed_approval') {
-                return 'Propose to Approve';
-            }
-            return 'Approve';
-        },
-        title: function () {
-            if (this.state == 'proposed_approval') {
-                return `Propose to Approve Conservation Status CS${this.conservation_status_id}`;
-            }
-            return `Approve Conservation Status CS${this.conservation_status_id}`;
-        },
-        can_preview: function () {
-            return (this.processing_status == 'Proposed DeListed' || 'With Assessor (Requirements)') && this.approval.effective_from_date && this.approval.effective_to_date ? true : false;
-        },
-    },
-    methods: {
-        ok: function () {
-            let vm = this;
-            let errors = vm.isError();
-            if (!errors && vm.isEffectiveDateValid) {
-                vm.sendData();
-            }
-        },
-        cancel: function () {
-            this.close()
-        },
-        close: function () {
-            this.isModalOpen = false;
-            this.approval = {
-                'effective_from_date': new Date().toISOString().slice(0, 10),
-            };
-            this.errors = false;
-        },
-        sendData: function () {
-            let vm = this;
-            vm.errors = false;
-            let approval = JSON.parse(JSON.stringify(vm.approval));
-            vm.issuingApproval = true;
-            if (vm.state == 'proposed_approval') {
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/proposed_approval'), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(approval)
-                }).then((response) => {
-                    vm.issuingApproval = false;
-                    vm.close();
-                    vm.$emit('refreshFromResponse', response);
-                    vm.$router.push({ path: '/internal/conservation-status/' }); //Navigate to dashboard page after Propose issue.
-                }, (error) => {
-                    vm.errors = true;
-                    vm.issuingApproval = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
-            }
-            else if (vm.state == 'final_approval') {
-                let formData = new FormData()
-                var files = vm.$refs.filefield.files;
-                vm.uploadedFile = files.length > 0 ? files[0].file : null;
-                formData.append('proposal_approval_document', vm.uploadedFile)
-                formData.append('data', JSON.stringify(approval));
-
-                fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/final_approval'), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: formData
-                }).then((response) => {
-                    vm.issuingApproval = false;
-                    vm.close();
-                    vm.$emit('refreshFromResponse', response);
-                }, (error) => {
-                    vm.errors = true;
-                    vm.issuingApproval = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
-            }
-        },
-        validateEffectiveFromDate: function (event) {
-            let vm = this;
-            const value = event.target.value;
-            if (!value) {
-                vm.showstartDateError = true;
-            }
-            else {
-                vm.showstartDateError = false;
-            }
-        },
-        validateDetails: function (event) {
-            let vm = this;
-            const value = event.target.value;
-            if (!value) {
-                vm.showDetailsError = true;
-            }
-            else {
-                vm.showDetailsError = false;
-            }
-        },
-        isError: function () {
-            let vm = this;
-            let hasError = false;
-            if (!vm.approval.effective_from_date) {
-                vm.showstartDateError = true;
-                hasError = true;
-            }
-            if (!vm.approval.details || vm.approval.details == "") {
-                vm.showDetailsError = true;
-                hasError = true;
-            }
-            return hasError;
-        },
-    },
-}
-</script>
+<template lang="html">
+    <div id="proposedIssuanceApproval">
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
+            <div class="container-fluid">
+                <div class="row">
+                    <form class="form-horizontal" name="approvalForm">
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
+                        <alert v-if="!isEffectiveDateValid" type="danger"
+                            ><strong
+                                >Please select Effective To Date that is after
+                                Effective From Date</strong
+                            ></alert
+                        >
+                        <div class="col-sm-12">
+                            <div class="form-group">
+                                <div class="row mb-3">
+                                    <div class="col-sm-4">
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Effective From Date</label
+                                        >
+                                    </div>
+                                    <div class="col-sm-8">
+                                        <div
+                                            class="input-group date"
+                                            style="width: 70%"
+                                        >
+                                            <input
+                                                ref="start_date"
+                                                v-model="
+                                                    approval.effective_from_date
+                                                "
+                                                type="date"
+                                                class="form-control"
+                                            />
+                                        </div>
+                                        <small
+                                            v-show="showstartDateError"
+                                            style="color: red"
+                                            >This field is required</small
+                                        >
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="row mb-3">
+                                    <div class="col-sm-4">
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Details</label
+                                        >
+                                    </div>
+                                    <div class="col-sm-8">
+                                        <textarea
+                                            ref="approval_details"
+                                            v-model="approval.details"
+                                            name="approval_details"
+                                            class="form-control"
+                                            style="width: 70%"
+                                            @blur="validateDetails($event)"
+                                        ></textarea>
+                                        <small
+                                            v-show="showDetailsError"
+                                            style="color: red"
+                                            >This field is required</small
+                                        >
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="row mb-3">
+                                    <div class="col-sm-4">
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >CC email</label
+                                        >
+                                    </div>
+                                    <div class="col-sm-8">
+                                        <input
+                                            v-model="approval.cc_email"
+                                            type="text"
+                                            class="form-control"
+                                            name="approval_cc"
+                                            style="width: 70%"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                v-if="
+                                    processing_status == 'With Assessor' ||
+                                    processing_status == 'On Agenda'
+                                "
+                                class="form-group"
+                            >
+                                <div class="row mb-3">
+                                    <div class="col-sm-4">
+                                        <label class="control-label pull-left"
+                                            >Approval Document</label
+                                        >
+                                    </div>
+                                    <div class="col-sm-8">
+                                        <FileField2
+                                            ref="filefield"
+                                            :proposal_id="
+                                                conservation_status_id
+                                            "
+                                            :is-repeatable="false"
+                                            name="cs_approval_file"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        v-if="issuingApproval"
+                        type="button"
+                        disabled
+                        class="btn btn-primary"
+                        @click="ok"
+                    >
+                        Processing
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
+                    <button
+                        v-else
+                        type="button"
+                        class="btn btn-primary"
+                        @click="ok"
+                    >
+                        {{ ok_button_text }}
+                    </button>
+                </div>
+            </template>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import FileField2 from '@/components/forms/filefield.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
+export default {
+    name: 'ProposedApproval',
+    components: {
+        modal,
+        alert,
+        FileField2,
+    },
+    props: {
+        conservation_status_id: {
+            type: Number,
+            required: true,
+        },
+        processing_status: {
+            type: String,
+            required: true,
+        },
+    },
+    data: function () {
+        return {
+            isModalOpen: false,
+            approval: {
+                effective_from_date: new Date().toISOString().slice(0, 10),
+            },
+            uploadedFile: null,
+            state: 'proposed_approval',
+            issuingApproval: false,
+            validation_form: null,
+            errors: false,
+            showtoDateError: false,
+            showstartDateError: false,
+            showDetailsError: false,
+            errorString: '',
+            successString: '',
+            success: false,
+            datepickerOptions: {
+                format: 'DD/MM/YYYY',
+                showClear: true,
+                useCurrent: false,
+                keepInvalid: true,
+                allowInputToggle: true,
+            },
+        };
+    },
+    computed: {
+        csrf_token: function () {
+            return helpers.getCookie('csrftoken');
+        },
+        showError: function () {
+            var vm = this;
+            return vm.errors;
+        },
+        isEffectiveDateValid: function () {
+            if (
+                this.approval.effective_from_date &&
+                this.approval.effective_to_date
+            ) {
+                const fromDate = new Date(this.approval.effective_from_date);
+                const toDate = new Date(this.approval.effective_to_date);
+                return fromDate < toDate;
+            } else {
+                return true;
+            }
+        },
+        ok_button_text: function () {
+            if (this.state == 'proposed_approval') {
+                return 'Propose to Approve';
+            }
+            return 'Approve';
+        },
+        title: function () {
+            if (this.state == 'proposed_approval') {
+                return `Propose to Approve Conservation Status CS${this.conservation_status_id}`;
+            }
+            return `Approve Conservation Status CS${this.conservation_status_id}`;
+        },
+        can_preview: function () {
+            return (this.processing_status == 'Proposed DeListed' ||
+                'With Assessor (Requirements)') &&
+                this.approval.effective_from_date &&
+                this.approval.effective_to_date
+                ? true
+                : false;
+        },
+    },
+    watch: {
+        isModalOpen: function (val) {
+            if (val) {
+                this.$nextTick(() => {
+                    this.$refs.start_date.focus();
+                });
+            }
+        },
+    },
+    methods: {
+        ok: function () {
+            let vm = this;
+            let errors = vm.isError();
+            if (!errors && vm.isEffectiveDateValid) {
+                vm.sendData();
+            }
+        },
+        cancel: function () {
+            this.close();
+        },
+        close: function () {
+            this.isModalOpen = false;
+            this.approval = {
+                effective_from_date: new Date().toISOString().slice(0, 10),
+            };
+            this.errors = false;
+        },
+        sendData: function () {
+            let vm = this;
+            vm.errors = false;
+            let approval = JSON.parse(JSON.stringify(vm.approval));
+            vm.issuingApproval = true;
+            if (vm.state == 'proposed_approval') {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_id + '/proposed_approval'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(approval),
+                    }
+                ).then(
+                    (response) => {
+                        vm.issuingApproval = false;
+                        vm.close();
+                        vm.$emit('refreshFromResponse', response);
+                        vm.$router.push({
+                            path: '/internal/conservation-status/',
+                        }); //Navigate to dashboard page after Propose issue.
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.issuingApproval = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
+            } else if (vm.state == 'final_approval') {
+                let formData = new FormData();
+                var files = vm.$refs.filefield.files;
+                vm.uploadedFile = files.length > 0 ? files[0].file : null;
+                formData.append('proposal_approval_document', vm.uploadedFile);
+                formData.append('data', JSON.stringify(approval));
+
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.conservation_status,
+                        vm.conservation_status_id + '/final_approval'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: formData,
+                    }
+                ).then(
+                    (response) => {
+                        vm.issuingApproval = false;
+                        vm.close();
+                        vm.$emit('refreshFromResponse', response);
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.issuingApproval = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
+            }
+        },
+        validateEffectiveFromDate: function (event) {
+            let vm = this;
+            const value = event.target.value;
+            if (!value) {
+                vm.showstartDateError = true;
+            } else {
+                vm.showstartDateError = false;
+            }
+        },
+        validateDetails: function (event) {
+            let vm = this;
+            const value = event.target.value;
+            if (!value) {
+                vm.showDetailsError = true;
+            } else {
+                vm.showDetailsError = false;
+            }
+        },
+        isError: function () {
+            let vm = this;
+            let hasError = false;
+            if (!vm.approval.effective_from_date) {
+                vm.showstartDateError = true;
+                hasError = true;
+            }
+            if (!vm.approval.details || vm.approval.details == '') {
+                vm.showDetailsError = true;
+                hasError = true;
+            }
+            return hasError;
+        },
+    },
+};
+</script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
index a8ea9b45..ff33e4c6 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
@@ -1,19 +1,41 @@
 <template lang="html">
     <div id="internal-conservation-status-proposal-ready-for-agenda">
-        <modal id="ready-for-agenda-modal" transition="modal fade" @ok="ok()" @cancel="close()"
-            :title="`CS${conservation_status_id} Ready for Agenda`" okText="Confirm Ready for Agenda" large>
+        <modal
+            id="ready-for-agenda-modal"
+            transition="modal fade"
+            :title="`CS${conservation_status_id} Ready for Agenda`"
+            ok-text="Confirm Ready for Agenda"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <form class="form-horizontal needs-validation" id="ready-for-agenda-form"
-                        name="ready-for-agenda-form" novalidate>
-                        <alert v-if="errors" type="danger"><strong>{{ errors }}</strong></alert>
+                    <form
+                        id="ready-for-agenda-form"
+                        class="form-horizontal needs-validation"
+                        name="ready-for-agenda-form"
+                        novalidate
+                    >
+                        <alert v-if="errors" type="danger"
+                            ><strong>{{ errors }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col">
                                     <div class="form-group">
-                                        <label class="control-label mb-3" for="Name">Approver Comments</label>
-                                        <textarea class="form-control" name="assessor_comment" ref="assessor_comment"
-                                            required v-model="assessor_comment"></textarea>
+                                        <label
+                                            class="control-label mb-3"
+                                            for="Name"
+                                            >Approver Comments</label
+                                        >
+                                        <textarea
+                                            ref="assessor_comment"
+                                            v-model="assessor_comment"
+                                            class="form-control"
+                                            name="assessor_comment"
+                                            required
+                                        ></textarea>
                                         <div class="invalid-feedback">
                                             Please enter any relevant comments.
                                         </div>
@@ -29,9 +51,9 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'ReadyForAgenda',
@@ -44,14 +66,14 @@ export default {
             type: Number,
         },
     },
+    emits: ['refreshFromResponse'],
     data: function () {
         return {
             assessor_comment: null,
             isModalOpen: false,
             errors: null,
-        }
+        };
     },
-    emits: ['refreshFromResponse'],
     watch: {
         isModalOpen: function (val) {
             if (val) {
@@ -59,7 +81,7 @@ export default {
                     $(this.$refs.assessor_comment).focus();
                 });
             }
-        }
+        },
     },
     methods: {
         ok: function () {
@@ -80,21 +102,30 @@ export default {
         },
         readyForAgenda: function () {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.conservation_status, vm.conservation_status_id + '/ready_for_agenda'), {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.conservation_status,
+                    vm.conservation_status_id + '/ready_for_agenda'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        assessor_comment: vm.assessor_comment,
+                    }),
+                }
+            ).then(
+                (response) => {
+                    vm.$router.push({ path: '/internal/conservation-status/' });
                 },
-                body: JSON.stringify({
-                    'assessor_comment': vm.assessor_comment
-                })
-            }).then((response) => {
-                vm.$router.push({ path: '/internal/conservation-status/' });
-            }, (error) => {
-                vm.errors = true;
-                vm.errorString = helpers.apiVueResourceError(error);
-            });
-        }
+                (error) => {
+                    vm.errors = true;
+                    vm.errorString = helpers.apiVueResourceError(error);
+                }
+            );
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
index 9230ecea..94a69a8b 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
@@ -1,45 +1,79 @@
 <template lang="html">
-    <div v-if="conservation_status_obj" class="container" id="internalCSReferral">
+    <div
+        v-if="conservation_status_obj"
+        id="internalCSReferral"
+        class="container"
+    >
         <div class="row">
-            <h3><span class="text-capitalize">{{ conservation_status_obj.group_type }}</span> {{
-                conservation_status_obj.conservation_status_number }} - Referral</h3>
+            <h3>
+                <span class="text-capitalize">{{
+                    conservation_status_obj.group_type
+                }}</span>
+                {{ conservation_status_obj.conservation_status_number }} -
+                Referral
+            </h3>
         </div>
         <div class="row">
             <div class="col-md-3">
-                <Submission :submitter_first_name="submitter_first_name" :submitter_last_name="submitter_last_name"
-                    :lodgement_date="conservation_status_obj.lodgement_date" class="mb-3" />
+                <Submission
+                    :submitter_first_name="submitter_first_name"
+                    :submitter_last_name="submitter_last_name"
+                    :lodgement_date="conservation_status_obj.lodgement_date"
+                    class="mb-3"
+                />
                 <div class="card card-default sticky-top">
-                    <div class="card-header">
-                        Referral
-                    </div>
+                    <div class="card-header">Referral</div>
                     <div class="card-body">
                         <strong>Status</strong><br />
                         {{ referral.processing_status }}
                     </div>
                     <template
-                        v-if="!isFinalised && referral.referral == conservation_status_obj.current_assessor.id && referral.can_be_completed">
+                        v-if="
+                            !isFinalised &&
+                            referral.referral ==
+                                conservation_status_obj.current_assessor.id &&
+                            referral.can_be_completed
+                        "
+                    >
                         <div class="card-body border-top pb-0">
                             <strong>Referrer</strong>
-                            <div class="alert alert-primary px-1 py-2 mt-2" role="alert">
+                            <div
+                                class="alert alert-primary px-1 py-2 mt-2"
+                                role="alert"
+                            >
                                 <div class="mb-1">
-                                    <i class="bi bi-person-fill"></i> {{ referral.sent_by.fullname }}
+                                    <i class="bi bi-person-fill"></i>
+                                    {{ referral.sent_by.fullname }}
                                 </div>
                                 <div>
-                                    <i class="bi bi-envelope"></i> <a :href="'mailto:' + referral.sent_by.email"
-                                        target="_balnk">{{ referral.sent_by.email }}</a>
+                                    <i class="bi bi-envelope"></i>
+                                    <a
+                                        :href="
+                                            'mailto:' + referral.sent_by.email
+                                        "
+                                        target="_balnk"
+                                        >{{ referral.sent_by.email }}</a
+                                    >
                                 </div>
                             </div>
                         </div>
                         <div class="card-body border-top">
                             <strong>Referrer's Comments</strong>
                             <div class="mt-2">
-                                <em class="text-muted">"{{ referral.text }}"</em>
+                                <em class="text-muted"
+                                    >"{{ referral.text }}"</em
+                                >
                             </div>
                         </div>
                         <div class="card-body border-top">
                             <strong>Your Comments</strong><br />
-                            <textarea id="your-comments" class="form-control" rows="6"
-                                v-model="referral.referral_comment" autofocus></textarea>
+                            <textarea
+                                id="your-comments"
+                                v-model="referral.referral_comment"
+                                class="form-control"
+                                rows="6"
+                                autofocus
+                            ></textarea>
                         </div>
                         <div class="card-body mt-2 border-top">
                             <div class="row mb-3">
@@ -47,10 +81,16 @@
                             </div>
                             <div class="row">
                                 <div class="col-sm-12">
-                                    <button style="width:80%;" class="btn btn-primary"
-                                        :disabled="conservation_status_obj.can_user_edit"
-                                        @click.prevent="completeReferral">Complete Referral
-                                        Task</button>
+                                    <button
+                                        style="width: 80%"
+                                        class="btn btn-primary"
+                                        :disabled="
+                                            conservation_status_obj.can_user_edit
+                                        "
+                                        @click.prevent="completeReferral"
+                                    >
+                                        Complete Referral Task
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -61,22 +101,53 @@
                 <div class="row">
                     <div class="">
                         <div class="row">
-                            <form :action="species_community_cs_form_url" method="post" name="new_conservation_status"
-                                enctype="multipart/form-data">
-                                <ProposalConservationStatus v-if="conservation_status_obj && profile"
-                                    ref="conservation_status" :conservation_status_obj="conservation_status_obj"
-                                    :referral="referral" :is_internal="profile.is_internal">
+                            <form
+                                :action="species_community_cs_form_url"
+                                method="post"
+                                name="new_conservation_status"
+                                enctype="multipart/form-data"
+                            >
+                                <ProposalConservationStatus
+                                    v-if="conservation_status_obj && profile"
+                                    ref="conservation_status"
+                                    :conservation_status_obj="
+                                        conservation_status_obj
+                                    "
+                                    :referral="referral"
+                                    :is_internal="profile.is_internal"
+                                >
                                 </ProposalConservationStatus>
-                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                <input type='hidden' name="conservation_status_id" :value="1" />
+                                <input
+                                    type="hidden"
+                                    name="csrfmiddlewaretoken"
+                                    :value="csrf_token"
+                                />
+                                <input
+                                    type="hidden"
+                                    name="conservation_status_id"
+                                    :value="1"
+                                />
                                 <div class="row" style="margin-bottom: 50px">
-                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;"
-                                        v-if="!conservation_status_obj.can_user_edit && !isFinalised">
-                                        <div v-if="!isFinalised" class="container">
+                                    <div
+                                        v-if="
+                                            !conservation_status_obj.can_user_edit &&
+                                            !isFinalised
+                                        "
+                                        class="navbar fixed-bottom"
+                                        style="background-color: #f5f5f5"
+                                    >
+                                        <div
+                                            v-if="!isFinalised"
+                                            class="container"
+                                        >
                                             <div class="col-md-12 text-end">
-                                                <button class="btn btn-primary pull-right" style="margin-top:5px;"
-                                                    @click.prevent="save()">Save
-                                                    Changes</button>
+                                                <button
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    @click.prevent="save()"
+                                                >
+                                                    Save Changes
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
@@ -90,35 +161,49 @@
     </div>
 </template>
 <script>
-
-import datatable from '@vue-utils/datatable.vue'
-import Submission from '@common-utils/submission.vue'
-import ProposalConservationStatus from '@/components/form_conservation_status.vue'
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import datatable from '@vue-utils/datatable.vue';
+import Submission from '@common-utils/submission.vue';
+import ProposalConservationStatus from '@/components/form_conservation_status.vue';
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'ConservationStatusReferral',
+    components: {
+        datatable,
+        Submission,
+        ProposalConservationStatus,
+    },
+    beforeRouteEnter: function (to, from, next) {
+        fetch(
+            helpers.add_endpoint_json(
+                api_endpoints.cs_referrals,
+                to.params.referral_id
+            )
+        ).then(
+            async (response) => {
+                next(async (vm) => {
+                    vm.referral = await response.json();
+                });
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    },
     data: function () {
         return {
             profile: null,
             savingConservationStatus: false,
             referral: null,
-        }
-    },
-    components: {
-        datatable,
-        Submission,
-        ProposalConservationStatus,
+        };
     },
     computed: {
         conservation_status_obj: function () {
-            return this.referral != null && this.referral != 'undefined' ? this.referral.conservation_status : null;
+            return this.referral != null && this.referral != 'undefined'
+                ? this.referral.conservation_status
+                : null;
         },
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         species_community_cs_form_url: function () {
             return `/api/conservation_status/${this.conservation_status_obj.id}/conservation_status_save.json`;
@@ -128,22 +213,31 @@ export default {
         },
         submitter_first_name: function () {
             if (this.conservation_status_obj.submitter) {
-                return this.conservation_status_obj.submitter.first_name
+                return this.conservation_status_obj.submitter.first_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_last_name: function () {
             if (this.conservation_status_obj.submitter) {
-                return this.conservation_status_obj.submitter.last_name
+                return this.conservation_status_obj.submitter.last_name;
             } else {
-                return ''
+                return '';
             }
         },
         isFinalised: function () {
-            return !(this.referral != null && this.referral.processing_status == 'Awaiting');
+            return !(
+                this.referral != null &&
+                this.referral.processing_status == 'Awaiting'
+            );
         },
     },
+    created: function () {
+        this.fetchProfile();
+        if (!this.referral) {
+            this.fetchReferral();
+        }
+    },
     methods: {
         save: function () {
             let vm = this;
@@ -156,19 +250,22 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Your changes have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingConservationStatus = false;
-            }, err => {
-                vm.savingConservationStatus = false;
-            });
+            }).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Your changes have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingConservationStatus = false;
+                },
+                (err) => {
+                    vm.savingConservationStatus = false;
+                }
+            );
         },
         refreshFromResponse: async function (response) {
             let vm = this;
@@ -187,95 +284,103 @@ export default {
                     },
                     didClose: function () {
                         $('#your-comments').focus();
-                    }
+                    },
                 });
                 return;
             }
             swal.fire({
-                title: "Complete Referral",
-                text: "Are you sure you want to complete this referral?",
-                icon: "question",
+                title: 'Complete Referral',
+                text: 'Are you sure you want to complete this referral?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Complete Referral',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    let payload = new Object();
-                    Object.assign(payload, vm.referral);
-                    fetch(vm.species_community_cs_referral_form_url, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(payload),
-                    }).then(async (response) => {
-                        fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, vm.$route.params.referral_id + '/complete'), {
-                            method: 'PATCH',
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        let payload = new Object();
+                        Object.assign(payload, vm.referral);
+                        fetch(vm.species_community_cs_referral_form_url, {
+                            method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',
                             },
-                        }).then(async (response) => {
-                            const data = await response.json();
-                            vm.referral = Object.assign({}, data);
-                        },
-                            error => {
-                                swal.fire({
-                                    title: 'Referral Error',
-                                    text: helpers.apiVueResourceError(error),
-                                    icon: 'error',
-                                    customClass: {
-                                        confirmButton: 'btn btn-primary',
+                            body: JSON.stringify(payload),
+                        }).then(
+                            async (response) => {
+                                fetch(
+                                    helpers.add_endpoint_json(
+                                        api_endpoints.cs_referrals,
+                                        vm.$route.params.referral_id +
+                                            '/complete'
+                                    ),
+                                    {
+                                        method: 'PATCH',
+                                        headers: {
+                                            'Content-Type': 'application/json',
+                                        },
+                                    }
+                                ).then(
+                                    async (response) => {
+                                        const data = await response.json();
+                                        vm.referral = Object.assign({}, data);
                                     },
-                                });
-                            });
-
-                    }, err => {
-                        console.log(err);
-                    });
+                                    (error) => {
+                                        swal.fire({
+                                            title: 'Referral Error',
+                                            text: helpers.apiVueResourceError(
+                                                error
+                                            ),
+                                            icon: 'error',
+                                            customClass: {
+                                                confirmButton:
+                                                    'btn btn-primary',
+                                            },
+                                        });
+                                    }
+                                );
+                            },
+                            (err) => {
+                                console.log(err);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         fetchReferral: function () {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, vm.$route.params.referral_id)).then(async (response) => {
-                const data = await response.json();
-                vm.referral = Object.assign({}, data);
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.cs_referrals,
+                    vm.$route.params.referral_id
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.referral = Object.assign({}, data);
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         fetchProfile() {
             fetch(api_endpoints.profile)
                 .then(async (response) => {
                     this.profile = await response.json();
                 })
-                .catch(error => {
-                    console.log(error)
-                })
-        },
-    },
-    created: function () {
-        this.fetchProfile();
-        if (!this.referral) {
-            this.fetchReferral();
-        }
-    },
-    beforeRouteEnter: function (to, from, next) {
-        fetch(helpers.add_endpoint_json(api_endpoints.cs_referrals, to.params.referral_id)).then(async (response) => {
-            next(async vm => {
-                vm.referral = await response.json();
-            });
+                .catch((error) => {
+                    console.log(error);
+                });
         },
-            err => {
-                console.log(err);
-            });
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue
index 36e571f5..642fa76a 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue
@@ -2,23 +2,31 @@
     <div id="speciesConservationStatusHistory">
         <modal
             transition="modal fade"
-            :title="'Conservation Status CS'
-            + conservationStatusId
-            + ' - Species '+ speciesId +' - History'"
+            :title="
+                'Conservation Status CS' +
+                conservationStatusId +
+                ' - Species ' +
+                speciesId +
+                ' - History'
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
-                                <div v-if="conservationStatusId" class="col-lg-12">
+                                <div
+                                    v-if="conservationStatusId"
+                                    class="col-lg-12"
+                                >
                                     <datatable
                                         :id="datatable_id"
                                         ref="history_datatable"
@@ -26,14 +34,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'CS'+conservationStatusId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'ConservationStatus'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'CS' + conservationStatusId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'ConservationStatus'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -53,7 +63,7 @@ import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
 
 export default {
-    name: 'speciesConservationStatusHistory',
+    name: 'SpeciesConservationStatusHistory',
     components: {
         modal,
         alert,
@@ -76,8 +86,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -116,16 +125,28 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.conservationstatus.fields.conservation_status_number) {
-                        return full.data.conservationstatus.fields.conservation_status_number+'-'+full.revision_sequence;
+                    if (
+                        full.data.conservationstatus.fields
+                            .conservation_status_number
+                    ) {
+                        return (
+                            full.data.conservationstatus.fields
+                                .conservation_status_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "CS"+full.data.conservationstatus.pk+'-'+full.revision_sequence;
+                        return (
+                            'CS' +
+                            full.data.conservationstatus.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -152,14 +173,14 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.conservationstatus.fields.conservation_status_number;
+                    return full.data.conservationstatus.fields
+                        .conservation_status_number;
                 },
                 name: 'conservation_status_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -172,7 +193,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -185,7 +205,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -204,13 +223,16 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.taxonomy !== undefined && full.data.taxonomy.fields !== undefined) {
+                    if (
+                        full.data.taxonomy !== undefined &&
+                        full.data.taxonomy.fields !== undefined
+                    ) {
                         //return full.data.taxonomy.fields.scientific_name;
                         let value = full.data.taxonomy.fields.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'scientific_name', //_name',
@@ -224,20 +246,27 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.taxonpreviousname !== undefined && full.data.taxonpreviousname.fields !== undefined) {
-                        let value = full.data.taxonpreviousname.fields.previous_scientific_name;
+                    if (
+                        full.data.taxonpreviousname !== undefined &&
+                        full.data.taxonpreviousname.fields !== undefined
+                    ) {
+                        let value =
+                            full.data.taxonpreviousname.fields
+                                .previous_scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
-                    }
-                    else if (full.data.taxonpreviousname !== undefined &&
+                        return type == 'export' ? value : result;
+                    } else if (
+                        full.data.taxonpreviousname !== undefined &&
                         full.data.taxonpreviousname.fields === undefined &&
-                        full.data.taxonpreviousname.length > 0) {
-                        let value = full.data.taxonpreviousname[0].fields.previous_scientific_name;
+                        full.data.taxonpreviousname.length > 0
+                    ) {
+                        let value =
+                            full.data.taxonpreviousname[0].fields
+                                .previous_scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
-                    }
-                    else {
-                        return ''
+                        return type == 'export' ? value : result;
+                    } else {
+                        return '';
                     }
                 },
                 name: 'previous_scientific_name', //_name',
@@ -254,25 +283,35 @@ export default {
                     if (full.data.taxonvernacular !== undefined) {
                         //list not dict
                         if (full.data.taxonvernacular.fields === undefined) {
-                            var combined_name = ""
-                            for (var i = 0; i < full.data.taxonvernacular.length; i++) {
-                                if (i==0) {
-                                    combined_name = full.data.taxonvernacular[i].fields.vernacular_name;
+                            var combined_name = '';
+                            for (
+                                var i = 0;
+                                i < full.data.taxonvernacular.length;
+                                i++
+                            ) {
+                                if (i == 0) {
+                                    combined_name =
+                                        full.data.taxonvernacular[i].fields
+                                            .vernacular_name;
                                 } else {
-                                    combined_name += ","+full.data.taxonvernacular[i].fields.vernacular_name
+                                    combined_name +=
+                                        ',' +
+                                        full.data.taxonvernacular[i].fields
+                                            .vernacular_name;
                                 }
                             }
                             //return combined_name;
                             let value = combined_name;
                             let result = helpers.dtPopover(value, 30, 'hover');
-                            return type=='export' ? value : result;
+                            return type == 'export' ? value : result;
                         }
                         //return full.data.taxonvernacular.fields.vernacular_name;
-                        let value = full.data.taxonvernacular.fields.vernacular_name;
+                        let value =
+                            full.data.taxonvernacular.fields.vernacular_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'vernacular_name',
@@ -280,15 +319,18 @@ export default {
         },
         column_category: function () {
             return {
-
                 data: 'data.data.conservationstatus.fields.conservation_category',
                 defaultContent: '',
                 orderable: false,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.conservationstatus.fields.conservation_category) {
-                        return full.data.conservationstatus.fields.conservation_category.code;
+                    if (
+                        full.data.conservationstatus.fields
+                            .conservation_category
+                    ) {
+                        return full.data.conservationstatus.fields
+                            .conservation_category.code;
                     } else {
                         return '';
                     }
@@ -298,7 +340,6 @@ export default {
         },
         column_list: function () {
             return {
-
                 data: 'data.data.conservationlist.fields.code',
                 defaultContent: '',
                 orderable: false,
@@ -316,21 +357,20 @@ export default {
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.conservationstatus.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.conservationstatus.fields.processing_status;
+                    return full.data.conservationstatus.fields
+                        .processing_status;
                 },
                 name: 'processing_status',
             };
         },
         column_comment: function () {
             return {
-
                 data: 'data.data.conservationstatus.fields.comment',
                 defaultContent: '',
                 orderable: false,
@@ -340,7 +380,7 @@ export default {
                     //return full.data.conservationstatus.fields.comment;
                     let value = full.data.conservationstatus.fields.comment;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'comment',
             };
@@ -351,11 +391,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -384,7 +424,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_conservation_status(this.conservationStatusId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_conservation_status(
+                            this.conservationStatusId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -394,8 +437,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -403,65 +446,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                    helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
index 1779dbc5..d1575814 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
@@ -1,41 +1,102 @@
 <template lang="html">
     <div id="AgendaModal">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large id="agenda-modal">
+        <modal
+            id="agenda-modal"
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="agendaForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div>
                             <div class="col-md-12">
-                                <ul class="nav nav-pills" id="pills-tab" role="tablist">
+                                <ul
+                                    id="pills-tab"
+                                    class="nav nav-pills"
+                                    role="tablist"
+                                >
                                     <li class="nav-item">
-                                        <a class="nav-link" id="pills-flora-tab" data-bs-toggle="pill"
-                                            href="#pills-flora" role="tab" aria-controls="pills-flora"
+                                        <a
+                                            id="pills-flora-tab"
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            href="#pills-flora"
+                                            role="tab"
+                                            aria-controls="pills-flora"
                                             aria-selected="true"
-                                            @click="set_active_tab('pills-flora', 'flora')">Flora</a>
+                                            @click="
+                                                set_active_tab(
+                                                    'pills-flora',
+                                                    'flora'
+                                                )
+                                            "
+                                            >Flora</a
+                                        >
                                     </li>
                                     <li class="nav-item">
-                                        <a class="nav-link" id="pills-fauna-tab" data-bs-toggle="pill"
-                                            href="#pills-fauna" role="tab" aria-controls="pills-fauna"
+                                        <a
+                                            id="pills-fauna-tab"
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            href="#pills-fauna"
+                                            role="tab"
+                                            aria-controls="pills-fauna"
                                             aria-selected="false"
-                                            @click="set_active_tab('pills-fauna', 'fauna')">Fauna</a>
+                                            @click="
+                                                set_active_tab(
+                                                    'pills-fauna',
+                                                    'fauna'
+                                                )
+                                            "
+                                            >Fauna</a
+                                        >
                                     </li>
                                     <li class="nav-item">
-                                        <a class="nav-link" id="pills-community-tab" data-bs-toggle="pill"
-                                            href="#pills-community" role="tab" aria-controls="pills-community"
+                                        <a
+                                            id="pills-community-tab"
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            href="#pills-community"
+                                            role="tab"
+                                            aria-controls="pills-community"
                                             aria-selected="false"
-                                            @click="set_active_tab('pills-community', 'community')">Communities</a>
+                                            @click="
+                                                set_active_tab(
+                                                    'pills-community',
+                                                    'community'
+                                                )
+                                            "
+                                            >Communities</a
+                                        >
                                     </li>
                                 </ul>
-                                <div class="tab-content" id="pills-tabContent">
-                                    <div class="tab-pane" id="pills-flora" role="tabpanel"
-                                        aria-labelledby="pills-flora-tab">
-                                        <FormSection :formCollapse="false" label="Conservation Status - Flora"
-                                            Index="flora">
-                                            <ConservationStatusFloraDashTable v-if="isFlora" ref="flora_table"
-                                                level="internal" :group_type_name="group_name"
-                                                :group_type_id="getGroupId" :url="species_agenda_cs_url"
-                                                :is_for_agenda="for_agenda" :meeting_obj="meeting_obj"
+                                <div id="pills-tabContent" class="tab-content">
+                                    <div
+                                        id="pills-flora"
+                                        class="tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="pills-flora-tab"
+                                    >
+                                        <FormSection
+                                            :form-collapse="false"
+                                            label="Conservation Status - Flora"
+                                            Index="flora"
+                                        >
+                                            <ConservationStatusFloraDashTable
+                                                v-if="isFlora"
+                                                ref="flora_table"
+                                                level="internal"
+                                                :group_type_name="group_name"
+                                                :group_type_id="getGroupId"
+                                                :url="species_agenda_cs_url"
+                                                :is_for_agenda="for_agenda"
+                                                :meeting_obj="meeting_obj"
                                                 filterCSFloraScientificName_cache="filterCSFloraScientificNameAgenda"
                                                 filterCSFloraCommonName_cache="filterCSFloraCommonNameAgenda"
                                                 filterCSFloraPhylogeneticGroup_cache="filterCSFloraPhylogeneticGroupAgenda"
@@ -57,17 +118,32 @@
                                                 filterCSToFloraEffectiveToDate_cache="filterCSToFloraEffectiveToDateAgenda"
                                                 filterCSFromFloraReviewDueDate_cache="filterCSFromFloraReviewDueDateAgenda"
                                                 filterCSToFloraReviewDueDate_cache="filterCSToFloraReviewDueDateAgenda"
-                                                @updateAgendaItems="updateAgendaItems" />
+                                                @update-agenda-items="
+                                                    updateAgendaItems
+                                                "
+                                            />
                                         </FormSection>
                                     </div>
-                                    <div class="tab-pane" id="pills-fauna" role="tabpanel"
-                                        aria-labelledby="pills-fauna-tab">
-                                        <FormSection :formCollapse="false" label="Conservation Status - Fauna"
-                                            Index="fauna">
-                                            <ConservationStatusFaunaDashTable v-if="isFauna" ref="fauna_table"
-                                                level="internal" :group_type_name="group_name"
-                                                :group_type_id="getGroupId" :url="species_agenda_cs_url"
-                                                :is_for_agenda="for_agenda" :meeting_obj="meeting_obj"
+                                    <div
+                                        id="pills-fauna"
+                                        class="tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="pills-fauna-tab"
+                                    >
+                                        <FormSection
+                                            :form-collapse="false"
+                                            label="Conservation Status - Fauna"
+                                            Index="fauna"
+                                        >
+                                            <ConservationStatusFaunaDashTable
+                                                v-if="isFauna"
+                                                ref="fauna_table"
+                                                level="internal"
+                                                :group_type_name="group_name"
+                                                :group_type_id="getGroupId"
+                                                :url="species_agenda_cs_url"
+                                                :is_for_agenda="for_agenda"
+                                                :meeting_obj="meeting_obj"
                                                 filterCSFaunaScientificName_cache="filterCSFaunaScientificNameAgenda"
                                                 filterCSFaunaCommonName_cache="filterCSFaunaCommonNameAgenda"
                                                 filterCSFaunaPhylogeneticGroup_cache="filterCSFaunaPhylogeneticGroupAgenda"
@@ -89,17 +165,32 @@
                                                 filterCSToFaunaEffectiveToDate_cache="filterCSToFaunaEffectiveToDateAgenda"
                                                 filterCSFromFaunaReviewDueDate_cache="filterCSFromFaunaReviewDueDateAgenda"
                                                 filterCSToFaunaReviewDueDate_cache="filterCSToFaunaReviewDueDateAgenda"
-                                                @updateAgendaItems="updateAgendaItems" />
+                                                @update-agenda-items="
+                                                    updateAgendaItems
+                                                "
+                                            />
                                         </FormSection>
                                     </div>
-                                    <div class="tab-pane" id="pills-community" role="tabpanel"
-                                        aria-labelledby="pills-community-tab">
-                                        <FormSection :formCollapse="false" label="Conservation Status - Community"
-                                            Index="community">
-                                            <ConservationStatusCommunityDashTable v-if="isCommunity"
-                                                ref="community_table" level="internal" :group_type_name="group_name"
-                                                :group_type_id="getGroupId" :url="community_agenda_cs_url"
-                                                :is_for_agenda="for_agenda" :meeting_obj="meeting_obj"
+                                    <div
+                                        id="pills-community"
+                                        class="tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="pills-community-tab"
+                                    >
+                                        <FormSection
+                                            :form-collapse="false"
+                                            label="Conservation Status - Community"
+                                            Index="community"
+                                        >
+                                            <ConservationStatusCommunityDashTable
+                                                v-if="isCommunity"
+                                                ref="community_table"
+                                                level="internal"
+                                                :group_type_name="group_name"
+                                                :group_type_id="getGroupId"
+                                                :url="community_agenda_cs_url"
+                                                :is_for_agenda="for_agenda"
+                                                :meeting_obj="meeting_obj"
                                                 filterCSCommunityMigratedId_cache="filterCSCommunityMigratedIdAgenda"
                                                 filterCSCommunityName_cache="filterCSCommunityNameAgenda"
                                                 filterCSCommunityChangeCode_cache="filterCSCommunityChangeCodeAgenda"
@@ -118,7 +209,10 @@
                                                 filterCSToCommunityEffectiveToDate_cache="filterCSToCommunityEffectiveToDateAgenda"
                                                 filterCSFromCommunityReviewDueDate_cache="filterCSFromCommunityReviewDueDateAgenda"
                                                 filterCSToCommunityReviewDueDate_cache="filterCSToCommunityReviewDueDateAgenda"
-                                                @updateAgendaItems="updateAgendaItems" />
+                                                @update-agenda-items="
+                                                    updateAgendaItems
+                                                "
+                                            />
                                         </FormSection>
                                     </div>
                                 </div>
@@ -128,21 +222,29 @@
                 </div>
             </div>
 
-            <div slot="footer">
-                <button type="button" class="btn btn-primary pull-right" @click="cancel">Close</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-primary pull-right"
+                        @click="cancel"
+                    >
+                        Close
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import ConservationStatusFloraDashTable from '@common-utils/conservation_status_flora_dashboard.vue'
-import ConservationStatusFaunaDashTable from '@common-utils/conservation_status_fauna_dashboard.vue'
-import ConservationStatusCommunityDashTable from '@common-utils/conservation_status_community_dashboard.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import ConservationStatusFloraDashTable from '@common-utils/conservation_status_flora_dashboard.vue';
+import ConservationStatusFaunaDashTable from '@common-utils/conservation_status_fauna_dashboard.vue';
+import ConservationStatusCommunityDashTable from '@common-utils/conservation_status_community_dashboard.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'AgendaModal',
@@ -157,11 +259,11 @@ export default {
     props: {
         meeting_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -171,17 +273,19 @@ export default {
             new_species_list: [],
             group_types: [],
             group_name: null,
-            species_agenda_cs_url: api_endpoints.species_agenda_conservation_status_paginated_internal,
-            community_agenda_cs_url: api_endpoints.community_agenda_conservation_status_paginated_internal,
+            species_agenda_cs_url:
+                api_endpoints.species_agenda_conservation_status_paginated_internal,
+            community_agenda_cs_url:
+                api_endpoints.community_agenda_conservation_status_paginated_internal,
             for_agenda: true,
             form: null,
             errors: false,
             errorString: '',
-        }
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         showError: function () {
             var vm = this;
@@ -191,7 +295,9 @@ export default {
             return 'Agenda (Add Conservation Status)';
         },
         isFlora: function () {
-            return this.group_name == 'flora' && this.$parent.updateModal === true; // parent condition checked as to resolve the datatable css problem onload
+            return (
+                this.group_name == 'flora' && this.$parent.updateModal === true
+            ); // parent condition checked as to resolve the datatable css problem onload
         },
         isFauna: function () {
             return this.group_name == 'fauna';
@@ -205,7 +311,24 @@ export default {
                     return this.group_types[i].id;
                 }
             }
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(function () {
+            chevron_toggle.init();
+            vm.set_active_tab('pills-flora', 'flora');
+        });
+    },
+    created: function () {
+        fetch(api_endpoints.group_types_dict).then(
+            async (response) => {
+                this.group_types = await response.json();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
     },
     methods: {
         updateAgendaItems: function () {
@@ -213,7 +336,7 @@ export default {
             vm.$parent.updateAgendaItems();
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             this.$parent.updateModal = false;
@@ -221,26 +344,11 @@ export default {
         },
         set_active_tab: function (tab_href_name, group_name) {
             this.group_name = group_name;
-            let elem = $('#pills-tab a[href="#' + tab_href_name + '"]')
-            let tab = bootstrap.Tab.getInstance(elem)
-            if (!tab)
-                tab = new bootstrap.Tab(elem)
-            tab.show()
+            let elem = $('#pills-tab a[href="#' + tab_href_name + '"]');
+            let tab = bootstrap.Tab.getInstance(elem);
+            if (!tab) tab = new bootstrap.Tab(elem);
+            tab.show();
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(function () {
-            chevron_toggle.init();
-            vm.set_active_tab('pills-flora', 'flora');
-        })
-    },
-    created: function () {
-        fetch(api_endpoints.group_types_dict).then(async (response) => {
-            this.group_types = await response.json();
-        }, (error) => {
-            console.log(error);
-        });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index ad29b268..205b933d 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -1,69 +1,87 @@
 <template lang="html">
     <div id="cs_queue">
-        <FormSection :formCollapse="false" label="Agenda" :Index="csQueueBody">
+        <FormSection :form-collapse="false" label="Agenda" :Index="csQueueBody">
             <div v-if="meeting_obj.can_user_edit" class="col-sm-12">
                 <div class="text-end">
-                    <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 "
-                        @click.prevent="addConservationStatus">
+                    <button
+                        :disabled="isReadOnly"
+                        type="button"
+                        class="btn btn-primary mb-2"
+                        @click.prevent="addConservationStatus"
+                    >
                         <i class="fa-solid fa-circle-plus"></i>
                         Add Conservation Status
                     </button>
                 </div>
             </div>
-            <datatable ref="cs_queue_datatable" :id="datatable_id" :dtOptions="cs_queue_options"
-                :dtHeaders="cs_queue_headers" />
+            <datatable
+                :id="datatable_id"
+                ref="cs_queue_datatable"
+                :dt-options="cs_queue_options"
+                :dt-headers="cs_queue_headers"
+            />
         </FormSection>
-        <AgendaModal ref="agenda_modal" :meeting_obj="meeting_obj" :is_internal="true"></AgendaModal>
+        <AgendaModal
+            ref="agenda_modal"
+            :meeting_obj="meeting_obj"
+            :is_internal="true"
+        ></AgendaModal>
     </div>
 </template>
 <script>
-import {
-    api_endpoints,
-    constants,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 
-
-import datatable from '@/utils/vue/datatable.vue'
+import datatable from '@/utils/vue/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import AgendaModal from './agenda_datatable.vue';
 
 export default {
     name: 'CSQueueDatatable',
+    components: {
+        datatable,
+        FormSection,
+        AgendaModal,
+    },
     props: {
         meeting_obj: {
             type: Object,
-            required: true
+            required: true,
         },
     },
     data: function () {
         let vm = this;
         return {
-            csQueueBody: "csQueueBody" + vm._uid,
+            csQueueBody: 'csQueueBody' + vm._uid,
             datatable_id: 'cs-queue-datatable-' + vm._uid,
             cs_queue_headers: [
-                "Order",
-                "Number",
-                "Type",
-                "Scientific Name",
-                "Change Type",
-                "CS Number",
-                "Action",
+                'Order',
+                'Number',
+                'Type',
+                'Scientific Name',
+                'Change Type',
+                'CS Number',
+                'Action',
             ],
             cs_queue_options: {
                 autoWidth: false,
-                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+                lengthMenu: [
+                    [10, 25, 50, -1],
+                    [10, 25, 50, 'All'],
+                ],
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/fetch_agenda_items'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.meeting,
+                        vm.meeting_obj.id + '/fetch_agenda_items'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [
@@ -74,7 +92,7 @@ export default {
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
                             columns: ':not(.no-export)',
-                        }
+                        },
                     },
                     {
                         extend: 'csv',
@@ -83,12 +101,12 @@ export default {
                         className: 'btn btn-primary rounded',
                         exportOptions: {
                             columns: ':not(.no-export)',
-                        }
-                    }
+                        },
+                    },
                 ],
                 columns: [
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (!vm.isReadOnly) {
@@ -97,72 +115,73 @@ export default {
                             }
                             return links;
                         },
-                        orderable: false
+                        orderable: false,
                     },
                     {
                         data: null,
                     },
                     {
-                        data: "group_type",
+                        data: 'group_type',
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.group_type) {
                                 return full.group_type;
                             }
                         },
-                        orderable: false
+                        orderable: false,
                     },
                     {
-                        data: "scientific_name",
+                        data: 'scientific_name',
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return type == 'export' ? value : result;
                         },
-                        orderable: false
+                        orderable: false,
                     },
                     {
-                        data: "change_code",
+                        data: 'change_code',
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return type == 'export' ? value : result;
                         },
                         orderable: false,
-                        name: "conservation_status__change_code__code"
+                        name: 'conservation_status__change_code__code',
                     },
                     {
-                        data: "conservation_status_number",
+                        data: 'conservation_status_number',
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.conservation_status_number) {
                                 return full.conservation_status_number;
                             }
                         },
-                        orderable: false
+                        orderable: false,
                     },
                     {
-                        data: "conservation_status_id",
+                        data: 'conservation_status_id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (!vm.isReadOnly) {
-                                links += `<a href='#${full.conservation_status_id}' data-remove-agenda-item='${full.conservation_status_id}'>Remove</a><br/>`
+                                links += `<a href='#${full.conservation_status_id}' data-remove-agenda-item='${full.conservation_status_id}'>Remove</a><br/>`;
                             }
                             links += `<a target="_blank" href='/internal/conservation-status/${full.conservation_status_id}?action=view'>View <i class="bi bi-arrow-up-right-square"></i></a><br/>`;
                             return links;
-
                         },
-                        orderable: false
+                        orderable: false,
                     },
                 ],
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
-                ],
-                "order": [
-                    [1, "desc"]
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
+                order: [[1, 'desc']],
                 searching: true,
                 processing: true,
                 drawCallback: function () {
@@ -175,41 +194,55 @@ export default {
             },
             updateModal: false, // used to load the datatable in the modal when open to fix the css
             agenda_items: [],
-        }
-    },
-    components: {
-        datatable,
-        FormSection,
-        AgendaModal,
+        };
     },
     computed: {
         isReadOnly: function () {
             let action = this.$route.query.action;
-            if (action === "edit" && this.meeting_obj && this.meeting_obj.user_edit_mode) {
+            if (
+                action === 'edit' &&
+                this.meeting_obj &&
+                this.meeting_obj.user_edit_mode
+            ) {
                 return false;
-            }
-            else {
+            } else {
                 return this.meeting_obj.readonly;
             }
         },
     },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+            vm.hideOrderColumn();
+        });
+    },
     methods: {
         updateAgendaItems() {
             let vm = this;
-            vm.$refs.cs_queue_datatable.vmDataTable.ajax.reload(vm.addTableListeners, false);
+            vm.$refs.cs_queue_datatable.vmDataTable.ajax.reload(
+                vm.addTableListeners,
+                false
+            );
         },
         // This function was used to call api and then add row to datatable manually on ANY ACTION
         constructCSQueueTable: function () {
             let vm = this;
-            fetch(`/api/meeting/${vm.meeting_obj.id}/fetch_agenda_items.json`).then(async (response) => {
-                vm.agenda_items = await response.json();
-                vm.$refs.cs_queue_datatable.vmDataTable.clear()
-                vm.$refs.cs_queue_datatable.vmDataTable.rows.add(vm.agenda_items);
-                vm.$refs.cs_queue_datatable.vmDataTable.draw();
-            },
-                err => {
+            fetch(
+                `/api/meeting/${vm.meeting_obj.id}/fetch_agenda_items.json`
+            ).then(
+                async (response) => {
+                    vm.agenda_items = await response.json();
+                    vm.$refs.cs_queue_datatable.vmDataTable.clear();
+                    vm.$refs.cs_queue_datatable.vmDataTable.rows.add(
+                        vm.agenda_items
+                    );
+                    vm.$refs.cs_queue_datatable.vmDataTable.draw();
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         addConservationStatus: async function () {
             this.updateModal = true;
@@ -218,44 +251,64 @@ export default {
         addEventListeners: function () {
             let vm = this;
             // internal Discard listener
-            vm.$refs.cs_queue_datatable.vmDataTable.on('click', 'a[data-remove-agenda-item]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-remove-agenda-item');
-                vm.removeAgendaItem(id);
-            });
+            vm.$refs.cs_queue_datatable.vmDataTable.on(
+                'click',
+                'a[data-remove-agenda-item]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-remove-agenda-item');
+                    vm.removeAgendaItem(id);
+                }
+            );
             // to add the incremental row number column to the table
-            vm.$refs.cs_queue_datatable.vmDataTable.on('order.dt search.dt', function () {
-                vm.$refs.cs_queue_datatable.vmDataTable.column(1, {
-                    search: 'applied',
-                }).nodes().each(function (cell, i) {
-                    cell.innerHTML = i + 1;
-                });
-            }).draw();
+            vm.$refs.cs_queue_datatable.vmDataTable
+                .on('order.dt search.dt', function () {
+                    vm.$refs.cs_queue_datatable.vmDataTable
+                        .column(1, {
+                            search: 'applied',
+                        })
+                        .nodes()
+                        .each(function (cell, i) {
+                            cell.innerHTML = i + 1;
+                        });
+                })
+                .draw();
 
             // Bind clicks to functions
-            vm.$refs.cs_queue_datatable.vmDataTable.on('click', '.dtMoveUp', function (e) {
-                e.preventDefault();
-                var tr = $(e.target).parents('tr');
-                var id = $(this).attr('data-id');
-                vm.moveUp(id, tr);
-            });
-            vm.$refs.cs_queue_datatable.vmDataTable.on('click', '.dtMoveDown', function (e) {
-                e.preventDefault();
-                var tr = $(e.target).parents('tr');
-                var id = $(this).attr('data-id');
-                vm.moveDown(id, tr);
-            });
+            vm.$refs.cs_queue_datatable.vmDataTable.on(
+                'click',
+                '.dtMoveUp',
+                function (e) {
+                    e.preventDefault();
+                    var tr = $(e.target).parents('tr');
+                    var id = $(this).attr('data-id');
+                    vm.moveUp(id, tr);
+                }
+            );
+            vm.$refs.cs_queue_datatable.vmDataTable.on(
+                'click',
+                '.dtMoveDown',
+                function (e) {
+                    e.preventDefault();
+                    var tr = $(e.target).parents('tr');
+                    var id = $(this).attr('data-id');
+                    vm.moveDown(id, tr);
+                }
+            );
 
-            vm.$refs.cs_queue_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.cs_queue_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         removeAgendaItem: function (conservation_status_id) {
             let vm = this;
             swal.fire({
-                title: "Remove Agenda Item",
+                title: 'Remove Agenda Item',
                 html: "<p>Are you sure?</p><p>This action will change the CS status back to 'Ready For Agenda'.</p><p>If you wish to Defer the CS and send it Back to the Assessor, you can do so from the CS details page at any time.</p>",
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Remove Agenda Item',
                 customClass: {
@@ -263,58 +316,80 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    let payload = new Object();
-                    payload.conservation_status_id = conservation_status_id;
-                    fetch(`/api/meeting/${vm.meeting_obj.id}/remove_agenda_item.json`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(payload),
-                    })
-                        .then(async (response) => {
-                            swal.fire({
-                                title: 'Removed',
-                                text: 'Your agenda item is removed',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        let payload = new Object();
+                        payload.conservation_status_id = conservation_status_id;
+                        fetch(
+                            `/api/meeting/${vm.meeting_obj.id}/remove_agenda_item.json`,
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                            vm.meeting_obj.agenda_items_arr = await response.json();
-                            vm.$refs.cs_queue_datatable.vmDataTable.ajax.reload(vm.addTableListeners, false);
-                            // Open the CS details page in a new tab
-                            var new_window = window.open(`/internal/conservation-status/${conservation_status_id}?action=view`, '_blank');
-                            new_window.blur();
-                            window.focus();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                                body: JSON.stringify(payload),
+                            }
+                        ).then(
+                            async (response) => {
+                                swal.fire({
+                                    title: 'Removed',
+                                    text: 'Your agenda item is removed',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.meeting_obj.agenda_items_arr =
+                                    await response.json();
+                                vm.$refs.cs_queue_datatable.vmDataTable.ajax.reload(
+                                    vm.addTableListeners,
+                                    false
+                                );
+                                // Open the CS details page in a new tab
+                                var new_window = window.open(
+                                    `/internal/conservation-status/${conservation_status_id}?action=view`,
+                                    '_blank'
+                                );
+                                new_window.blur();
+                                window.focus();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         addTableListeners: function (e) {
             let vm = this;
             // for "...more" tooltip to work after reload
             helpers.enablePopovers();
             // to remove the down arrow from last row
-            $(vm.$refs.cs_queue_datatable.table).find('tr:last .dtMoveDown').remove();
+            $(vm.$refs.cs_queue_datatable.table)
+                .find('tr:last .dtMoveDown')
+                .remove();
             // to remove the up arroiw from first row
-            $(vm.$refs.cs_queue_datatable.table).children('tbody').find('tr:first .dtMoveUp').remove();
+            $(vm.$refs.cs_queue_datatable.table)
+                .children('tbody')
+                .find('tr:first .dtMoveUp')
+                .remove();
             // Remove previous binding before adding it
             $('.dtMoveUp').off('click');
             $('.dtMoveDown').off('click');
-
         },
         async sendDirection(req, direction) {
             let vm = this;
             let movement = direction == 'down' ? 'move_down' : 'move_up';
             try {
-                await fetch(helpers.add_endpoint_json(api_endpoints.meeting_agenda_items, req + '/' + movement))
+                await fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.meeting_agenda_items,
+                        req + '/' + movement
+                    )
+                );
                 this.$parent.uuid++;
             } catch (error) {
                 console.log(error);
@@ -353,24 +428,24 @@ export default {
             table.page(0).draw(false);
 
             // to remove the down arrow from last row
-            $(vm.$refs.cs_queue_datatable.table).find('tr:last .dtMoveDown').remove();
+            $(vm.$refs.cs_queue_datatable.table)
+                .find('tr:last .dtMoveDown')
+                .remove();
             // to remove the up arroiw from first row
-            $(vm.$refs.cs_queue_datatable.table).children('tbody').find('tr:first .dtMoveUp').remove();
+            $(vm.$refs.cs_queue_datatable.table)
+                .children('tbody')
+                .find('tr:first .dtMoveUp')
+                .remove();
         },
         hideOrderColumn: function () {
             // this method is used to hide the order colmn when processing_status is completed
             let vm = this;
             if (vm.isReadOnly == true) {
-                vm.$refs.cs_queue_datatable.vmDataTable.column([0]).visible(false);
+                vm.$refs.cs_queue_datatable.vmDataTable
+                    .column([0])
+                    .visible(false);
             }
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-            vm.hideOrderColumn();
-        });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/dashboard.vue b/boranga/frontend/boranga/src/components/internal/meetings/dashboard.vue
index 7c2eb5cc..a7f0212d 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/dashboard.vue
@@ -1,28 +1,28 @@
 <template>
-    <div class="container" id="internalMeetDash">
-        <FormSection :formCollapse="false" label="Meetings" Index="meeting">
-            <MeetingsDashTable ref="meetings_table" level="internal" :url="meetings_url" />
+    <div id="internalMeetDash" class="container">
+        <FormSection :form-collapse="false" label="Meetings" Index="meeting">
+            <MeetingsDashTable
+                ref="meetings_table"
+                level="internal"
+                :url="meetings_url"
+            />
         </FormSection>
     </div>
 </template>
 <script>
-
-import FormSection from '@/components/forms/section_toggle.vue'
-import MeetingsDashTable from './meetings_datatable.vue'
-import {
-    api_endpoints,
-}
-    from '@/utils/hooks'
+import FormSection from '@/components/forms/section_toggle.vue';
+import MeetingsDashTable from './meetings_datatable.vue';
+import { api_endpoints } from '@/utils/hooks';
 export default {
     name: 'InternalMeetingsDashboard',
+    components: {
+        MeetingsDashTable,
+        FormSection,
+    },
     data() {
         return {
             meetings_url: api_endpoints.meetings_paginated,
-        }
-    },
-    components: {
-        MeetingsDashTable,
-        FormSection
+        };
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
index 0aa3d127..ba9b8c29 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
@@ -1,23 +1,29 @@
 <template lang="html">
-    <div v-if="meeting_obj" class="container" id="internalMeeting">
-        <div class="row" style="padding-bottom: 50px;">
+    <div v-if="meeting_obj" id="internalMeeting" class="container">
+        <div class="row" style="padding-bottom: 50px">
             <h3>Meeting ID# - {{ meeting_obj.meeting_number }}</h3>
 
             <div class="col-md-3">
+                <CommsLogs
+                    :comms_url="comms_url"
+                    :logs_url="logs_url"
+                    :comms_add_url="comms_add_url"
+                    :disable_add_entry="!meeting_obj.can_add_log"
+                />
 
-                <CommsLogs :comms_url="comms_url" :logs_url="logs_url" :comms_add_url="comms_add_url"
-                    :disable_add_entry="!meeting_obj.can_add_log" />
-
-                <MeetingSidePanel v-if="canSeeSidePanel" :submitter_first_name="submitter_first_name"
-                    :submitter_last_name="submitter_last_name" :datetime_created="meeting_obj.datetime_created"
+                <MeetingSidePanel
+                    v-if="canSeeSidePanel"
+                    :submitter_first_name="submitter_first_name"
+                    :submitter_last_name="submitter_last_name"
+                    :datetime_created="meeting_obj.datetime_created"
                     :datetime_scheduled="meeting_obj.datetime_scheduled"
-                    :datetime_completed="meeting_obj.datetime_completed" class="mt-3" />
+                    :datetime_completed="meeting_obj.datetime_completed"
+                    class="mt-3"
+                />
 
                 <div class="mt-3">
                     <div class="card card-default">
-                        <div class="card-header">
-                            Workflow
-                        </div>
+                        <div class="card-header">Workflow</div>
                         <div class="card-body card-collapse">
                             <div class="row">
                                 <div class="col-sm-12">
@@ -35,34 +41,64 @@
                                                 <strong>Action</strong><br />
                                             </div>
                                         </div>
-                                        <div class="row" v-if="userCanSchedule">
+                                        <div v-if="userCanSchedule" class="row">
                                             <div class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary"
-                                                    @click.prevent="scheduleMeeting()">Schedule</button><br />
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary"
+                                                    @click.prevent="
+                                                        scheduleMeeting()
+                                                    "
+                                                >
+                                                    Schedule</button
+                                                ><br />
                                             </div>
                                             <div class="col-sm-12">&nbsp;</div>
                                             <div class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary"
-                                                    @click.prevent="discardMeeting()">Discard</button><br />
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary"
+                                                    @click.prevent="
+                                                        discardMeeting()
+                                                    "
+                                                >
+                                                    Discard</button
+                                                ><br />
                                             </div>
                                         </div>
-                                        <div class="row" v-if="userCanComplete">
+                                        <div v-if="userCanComplete" class="row">
                                             <div class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary"
-                                                    @click.prevent="completeMeeting()">Complete</button><br />
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary"
+                                                    @click.prevent="
+                                                        completeMeeting()
+                                                    "
+                                                >
+                                                    Complete</button
+                                                ><br />
                                             </div>
                                         </div>
-                                        <div class="row" v-if="userCanReinstate">
+                                        <div
+                                            v-if="userCanReinstate"
+                                            class="row"
+                                        >
                                             <div class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary"
-                                                    @click.prevent="reinstateMeeting()">Reinstate</button><br />
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary"
+                                                    @click.prevent="
+                                                        reinstateMeeting()
+                                                    "
+                                                >
+                                                    Reinstate</button
+                                                ><br />
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-
                     </div>
                 </div>
             </div>
@@ -70,58 +106,160 @@
                 <div class="row">
                     <div class="">
                         <div class="row">
-                            <form :action="meeting_form_url" method="post" name="new_meeting"
-                                enctype="multipart/form-data">
-                                <MeetingSection ref="meeting" :meeting_obj="meeting_obj" :userCanEdit="userCanEdit"
-                                    id="MeetingStart" :is_internal="true">
+                            <form
+                                :action="meeting_form_url"
+                                method="post"
+                                name="new_meeting"
+                                enctype="multipart/form-data"
+                            >
+                                <MeetingSection
+                                    id="MeetingStart"
+                                    ref="meeting"
+                                    :meeting_obj="meeting_obj"
+                                    :user-can-edit="userCanEdit"
+                                    :is_internal="true"
+                                >
                                 </MeetingSection>
-                                <CSQueue ref="cs_queue" :meeting_obj="meeting_obj" id="CSQueue" :is_internal="true">
+                                <CSQueue
+                                    id="CSQueue"
+                                    ref="cs_queue"
+                                    :meeting_obj="meeting_obj"
+                                    :is_internal="true"
+                                >
                                 </CSQueue>
-                                <Minutes ref="minutes" :meeting_obj="meeting_obj" id="Minutes" :is_internal="true">
+                                <Minutes
+                                    id="Minutes"
+                                    ref="minutes"
+                                    :meeting_obj="meeting_obj"
+                                    :is_internal="true"
+                                >
                                 </Minutes>
-                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                <input type='hidden' name="meeting_id" :value="1" />
+                                <input
+                                    type="hidden"
+                                    name="csrfmiddlewaretoken"
+                                    :value="csrf_token"
+                                />
+                                <input
+                                    type="hidden"
+                                    name="meeting_id"
+                                    :value="1"
+                                />
                                 <div class="row" style="margin-bottom: 50px">
-                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                    <div
+                                        class="navbar fixed-bottom"
+                                        style="background-color: #f5f5f5"
+                                    >
                                         <!--the below as internal proposal submission ELSE just saving proposal changes -->
                                         <div class="container">
-                                            <div class="col-md-6" style="margin-top:5px">
+                                            <div
+                                                class="col-md-6"
+                                                style="margin-top: 5px"
+                                            >
                                                 <div class="col-md-6">
-                                                    <button class="btn btn-primary me-2 pull-left"
-                                                        style="margin-top:5px;" @click.prevent="returnToDashboard">
-                                                        Return to Dashboard</button>
+                                                    <button
+                                                        class="btn btn-primary me-2 pull-left"
+                                                        style="margin-top: 5px"
+                                                        @click.prevent="
+                                                            returnToDashboard
+                                                        "
+                                                    >
+                                                        Return to Dashboard
+                                                    </button>
                                                 </div>
                                             </div>
-                                            <div v-if="meeting_obj.can_user_edit" class="col-md-6 text-end">
-                                                <button v-if="savingMeeting" class="btn btn-primary me-2 pull-right"
-                                                    style="margin-top:5px;" disabled>Save and Continue <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary me-2 pull-right"
-                                                    style="margin-top:5px;" @click.prevent="save()"
-                                                    :disabled="saveExitMeeting || submitMeeting">Save and
-                                                    Continue</button>
+                                            <div
+                                                v-if="meeting_obj.can_user_edit"
+                                                class="col-md-6 text-end"
+                                            >
+                                                <button
+                                                    v-if="savingMeeting"
+                                                    class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save and Continue
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top: 5px"
+                                                    :disabled="
+                                                        saveExitMeeting ||
+                                                        submitMeeting
+                                                    "
+                                                    @click.prevent="save()"
+                                                >
+                                                    Save and Save and Continue
+                                                </button>
 
-                                                <button v-if="saveExitMeeting" class="btn btn-primary me-2 pull-right"
-                                                    style="margin-top:5px;" disabled>Save and Exit <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary me-2 pull-right"
-                                                    style="margin-top:5px;" @click.prevent="save_exit()"
-                                                    :disabled="savingMeeting || submitMeeting">Save and
-                                                    Exit</button>
+                                                <button
+                                                    v-if="saveExitMeeting"
+                                                    class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save and Exit
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top: 5px"
+                                                    :disabled="
+                                                        savingMeeting ||
+                                                        submitMeeting
+                                                    "
+                                                    @click.prevent="save_exit()"
+                                                >
+                                                    Save and Save and Exit
+                                                </button>
                                             </div>
-                                            <div v-else-if="userCanEdit" class="col-md-6 text-end">
-                                                <button v-if="savingMeeting" class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" disabled>Save Changes <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" @click.prevent="save_exit()">Save
-                                                    Changes</button>
+                                            <div
+                                                v-else-if="userCanEdit"
+                                                class="col-md-6 text-end"
+                                            >
+                                                <button
+                                                    v-if="savingMeeting"
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save Changes
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    @click.prevent="save_exit()"
+                                                >
+                                                    Save Changes
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
@@ -135,26 +273,49 @@
     </div>
 </template>
 <script>
-
-import datatable from '@vue-utils/datatable.vue'
-import CommsLogs from '@common-utils/comms_logs.vue'
-import MeetingSidePanel from '@common-utils/meeting_side_panel.vue'
-import MeetingSection from './meeting_section.vue'
-import Minutes from './minutes.vue'
+import datatable from '@vue-utils/datatable.vue';
+import CommsLogs from '@common-utils/comms_logs.vue';
+import MeetingSidePanel from '@common-utils/meeting_side_panel.vue';
+import MeetingSection from './meeting_section.vue';
+import Minutes from './minutes.vue';
 import CSQueue from './cs_queue.vue';
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'InternalMeeting',
+    components: {
+        datatable,
+        CommsLogs,
+        MeetingSidePanel,
+        MeetingSection,
+        Minutes,
+        CSQueue,
+    },
+    filters: {
+        formatDate: function (data) {
+            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        },
+    },
+    beforeRouteEnter: function (to, from, next) {
+        fetch(
+            `/api/meeting/${to.params.meeting_id}/internal_meeting.json`
+        ).then(
+            async (response) => {
+                next(async (vm) => {
+                    vm.meeting_obj = await response.json();
+                    vm.meeting_obj.selected_committee_members = [];
+                });
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    },
     data: function () {
         let vm = this;
         return {
-            "meeting_obj": null,
-            "original_meeting_obj": null,
-            "loading": [],
+            meeting_obj: null,
+            original_meeting_obj: null,
+            loading: [],
             form: null,
             savingMeeting: false,
             saveExitMeeting: false,
@@ -163,68 +324,63 @@ export default {
             completingMeeting: false,
             submitting: false,
             DATE_TIME_FORMAT: 'DD/MM/YYYY HH:mm:ss',
-            comms_url: helpers.add_endpoint_json(api_endpoints.meeting, vm.$route.params.meeting_id + '/comms_log'),
-            comms_add_url: helpers.add_endpoint_json(api_endpoints.meeting, vm.$route.params.meeting_id + '/add_comms_log'),
-            logs_url: helpers.add_endpoint_json(api_endpoints.meeting, vm.$route.params.meeting_id + '/action_log'),
+            comms_url: helpers.add_endpoint_json(
+                api_endpoints.meeting,
+                vm.$route.params.meeting_id + '/comms_log'
+            ),
+            comms_add_url: helpers.add_endpoint_json(
+                api_endpoints.meeting,
+                vm.$route.params.meeting_id + '/add_comms_log'
+            ),
+            logs_url: helpers.add_endpoint_json(
+                api_endpoints.meeting,
+                vm.$route.params.meeting_id + '/action_log'
+            ),
             initialisedSelects: false,
             isSaved: false,
-        }
-    },
-    components: {
-        datatable,
-        CommsLogs,
-        MeetingSidePanel,
-        MeetingSection,
-        Minutes,
-        CSQueue,
-    },
-    filters: {
-        formatDate: function (data) {
-            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
-        }
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         meeting_form_url: function () {
             if (this.meeting_obj.id) {
                 return `/api/meeting/${this.meeting_obj.id}/meeting_save.json`;
-            }
-            else {
+            } else {
                 return `/api/meeting.json`;
             }
         },
         submitter_first_name: function () {
             if (this.meeting_obj.submitter) {
-                return this.meeting_obj.submitter.first_name
+                return this.meeting_obj.submitter.first_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_last_name: function () {
             if (this.meeting_obj.submitter) {
-                return this.meeting_obj.submitter.last_name
+                return this.meeting_obj.submitter.last_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_id: function () {
             if (this.meeting_obj.submitter) {
-                return this.meeting_obj.submitter.id
+                return this.meeting_obj.submitter.id;
             } else {
                 //eturn this.meeting_obj.applicant_obj.id
             }
         },
         submitter_email: function () {
             if (this.meeting_obj.submitter) {
-                return this.meeting_obj.submitter.email
+                return this.meeting_obj.submitter.email;
             } else {
                 //return this.meeting_obj.applicant_obj.email
             }
         },
         canSeeSidePanel: function () {
-            return this.meeting_obj && this.meeting_obj.submitter
+            return this.meeting_obj && this.meeting_obj.submitter;
         },
         userCanEdit: function () {
             return this.meeting_obj.can_user_edit;
@@ -239,9 +395,40 @@ export default {
             return this.meeting_obj.can_user_reinstate;
         },
         showActions: function () {
-            return this.userCanSchedule || this.userCanComplete || this.userCanReinstate;
+            return (
+                this.userCanSchedule ||
+                this.userCanComplete ||
+                this.userCanReinstate
+            );
+        },
+    },
+    created: function () {
+        let vm = this;
+        if (!this.meeting_obj) {
+            fetch(
+                `/api/meeting/${vm.$route.params.meeting_id}/internal_meeting.json`
+            ).then(
+                async (response) => {
+                    vm.meeting_obj = await response.json();
+                    if (vm.meeting_obj.start_date == null) {
+                        vm.meeting_obj.start_date = vm.$refs.meeting.start_date;
+                    }
+                    if (vm.meeting_obj.end_date == null) {
+                        vm.meeting_obj.end_date = vm.$refs.meeting.end_date;
+                    }
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
         }
     },
+    updated: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.form = document.forms.new_meeting;
+        });
+    },
     methods: {
         commaToNewline(s) {
             return s.replace(/[,;]/g, '\n');
@@ -249,21 +436,21 @@ export default {
         returnToDashboard: function () {
             let vm = this;
             vm.$router.push({
-                name: 'internal-meetings-dash'
+                name: 'internal-meetings-dash',
             });
         },
         save: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.isSaved = false;
@@ -275,44 +462,47 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(payload)
-            }).then(async (response) => {
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Your changes have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingMeeting = false;
-                vm.isSaved = true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Save Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingMeeting = false;
-                vm.isSaved = false;
-            });
+                body: JSON.stringify(payload),
+            }).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Your changes have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingMeeting = false;
+                    vm.isSaved = true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Save Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingMeeting = false;
+                    vm.isSaved = false;
+                }
+            );
         },
         save_exit: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.saveExitMeeting = true;
@@ -320,13 +510,12 @@ export default {
                 if (vm.isSaved === true) {
                     // redirect back to dashboard
                     vm.$router.push({
-                        name: 'internal-meetings-dash'
-
+                        name: 'internal-meetings-dash',
                     });
                 } else {
                     vm.saveExitMeeting = false;
                 }
-            })
+            });
         },
         save_before_submit: async function (e) {
             //console.log('save before submit');
@@ -341,180 +530,221 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(payload)
-            }).then(async (response) => {
-                result = await response.json();
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    //helpers.apiVueResourceError(err),
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.submitMeeting = false;
-                vm.saveError = true;
-                //return false;
-            });
+                body: JSON.stringify(payload),
+            }).then(
+                async (response) => {
+                    result = await response.json();
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        //helpers.apiVueResourceError(err),
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitMeeting = false;
+                    vm.saveError = true;
+                    //return false;
+                }
+            );
             return result;
         },
         can_schedule: function (check_action) {
             let vm = this;
-            let blank_fields = []
+            let blank_fields = [];
 
             // blank_fields = vm.can_submit_meeting(check_action);
             if (vm.meeting_obj.title == null || vm.meeting_obj.title == '') {
-                blank_fields.push(' Title is missing')
-            }
-            if (vm.meeting_obj.meeting_type == null || vm.meeting_obj.meeting_type == '') {
-                blank_fields.push(' Please select a meeting type')
-            }
-            if (vm.meeting_obj.start_date == null || vm.meeting_obj.start_date == '' || vm.meeting_obj.end_date == null || vm.meeting_obj.end_date == '') {
+                blank_fields.push(' Title is missing');
+            }
+            if (
+                vm.meeting_obj.meeting_type == null ||
+                vm.meeting_obj.meeting_type == ''
+            ) {
+                blank_fields.push(' Please select a meeting type');
+            }
+            if (
+                vm.meeting_obj.start_date == null ||
+                vm.meeting_obj.start_date == '' ||
+                vm.meeting_obj.end_date == null ||
+                vm.meeting_obj.end_date == ''
+            ) {
                 //  to also check the start and end date of meeting validation befor saving
                 blank_fields.push('Start Date and End date cannot be blank');
             }
             if (vm.$refs.meeting.isMeetingDateValid != true) {
                 //  to also check the start and end date of meeting validation befor saving
-                blank_fields.push('Please select End Date that is later than Start Date');
+                blank_fields.push(
+                    'Please select End Date that is later than Start Date'
+                );
             }
             if (vm.$refs.meeting.isCommitteeMeeting) {
-                if (vm.meeting_obj.selected_committee_members == null || vm.meeting_obj.selected_committee_members == '' || vm.meeting_obj.selected_committee_members.length < 2) {
+                if (
+                    vm.meeting_obj.selected_committee_members == null ||
+                    vm.meeting_obj.selected_committee_members == '' ||
+                    vm.meeting_obj.selected_committee_members.length < 2
+                ) {
                     //  to also check the start and end date of meeting validation befor saving
-                    blank_fields.push('Please select at least two committee members who will be attending');
+                    blank_fields.push(
+                        'Please select at least two committee members who will be attending'
+                    );
                 }
             } else {
-                if (vm.meeting_obj.attendees == null || vm.meeting_obj.attendees == '') {
-                    blank_fields.push(' Please enter some attendees')
+                if (
+                    vm.meeting_obj.attendees == null ||
+                    vm.meeting_obj.attendees == ''
+                ) {
+                    blank_fields.push(' Please enter some attendees');
                 }
             }
-            if (vm.meeting_obj.location_id == null || vm.meeting_obj.location_id == '') {
-                blank_fields.push(' Please select Location')
+            if (
+                vm.meeting_obj.location_id == null ||
+                vm.meeting_obj.location_id == ''
+            ) {
+                blank_fields.push(' Please select Location');
             }
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
             //to count if records exists in the minutes table
-            vm.$refs.minutes.$refs.minutes_datatable.vmDataTable.rows().count()
+            vm.$refs.minutes.$refs.minutes_datatable.vmDataTable.rows().count();
         },
         isFutureMeeting: function () {
             let vm = this;
             const meeting_date = new Date(vm.meeting_obj.end_date);
             const now = new Date();
             return meeting_date > now;
-
         },
         can_complete: function () {
             let vm = this;
-            let blank_fields = []
-
+            let blank_fields = [];
 
-            if (vm.$refs.minutes.$refs.minutes_datatable.vmDataTable.rows().count() == 0) {
-                blank_fields.push(' Please add at least one Minutes record')
+            if (
+                vm.$refs.minutes.$refs.minutes_datatable.vmDataTable
+                    .rows()
+                    .count() == 0
+            ) {
+                blank_fields.push(' Please add at least one Minutes record');
             }
             if (vm.isFutureMeeting()) {
-                blank_fields.push('You cannot Complete the meeting before the End Date/Time')
+                blank_fields.push(
+                    'You cannot Complete the meeting before the End Date/Time'
+                );
             }
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
         can_submit: function (check_action) {
             let vm = this;
-            let blank_fields = []
+            let blank_fields = [];
 
             blank_fields = vm.can_submit_meeting(check_action);
 
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
         can_submit_meeting: function (check_action) {
             let vm = this;
-            let blank_fields = []
+            let blank_fields = [];
             if (vm.meeting_obj.title == null || vm.meeting_obj.title == '') {
-                blank_fields.push(' Title is missing')
-            }
-            else if (vm.meeting_obj.meeting_type == null || vm.meeting_obj.meeting_type == '') {
-                blank_fields.push(' Please select meeting type')
-            }
-            else if (vm.$refs.meeting.isMeetingDateValid != true) {
+                blank_fields.push(' Title is missing');
+            } else if (
+                vm.meeting_obj.meeting_type == null ||
+                vm.meeting_obj.meeting_type == ''
+            ) {
+                blank_fields.push(' Please select meeting type');
+            } else if (vm.$refs.meeting.isMeetingDateValid != true) {
                 //  to also check the start and end date of meeting validation befor saving
-                blank_fields.push('Please select End Date that is later than Start Date');
+                blank_fields.push(
+                    'Please select End Date that is later than Start Date'
+                );
             }
-            if (check_action == "submit") {
+            if (check_action == 'submit') {
                 //NOTE add validation for fields required before submit
             }
 
-            return blank_fields
+            return blank_fields;
         },
         scheduleMeeting: function () {
             let vm = this;
 
-            var missing_data = vm.can_schedule("submit");
+            var missing_data = vm.can_schedule('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before scheduling the meeting",
+                    title: 'Please fix following errors before scheduling the meeting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.schedelingMeeting = true;
             swal.fire({
-                title: "Schedule New Meeting",
-                text: "Are you sure you want to schedule this meeting?",
-                icon: "question",
+                title: 'Schedule New Meeting',
+                text: 'Are you sure you want to schedule this meeting?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "schedule",
+                confirmButtonText: 'schedule',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.meeting_obj);
-                        fetch(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/schedule_meeting'), {
-                            method: 'PUT',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload)
-                        }).then(async (response) => {
-                            vm.meeting_obj = await response.json();
-                        }, err => {
-                            swal.fire({
-                                title: 'Schedule Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        let result = await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.meeting_obj);
+                            fetch(
+                                helpers.add_endpoint_json(
+                                    api_endpoints.meeting,
+                                    vm.meeting_obj.id + '/schedule_meeting'
+                                ),
+                                {
+                                    method: 'PUT',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }
+                            ).then(
+                                async (response) => {
+                                    vm.meeting_obj = await response.json();
                                 },
-                            });
-                        });
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Schedule Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                }
+                            );
+                        }
                     }
+                },
+                (error) => {
+                    vm.submitMeeting = false;
                 }
-            }, (error) => {
-                vm.submitMeeting = false;
-            });
+            );
         },
         completeMeeting: function () {
             let vm = this;
@@ -522,81 +752,96 @@ export default {
             var missing_data = vm.can_complete();
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before completing the meeting",
+                    title: 'Please fix following errors before completing the meeting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.completeMeeting = true;
             swal.fire({
-                title: "Complete Meeting",
-                text: "Are you sure you want to complete this meeting?",
-                icon: "question",
+                title: 'Complete Meeting',
+                text: 'Are you sure you want to complete this meeting?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "complete",
+                confirmButtonText: 'complete',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.meeting_obj);
-                        fetch(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/complete_meeting'), {
-                            method: 'PUT',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload)
-                        }).then(async (response) => {
-                            vm.meeting_obj = await response.json();
-                            vm.completingMeeting = false;
-                        }, err => {
-                            swal.fire({
-                                title: 'Complete Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        let result = await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.meeting_obj);
+                            fetch(
+                                helpers.add_endpoint_json(
+                                    api_endpoints.meeting,
+                                    vm.meeting_obj.id + '/complete_meeting'
+                                ),
+                                {
+                                    method: 'PUT',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }
+                            ).then(
+                                async (response) => {
+                                    vm.meeting_obj = await response.json();
+                                    vm.completingMeeting = false;
                                 },
-                            });
-                        });
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Complete Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                }
+                            );
+                        }
                     }
+                },
+                (error) => {
+                    vm.completingMeeting = false;
                 }
-            }, (error) => {
-                vm.completingMeeting = false;
-            });
+            );
         },
         discardMeeting: function () {
             let vm = this;
             if (vm.userCanSchedule) {
                 swal.fire({
-                    title: "Discard Meeting",
-                    text: "Are you sure you want to discard this meeting?",
-                    icon: "question",
+                    title: 'Discard Meeting',
+                    text: 'Are you sure you want to discard this meeting?',
+                    icon: 'question',
                     showCancelButton: true,
                     confirmButtonText: 'Discard Meeting',
                     customClass: {
                         confirmButton: 'btn btn-primary',
-                        cancelButton: 'btn btn-secondary'
+                        cancelButton: 'btn btn-secondary',
                     },
-                    reverseButtons: true
+                    reverseButtons: true,
                 }).then((result) => {
                     if (result.isConfirmed) {
-                        fetch(api_endpoints.discard_meeting(vm.meeting_obj.id), {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                        })
-                            .then(async (response) => {
+                        fetch(
+                            api_endpoints.discard_meeting(vm.meeting_obj.id),
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                            }
+                        ).then(
+                            async (response) => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your meeting has been discarded',
@@ -606,21 +851,22 @@ export default {
                                     },
                                 });
                                 vm.meeting_obj = await response.json();
-                            }, (error) => {
+                            },
+                            (error) => {
                                 console.log(error);
-                            });
+                            }
+                        );
                     }
                 });
-            }
-            else {
+            } else {
                 swal.fire({
-                    title: "You do not have access to discard this meeting",
-                    text: "",
+                    title: 'You do not have access to discard this meeting',
+                    text: '',
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
         },
@@ -628,25 +874,28 @@ export default {
             let vm = this;
             if (vm.userCanReinstate) {
                 swal.fire({
-                    title: "Reinstate Meeting",
-                    text: "Are you sure you want to reinstate this meeting?",
-                    icon: "question",
+                    title: 'Reinstate Meeting',
+                    text: 'Are you sure you want to reinstate this meeting?',
+                    icon: 'question',
                     showCancelButton: true,
                     confirmButtonText: 'Reinstate Meeting',
                     customClass: {
                         confirmButton: 'btn btn-primary',
-                        cancelButton: 'btn btn-secondary'
+                        cancelButton: 'btn btn-secondary',
                     },
-                    reverseButtons: true
+                    reverseButtons: true,
                 }).then((result) => {
                     if (result.isConfirmed) {
-                        fetch(api_endpoints.reinstate_meeting(vm.meeting_obj.id), {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                        })
-                            .then(async (response) => {
+                        fetch(
+                            api_endpoints.reinstate_meeting(vm.meeting_obj.id),
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                            }
+                        ).then(
+                            async (response) => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your meeting has been reinstated',
@@ -656,83 +905,96 @@ export default {
                                     },
                                 });
                                 vm.meeting_obj = await response.json();
-                            }, (error) => {
+                            },
+                            (error) => {
                                 console.log(error);
-                            });
+                            }
+                        );
                     }
                 });
-            }
-            else {
+            } else {
                 swal.fire({
-                    title: "You do not have access to reinstate this meeting",
-                    text: "",
+                    title: 'You do not have access to reinstate this meeting',
+                    text: '',
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
         },
         submit: async function () {
             let vm = this;
 
-            var missing_data = vm.can_submit("submit");
+            var missing_data = vm.can_submit('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.submitMeeting = true;
             swal.fire({
-                title: "Submit New Meeting",
-                text: "Are you sure you want to submit this meeting?",
-                icon: "question",
+                title: 'Submit New Meeting',
+                text: 'Are you sure you want to submit this meeting?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "submit",
+                confirmButtonText: 'submit',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.meeting_obj);
-                        fetch(helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/submit'), {
-                            method: 'PUT',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload)
-                        }).then(async (response) => {
-                            vm.meeting_obj = await response.json();
-                            vm.$router.push({
-                                name: 'internal-meetings-dash'
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        let result = await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.meeting_obj);
+                            fetch(
+                                helpers.add_endpoint_json(
+                                    api_endpoints.meeting,
+                                    vm.meeting_obj.id + '/submit'
+                                ),
+                                {
+                                    method: 'PUT',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }
+                            ).then(
+                                async (response) => {
+                                    vm.meeting_obj = await response.json();
+                                    vm.$router.push({
+                                        name: 'internal-meetings-dash',
+                                    });
                                 },
-                            });
-                        });
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Submit Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                }
+                            );
+                        }
                     }
+                },
+                (error) => {
+                    vm.submitMeeting = false;
                 }
-            }, (error) => {
-                vm.submitMeeting = false;
-            });
+            );
         },
         save_wo: function () {
             let vm = this;
@@ -743,45 +1005,12 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(payload)
-            }).then(async (response) => {
-            }, err => {
-            });
-        },
-    },
-    created: function () {
-        let vm = this;
-        if (!this.meeting_obj) {
-            fetch(`/api/meeting/${vm.$route.params.meeting_id}/internal_meeting.json`).then(async (response) => {
-                vm.meeting_obj = await response.json();
-                if (vm.meeting_obj.start_date == null) {
-                    vm.meeting_obj.start_date = vm.$refs.meeting.start_date;
-                }
-                if (vm.meeting_obj.end_date == null) {
-                    vm.meeting_obj.end_date = vm.$refs.meeting.end_date;
-                }
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-    },
-    updated: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.form = document.forms.new_meeting;
-        });
-    },
-    beforeRouteEnter: function (to, from, next) {
-        fetch(`/api/meeting/${to.params.meeting_id}/internal_meeting.json`).then(async (response) => {
-            next(async (vm) => {
-                vm.meeting_obj = await response.json();
-                vm.meeting_obj.selected_committee_members = [];
-            });
+                body: JSON.stringify(payload),
+            }).then(
+                async (response) => {},
+                (err) => {}
+            );
         },
-            err => {
-                console.log(err);
-            });
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
index 4b5886c7..604c4490 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
@@ -1,130 +1,291 @@
 <template lang="html">
     <div id="communityStatus">
-        <FormSection :formCollapse="false" label="Meeting" Index="meeting">
-            <alert type="danger" v-if="!isMeetingDateValid"><strong>Please select End Date that is later than Start
-                    Date</strong></alert>
+        <FormSection :form-collapse="false" label="Meeting" Index="meeting">
+            <alert v-if="!isMeetingDateValid" type="danger"
+                ><strong
+                    >Please select End Date that is later than Start
+                    Date</strong
+                ></alert
+            >
             <div class="row mb-3">
-                <label for="" class="col-sm-4 control-label fw-bold">Title: <span class="text-danger">*</span></label>
+                <label for="" class="col-sm-4 control-label fw-bold"
+                    >Title: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="title" ref="title" placeholder=""
-                        v-model="meeting_obj.title" autofocus />
+                    <input
+                        id="title"
+                        ref="title"
+                        v-model="meeting_obj.title"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                        autofocus
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-4 control-label fw-bold">Start Date/ Time: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-4 control-label fw-bold"
+                    >Start Date/ Time: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="datetime-local" class="form-control" name="start_date"
-                        ref="start_date" v-model="start_date" @change="validateMeetingDate()" />
+                    <input
+                        ref="start_date"
+                        v-model="start_date"
+                        :disabled="isReadOnly"
+                        type="datetime-local"
+                        class="form-control"
+                        name="start_date"
+                        @change="validateMeetingDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-4 control-label fw-bold">End Date/ Time: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-4 control-label fw-bold"
+                    >End Date/ Time: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="datetime-local" class="form-control" id="end_date"
-                        v-model="end_date" @change="validateMeetingDate()" />
+                    <input
+                        id="end_date"
+                        v-model="end_date"
+                        :disabled="isReadOnly"
+                        type="datetime-local"
+                        class="form-control"
+                        @change="validateMeetingDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-4 control-label fw-bold">Meeting Type: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-4 control-label fw-bold"
+                    >Meeting Type: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-8">
-                    <select :disabled="isReadOnly" style="width:100%;" class="form-select"
-                        v-model="meeting_obj.meeting_type" @change="toggleAttendees(meeting_obj.meeting_type)">
-                        <option v-for="option in meeting_type_list" :value="option.id" :key="option.id">
+                    <select
+                        v-model="meeting_obj.meeting_type"
+                        :disabled="isReadOnly"
+                        style="width: 100%"
+                        class="form-select"
+                        @change="toggleAttendees(meeting_obj.meeting_type)"
+                    >
+                        <option
+                            v-for="option in meeting_type_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.display_name }}
                         </option>
                     </select>
                 </div>
             </div>
             <div v-show="!isCommitteeMeeting" class="row mb-3">
-                <label for="" class="col-sm-4 control-label fw-bold">Attendees: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-4 control-label fw-bold"
+                    >Attendees: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-8">
-                    <input :disabled="isReadOnly" type="text" class="form-control" id="title" placeholder=""
-                        v-model="meeting_obj.attendees" />
+                    <input
+                        id="title"
+                        v-model="meeting_obj.attendees"
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div v-show="isCommitteeMeeting">
                 <div class="row mb-3">
-                    <label for="" class="col-sm-4 control-label fw-bold">Committee: <span
-                            class="text-danger">*</span></label>
+                    <label for="" class="col-sm-4 control-label fw-bold"
+                        >Committee: <span class="text-danger">*</span></label
+                    >
                     <div class="col-sm-8">
                         <template v-if="!isReadOnly">
                             <template
-                                v-if="committee_list && committee_list.length > 0 && meeting_obj.committee_id && !committee_list.map((d) => d.id).includes(meeting_obj.committee_id)">
-                                <input type="text" v-if="meeting_obj.committee" class="form-control mb-3"
-                                    :value="meeting_obj.committee + ' (Now Archived)'" disabled />
+                                v-if="
+                                    committee_list &&
+                                    committee_list.length > 0 &&
+                                    meeting_obj.committee_id &&
+                                    !committee_list
+                                        .map((d) => d.id)
+                                        .includes(meeting_obj.committee_id)
+                                "
+                            >
+                                <input
+                                    v-if="meeting_obj.committee"
+                                    type="text"
+                                    class="form-control mb-3"
+                                    :value="
+                                        meeting_obj.committee +
+                                        ' (Now Archived)'
+                                    "
+                                    disabled
+                                />
                                 <div class="mb-3 text-muted">
                                     Change committee to:
                                 </div>
                             </template>
-                            <select class="form-select" v-model="meeting_obj.committee_id" @change="committeeChanged">
-                                <option v-for="committee in committee_list" :value="committee.id" :key="committee.id">
+                            <select
+                                v-model="meeting_obj.committee_id"
+                                class="form-select"
+                                @change="committeeChanged"
+                            >
+                                <option
+                                    v-for="committee in committee_list"
+                                    :key="committee.id"
+                                    :value="committee.id"
+                                >
                                     {{ committee.name }}
                                 </option>
                             </select>
                         </template>
                         <template v-else>
-                            <input class="form-control" type="text" :disabled="isReadOnly"
-                                v-model="meeting_obj.committee" />
+                            <input
+                                v-model="meeting_obj.committee"
+                                class="form-control"
+                                type="text"
+                                :disabled="isReadOnly"
+                            />
                         </template>
                     </div>
                 </div>
-                <div v-if="meeting_obj.committee_id && committee_members" class="row mb-3">
-                    <label for="" class="col-sm-4 control-label fw-bold">Members {{ meeting_obj.processing_status=="completed" ? 'Who Attended' : "Attending" }}: <span
-                            class="text-danger">*</span></label>
+                <div
+                    v-if="meeting_obj.committee_id && committee_members"
+                    class="row mb-3"
+                >
+                    <label for="" class="col-sm-4 control-label fw-bold"
+                        >Members
+                        {{
+                            meeting_obj.processing_status == 'completed'
+                                ? 'Who Attended'
+                                : 'Attending'
+                        }}: <span class="text-danger">*</span></label
+                    >
                     <div class="col-sm-8">
                         <template v-if="committee_members.length > 0">
-                            <div v-if="!isReadOnly" class="border-bottom pb-2 mb-2">
-                                <input id="all-members-attending" class="form-check-input me-2"
-                                    v-model="all_members_attending" type="checkbox" :value="true"
-                                    @click="toggleAllMembersAttending" />
-                                <label class="form-check-label" for="all-members-attending"><i
+                            <div
+                                v-if="!isReadOnly"
+                                class="border-bottom pb-2 mb-2"
+                            >
+                                <input
+                                    id="all-members-attending"
+                                    v-model="all_members_attending"
+                                    class="form-check-input me-2"
+                                    type="checkbox"
+                                    :value="true"
+                                    @click="toggleAllMembersAttending"
+                                />
+                                <label
+                                    class="form-check-label"
+                                    for="all-members-attending"
+                                    ><i
                                         class="bi bi-people-fill h5"
-                                        :class="all_members_attending ? 'text-primary' : 'text-secondary'"></i> All
-                                    Members are
-                                    Attending</label>
+                                        :class="
+                                            all_members_attending
+                                                ? 'text-primary'
+                                                : 'text-secondary'
+                                        "
+                                    ></i>
+                                    All Members are Attending</label
+                                >
                             </div>
-                            <div v-for="committee_member in committee_members" class="fs-6 mb-2">
-                                <input :id="'member-' + committee_member.id" class="form-check-input me-2"
-                                    type="checkbox" :value="committee_member.id" :disabled="isReadOnly || committee_member.archived"
-                                    v-model="meeting_obj.selected_committee_members"
-                                    @change="updateAllMembersAttending" />
-                                <label class="form-check-label"
-                                    :class="meeting_obj.selected_committee_members.includes(committee_member.id) ? '' : 'text-secondary'"
-                                    :for="'member-' + committee_member.id"><i class="bi h5"
-                                        :class="meeting_obj.selected_committee_members.includes(committee_member.id) ? 'bi-person-fill-check text-success' : 'bi-person-fill-dash text-secondary'"></i>
-                                    {{
-                                        committee_member.first_name
-                                    }} {{
-                                        committee_member.last_name }} <template v-if="committee_member.archived"> (Now
-                                        Archived)</template></label>
+                            <div
+                                v-for="committee_member in committee_members"
+                                class="fs-6 mb-2"
+                            >
+                                <input
+                                    :id="'member-' + committee_member.id"
+                                    v-model="
+                                        meeting_obj.selected_committee_members
+                                    "
+                                    class="form-check-input me-2"
+                                    type="checkbox"
+                                    :value="committee_member.id"
+                                    :disabled="
+                                        isReadOnly || committee_member.archived
+                                    "
+                                    @change="updateAllMembersAttending"
+                                />
+                                <label
+                                    class="form-check-label"
+                                    :class="
+                                        meeting_obj.selected_committee_members.includes(
+                                            committee_member.id
+                                        )
+                                            ? ''
+                                            : 'text-secondary'
+                                    "
+                                    :for="'member-' + committee_member.id"
+                                    ><i
+                                        class="bi h5"
+                                        :class="
+                                            meeting_obj.selected_committee_members.includes(
+                                                committee_member.id
+                                            )
+                                                ? 'bi-person-fill-check text-success'
+                                                : 'bi-person-fill-dash text-secondary'
+                                        "
+                                    ></i>
+                                    {{ committee_member.first_name }}
+                                    {{ committee_member.last_name }}
+                                    <template v-if="committee_member.archived">
+                                        (Now Archived)</template
+                                    ></label
+                                >
                                 <template
-                                    v-if="!isReadOnly && committee_member.archived && meeting_obj.selected_committee_members.includes(committee_member.id)"><a
-                                        class="ps-2" role="button"
-                                        @click.prevent="removeArchivedCommitteeMember(committee_member.id)">Remove from
-                                        meeting</a></template>
+                                    v-if="
+                                        !isReadOnly &&
+                                        committee_member.archived &&
+                                        meeting_obj.selected_committee_members.includes(
+                                            committee_member.id
+                                        )
+                                    "
+                                    ><a
+                                        class="ps-2"
+                                        role="button"
+                                        @click.prevent="
+                                            removeArchivedCommitteeMember(
+                                                committee_member.id
+                                            )
+                                        "
+                                        >Remove from meeting</a
+                                    ></template
+                                >
                             </div>
                         </template>
                         <template v-else>
-                            <div class="text-muted">No members found for this committee</div>
+                            <div class="text-muted">
+                                No members found for this committee
+                            </div>
                         </template>
                     </div>
                 </div>
             </div>
             <div class="row mb-3">
-                <label for="" class="col-sm-4 control-label fw-bold">Location: <span
-                        class="text-danger">*</span></label>
+                <label for="" class="col-sm-4 control-label fw-bold"
+                    >Location: <span class="text-danger">*</span></label
+                >
                 <div class="col-sm-8">
-                    <select v-if="!isReadOnly" class="form-select" v-model="meeting_obj.location_id">
-                        <option v-for="option in location_list" :value="option.id" :key="option.id">
+                    <select
+                        v-if="!isReadOnly"
+                        v-model="meeting_obj.location_id"
+                        class="form-select"
+                    >
+                        <option
+                            v-for="option in location_list"
+                            :key="option.id"
+                            :value="option.id"
+                        >
                             {{ option.name }}
                         </option>
                     </select>
-                    <input v-else type="text" readonly class="form-control" id="location" placeholder=""
-                        v-model="meeting_obj.location" />
+                    <input
+                        v-else
+                        id="location"
+                        v-model="meeting_obj.location"
+                        type="text"
+                        readonly
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
         </FormSection>
@@ -132,22 +293,15 @@
 </template>
 
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import alert from '@vue-utils/alert.vue'
+import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 
-
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 const calculateDefaultDate = () => {
     const now = new Date();
-    now.setHours(9, 0, 0, 0);  // Set time to 9:00 AM
+    now.setHours(9, 0, 0, 0); // Set time to 9:00 AM
 
     const year = now.getFullYear();
     const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
@@ -159,7 +313,7 @@ const calculateDefaultDate = () => {
 };
 const calculateDefaultEndDate = () => {
     const now = new Date();
-    now.setHours(17, 0, 0, 0);  // Set time to 9:00 AM
+    now.setHours(17, 0, 0, 0); // Set time to 9:00 AM
 
     const year = now.getFullYear();
     const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
@@ -171,18 +325,23 @@ const calculateDefaultEndDate = () => {
 };
 export default {
     name: 'MeetingSection',
+    components: {
+        FormSection,
+        datatable,
+        alert,
+    },
     props: {
         meeting_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         userCanEdit: {
             type: Boolean,
-            default: true
+            default: true,
         },
     },
     data: function () {
@@ -208,33 +367,27 @@ export default {
             committee_list: [],
             committee_members: [],
             all_members_attending: false,
-        }
-    },
-    components: {
-        FormSection,
-        datatable,
-        alert
+        };
     },
     computed: {
         isStatusDraft: function () {
-            return this.meeting_obj.processing_status == "draft" ? true : false;
+            return this.meeting_obj.processing_status == 'draft' ? true : false;
         },
         isReadOnly: function () {
             return !this.userCanEdit;
         },
         activeMembers: function () {
-            return this.committee_members.filter(member => !member.archived);
-        }
+            return this.committee_members.filter((member) => !member.archived);
+        },
     },
     watch: {
         start_date: function (newVal) {
             let vm = this;
-            console.log(newVal, vm.meeting_obj.start_date)
+            console.log(newVal, vm.meeting_obj.start_date);
             var selectedValue = newVal;
-            if (selectedValue === "") {
+            if (selectedValue === '') {
                 vm.meeting_obj.start_date = null;
-            }
-            else {
+            } else {
                 vm.meeting_obj.start_date = vm.start_date;
                 vm.end_date = vm.start_date;
             }
@@ -242,22 +395,55 @@ export default {
         end_date: function (newVal) {
             let vm = this;
             var selectedValue = newVal;
-            if (selectedValue === "") {
+            if (selectedValue === '') {
                 vm.meeting_obj.end_date = null;
-            }
-            else {
+            } else {
                 vm.meeting_obj.end_date = vm.end_date;
             }
         },
     },
+    created: async function () {
+        let vm = this;
+        //------fetch list of values
+        fetch(api_endpoints.meeting_dict).then(
+            async (response) => {
+                vm.meeting_dict = await response.json();
+                if (vm.meeting_obj.processing_status == 'completed') {
+                    vm.meetingStatusEditable = false;
+                }
+                //--meeting room list
+                vm.location_list = vm.meeting_dict.location_list;
+                vm.location_list.splice(0, 0, {
+                    id: null,
+                    name: 'Select the Location for the Meeting',
+                });
+                vm.committee_list = vm.meeting_dict.committee_list;
+                vm.committee_list.splice(0, 0, {
+                    id: null,
+                    name: 'Select the Committee for the Meeting',
+                });
+                //--meeting type list
+                vm.meeting_type_list = vm.meeting_dict.meeting_type_list;
+                //--status choices list
+                vm.status_list = vm.meeting_dict.status_list;
+                vm.toggleAttendees(vm.meeting_obj.meeting_type);
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    },
+    mounted: function () {
+        let vm = this;
+        vm.setMeetingDates();
+    },
     methods: {
         toggleAttendees: function (id) {
             let vm = this;
             if (id === 'committee_meeting') {
                 vm.isCommitteeMeeting = true;
-                vm.fetchCommitteeMembers()
-            }
-            else {
+                vm.fetchCommitteeMembers();
+            } else {
                 vm.meeting_obj.committee_id = null;
                 vm.isCommitteeMeeting = false;
                 vm.committee_members = [];
@@ -269,8 +455,7 @@ export default {
                 const startDate = new Date(this.meeting_obj.start_date);
                 const endDate = new Date(this.meeting_obj.end_date);
                 this.isMeetingDateValid = startDate <= endDate;
-            }
-            else {
+            } else {
                 this.isMeetingDateValid = true;
             }
         },
@@ -286,31 +471,44 @@ export default {
         fetchCommitteeMembers: function () {
             let vm = this;
             if (vm.meeting_obj.committee_id) {
-                fetch(api_endpoints.committee_members(vm.meeting_obj.committee_id)).then(async (response) => {
-                    vm.committee_members = await response.json();
-                    if (vm.meeting_obj.selected_committee_members.length === vm.activeMembers.length) {
-                        vm.all_members_attending = true;
+                fetch(
+                    api_endpoints.committee_members(vm.meeting_obj.committee_id)
+                ).then(
+                    async (response) => {
+                        vm.committee_members = await response.json();
+                        if (
+                            vm.meeting_obj.selected_committee_members.length ===
+                            vm.activeMembers.length
+                        ) {
+                            vm.all_members_attending = true;
+                        }
+                    },
+                    (error) => {
+                        console.log(error);
                     }
-                }, (error) => {
-                    console.log(error);
-                })
+                );
             }
         },
         toggleAllMembersAttending: function () {
             let vm = this;
-            if (vm.meeting_obj.selected_committee_members.length === vm.activeMembers.length) {
+            if (
+                vm.meeting_obj.selected_committee_members.length ===
+                vm.activeMembers.length
+            ) {
                 vm.meeting_obj.selected_committee_members = [];
-            }
-            else {
-                vm.meeting_obj.selected_committee_members = vm.activeMembers.map(member => member.id);
+            } else {
+                vm.meeting_obj.selected_committee_members =
+                    vm.activeMembers.map((member) => member.id);
             }
         },
         updateAllMembersAttending: function () {
             let vm = this;
-            if (vm.meeting_obj.selected_committee_members.length === vm.activeMembers.length) {
+            if (
+                vm.meeting_obj.selected_committee_members.length ===
+                vm.activeMembers.length
+            ) {
                 vm.all_members_attending = true;
-            }
-            else {
+            } else {
                 vm.all_members_attending = false;
             }
         },
@@ -321,43 +519,12 @@ export default {
             vm.fetchCommitteeMembers();
         },
         removeArchivedCommitteeMember: function (member_id) {
-            this.meeting_obj.selected_committee_members.splice(this.meeting_obj.selected_committee_members.indexOf(member_id), 1);
+            this.meeting_obj.selected_committee_members.splice(
+                this.meeting_obj.selected_committee_members.indexOf(member_id),
+                1
+            );
             this.updateAllMembersAttending();
-        }
-    },
-    created: async function () {
-        let vm = this;
-        //------fetch list of values
-        fetch(api_endpoints.meeting_dict).then(async (response) => {
-            vm.meeting_dict = await response.json();
-            if (vm.meeting_obj.processing_status == 'completed') {
-                vm.meetingStatusEditable = false;
-            }
-            //--meeting room list
-            vm.location_list = vm.meeting_dict.location_list;
-            vm.location_list.splice(0, 0,
-                {
-                    id: null,
-                    name: 'Select the Location for the Meeting',
-                });
-            vm.committee_list = vm.meeting_dict.committee_list;
-            vm.committee_list.splice(0, 0,
-                {
-                    id: null,
-                    name: 'Select the Committee for the Meeting',
-                });
-            //--meeting type list
-            vm.meeting_type_list = vm.meeting_dict.meeting_type_list;
-            //--status choices list
-            vm.status_list = vm.meeting_dict.status_list;
-            vm.toggleAttendees(vm.meeting_obj.meeting_type)
-        }, (error) => {
-            console.log(error);
-        })
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.setMeetingDates();
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
index f0cfbfba..ef4cea86 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
@@ -1,82 +1,127 @@
 <template id="meetings_datatable">
     <div>
-        <CollapsibleFilters component_title="Filters" ref="collapsible_filters" @created="collapsible_component_mounted"
-            class="mb-2">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            class="mb-2"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Start Date Range:</label>
-                        <input type="datetime-local" class="form-control" placeholder="DD/MM/YYYY" id="from_start_date"
-                            v-model="filterFromMeetingStartDate">
+                        <input
+                            id="from_start_date"
+                            v-model="filterFromMeetingStartDate"
+                            type="datetime-local"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="datetime-local" class="form-control" placeholder="DD/MM/YYYY" id="to_start_date"
-                            v-model="filterToMeetingStartDate">
+                        <input
+                            id="to_start_date"
+                            v-model="filterToMeetingStartDate"
+                            type="datetime-local"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">End Date :</label>
-                        <input type="datetime-local" class="form-control" placeholder="DD/MM/YYYY" id="from_end_date"
-                            v-model="filterFromMeetingEndDate">
+                        <input
+                            id="from_end_date"
+                            v-model="filterFromMeetingEndDate"
+                            type="datetime-local"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for=""></label>
-                        <input type="datetime-local" class="form-control" placeholder="DD/MM/YYYY" id="to_end_date"
-                            v-model="filterToMeetingEndDate">
+                        <input
+                            id="to_end_date"
+                            v-model="filterToMeetingEndDate"
+                            type="datetime-local"
+                            class="form-control"
+                            placeholder="DD/MM/YYYY"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
                         <label for="">Status:</label>
-                        <select class="form-select" v-model="filterMeetingStatus">
+                        <select
+                            v-model="filterMeetingStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in processing_statuses" :value="status.value">{{ status.name }}
+                            <option
+                                v-for="status in processing_statuses"
+                                :value="status.value"
+                            >
+                                {{ status.name }}
                             </option>
                         </select>
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
-        <div v-if="profile && profile.groups.includes(constants.GROUPS.CONSERVATION_STATUS_APPROVERS)"
-            class="col-md-12">
+        <div
+            v-if="
+                profile &&
+                profile.groups.includes(
+                    constants.GROUPS.CONSERVATION_STATUS_APPROVERS
+                )
+            "
+            class="col-md-12"
+        >
             <div class="text-end">
-                <button type="button" class="btn btn-primary mb-2 " @click.prevent="createMeeting"><i
-                        class="fa-solid fa-circle-plus"></i> Add Meeting</button>
+                <button
+                    type="button"
+                    class="btn btn-primary mb-2"
+                    @click.prevent="createMeeting"
+                >
+                    <i class="fa-solid fa-circle-plus"></i> Add Meeting
+                </button>
             </div>
         </div>
         <div class="row">
             <div class="col-lg-12">
-                <datatable ref="meetings_datatable" :id="datatable_id" :dtOptions="datatable_options"
-                    :dtHeaders="datatable_headers" />
+                <datatable
+                    :id="datatable_id"
+                    ref="meetings_datatable"
+                    :dt-options="datatable_options"
+                    :dt-headers="datatable_headers"
+                />
             </div>
         </div>
     </div>
 </template>
 <script>
-import {
-    api_endpoints,
-    constants,
-    helpers
-}
-    from '@/utils/hooks'
-
-import datatable from '@/utils/vue/datatable.vue'
-import CollapsibleFilters from '@/components/forms/collapsible_component.vue'
-import moment from 'moment'
+import { api_endpoints, constants, helpers } from '@/utils/hooks';
 
+import datatable from '@/utils/vue/datatable.vue';
+import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
+import moment from 'moment';
 
 export default {
     name: 'MeetingsDatatable',
+    components: {
+        datatable,
+        CollapsibleFilters,
+    },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         filterFromMeetingStartDate_cache: {
             type: String,
@@ -109,13 +154,33 @@ export default {
         return {
             datatable_id: 'meetings-datatable-' + vm._uid,
 
-            filterFromMeetingStartDate: sessionStorage.getItem(this.filterFromMeetingStartDate_cache) ? sessionStorage.getItem(this.filterFromMeetingStartDate_cache) : '',
-            filterToMeetingStartDate: sessionStorage.getItem(this.filterToMeetingStartDate_cache) ? sessionStorage.getItem(this.filterToMeetingStartDate_cache) : '',
+            filterFromMeetingStartDate: sessionStorage.getItem(
+                this.filterFromMeetingStartDate_cache
+            )
+                ? sessionStorage.getItem(this.filterFromMeetingStartDate_cache)
+                : '',
+            filterToMeetingStartDate: sessionStorage.getItem(
+                this.filterToMeetingStartDate_cache
+            )
+                ? sessionStorage.getItem(this.filterToMeetingStartDate_cache)
+                : '',
 
-            filterFromMeetingEndDate: sessionStorage.getItem(this.filterFromMeetingEndDate_cache) ? sessionStorage.getItem(this.filterFromMeetingEndDate_cache) : '',
-            filterToMeetingEndDate: sessionStorage.getItem(this.filterToMeetingEndDate_cache) ? sessionStorage.getItem(this.filterToMeetingEndDate_cache) : '',
+            filterFromMeetingEndDate: sessionStorage.getItem(
+                this.filterFromMeetingEndDate_cache
+            )
+                ? sessionStorage.getItem(this.filterFromMeetingEndDate_cache)
+                : '',
+            filterToMeetingEndDate: sessionStorage.getItem(
+                this.filterToMeetingEndDate_cache
+            )
+                ? sessionStorage.getItem(this.filterToMeetingEndDate_cache)
+                : '',
 
-            filterMeetingStatus: sessionStorage.getItem(this.filterMeetingStatus_cache) ? sessionStorage.getItem(this.filterMeetingStatus_cache) : 'all',
+            filterMeetingStatus: sessionStorage.getItem(
+                this.filterMeetingStatus_cache
+            )
+                ? sessionStorage.getItem(this.filterMeetingStatus_cache)
+                : 'all',
 
             processing_statuses: [
                 { value: 'draft', name: 'Draft' },
@@ -126,135 +191,114 @@ export default {
 
             profile: null,
             constants: constants,
-        }
-    },
-    components: {
-        datatable,
-        CollapsibleFilters,
-    },
-    watch: {
-        filterFromMeetingStartDate: function () {
-            let vm = this;
-            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFromMeetingStartDate_cache, vm.filterFromMeetingStartDate);
-        },
-        filterToMeetingStartDate: function () {
-            let vm = this;
-            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterToMeetingStartDate_cache, vm.filterToMeetingStartDate);
-        },
-        filterFromMeetingEndDate: function () {
-            let vm = this;
-            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterFromMeetingEndDate_cache, vm.filterFromMeetingEndDate);
-        },
-        filterToMeetingEndDate: function () {
-            let vm = this;
-            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterToMeetingEndDate_cache, vm.filterToMeetingEndDate);
-        },
-        filterMeetingStatus: function () {
-            let vm = this;
-            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false); // This calls ajax() backend call.
-            sessionStorage.setItem(vm.filterMeetingStatus_cache, vm.filterMeetingStatus);
-        },
-        filterApplied: function () {
-            if (this.$refs.collapsible_filters) {
-                this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
-            }
-        },
+        };
     },
     computed: {
         filterApplied: function () {
-            if (this.filterFromMeetingStartDate === '' &&
+            if (
+                this.filterFromMeetingStartDate === '' &&
                 this.filterToMeetingStartDate === '' &&
                 this.filterFromMeetingEndDate === '' &&
                 this.filterToMeetingEndDate === '' &&
-                this.filterMeetingStatus === 'all') {
-                return false
+                this.filterMeetingStatus === 'all'
+            ) {
+                return false;
             } else {
-                return true
+                return true;
             }
         },
         datatable_headers: function () {
-            return ['Number', 'Title', 'Location', 'Start Date', 'End date', 'Status', 'Action']
-
+            return [
+                'Number',
+                'Title',
+                'Location',
+                'Start Date',
+                'End date',
+                'Status',
+                'Action',
+            ];
         },
         column_id: function () {
             return {
-                data: "meeting_number",
+                data: 'meeting_number',
                 orderable: true,
                 searchable: false,
                 visible: true,
-                name: "id",
-            }
+                name: 'id',
+            };
         },
         column_location: function () {
             return {
-                data: "location",
+                data: 'location',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "location",
-            }
+                name: 'location',
+            };
         },
         column_title: function () {
             return {
-                data: "title",
+                data: 'title',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "title",
-            }
+                name: 'title',
+            };
         },
         column_start_date: function () {
             return {
-                data: "start_date",
+                data: 'start_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.start_date) {
-                        return moment(full.start_date).format('DD/MM/YYYY') + moment(full.start_date).format(' h:mm:ss a')
+                        return (
+                            moment(full.start_date).format('DD/MM/YYYY') +
+                            moment(full.start_date).format(' h:mm:ss a')
+                        );
                     }
-                    return ''
+                    return '';
                 },
-                name: "start_date",
-            }
+                name: 'start_date',
+            };
         },
         column_end_date: function () {
             return {
-                data: "end_date",
+                data: 'end_date',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                'render': function (data, type, full) {
+                render: function (data, type, full) {
                     if (full.end_date) {
-                        return moment(full.end_date).format('DD/MM/YYYY') + moment(full.end_date).format(' h:mm:ss a')
+                        return (
+                            moment(full.end_date).format('DD/MM/YYYY') +
+                            moment(full.end_date).format(' h:mm:ss a')
+                        );
                     }
-                    return ''
+                    return '';
                 },
-                name: "end_date",
-            }
+                name: 'end_date',
+            };
         },
         column_status: function () {
             return {
-                data: "processing_status",
+                data: 'processing_status',
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: "processing_status",
-            }
+                name: 'processing_status',
+            };
         },
         column_action: function () {
-            let vm = this
+            let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 orderable: false,
                 searchable: false,
                 visible: true,
-                'render': function (data, type, full) {
-                    let links = "";
+                render: function (data, type, full) {
+                    let links = '';
                     if (full.processing_status == 'Discarded') {
                         links += `<a href='#${full.id}' data-reinstate-meeting='${full.id}'>Reinstate</a><br/>`;
                     } else {
@@ -267,20 +311,19 @@ export default {
                             if (full.processing_status == 'Draft') {
                                 links += `<a href='#${full.id}' data-discard-meeting='${full.id}'>Discard</a><br/>`;
                             }
-                        }
-                        else {
+                        } else {
                             links += `<a href='/internal/meetings/${full.id}?action=view'>View</a><br/>`;
                         }
                     }
                     return links;
-                }
-            }
+                },
+            };
         },
         datatable_options: function () {
-            let vm = this
+            let vm = this;
 
-            let columns = []
-            let search = null
+            let columns = [];
+            let search = null;
             columns = [
                 vm.column_id,
                 vm.column_title,
@@ -289,8 +332,8 @@ export default {
                 vm.column_end_date,
                 vm.column_status,
                 vm.column_action,
-            ]
-            search = true
+            ];
+            search = true;
             let buttons = [
                 {
                     extend: 'excel',
@@ -299,7 +342,7 @@ export default {
                     className: 'btn btn-primary me-2 rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
+                    },
                 },
                 {
                     extend: 'csv',
@@ -308,41 +351,48 @@ export default {
                     className: 'btn btn-primary rounded',
                     exportOptions: {
                         columns: ':not(.no-export)',
-                    }
-                }
-            ]
+                    },
+                },
+            ];
             return {
                 autoWidth: false,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
-                order: [
-                    [0, 'desc']
+                order: [[0, 'desc']],
+                lengthMenu: [
+                    [10, 25, 50, 100, 100000000],
+                    [10, 25, 50, 100, 'All'],
                 ],
-                lengthMenu: [[10, 25, 50, 100, 100000000], [10, 25, 50, 100, "All"]],
                 responsive: true,
                 serverSide: true,
                 searching: search,
                 //  to show the "workflow Status","Action" columns always in the last position
                 columnDefs: [
                     { responsivePriority: 1, targets: 0 },
-                    { responsivePriority: 3, targets: -1, className: 'no-export' },
-                    { responsivePriority: 2, targets: -2 }
+                    {
+                        responsivePriority: 3,
+                        targets: -1,
+                        className: 'no-export',
+                    },
+                    { responsivePriority: 2, targets: -2 },
                 ],
                 ajax: {
-                    "url": this.url,
-                    "dataSrc": 'data',
+                    url: this.url,
+                    dataSrc: 'data',
 
                     // adding extra GET params for Custom filtering
-                    "data": function (d) {
+                    data: function (d) {
                         d.filter_to_start_date = vm.filterToMeetingStartDate;
-                        d.filter_from_start_date = vm.filterFromMeetingStartDate;
+                        d.filter_from_start_date =
+                            vm.filterFromMeetingStartDate;
                         d.filter_to_end_date = vm.filterToMeetingEndDate;
                         d.filter_from_end_date = vm.filterFromMeetingEndDate;
                         d.filter_meeting_status = vm.filterMeetingStatus;
-                    }
+                    },
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: buttons,
@@ -354,20 +404,93 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
+            };
+        },
+    },
+    watch: {
+        filterFromMeetingStartDate: function () {
+            let vm = this;
+            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFromMeetingStartDate_cache,
+                vm.filterFromMeetingStartDate
+            );
+        },
+        filterToMeetingStartDate: function () {
+            let vm = this;
+            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterToMeetingStartDate_cache,
+                vm.filterToMeetingStartDate
+            );
+        },
+        filterFromMeetingEndDate: function () {
+            let vm = this;
+            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterFromMeetingEndDate_cache,
+                vm.filterFromMeetingEndDate
+            );
+        },
+        filterToMeetingEndDate: function () {
+            let vm = this;
+            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterToMeetingEndDate_cache,
+                vm.filterToMeetingEndDate
+            );
+        },
+        filterMeetingStatus: function () {
+            let vm = this;
+            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(
+                helpers.enablePopovers,
+                false
+            ); // This calls ajax() backend call.
+            sessionStorage.setItem(
+                vm.filterMeetingStatus_cache,
+                vm.filterMeetingStatus
+            );
+        },
+        filterApplied: function () {
+            if (this.$refs.collapsible_filters) {
+                this.$refs.collapsible_filters.show_warning_icon(
+                    this.filterApplied
+                );
             }
         },
     },
+    created: function () {
+        let vm = this;
+        vm.fetchProfile();
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         collapsible_component_mounted: function () {
-            this.$refs.collapsible_filters.show_warning_icon(this.filterApplied)
+            this.$refs.collapsible_filters.show_warning_icon(
+                this.filterApplied
+            );
         },
         constructMeetingsTable: function () {
             this.$refs.meetings_datatable.vmDataTable.clear().draw();
         },
         createMeeting: async function () {
-            let newMeetingId = null
+            let newMeetingId = null;
             try {
-                const createUrl = api_endpoints.meeting + "/";
+                const createUrl = api_endpoints.meeting + '/';
                 let payload = new Object();
                 payload.meeting_type = 'meeting';
                 let response = await fetch(createUrl, {
@@ -385,37 +508,35 @@ export default {
                     name: 'internal-meetings',
                     params: { meeting_id: newMeetingId },
                 });
-            }
-            catch (err) {
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
                 }
             }
-
         },
         discardMeeting: function (meeting_id) {
             let vm = this;
             swal.fire({
-                title: "Discard Meeting",
-                text: "Are you sure you want to discard this meeting?",
-                icon: "question",
+                title: 'Discard Meeting',
+                text: 'Are you sure you want to discard this meeting?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Meeting',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
+                reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
                     fetch(api_endpoints.discard_meeting(meeting_id), {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                        })
-                        .then((response) => {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'Your meeting has been discarded',
@@ -424,35 +545,40 @@ export default {
                                     confirmButton: 'btn btn-primary',
                                 },
                             });
-                            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
+                            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(
+                                helpers.enablePopovers,
+                                false
+                            );
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         reinstateMeeting: function (meeting_id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Meeting",
-                text: "Are you sure you want to reinstate this meeting?",
-                icon: "question",
+                title: 'Reinstate Meeting',
+                text: 'Are you sure you want to reinstate this meeting?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Meeting',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
+                reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
                     fetch(api_endpoints.reinstate_meeting(meeting_id), {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                        })
-                        .then((response) => {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your meeting has been reinstated',
@@ -461,45 +587,54 @@ export default {
                                     confirmButton: 'btn btn-primary',
                                 },
                             });
-                            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(helpers.enablePopovers, false);
-                        }, (error) => {
+                            vm.$refs.meetings_datatable.vmDataTable.ajax.reload(
+                                helpers.enablePopovers,
+                                false
+                            );
+                        },
+                        (error) => {
                             console.log(error);
-                        });
+                        }
+                    );
                 }
             });
         },
         addEventListeners: function () {
             let vm = this;
             // External Discard listener
-            vm.$refs.meetings_datatable.vmDataTable.on('click', 'a[data-discard-meeting]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-meeting');
-                vm.discardMeeting(id);
-            });
-            vm.$refs.meetings_datatable.vmDataTable.on('click', 'a[data-reinstate-meeting]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-meeting');
-                vm.reinstateMeeting(id);
-            });
-            vm.$refs.meetings_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.meetings_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-meeting]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-meeting');
+                    vm.discardMeeting(id);
+                }
+            );
+            vm.$refs.meetings_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-meeting]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-meeting');
+                    vm.reinstateMeeting(id);
+                }
+            );
+            vm.$refs.meetings_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         fetchProfile: function () {
             let vm = this;
             fetch(api_endpoints.profile).then(async (response) => {
                 vm.profile = await response.json();
-            })
+            });
         },
     },
-    created: function () {
-        let vm = this;
-        vm.fetchProfile();
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    },
-}
+};
 </script>
 <style scoped>
 .dt-buttons {
@@ -527,7 +662,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 
@@ -552,7 +689,9 @@ export default {
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: 'Courier New', Courier monospace;
+    font-family:
+        'Courier New',
+        Courier monospace;
     margin: 5px;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
index 39ba42c3..07d15054 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
@@ -1,53 +1,73 @@
 <template lang="html">
     <div id="minutes">
-        <FormSection :formCollapse="false" label="Minutes" :Index="minutesBody">
+        <FormSection
+            :form-collapse="false"
+            label="Minutes"
+            :Index="minutesBody"
+        >
             <form class="form-horizontal" action="index.html" method="post">
                 <div v-if="meeting_obj.can_user_add_minutes" class="col-sm-12">
                     <div class="text-end">
-                        <button type="button" class="btn btn-primary mb-2 " @click.prevent="newDocument">
+                        <button
+                            type="button"
+                            class="btn btn-primary mb-2"
+                            @click.prevent="newDocument"
+                        >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Minutes
                         </button>
                     </div>
                 </div>
                 <div>
-                    <datatable ref="minutes_datatable" :id="panelBody" :dtOptions="minutes_options"
-                        :dtHeaders="minutes_headers" />
+                    <datatable
+                        :id="panelBody"
+                        ref="minutes_datatable"
+                        :dt-options="minutes_options"
+                        :dt-headers="minutes_headers"
+                    />
                 </div>
             </form>
         </FormSection>
-        <DocumentDetail ref="document_detail" @refreshFromResponse="refreshFromResponse" :url="minutes_url"
-            :is_internal="is_internal">
+        <DocumentDetail
+            ref="document_detail"
+            :url="minutes_url"
+            :is_internal="is_internal"
+            @refresh-from-response="refreshFromResponse"
+        >
         </DocumentDetail>
         <div v-if="minutesHistoryId">
-            <MinutesHistory ref="minutes_history" :key="minutesHistoryId" :minutes-id="minutesHistoryId"
-                :meeting-id="meeting_obj.id" />
+            <MinutesHistory
+                ref="minutes_history"
+                :key="minutesHistoryId"
+                :minutes-id="minutesHistoryId"
+                :meeting-id="meeting_obj.id"
+            />
         </div>
     </div>
 </template>
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import DocumentDetail from '@/components/common/add_document.vue'
+import DocumentDetail from '@/components/common/add_document.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import MinutesHistory from '../../internal/meetings/minutes_history.vue';
-import {
-    constants,
-    api_endpoints,
-    helpers,
-}
-    from '@/utils/hooks'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'Minutes',
+    components: {
+        FormSection,
+        datatable,
+        DocumentDetail,
+        MinutesHistory,
+    },
     props: {
         meeting_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -55,15 +75,23 @@ export default {
         return {
             uuid: 0,
             minutesHistoryId: null,
-            minutesBody: "minutesBody" + vm._uid,
-            panelBody: "meeting-minutes" + vm._uid,
+            minutesBody: 'minutesBody' + vm._uid,
+            panelBody: 'meeting-minutes' + vm._uid,
             values: null,
             minutes_url: api_endpoints.minutes,
-            minutes_headers: ['Number', 'Category', 'Sub Category', 'Description', 'Document', 'Date/Time', 'Action'],
+            minutes_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Description',
+                'Document',
+                'Date/Time',
+                'Action',
+            ],
             minutes_options: {
                 autowidth: true,
                 language: {
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 responsive: true,
                 searching: true,
@@ -73,113 +101,145 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.meeting, vm.meeting_obj.id + '/minutes'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.meeting,
+                        vm.meeting_obj.id + '/minutes'
+                    ),
+                    dataSrc: '',
                 },
                 order: [],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
-                buttons: [
-
-                ],
+                buttons: [],
                 columns: [
                     {
-                        data: "minutes_number",
+                        data: 'minutes_number',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.minutes_number;
-                            }
-                            else {
-                                return '<s>' + full.minutes_number + '</s>'
+                            } else {
+                                return '<s>' + full.minutes_number + '</s>';
                             }
                         },
                     },
                     {
-                        data: "document_category_name",
+                        data: 'document_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "document_sub_category_name",
+                        data: 'document_sub_category_name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             if (full.active) {
                                 return full.document_sub_category_name;
-                            }
-                            else {
-                                return '<s>' + full.document_sub_category_name + '</s>'
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
                             }
                         },
                     },
                     {
-                        data: "name",
+                        data: 'name',
                         orderable: true,
                         searchable: true,
                         mRender: function (data, type, full) {
                             let links = '';
                             if (full.active) {
                                 let value = full.name;
-                                let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                links += '<span><a href="' + full._file + '" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
                             } else {
                                 let value = full.name;
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                links += type == 'export' ? value : '<s>' + result + '</s>';
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
                             }
                             return links;
                         },
                     },
                     {
-                        data: "description",
+                        data: 'description',
                         orderable: true,
                         searchable: true,
-                        'render': function (value, type, full) {
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             if (full.active) {
                                 return type == 'export' ? value : result;
                             } else {
-                                return type == 'export' ? value : '<s>' + result + '</s>';
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
                             }
                         },
                     },
                     {
-                        data: "uploaded_date",
+                        data: 'uploaded_date',
                         mRender: function (data, type, full) {
                             if (full.active) {
-                                return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm') : '';
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
                             } else {
-                                return data != '' && data != null ? '<s>' + moment(data).format('DD/MM/YYYY HH:mm') + '</s>' : '';
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
-                        }
+                        },
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             let links = '';
                             if (vm.meeting_obj.can_user_edit) {
                                 if (full.active) {
                                     links += `<a href='#${full.id}' data-edit-document='${full.id}'>Edit</a><br/>`;
                                     links += `<a href='#' data-discard-document='${full.id}'>Discard</a><br>`;
-                                }
-                                else {
+                                } else {
                                     links += `<a href='#' data-reinstate-document='${full.id}'>Reinstate</a><br>`;
                                 }
                             }
                             links += `<a href='#' data-history-document='${full.id}'>History</a><br>`;
                             return links;
-                        }
+                        },
                     },
                 ],
                 processing: true,
@@ -189,14 +249,14 @@ export default {
                 initComplete: function () {
                     helpers.enablePopovers();
                 },
-            }
-        }
+            },
+        };
     },
-    components: {
-        FormSection,
-        datatable,
-        DocumentDetail,
-        MinutesHistory,
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         newDocument: function () {
@@ -209,7 +269,7 @@ export default {
                 document_category: '',
                 document_sub_category: '',
                 uploaded_date: null,
-            }
+            };
             this.$refs.document_detail.documentObj = new_document_another;
             this.$refs.document_detail.uploaded_document = [];
             this.$refs.document_detail.document_action = 'add';
@@ -221,18 +281,27 @@ export default {
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Minute';
-            fetch(helpers.add_endpoint_json(api_endpoints.minutes, id)).then(async (response) => {
-                const data = await response.json();
-                this.$refs.document_detail.documentObj = data;
-                this.$refs.document_detail.documentObj.uploaded_date = data.uploaded_date != null && data.uploaded_date != undefined ? moment(data.uploaded_date).format('yyyy-MM-DDTHH:mm') : '';
-                this.$refs.document_detail.uploaded_document = [data];
-                //-----this method is called as it wasn't fetching subcategory
-                this.$refs.document_detail.fetchSubCategory(data.document_category);
-
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.minutes, id)).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.$refs.document_detail.documentObj = data;
+                    this.$refs.document_detail.documentObj.uploaded_date =
+                        data.uploaded_date != null &&
+                        data.uploaded_date != undefined
+                            ? moment(data.uploaded_date).format(
+                                  'yyyy-MM-DDTHH:mm'
+                              )
+                            : '';
+                    this.$refs.document_detail.uploaded_document = [data];
+                    //-----this method is called as it wasn't fetching subcategory
+                    this.$refs.document_detail.fetchSubCategory(
+                        data.document_category
+                    );
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.document_detail.isModalOpen = true;
         },
         historyDocument: function (id) {
@@ -245,124 +314,158 @@ export default {
         discardDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Minutes",
-                text: "Are you sure you want to discard these minutes?",
-                icon: "question",
+                title: 'Discard Minutes',
+                text: 'Are you sure you want to discard these minutes?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Minutes',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.minutes, id + '/discard'), {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                        })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The minutes have been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.minutes,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                            vm.$refs.minutes_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The minutes have been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.minutes_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         reinstateDocument: function (id) {
             let vm = this;
             swal.fire({
-                title: "Reinstate Minutes",
-                text: "Are you sure you want to reinstate these minutes?",
-                icon: "question",
+                title: 'Reinstate Minutes',
+                text: 'Are you sure you want to reinstate these minutes?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Reinstate Minutes',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.minutes, id + '/reinstate'), {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                        })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Reinstated',
-                                text: 'The minutes have been reinstated',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.minutes,
+                                id + '/reinstate'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                            vm.$refs.minutes_datatable.vmDataTable.ajax.reload();
-                        }, (error) => {
-                            console.log(error);
-                        });
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Reinstated',
+                                    text: 'The minutes have been reinstated',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$refs.minutes_datatable.vmDataTable.ajax.reload();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         updatedDocuments() {
             this.$refs.minutes_datatable.vmDataTable.ajax.reload();
         },
         addEventListeners: function () {
             let vm = this;
-            vm.$refs.minutes_datatable.vmDataTable.on('click', 'a[data-edit-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-edit-document');
-                vm.editDocument(id);
-            });
-            vm.$refs.minutes_datatable.vmDataTable.on('click', 'a[data-history-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-document');
-                vm.historyDocument(id);
-            });
+            vm.$refs.minutes_datatable.vmDataTable.on(
+                'click',
+                'a[data-edit-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-edit-document');
+                    vm.editDocument(id);
+                }
+            );
+            vm.$refs.minutes_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-document');
+                    vm.historyDocument(id);
+                }
+            );
             // External Discard listener
-            vm.$refs.minutes_datatable.vmDataTable.on('click', 'a[data-discard-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-discard-document');
-                vm.discardDocument(id);
-            });
+            vm.$refs.minutes_datatable.vmDataTable.on(
+                'click',
+                'a[data-discard-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-discard-document');
+                    vm.discardDocument(id);
+                }
+            );
             // External Reinstate listener
-            vm.$refs.minutes_datatable.vmDataTable.on('click', 'a[data-reinstate-document]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-document');
-                vm.reinstateDocument(id);
-            });
-            vm.$refs.minutes_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.minutes_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-document]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-document');
+                    vm.reinstateDocument(id);
+                }
+            );
+            vm.$refs.minutes_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         refreshFromResponse: function () {
             this.$refs.minutes_datatable.vmDataTable.ajax.reload();
         },
     },
-    mounted: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
-    },
-
-}
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue
index 4e109164..46344663 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue
@@ -2,17 +2,24 @@
     <div id="minutesHistory">
         <modal
             transition="modal fade"
-            :title="'Meeting M'+ meetingId +' - Minutes MN' + minutesId + ' - History ' "
+            :title="
+                'Meeting M' +
+                meetingId +
+                ' - Minutes MN' +
+                minutesId +
+                ' - History '
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +31,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'MN'+minutesId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'Minutes'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'MN' + minutesId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'Minutes'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -73,8 +82,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -111,16 +119,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.minutes.fields.minutes_number) {
-                        return full.data.minutes.fields.minutes_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.minutes.fields.minutes_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "MN"+full.data.minutes.pk+'-'+full.revision_sequence;
+                        return (
+                            'MN' +
+                            full.data.minutes.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -148,14 +164,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.minutes.fields.minutes_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.minutes.fields.minutes_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'minutes_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -168,7 +187,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -188,10 +206,11 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.minutes.fields.document_category) {
-                        return full.data.minutes.fields.document_category.document_category_name;
+                    if (full.data.minutes.fields.document_category) {
+                        return full.data.minutes.fields.document_category
+                            .document_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_category', //_name',
@@ -199,17 +218,17 @@ export default {
         },
         column_sub_category: function () {
             return {
-
                 data: 'data.data.minutes.fields.document_sub_category',
                 defaultContent: '',
                 orderable: false,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.minutes.fields.document_sub_category) {
-                        return full.data.minutes.fields.document_sub_category.document_sub_category_name;
+                    if (full.data.minutes.fields.document_sub_category) {
+                        return full.data.minutes.fields.document_sub_category
+                            .document_sub_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_sub_category',
@@ -224,15 +243,23 @@ export default {
                 searchable: true,
                 visible: true,
                 mRender: function (row, type, full) {
-                    let links='';
-                    if(full.data.minutes.fields.active){
+                    let links = '';
+                    if (full.data.minutes.fields.active) {
                         let value = full.data.minutes.fields.name;
                         let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                        links+='<span><a href="/private-media/'+ full.data.minutes.fields._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                    }else{
+                        links +=
+                            '<span><a href="/private-media/' +
+                            full.data.minutes.fields._file +
+                            '" target="_blank">' +
+                            result.text +
+                            '</a> ' +
+                            result.link +
+                            '</span>';
+                    } else {
                         let value = full.data.minutes.fields.name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        links += type == 'export' ? value : '<s>' + result + '</s>';
+                        links +=
+                            type == 'export' ? value : '<s>' + result + '</s>';
                     }
                     return links;
                 },
@@ -250,7 +277,7 @@ export default {
                 render: function (row, type, full) {
                     let value = full.data.minutes.fields.description;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'description',
             };
@@ -261,11 +288,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -291,7 +318,9 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_minutes(this.minutesId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_minutes(this.minutesId) +
+                        '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -301,8 +330,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -310,84 +339,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
+    },
     methods: {
         close: function () {
             this.errorString = '';
             this.isModalOpen = false;
             $('.has-error').removeClass('has-error');
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
-    },
-    mounted: function(){
-            let vm = this;
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
             this.$nextTick(() => {
-                vm.addEventListeners();
+                this.$refs.display_history.isModalOpen = true;
             });
-    },
-    watch: {
-        isModalOpen() {
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
index e50ed53f..ba2f1ee2 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
@@ -1,104 +1,207 @@
 <template lang="html">
     <div id="site_detail">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large>
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="siteForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
-                        <alert v-if="change_warning && !isReadOnly" type="warning"><strong>{{ change_warning }}</strong>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
+                        <alert
+                            v-if="change_warning && !isReadOnly"
+                            type="warning"
+                            ><strong>{{ change_warning }}</strong>
                         </alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Site Name</label>
+                                        <label class="control-label pull-left"
+                                            >Site Name</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea :disabled="isReadOnly" rows=1 class="form-control"
-                                            v-model="siteObj.site_name">
+                                        <textarea
+                                            v-model="siteObj.site_name"
+                                            :disabled="isReadOnly"
+                                            rows="1"
+                                            class="form-control"
+                                        >
                                         </textarea>
                                     </div>
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label">Point Coordinate (Lat-Long)</label>
+                                <label for="" class="col-sm-3 control-label"
+                                    >Point Coordinate (Lat-Long)</label
+                                >
                                 <div class="col-sm-4">
-                                    <input id="point_coord2" :disabled="isReadOnly" type="decimal" class="form-control"
-                                        placeholder="" v-model="siteObj.point_coord2" />
+                                    <input
+                                        id="point_coord2"
+                                        v-model="siteObj.point_coord2"
+                                        :disabled="isReadOnly"
+                                        type="decimal"
+                                        class="form-control"
+                                        placeholder=""
+                                    />
                                 </div>
                                 -
                                 <div class="col-sm-4">
-                                    <input id="point_coord1" :disabled="isReadOnly" type="decimal" class="form-control"
-                                        placeholder="" v-model="siteObj.point_coord1" />
+                                    <input
+                                        id="point_coord1"
+                                        v-model="siteObj.point_coord1"
+                                        :disabled="isReadOnly"
+                                        type="decimal"
+                                        class="form-control"
+                                        placeholder=""
+                                    />
                                 </div>
                             </div>
                             <div class="row mb-3">
                                 <div class="col-sm-3">
-                                    <label class="control-label pull-left">Datum</label>
+                                    <label class="control-label pull-left"
+                                        >Datum</label
+                                    >
                                 </div>
                                 <div class="col-sm-9">
                                     <template v-if="!isReadOnly">
                                         <template
-                                            v-if="datum_list && datum_list.length > 0 && siteObj.datum && !datum_list.map((d) => d.srid).includes(siteObj.datum)">
-                                            <input type="text" v-if="siteObj.datum_name" class="form-control mb-3"
-                                                :value="siteObj.datum_name + ' (Now Archived)'" disabled />
+                                            v-if="
+                                                datum_list &&
+                                                datum_list.length > 0 &&
+                                                siteObj.datum &&
+                                                !datum_list
+                                                    .map((d) => d.srid)
+                                                    .includes(siteObj.datum)
+                                            "
+                                        >
+                                            <input
+                                                v-if="siteObj.datum_name"
+                                                type="text"
+                                                class="form-control mb-3"
+                                                :value="
+                                                    siteObj.datum_name +
+                                                    ' (Now Archived)'
+                                                "
+                                                disabled
+                                            />
                                             <div class="mb-3 text-muted">
                                                 Change datum to:
                                             </div>
                                         </template>
-                                        <select class="form-select" v-model="siteObj.datum">
-                                            <option v-for="datum in datum_list" :value="datum.srid"
-                                                v-bind:key="datum.srid">
+                                        <select
+                                            v-model="siteObj.datum"
+                                            class="form-select"
+                                        >
+                                            <option
+                                                v-for="datum in datum_list"
+                                                :key="datum.srid"
+                                                :value="datum.srid"
+                                            >
                                                 {{ datum.name }}
                                             </option>
                                         </select>
                                     </template>
                                     <template v-else>
-                                        <input class="form-control" type="text" :disabled="isReadOnly"
-                                            v-model="siteObj.datum_name" />
+                                        <input
+                                            v-model="siteObj.datum_name"
+                                            class="form-control"
+                                            type="text"
+                                            :disabled="isReadOnly"
+                                        />
                                     </template>
                                 </div>
                             </div>
                             <div class="row mb-3">
                                 <div class="col-sm-3">
-                                    <label class="control-label pull-left">Site Type</label>
+                                    <label class="control-label pull-left"
+                                        >Site Type</label
+                                    >
                                 </div>
                                 <div class="col-sm-9">
                                     <template v-if="!isReadOnly">
                                         <template
-                                            v-if="site_type_list && site_type_list.length > 0 && siteObj.site_type && !site_type_list.map((d) => d.id).includes(siteObj.site_type)">
-                                            <input type="text" v-if="siteObj.site_type_name" class="form-control mb-3"
-                                                :value="siteObj.site_type_name + ' (Now Archived)'" disabled />
+                                            v-if="
+                                                site_type_list &&
+                                                site_type_list.length > 0 &&
+                                                siteObj.site_type &&
+                                                !site_type_list
+                                                    .map((d) => d.id)
+                                                    .includes(siteObj.site_type)
+                                            "
+                                        >
+                                            <input
+                                                v-if="siteObj.site_type_name"
+                                                type="text"
+                                                class="form-control mb-3"
+                                                :value="
+                                                    siteObj.site_type_name +
+                                                    ' (Now Archived)'
+                                                "
+                                                disabled
+                                            />
                                             <div class="mb-3 text-muted">
                                                 Change site type to:
                                             </div>
                                         </template>
-                                        <select class="form-select" v-model="siteObj.site_type">
-                                            <option v-for="site_type in site_type_list" :value="site_type.id"
-                                                v-bind:key="site_type.id">
+                                        <select
+                                            v-model="siteObj.site_type"
+                                            class="form-select"
+                                        >
+                                            <option
+                                                v-for="site_type in site_type_list"
+                                                :key="site_type.id"
+                                                :value="site_type.id"
+                                            >
                                                 {{ site_type.name }}
                                             </option>
                                         </select>
                                     </template>
                                     <template v-else>
-                                        <input class="form-control" type="text" :disabled="isReadOnly"
-                                            v-model="siteObj.site_type_name" />
+                                        <input
+                                            v-model="siteObj.site_type_name"
+                                            class="form-control"
+                                            type="text"
+                                            :disabled="isReadOnly"
+                                        />
                                     </template>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Occurrence Reports</label>
+                                        <label class="control-label pull-left"
+                                            >Occurrence Reports</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <div class="form-group" id="select_occurrence_reports">
-                                            <select :disabled="isReadOnly" style="width:100%;"
-                                                class="form-select input-sm" ref="occurrence_report_select"
-                                                v-model="siteObj.related_occurrence_reports">
-                                                <option v-for="option in occurrence_obj.occurrence_reports"
-                                                    :value="option.id" :key="option.id">
-                                                    {{ option.occurrence_report_number }}
+                                        <div
+                                            id="select_occurrence_reports"
+                                            class="form-group"
+                                        >
+                                            <select
+                                                ref="occurrence_report_select"
+                                                v-model="
+                                                    siteObj.related_occurrence_reports
+                                                "
+                                                :disabled="isReadOnly"
+                                                style="width: 100%"
+                                                class="form-select input-sm"
+                                            >
+                                                <option
+                                                    v-for="option in occurrence_obj.occurrence_reports"
+                                                    :key="option.id"
+                                                    :value="option.id"
+                                                >
+                                                    {{
+                                                        option.occurrence_report_number
+                                                    }}
                                                 </option>
                                             </select>
                                         </div>
@@ -108,12 +211,18 @@
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Comments</label>
+                                        <label class="control-label pull-left"
+                                            >Comments</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea :disabled="isReadOnly" rows=2 class="form-control"
-                                            v-model="siteObj.comments">
-            </textarea>
+                                        <textarea
+                                            v-model="siteObj.comments"
+                                            :disabled="isReadOnly"
+                                            rows="2"
+                                            class="form-control"
+                                        >
+                                        </textarea>
                                     </div>
                                 </div>
                             </div>
@@ -121,50 +230,95 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <template v-if="site_action != 'view'">
-                    <template v-if="site_id">
-                        <button type="button" v-if="updatingSite" disabled class="btn btn-primary" @click="ok">Updating
-                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span></button>
-                        <button type="button" v-else class="btn btn-primary" @click="ok">Update</button>
-                    </template>
-                    <template v-else>
-                        <button type="button" v-if="addingSite" disabled class="btn btn-primary" @click="ok">Adding
-                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span></button>
-                        <button type="button" v-else class="btn btn-primary" @click="ok">Add Site</button>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <template v-if="site_action != 'view'">
+                        <template v-if="site_id">
+                            <button
+                                v-if="updatingSite"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Updating
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Update
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button
+                                v-if="addingSite"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Adding
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Add Site
+                            </button>
+                        </template>
                     </template>
-                </template>
-            </div>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers } from '@/utils/hooks.js';
 export default {
-    name: 'Site-Detail',
+    name: 'SiteDetail',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         url: {
             type: String,
-            required: true
+            required: true,
         },
         change_warning: {
             type: String,
-            required: false
+            required: false,
         },
         occurrence_obj: {
             type: Object,
-            required: false
+            required: false,
         },
     },
     data: function () {
@@ -187,7 +341,7 @@ export default {
             success: false,
             site_type_list: [],
             datum_list: [],
-        }
+        };
     },
     computed: {
         showError: function () {
@@ -196,16 +350,50 @@ export default {
         },
         title: function () {
             var action = this.site_action;
-            if (typeof action === "string" && action.length > 0) {
-                var capitalizedAction = action.charAt(0).toUpperCase() + action.slice(1);
-                return capitalizedAction + " Site";
+            if (typeof action === 'string' && action.length > 0) {
+                var capitalizedAction =
+                    action.charAt(0).toUpperCase() + action.slice(1);
+                return capitalizedAction + ' Site';
             } else {
-                return "Invalid site action"; // Or handle the error in an appropriate way
+                return 'Invalid site action'; // Or handle the error in an appropriate way
             }
         },
         isReadOnly: function () {
-            return this.site_action === "view" ? true : false;
-        }
+            return this.site_action === 'view' ? true : false;
+        },
+    },
+    watch: {
+        siteObj: function () {
+            let vm = this;
+            vm.reinitialiseOCRLookup();
+        },
+    },
+    created: async function () {
+        let response = await fetch(
+            '/api/occurrence_sites/site_list_of_values/'
+        );
+        const data = await response.json();
+        let site_list_of_values_res = {};
+        Object.assign(site_list_of_values_res, data);
+        this.site_type_list = site_list_of_values_res.site_type_list;
+        this.site_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        this.datum_list = site_list_of_values_res.datum_list;
+        this.datum_list.splice(0, 0, {
+            srid: null,
+            name: null,
+        });
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.siteForm;
+
+        this.$nextTick(() => {
+            vm.eventListeners();
+            vm.initialiseOCRSelect();
+        });
     },
     methods: {
         ok: function () {
@@ -215,7 +403,7 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             this.isModalOpen = false;
@@ -235,18 +423,19 @@ export default {
         initialiseOCRSelect: function () {
             let vm = this;
             // Initialise select2 for proposed Conservation Criteria
-            $(vm.$refs.occurrence_report_select).select2({
-                "theme": "bootstrap-5",
-                dropdownParent: $("#select_occurrence_reports"),
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Occurrence Report",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.occurrence_report_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    dropdownParent: $('#select_occurrence_reports'),
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Occurrence Report',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.siteObj.related_occurrence_reports = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.siteObj.related_occurrence_reports = selected.val();
                 });
@@ -255,7 +444,7 @@ export default {
             let vm = this;
             vm.errors = false;
             let siteObj = JSON.parse(JSON.stringify(vm.siteObj));
-            let formData = new FormData()
+            let formData = new FormData();
 
             if (vm.siteObj.id) {
                 vm.updatingSite = true;
@@ -265,16 +454,19 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.updatingSite = false;
-                    vm.$parent.updatedSites();
-                    vm.close();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.updatingSite = false;
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    (response) => {
+                        vm.updatingSite = false;
+                        vm.$parent.updatedSites();
+                        vm.close();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                        vm.updatingSite = false;
+                    }
+                );
             } else {
                 vm.addingSite = true;
                 formData.append('data', JSON.stringify(siteObj));
@@ -283,54 +475,24 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.addingSite = false;
-                    vm.close();
-                    vm.$parent.updatedSites();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.addingSite = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    (response) => {
+                        vm.addingSite = false;
+                        vm.close();
+                        vm.$parent.updatedSites();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.addingSite = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
             }
         },
         eventListeners: function () {
             let vm = this;
-        }
-    },
-    created: async function () {
-        let response = await fetch('/api/occurrence_sites/site_list_of_values/');
-        const data = await response.json();
-        let site_list_of_values_res = {};
-        Object.assign(site_list_of_values_res, data);
-        this.site_type_list = site_list_of_values_res.site_type_list;
-        this.site_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        this.datum_list = site_list_of_values_res.datum_list;
-        this.datum_list.splice(0, 0,
-            {
-                srid: null,
-                name: null,
-            });
-    },
-    watch: {
-        siteObj: function () {
-            let vm = this;
-            vm.reinitialiseOCRLookup()
-        }
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.siteForm;
-
-        this.$nextTick(() => {
-            vm.eventListeners();
-            vm.initialiseOCRSelect();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
index 5e1d774d..c1a84e0c 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
@@ -1,18 +1,38 @@
 <template lang="html">
     <div id="internal-ocr-amendment-request">
-        <modal id="amendment-request-modal" transition="modal fade" @ok="ok()" @cancel="cancel()" title="Amendment Request" large>
+        <modal
+            id="amendment-request-modal"
+            transition="modal fade"
+            title="Amendment Request"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col-sm-6">
                                     <div class="form-group">
-                                        <label class="control-label" for="Name">Reason</label>
-                                        <select class="form-select" name="reason" ref="reason"
-                                            v-model="amendment.reason">
-                                            <option v-for="r in reason_choices" :value="r.key">{{ r.value }}</option>
+                                        <label class="control-label" for="Name"
+                                            >Reason</label
+                                        >
+                                        <select
+                                            ref="reason"
+                                            v-model="amendment.reason"
+                                            class="form-select"
+                                            name="reason"
+                                        >
+                                            <option
+                                                v-for="r in reason_choices"
+                                                :value="r.key"
+                                            >
+                                                {{ r.value }}
+                                            </option>
                                         </select>
                                     </div>
                                 </div>
@@ -20,19 +40,38 @@
                             <div class="row mb-3">
                                 <div class="col">
                                     <div class="form-group">
-                                        <label class="control-label" for="amendment_text">Details</label>
-                                        <textarea class="form-control" name="amendment_text" v-model="amendment.text"
-                                            id="amendment_text" ref="amendment_text"></textarea>
+                                        <label
+                                            class="control-label"
+                                            for="amendment_text"
+                                            >Details</label
+                                        >
+                                        <textarea
+                                            id="amendment_text"
+                                            ref="amendment_text"
+                                            v-model="amendment.text"
+                                            class="form-control"
+                                            name="amendment_text"
+                                        ></textarea>
                                     </div>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <label class="control-label" for="amendment_request_file">Documents</label>
-                                    <FileField2 ref="filefield"
-                                        :uploaded_documents="amendment.amendment_request_documents"
-                                        :delete_url="delete_url" :proposal_id="occurrence_report_id"
-                                        :isRepeatable="true" name="amendment_request_file" />
+                                    <label
+                                        class="control-label"
+                                        for="amendment_request_file"
+                                        >Documents</label
+                                    >
+                                    <FileField2
+                                        ref="filefield"
+                                        :uploaded_documents="
+                                            amendment.amendment_request_documents
+                                        "
+                                        :delete_url="delete_url"
+                                        :proposal_id="occurrence_report_id"
+                                        :is-repeatable="true"
+                                        name="amendment_request_file"
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -44,14 +83,13 @@
 </template>
 
 <script>
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import FileField2 from '@/components/forms/filefield.vue';
 
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import FileField2 from '@/components/forms/filefield.vue'
-
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'amendment-request',
+    name: 'AmendmentRequest',
     components: {
         modal,
         alert,
@@ -81,7 +119,7 @@ export default {
             errors: false,
             errorString: '',
             validation_form: null,
-        }
+        };
     },
     computed: {
         showError: function () {
@@ -89,8 +127,12 @@ export default {
             return vm.errors;
         },
         delete_url: function () {
-            return (this.amendment.id) ? '/api/ocr_amendment_request/' + this.amendment.id + '/delete_document/' : '';
-        }
+            return this.amendment.id
+                ? '/api/ocr_amendment_request/' +
+                      this.amendment.id +
+                      '/delete_document/'
+                : '';
+        },
     },
     watch: {
         isModalOpen: function (val) {
@@ -101,6 +143,15 @@ export default {
             }
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.amendForm;
+        vm.fetchAmendmentChoices();
+        vm.addFormValidations();
+        this.$nextTick(() => {
+            vm.eventListerners();
+        });
+    },
     methods: {
         ok: function () {
             let vm = this;
@@ -117,7 +168,7 @@ export default {
             this.amendment = {
                 reason: '',
                 reason_id: null,
-                occurrence_report: this.occurrence_report_id
+                occurrence_report: this.occurrence_report_id,
             };
             this.errors = false;
             $(this.$refs.reason).val(null).trigger('change');
@@ -127,17 +178,20 @@ export default {
         },
         fetchAmendmentChoices: function () {
             let vm = this;
-            fetch('/api/proposal_amendment_request_reason_choices.json').then(async (response) => {
-                vm.reason_choices = await response.json();
-            }, (error) => {
-                console.log(error);
-            });
+            fetch('/api/proposal_amendment_request_reason_choices.json').then(
+                async (response) => {
+                    vm.reason_choices = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         sendData: function () {
             let vm = this;
             vm.errors = false;
             let amendment = JSON.parse(JSON.stringify(vm.amendment));
-            let formData = new FormData()
+            let formData = new FormData();
             var files = vm.$refs.filefield.files;
             $.each(files, function (idx, v) {
                 var file = v['file'];
@@ -157,90 +211,94 @@ export default {
                 headers: {
                     'Content-Type': 'multipart/form-data',
                 },
-            }).then((response) => {
-                swal.fire({
-                    title: 'Sent',
-                    text: 'An email has been sent to proponent with the request to amend this Proposal',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.amendingProposal = true;
-                vm.close();
-
-                fetch(`/api/occurrence_report/${vm.occurrence_report_id}`).then((response) => {
-                    vm.$emit('refreshFromResponse', response);
+            }).then(
+                (response) => {
+                    swal.fire({
+                        title: 'Sent',
+                        text: 'An email has been sent to proponent with the request to amend this Proposal',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.amendingProposal = true;
+                    vm.close();
 
-                }, (error) => {
+                    fetch(
+                        `/api/occurrence_report/${vm.occurrence_report_id}`
+                    ).then(
+                        (response) => {
+                            vm.$emit('refreshFromResponse', response);
+                        },
+                        (error) => {
+                            console.log(error);
+                        }
+                    );
+                    vm.$router.push({ path: '/internal/occurrence' }); //Navigate to dashboard after creating Amendment request
+                },
+                (error) => {
                     console.log(error);
-                });
-                vm.$router.push({ path: '/internal/occurrence' }); //Navigate to dashboard after creating Amendment request
-
-            }, (error) => {
-                console.log(error);
-                vm.errors = true;
-                vm.errorString = helpers.apiVueResourceError(error);
-                vm.amendingProposal = true;
-            });
+                    vm.errors = true;
+                    vm.errorString = helpers.apiVueResourceError(error);
+                    vm.amendingProposal = true;
+                }
+            );
         },
         addFormValidations: function () {
             let vm = this;
             vm.validation_form = $(vm.form).validate({
                 rules: {
-                    reason: "required"
+                    reason: 'required',
                 },
                 messages: {
-                    reason: "field is required",
+                    reason: 'field is required',
                 },
                 showErrors: function (errorMap, errorList) {
                     $.each(this.validElements(), function (index, element) {
                         var $element = $(element);
-                        $element.attr("data-original-title", "").parents('.form-group').removeClass('has-error');
+                        $element
+                            .attr('data-original-title', '')
+                            .parents('.form-group')
+                            .removeClass('has-error');
                     });
                     // add or update tooltips
                     for (var i = 0; i < errorList.length; i++) {
                         var error = errorList[i];
                         $(error.element)
                             .tooltip({
-                                trigger: "focus"
+                                trigger: 'focus',
                             })
-                            .attr("data-original-title", error.message)
-                            .parents('.form-group').addClass('has-error');
+                            .attr('data-original-title', error.message)
+                            .parents('.form-group')
+                            .addClass('has-error');
                     }
-                }
+                },
             });
         },
         eventListerners: function () {
             let vm = this;
 
             // Intialise select2
-            $(vm.$refs.reason).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Reason",
-                dropdownParent: $('div#internal-ocr-amendment-request .modal-body'),
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.reason)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Reason',
+                    dropdownParent: $(
+                        'div#internal-ocr-amendment-request .modal-body'
+                    ),
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.amendment.reason = selected.val();
                     vm.amendment.reason_id = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.amendment.reason = selected.val();
                     vm.amendment.reason_id = selected.val();
                 });
-        }
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.amendForm;
-        vm.fetchAmendmentChoices();
-        vm.addFormValidations();
-        this.$nextTick(() => {
-            vm.eventListerners();
-        });
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
index adc4e655..6533a7b3 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
@@ -1,18 +1,37 @@
 <template lang="html">
     <div id="internal-ocr-back-to-assessor">
-        <modal id="back-to-assessor-modal" transition="modal fade" @ok="ok()" @cancel="cancel()" title="Back to Assessor"
-            okText="Back to Assessor" large>
+        <modal
+            id="back-to-assessor-modal"
+            transition="modal fade"
+            title="Back to Assessor"
+            ok-text="Back to Assessor"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="back-to-assessor-form">
-                        <alert v-if="errorString" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="errorString" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row mb-3">
                                 <div class="col">
                                     <div class="form-group">
-                                        <label class="control-label mb-3" for="reason">Reason</label>
-                                        <textarea class="form-control" name="reason" v-model="back_to_assessor.reason"
-                                            id="reason" ref="reason" required></textarea>
+                                        <label
+                                            class="control-label mb-3"
+                                            for="reason"
+                                            >Reason</label
+                                        >
+                                        <textarea
+                                            id="reason"
+                                            ref="reason"
+                                            v-model="back_to_assessor.reason"
+                                            class="form-control"
+                                            name="reason"
+                                            required
+                                        ></textarea>
                                     </div>
                                 </div>
                             </div>
@@ -25,13 +44,13 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 
 export default {
-    name: 'back-to-assessor',
+    name: 'BackToAssessor',
     components: {
         modal,
         alert,
@@ -53,7 +72,7 @@ export default {
                 reason: '',
             },
             errorString: '',
-        }
+        };
     },
     watch: {
         isModalOpen: function (val) {
@@ -62,7 +81,10 @@ export default {
                     this.$refs.reason.focus();
                 });
             }
-        }
+        },
+    },
+    mounted: function () {
+        this.form = document.forms['back-to-assessor-form'];
     },
     methods: {
         ok: function () {
@@ -85,32 +107,35 @@ export default {
         backToAssessor: function () {
             let vm = this;
             vm.errorString = '';
-            fetch(api_endpoints.occurrence_report + `/${vm.occurrence_report_id}/back_to_assessor/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.back_to_assessor),
-            }).then((response) => {
-                swal.fire({
-                    title: 'Sent Back',
-                    text: `${vm.occurrence_report_number} has been sent back to the assessor with the provided reason.`,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            fetch(
+                api_endpoints.occurrence_report +
+                    `/${vm.occurrence_report_id}/back_to_assessor/`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                }).then((result) => {
-                    vm.$router.go();
-                });
-
-            }, (error) => {
-                console.log(error);
-                vm.errorString = helpers.apiVueResourceError(error);
-            });
+                    body: JSON.stringify(vm.back_to_assessor),
+                }
+            ).then(
+                (response) => {
+                    swal.fire({
+                        title: 'Sent Back',
+                        text: `${vm.occurrence_report_number} has been sent back to the assessor with the provided reason.`,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((result) => {
+                        vm.$router.go();
+                    });
+                },
+                (error) => {
+                    console.log(error);
+                    vm.errorString = helpers.apiVueResourceError(error);
+                }
+            );
         },
     },
-    mounted: function () {
-        this.form = document.forms['back-to-assessor-form'];
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue
index 161dd497..737d5445 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container gx-4" id="occurence-report-bulk-import">
+    <div id="occurence-report-bulk-import" class="container gx-4">
         <div class="row mb-2">
             <div class="col">
                 <div class="mb-4">
@@ -7,81 +7,185 @@
                 </div>
                 <div class="mb-3">
                     <alert type="primary">
-                        <i class="bi bi-info-circle-fill text-primary fs-4 help-text-popover me-2"></i>
+                        <i
+                            class="bi bi-info-circle-fill text-primary fs-4 help-text-popover me-2"
+                        ></i>
                         Some help text about the import process.
                     </alert>
                 </div>
                 <div class="mb-3">
                     <div class="card">
                         <div class="card-body">
-                            <form id="bulk-import-form" class="needs-validation" no-validate>
+                            <form
+                                id="bulk-import-form"
+                                class="needs-validation"
+                                no-validate
+                            >
                                 <div v-if="schema_versions" class="mb-3">
-                                    <label for="schema-version" class="form-label"><span class="fw-bold">Step 1:
-                                        </span>Select the bulk import schema version to use:</label>
-                                    <select class="form-select text-secondary w-50" id="schema-version"
-                                        ref="schema-version" v-model="selected_schema"
-                                        aria-label="Select Schema Version" @change="resetFileField">
-                                        <option :value="null" selected>Select Bulk Import Schema Version</option>
-                                        <option v-for="schema_version in schema_versions" :value="schema_version">{{
-                                            getSchemaVersionText(schema_version) }}</option>
+                                    <label
+                                        for="schema-version"
+                                        class="form-label"
+                                        ><span class="fw-bold">Step 1: </span
+                                        >Select the bulk import schema version
+                                        to use:</label
+                                    >
+                                    <select
+                                        id="schema-version"
+                                        ref="schema-version"
+                                        v-model="selected_schema"
+                                        class="form-select text-secondary w-50"
+                                        aria-label="Select Schema Version"
+                                        @change="resetFileField"
+                                    >
+                                        <option :value="null" selected>
+                                            Select Bulk Import Schema Version
+                                        </option>
+                                        <option
+                                            v-for="schema_version in schema_versions"
+                                            :value="schema_version"
+                                        >
+                                            {{
+                                                getSchemaVersionText(
+                                                    schema_version
+                                                )
+                                            }}
+                                        </option>
                                     </select>
                                 </div>
-                                <div v-else class="spinner-border text-primary" role="status">
-                                    <span class="visually-hidden">Loading...</span>
+                                <div
+                                    v-else
+                                    class="spinner-border text-primary"
+                                    role="status"
+                                >
+                                    <span class="visually-hidden"
+                                        >Loading...</span
+                                    >
                                 </div>
-                                <div v-if="selected_schema_version" class="border-top mb-3 pt-2">
-                                    <label for="schema-version" class="form-label"><span class="fw-bold">Step 2:
-                                        </span>Make sure your import file matches the schema:</label>
+                                <div
+                                    v-if="selected_schema_version"
+                                    class="border-top mb-3 pt-2"
+                                >
+                                    <label
+                                        for="schema-version"
+                                        class="form-label"
+                                        ><span class="fw-bold">Step 2: </span
+                                        >Make sure your import file matches the
+                                        schema:</label
+                                    >
                                     <div class="table-responsive mb-2">
-                                        <table class="table table-sm table-bordered custom-table">
+                                        <table
+                                            class="table table-sm table-bordered custom-table"
+                                        >
                                             <thead>
                                                 <tr>
-                                                    <th v-for="column in selected_schema_version.columns" scope="col">{{
-                                                        column.xlsx_column_header_name }} <span class="text-danger"
+                                                    <th
+                                                        v-for="column in selected_schema_version.columns"
+                                                        scope="col"
+                                                    >
+                                                        {{
+                                                            column.xlsx_column_header_name
+                                                        }}
+                                                        <span
+                                                            v-if="
+                                                                column.xlsx_data_validation_allow_blank ==
+                                                                false
+                                                            "
+                                                            class="text-danger"
                                                             title="Mandatory Column"
-                                                            v-if="column.xlsx_data_validation_allow_blank == false">*</span>
+                                                            >*</span
+                                                        >
                                                     </th>
                                                 </tr>
                                             </thead>
                                             <tbody>
                                                 <tr>
-                                                    <td v-for="column in selected_schema_version.columns">
-                                                        <i class="bi bi-info-circle-fill text-primary" role="button"
-                                                            data-bs-toggle="popover" data-bs-placement="bottom"
-                                                            title="Column Information" :data-bs-html="true"
-                                                            :data-bs-content="columnInformation(column)"></i>
+                                                    <td
+                                                        v-for="column in selected_schema_version.columns"
+                                                    >
+                                                        <i
+                                                            class="bi bi-info-circle-fill text-primary"
+                                                            role="button"
+                                                            data-bs-toggle="popover"
+                                                            data-bs-placement="bottom"
+                                                            title="Column Information"
+                                                            :data-bs-html="true"
+                                                            :data-bs-content="
+                                                                columnInformation(
+                                                                    column
+                                                                )
+                                                            "
+                                                        ></i>
                                                     </td>
                                                 </tr>
                                             </tbody>
                                         </table>
                                     </div>
                                     <div>
-                                        <a :href="`/api/occurrence_report_bulk_import_schemas/${selected_schema_version.id}/preview_import_file/?updated=${selected_schema_version.datetime_updated}`"
-                                            class="btn btn-primary" target="_blank"><i class="bi bi-filetype-xlsx"></i>
-                                            Download Preview Bulk Import File</a>
+                                        <a
+                                            :href="`/api/occurrence_report_bulk_import_schemas/${selected_schema_version.id}/preview_import_file/?updated=${selected_schema_version.datetime_updated}`"
+                                            class="btn btn-primary"
+                                            target="_blank"
+                                            ><i class="bi bi-filetype-xlsx"></i>
+                                            Download Preview Bulk Import File</a
+                                        >
                                     </div>
                                 </div>
-                                <div v-if="selected_schema_version" class="border-top w-75 mb-3 pt-2">
-                                    <label for="bulk-import-file" class="form-label"><span class="fw-bold">Step 3:
-                                        </span> Select the .zip file containing any associated documents
-                                        (Optional)</label>
+                                <div
+                                    v-if="selected_schema_version"
+                                    class="border-top w-75 mb-3 pt-2"
+                                >
+                                    <label
+                                        for="bulk-import-file"
+                                        class="form-label"
+                                        ><span class="fw-bold">Step 3: </span>
+                                        Select the .zip file containing any
+                                        associated documents (Optional)</label
+                                    >
                                     <div class="input-group">
-                                        <input type="file" class="form-control text-secondary"
-                                            id="bulk-import-associated-files-zip" ref="bulk-import-associated-files-zip"
-                                            accept=".zip">
+                                        <input
+                                            id="bulk-import-associated-files-zip"
+                                            ref="bulk-import-associated-files-zip"
+                                            type="file"
+                                            class="form-control text-secondary"
+                                            accept=".zip"
+                                        />
                                     </div>
                                 </div>
-                                <div v-if="selected_schema_version" class="border-top w-75 mb-3 pt-2">
-                                    <label for="bulk-import-file" class="form-label"><span class="fw-bold">Step 4:
-                                        </span> Select the bulk import file (.xlsx)</label>
+                                <div
+                                    v-if="selected_schema_version"
+                                    class="border-top w-75 mb-3 pt-2"
+                                >
+                                    <label
+                                        for="bulk-import-file"
+                                        class="form-label"
+                                        ><span class="fw-bold">Step 4: </span>
+                                        Select the bulk import file
+                                        (.xlsx)</label
+                                    >
                                     <div class="input-group">
-                                        <input type="file" class="form-control text-secondary"
-                                            :class="importFileErrors ? 'is-invalid' : ''" id="bulk-import-file"
-                                            ref="bulk-import-file" @change="bulkImportFileSelected"
-                                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
-                                        <div v-if="importFileErrors" class="invalid-feedback mt-3">
+                                        <input
+                                            id="bulk-import-file"
+                                            ref="bulk-import-file"
+                                            type="file"
+                                            class="form-control text-secondary"
+                                            :class="
+                                                importFileErrors
+                                                    ? 'is-invalid'
+                                                    : ''
+                                            "
+                                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                                            @change="bulkImportFileSelected"
+                                        />
+                                        <div
+                                            v-if="importFileErrors"
+                                            class="invalid-feedback mt-3"
+                                        >
                                             <ul>
-                                                <li v-for="error in importFileErrors">{{ error }}</li>
+                                                <li
+                                                    v-for="error in importFileErrors"
+                                                >
+                                                    {{ error }}
+                                                </li>
                                             </ul>
                                         </div>
                                     </div>
@@ -90,33 +194,88 @@
                         </div>
                     </div>
                 </div>
-                <div v-if="queuedImports && queuedImports.length > 0" class="mb-3">
+                <div
+                    v-if="queuedImports && queuedImports.length > 0"
+                    class="mb-3"
+                >
                     <div class="card">
                         <div class="card-body">
-                            <h5 class="card-title text-secondary mb-3">Queued Imports</h5>
+                            <h5 class="card-title text-secondary mb-3">
+                                Queued Imports
+                            </h5>
                             <div class="table-responsive">
                                 <table class="table table-sm">
                                     <thead>
                                         <tr>
-                                            <th scope="col"><i class="bi bi-clock text-secondary"></i> Datetime Queued
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-clock text-secondary"
+                                                ></i>
+                                                Datetime Queued
+                                            </th>
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-filetype-xlsx text-secondary"
+                                                ></i>
+                                                File Name
+                                            </th>
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-hdd-fill text-secondary"
+                                                ></i>
+                                                File Size
+                                            </th>
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-list-ol text-secondary"
+                                                ></i>
+                                                Row Count
                                             </th>
-                                            <th scope="col"><i class="bi bi-filetype-xlsx text-secondary"></i> File Name
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-hourglass-split text-secondary"
+                                                ></i>
+                                                Time Estimate
                                             </th>
-                                            <th scope="col"><i class="bi bi-hdd-fill text-secondary"></i> File Size</th>
-                                            <th scope="col"><i class="bi bi-list-ol text-secondary"></i> Row Count</th>
-                                            <th scope="col"><i class="bi bi-hourglass-split text-secondary"></i> Time
-                                                Estimate</th>
                                         </tr>
                                     </thead>
                                     <tbody class="text-muted">
-                                        <tr v-for="queuedImport in queuedImports" class="">
-                                            <td>{{ new Date(queuedImport.datetime_queued).toLocaleString() }}</td>
-                                            <td class="text-truncate" style="max-width: 350px;"
-                                                :title="queuedImport.file_name">{{
-                                                    queuedImport.file_name }}</td>
-                                            <td>{{ queuedImport.file_size_megabytes }} MB</td>
-                                            <td class="text-end pe-3">{{ queuedImport.rows ? queuedImport.rows : 'Not Counted' }}</td>
-                                            <td>{{ queuedImport.estimated_processing_time_human_readable }}</td>
+                                        <tr
+                                            v-for="queuedImport in queuedImports"
+                                            class=""
+                                        >
+                                            <td>
+                                                {{
+                                                    new Date(
+                                                        queuedImport.datetime_queued
+                                                    ).toLocaleString()
+                                                }}
+                                            </td>
+                                            <td
+                                                class="text-truncate"
+                                                style="max-width: 350px"
+                                                :title="queuedImport.file_name"
+                                            >
+                                                {{ queuedImport.file_name }}
+                                            </td>
+                                            <td>
+                                                {{
+                                                    queuedImport.file_size_megabytes
+                                                }}
+                                                MB
+                                            </td>
+                                            <td class="text-end pe-3">
+                                                {{
+                                                    queuedImport.rows
+                                                        ? queuedImport.rows
+                                                        : 'Not Counted'
+                                                }}
+                                            </td>
+                                            <td>
+                                                {{
+                                                    queuedImport.estimated_processing_time_human_readable
+                                                }}
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -124,43 +283,98 @@
                         </div>
                     </div>
                 </div>
-                <div v-if="currentlyRunningImports && currentlyRunningImports.length > 0" class="mb-3">
+                <div
+                    v-if="
+                        currentlyRunningImports &&
+                        currentlyRunningImports.length > 0
+                    "
+                    class="mb-3"
+                >
                     <div class="card currently-running">
                         <div class="card-body align-items-center">
-                            <h5 class="card-title text-primary mb-3">Currently Running Imports
-                                <span class="spinner-border spinner-border-sm me-3" role="status"
-                                    aria-hidden="true"></span>
+                            <h5 class="card-title text-primary mb-3">
+                                Currently Running Imports
+                                <span
+                                    class="spinner-border spinner-border-sm me-3"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
                                 <span class="visually-hidden">Loading...</span>
                             </h5>
                             <div class="table-responsive">
                                 <table class="table table-sm">
                                     <thead>
                                         <tr>
-                                            <th scope="col"><i class="bi bi-clock text-primary"></i> Datetime Started
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-clock text-primary"
+                                                ></i>
+                                                Datetime Started
+                                            </th>
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-filetype-xlsx text-primary"
+                                                ></i>
+                                                File Name
                                             </th>
-                                            <th scope="col"><i class="bi bi-filetype-xlsx text-primary"></i> File Name
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-hdd-fill text-primary"
+                                                ></i>
+                                                File Size
                                             </th>
-                                            <th scope="col"><i class="bi bi-hdd-fill text-primary"></i> File Size</th>
-                                            <th scope="col"><i class="bi bi-hourglass-split text-primary"></i> Progress
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-hourglass-split text-primary"
+                                                ></i>
+                                                Progress
                                             </th>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr v-for="currentlyRunningImport in currentlyRunningImports" class="">
-                                            <td>{{ new Date(currentlyRunningImport.datetime_started).toLocaleString() }}
+                                        <tr
+                                            v-for="currentlyRunningImport in currentlyRunningImports"
+                                            class=""
+                                        >
+                                            <td>
+                                                {{
+                                                    new Date(
+                                                        currentlyRunningImport.datetime_started
+                                                    ).toLocaleString()
+                                                }}
+                                            </td>
+                                            <td
+                                                class="text-truncate"
+                                                style="max-width: 350px"
+                                                :title="
+                                                    currentlyRunningImport.file_name
+                                                "
+                                            >
+                                                {{
+                                                    currentlyRunningImport.file_name
+                                                }}
+                                            </td>
+                                            <td>
+                                                {{
+                                                    currentlyRunningImport.file_size_megabytes
+                                                }}
+                                                MB
                                             </td>
-                                            <td class="text-truncate" style="max-width: 350px;"
-                                                :title="currentlyRunningImport.file_name">{{
-                                                    currentlyRunningImport.file_name }}</td>
-                                            <td>{{ currentlyRunningImport.file_size_megabytes }} MB</td>
-                                            <td style="min-width: 200px;">
+                                            <td style="min-width: 200px">
                                                 <div class="progress">
-                                                    <div class="progress-bar progress-bar-striped progress-bar-animated"
+                                                    <div
+                                                        class="progress-bar progress-bar-striped progress-bar-animated"
                                                         role="progressbar"
                                                         :style="`width: ${currentlyRunningImport.percentage_complete}%;`"
-                                                        :aria-valuenow="currentlyRunningImport.percentage_complete"
-                                                        aria-valuemin="0" aria-valuemax="100">{{
-                                                            currentlyRunningImport.percentage_complete }}%
+                                                        :aria-valuenow="
+                                                            currentlyRunningImport.percentage_complete
+                                                        "
+                                                        aria-valuemin="0"
+                                                        aria-valuemax="100"
+                                                    >
+                                                        {{
+                                                            currentlyRunningImport.percentage_complete
+                                                        }}%
                                                     </div>
                                                 </div>
                                             </td>
@@ -171,16 +385,23 @@
                         </div>
                     </div>
                 </div>
-                <div v-if="failedImports && failedImports.count > 0" class="mb-3">
+                <div
+                    v-if="failedImports && failedImports.count > 0"
+                    class="mb-3"
+                >
                     <div class="card border-danger">
                         <div class="card-body">
-                            <h5 class="card-title text-danger mb-3"><i class="bi bi-list-checkme-2"></i>Failed Bulk
-                                Imports</h5>
+                            <h5 class="card-title text-danger mb-3">
+                                <i class="bi bi-list-checkme-2"></i>Failed Bulk
+                                Imports
+                            </h5>
                             <div class="table-responsive">
                                 <table class="table table-sm">
                                     <thead>
                                         <tr>
-                                            <th scope="col">Datetime Started</th>
+                                            <th scope="col">
+                                                Datetime Started
+                                            </th>
                                             <th scope="col">File Name</th>
                                             <th scope="col">File Size</th>
                                             <th scope="col">Rows Attempted</th>
@@ -188,96 +409,216 @@
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr v-for="failedImport in failedImports.results"
-                                            :id="`failed-import-${failedImport.id}`" class="">
-                                            <td>{{ new Date(failedImport.datetime_started).toLocaleString() }}</td>
-                                            <td class="text-truncate" style="max-width: 350px;"
-                                                :title="failedImport.file_name">{{
-                                                    failedImport.file_name }}</td>
-                                            <td>{{ failedImport.file_size_megabytes }} MB</td>
-                                            <td class="">{{ failedImport.rows ? failedImport.rows :
-                                                'Not Counted' }}</td>
+                                        <tr
+                                            v-for="failedImport in failedImports.results"
+                                            :id="`failed-import-${failedImport.id}`"
+                                            class=""
+                                        >
                                             <td>
-                                                <button class="btn btn-sm btn-danger me-2"
-                                                    data-bs-target="#errors-modal" data-bs-toggle="modal"
-                                                    @click="selectedErrors = failedImport.error_message"><i
-                                                        class="bi bi-eye"></i>
-                                                    View Errors</button>
+                                                {{
+                                                    new Date(
+                                                        failedImport.datetime_started
+                                                    ).toLocaleString()
+                                                }}
+                                            </td>
+                                            <td
+                                                class="text-truncate"
+                                                style="max-width: 350px"
+                                                :title="failedImport.file_name"
+                                            >
+                                                {{ failedImport.file_name }}
+                                            </td>
+                                            <td>
+                                                {{
+                                                    failedImport.file_size_megabytes
+                                                }}
+                                                MB
+                                            </td>
+                                            <td class="">
+                                                {{
+                                                    failedImport.rows
+                                                        ? failedImport.rows
+                                                        : 'Not Counted'
+                                                }}
+                                            </td>
+                                            <td>
+                                                <button
+                                                    class="btn btn-sm btn-danger me-2"
+                                                    data-bs-target="#errors-modal"
+                                                    data-bs-toggle="modal"
+                                                    @click="
+                                                        selectedErrors =
+                                                            failedImport.error_message
+                                                    "
+                                                >
+                                                    <i class="bi bi-eye"></i>
+                                                    View Errors
+                                                </button>
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
                             </div>
-                            <p v-if="failedImports.count > failedImports.results.length" class="card-text text-center">
-                                <a @click.prevent="loadMoreFailedImports" href="">load more</a>
+                            <p
+                                v-if="
+                                    failedImports.count >
+                                    failedImports.results.length
+                                "
+                                class="card-text text-center"
+                            >
+                                <a
+                                    href=""
+                                    @click.prevent="loadMoreFailedImports"
+                                    >load more</a
+                                >
                             </p>
                         </div>
                     </div>
                     <!-- Modal -->
-                    <div class="modal fade" id="errors-modal" data-bs-backdrop="static" data-bs-keyboard="false"
-                        tabindex="-1" aria-labelledby="errors-modal-label" aria-hidden="true">
+                    <div
+                        id="errors-modal"
+                        class="modal fade"
+                        data-bs-backdrop="static"
+                        data-bs-keyboard="false"
+                        tabindex="-1"
+                        aria-labelledby="errors-modal-label"
+                        aria-hidden="true"
+                    >
                         <div class="modal-dialog modal-lg">
                             <div class="modal-content">
                                 <div class="modal-header">
-                                    <h5 class="modal-title" id="errors-modal-label">
-                                        Bulk Import Task Errors</h5>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                        aria-label="Close"></button>
+                                    <h5
+                                        id="errors-modal-label"
+                                        class="modal-title"
+                                    >
+                                        Bulk Import Task Errors
+                                    </h5>
+                                    <button
+                                        type="button"
+                                        class="btn-close"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Close"
+                                    ></button>
                                 </div>
                                 <div class="modal-body">
                                     <pre>{{ selectedErrors }}</pre>
                                 </div>
                                 <div class="modal-footer">
-                                    <button type="button" class="btn btn-secondary"
-                                        data-bs-dismiss="modal">Dismiss</button>
+                                    <button
+                                        type="button"
+                                        class="btn btn-secondary"
+                                        data-bs-dismiss="modal"
+                                    >
+                                        Dismiss
+                                    </button>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div v-if="completedImports && completedImports.count > 0" class="mb-3">
+                <div
+                    v-if="completedImports && completedImports.count > 0"
+                    class="mb-3"
+                >
                     <div class="card border-success">
                         <div class="card-body">
-                            <h5 class="card-title text-success mb-3"><i class="bi bi-list-checkme-2"></i>Completed Bulk
-                                Imports</h5>
+                            <h5 class="card-title text-success mb-3">
+                                <i class="bi bi-list-checkme-2"></i>Completed
+                                Bulk Imports
+                            </h5>
                             <div class="table-responsive">
                                 <table class="table table-sm">
                                     <thead>
                                         <tr>
-                                            <th scope="col"><i class="bi bi-clock-history text-success"></i> Datetime
-                                                Completed</th>
-                                            <th scope="col"><i class="bi bi-filetype-xlsx text-success"></i> File Name
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-clock-history text-success"
+                                                ></i>
+                                                Datetime Completed
                                             </th>
-                                            <th scope="col"><i class="bi bi-list-ol text-success"></i> Rows Processed
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-filetype-xlsx text-success"
+                                                ></i>
+                                                File Name
+                                            </th>
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-list-ol text-success"
+                                                ></i>
+                                                Rows Processed
+                                            </th>
+                                            <th scope="col">
+                                                <i
+                                                    class="bi bi-hourglass-bottom text-success"
+                                                ></i>
+                                                Total Time Taken
                                             </th>
-                                            <th scope="col"><i class="bi bi-hourglass-bottom text-success"></i> Total
-                                                Time Taken</th>
                                             <th scope="col">Actions</th>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr v-for="completedImport in completedImports.results" class="">
-                                            <td>{{ new Date(completedImport.datetime_completed).toLocaleString() }}
+                                        <tr
+                                            v-for="completedImport in completedImports.results"
+                                            class=""
+                                        >
+                                            <td>
+                                                {{
+                                                    new Date(
+                                                        completedImport.datetime_completed
+                                                    ).toLocaleString()
+                                                }}
+                                            </td>
+                                            <td
+                                                class="text-truncate"
+                                                style="max-width: 350px"
+                                                :title="
+                                                    completedImport.file_name
+                                                "
+                                            >
+                                                {{ completedImport.file_name }}
+                                            </td>
+                                            <td class="">
+                                                {{
+                                                    completedImport.rows_processed
+                                                }}
+                                            </td>
+                                            <td>
+                                                {{
+                                                    completedImport.total_time_taken_human_readable
+                                                }}
                                             </td>
-                                            <td class="text-truncate" style="max-width: 350px;"
-                                                :title="completedImport.file_name">{{
-                                                    completedImport.file_name }}</td>
-                                            <td class="">{{ completedImport.rows_processed
-                                                }}</td>
-                                            <td>{{ completedImport.total_time_taken_human_readable }}</td>
                                             <td>
-                                                <button class="btn btn-sm btn-primary"
-                                                    @click.prevent="revert(completedImport.id)"><i
-                                                        class="bi bi-arrow-counterclockwise"></i> Revert &amp;
-                                                    Archive</button>
+                                                <button
+                                                    class="btn btn-sm btn-primary"
+                                                    @click.prevent="
+                                                        revert(
+                                                            completedImport.id
+                                                        )
+                                                    "
+                                                >
+                                                    <i
+                                                        class="bi bi-arrow-counterclockwise"
+                                                    ></i>
+                                                    Revert &amp; Archive
+                                                </button>
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
                             </div>
-                            <p v-if="completedImports.count > completedImports.results.length"
-                                class="card-text text-center">
-                                <a @click.prevent="loadMoreCompletedImports" href="">load more</a>
+                            <p
+                                v-if="
+                                    completedImports.count >
+                                    completedImports.results.length
+                                "
+                                class="card-text text-center"
+                            >
+                                <a
+                                    href=""
+                                    @click.prevent="loadMoreCompletedImports"
+                                    >load more</a
+                                >
                             </p>
                         </div>
                     </div>
@@ -288,12 +629,15 @@
 </template>
 
 <script>
-import alert from '@vue-utils/alert.vue'
+import alert from '@vue-utils/alert.vue';
 
-import { api_endpoints } from "@/utils/hooks.js"
+import { api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'OccurrenceReportBulkImport',
+    components: {
+        alert,
+    },
     data() {
         return {
             form: null,
@@ -309,43 +653,72 @@ export default {
             schema_versions: null,
             selected_schema: null,
             selected_schema_version: null,
-            importFileErrors: null
-        }
-    },
-    components: {
-        alert
+            importFileErrors: null,
+        };
     },
     computed: {
         title: function () {
-            return this.$route.query.group_type + ' Occurrence Report Bulk Import';
+            return (
+                this.$route.query.group_type + ' Occurrence Report Bulk Import'
+            );
         },
     },
+    created() {
+        this.fetchSchemas();
+        this.fetchImports();
+        this.fetchCurrentlyRunningImports();
+    },
+    mounted() {
+        this.form = document.getElementById('bulk-import-form');
+        this.timer = setInterval(() => {
+            this.fetchImports();
+        }, 5000);
+        this.currentlyRunningTimer = setInterval(() => {
+            this.fetchCurrentlyRunningImports();
+        }, 1000);
+    },
+    beforeUnmount() {
+        clearInterval(this.timer);
+        clearInterval(this.currentlyRunningTimer);
+    },
     methods: {
         getSchemaVersionText(schema_version) {
             return `Version: ${schema_version.version} - ${schema_version.name ? schema_version.name : 'No Name'}`;
         },
         resetFileField() {
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.selected_schema.id}/`).then(async (response) => {
-                this.selected_schema_version = await response.json();
-                this.$nextTick(() => {
-                    this.importFileErrors = null;
-                    this.form.classList.remove('was-validated');
-                    // Enable all bootstrap 5 popovers
-                    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-                    var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
-                    myDefaultAllowList.table = []
-                    myDefaultAllowList.tr = []
-                    myDefaultAllowList.td = []
-                    myDefaultAllowList.th = []
-                    myDefaultAllowList.thead = []
-                    myDefaultAllowList.tbody = []
-                    popoverTriggerList.map(function (popoverTriggerEl) {
-                        return bootstrap.Popover.getOrCreateInstance(popoverTriggerEl)
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas}${this.selected_schema.id}/`
+            ).then(
+                async (response) => {
+                    this.selected_schema_version = await response.json();
+                    this.$nextTick(() => {
+                        this.importFileErrors = null;
+                        this.form.classList.remove('was-validated');
+                        // Enable all bootstrap 5 popovers
+                        var popoverTriggerList = [].slice.call(
+                            document.querySelectorAll(
+                                '[data-bs-toggle="popover"]'
+                            )
+                        );
+                        var myDefaultAllowList =
+                            bootstrap.Tooltip.Default.allowList;
+                        myDefaultAllowList.table = [];
+                        myDefaultAllowList.tr = [];
+                        myDefaultAllowList.td = [];
+                        myDefaultAllowList.th = [];
+                        myDefaultAllowList.thead = [];
+                        myDefaultAllowList.tbody = [];
+                        popoverTriggerList.map(function (popoverTriggerEl) {
+                            return bootstrap.Popover.getOrCreateInstance(
+                                popoverTriggerEl
+                            );
+                        });
                     });
-                });
-            }, (error) => {
-                console.log(error);
-            });
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         bulkImportFileSelected(event) {
             this.importFileErrors = null;
@@ -355,7 +728,8 @@ export default {
             const file = event.target.files[0];
             const formData = new FormData();
             formData.append('_file', file);
-            const associated_files = this.$refs['bulk-import-associated-files-zip'].files;
+            const associated_files =
+                this.$refs['bulk-import-associated-files-zip'].files;
             if (associated_files.length > 0) {
                 formData.append('_associated_files_zip', associated_files[0]);
             }
@@ -367,39 +741,48 @@ export default {
                 headers: {
                     'Content-Type': 'multipart/form-data',
                 },
-            }).then(async (response) => {
-                const data = await response.json();
-                if (response.status >= 200 && response.status < 300) {
-                    console.log(data);
-                    this.importFileErrors = null;
-                    this.form.classList.remove('was-validated');
-                    this.$refs['bulk-import-file'].value = '';
-                    this.$refs['bulk-import-associated-files-zip'].value = '';
-                    swal.fire({
-                        title: 'Bulk Import Added to Queue',
-                        text: 'The bulk import of occurrence reports has been added to the queue for processing',
-                        icon: 'success',
-                        showCancelButton: false,
-                        confirmButtonText: 'Ok',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
-                        },
-                    });
-                } else {
-                    this.importFileErrors = data;
+            }).then(
+                async (response) => {
+                    const data = await response.json();
+                    if (response.status >= 200 && response.status < 300) {
+                        console.log(data);
+                        this.importFileErrors = null;
+                        this.form.classList.remove('was-validated');
+                        this.$refs['bulk-import-file'].value = '';
+                        this.$refs['bulk-import-associated-files-zip'].value =
+                            '';
+                        swal.fire({
+                            title: 'Bulk Import Added to Queue',
+                            text: 'The bulk import of occurrence reports has been added to the queue for processing',
+                            icon: 'success',
+                            showCancelButton: false,
+                            confirmButtonText: 'Ok',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                    } else {
+                        this.importFileErrors = data;
+                        event.target.value = '';
+                        this.$refs['bulk-import-associated-files-zip'].value =
+                            '';
+                        this.$refs['bulk-import-file'].setCustomValidity(
+                            'Invalid field'
+                        );
+                        this.form.classList.add('was-validated');
+                    }
+                },
+                (error) => {
+                    this.importFileErrors = error.body;
                     event.target.value = '';
                     this.$refs['bulk-import-associated-files-zip'].value = '';
-                    this.$refs['bulk-import-file'].setCustomValidity('Invalid field');
+                    this.$refs['bulk-import-file'].setCustomValidity(
+                        'Invalid field'
+                    );
                     this.form.classList.add('was-validated');
+                    console.log(error.body);
                 }
-            }, (error) => {
-                this.importFileErrors = error.body;
-                event.target.value = '';
-                this.$refs['bulk-import-associated-files-zip'].value = '';
-                this.$refs['bulk-import-file'].setCustomValidity('Invalid field');
-                this.form.classList.add('was-validated');
-                console.log(error.body);
-            });
+            );
         },
         confirmBeginBulkImport() {
             swal.fire({
@@ -411,9 +794,9 @@ export default {
                 cancelButtonText: 'Cancel',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
+                reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
                     this.queueBulkImport();
@@ -421,48 +804,71 @@ export default {
             });
         },
         fetchSchemas() {
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas_by_group_type}?group_type=${this.$route.query.group_type}`).then(async (response) => {
-                this.schema_versions = await response.json();
-            }, (error) => {
-                console.log(error);
-            });
-        },
-        async fetchSchema() {
-
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas_by_group_type}?group_type=${this.$route.query.group_type}`
+            ).then(
+                async (response) => {
+                    this.schema_versions = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
+        async fetchSchema() {},
         fetchQueuedImports() {
-            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=queued&schema__group_type__name=${this.$route.query.group_type}`).then(async (response) => {
-                const data = await response.json();
-                this.queuedImports = data.results;
-            }, (error) => {
-                console.log(error);
-            });
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_imports}?processing_status=queued&schema__group_type__name=${this.$route.query.group_type}`
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.queuedImports = data.results;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         fetchCurrentlyRunningImports() {
-            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=started&schema__group_type__name=${this.$route.query.group_type}`).then(async (response) => {
-                const data = await response.json();
-                this.currentlyRunningImports = data.results;
-            }, (error) => {
-                console.log(error);
-            });
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_imports}?processing_status=started&schema__group_type__name=${this.$route.query.group_type}`
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.currentlyRunningImports = data.results;
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         fetchFailedImports() {
-            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=failed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.failedImportsLimit}&ordering=-datetime_started`).then(async (response) => {
-                this.failedImports = await response.json();
-            }, (error) => {
-                console.log(error);
-            });
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_imports}?processing_status=failed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.failedImportsLimit}&ordering=-datetime_started`
+            ).then(
+                async (response) => {
+                    this.failedImports = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         loadMoreFailedImports() {
             this.failedImportsLimit += 3;
             this.fetchFailedImports();
         },
         fetchCompletedImports() {
-            fetch(`${api_endpoints.occurrence_report_bulk_imports}?processing_status=completed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.completedImportsLimit}&ordering=-datetime_completed`).then(async (response) => {
-                this.completedImports = await response.json();
-            }, (error) => {
-                console.log(error);
-            });
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_imports}?processing_status=completed&schema__group_type__name=${this.$route.query.group_type}&limit=${this.completedImportsLimit}&ordering=-datetime_completed`
+            ).then(
+                async (response) => {
+                    this.completedImports = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         loadMoreCompletedImports() {
             this.completedImportsLimit += 3;
@@ -470,21 +876,29 @@ export default {
         },
         retryBulkImportTask(bulkImportTaskId) {
             // Call the api to retry the bulk import task
-            fetch(`${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/retry/`, {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/retry/`,
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
+            ).then(
+                (response) => {
+                    console.log(response);
+                    // Remove the failed import from the failed imports list
+                    this.failedImports = this.failedImports.filter(
+                        (failedImport) => {
+                            return failedImport.id !== bulkImportTaskId;
+                        }
+                    );
+                    this.fetchQueuedImports();
                 },
-            }).then((response) => {
-                console.log(response);
-                // Remove the failed import from the failed imports list
-                this.failedImports = this.failedImports.filter((failedImport) => {
-                    return failedImport.id !== bulkImportTaskId;
-                });
-                this.fetchQueuedImports();
-            }, (error) => {
-                console.log(error);
-            });
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         revert(bulkImportTaskId) {
             swal.fire({
@@ -496,30 +910,41 @@ export default {
                 cancelButtonText: 'Cancel',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
+                reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
                     // Call the api to revert the bulk import task
-                    fetch(`${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/revert/`, {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
+                    fetch(
+                        `${api_endpoints.occurrence_report_bulk_imports}${bulkImportTaskId}/revert/`,
+                        {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
                         }
-                    }).then((response) => {
-                        console.log(response);
-                        // Remove the completed import from the completed imports list
-                        this.completedImports = this.completedImports.results.filter((completedImport) => {
-                            return completedImport.id !== bulkImportTaskId;
-                        });
-                        this.fetchCompletedImports();
-                    }, (error) => {
-                        console.log(error);
-                    });
+                    ).then(
+                        (response) => {
+                            console.log(response);
+                            // Remove the completed import from the completed imports list
+                            this.completedImports =
+                                this.completedImports.results.filter(
+                                    (completedImport) => {
+                                        return (
+                                            completedImport.id !==
+                                            bulkImportTaskId
+                                        );
+                                    }
+                                );
+                            this.fetchCompletedImports();
+                        },
+                        (error) => {
+                            console.log(error);
+                        }
+                    );
                 }
             });
-
         },
         fetchImports() {
             this.fetchQueuedImports();
@@ -527,62 +952,47 @@ export default {
             this.fetchCompletedImports();
         },
         columnInformation(column) {
-            let html = '<table class="table table-sm table-striped">'
-            html += `<tr><th>Column Name</th><td>${column.xlsx_column_header_name}</td></tr>`
-            html += `<tr><th>Django Model Name</th><td class="text-capitalize">${column.model_name}</td></tr>`
-            html += `<tr><th>Django Field Name</th><td>${column.django_import_field_name}</td></tr>`
-            html += `<tr><th>Django Field Type</th><td>${column.field_type}</td></tr>`
-            html += `<tr><th>Allow Blank</th><td>${column.xlsx_data_validation_allow_blank ? 'Yes' : 'No'}</td></tr>`
+            let html = '<table class="table table-sm table-striped">';
+            html += `<tr><th>Column Name</th><td>${column.xlsx_column_header_name}</td></tr>`;
+            html += `<tr><th>Django Model Name</th><td class="text-capitalize">${column.model_name}</td></tr>`;
+            html += `<tr><th>Django Field Name</th><td>${column.django_import_field_name}</td></tr>`;
+            html += `<tr><th>Django Field Type</th><td>${column.field_type}</td></tr>`;
+            html += `<tr><th>Allow Blank</th><td>${column.xlsx_data_validation_allow_blank ? 'Yes' : 'No'}</td></tr>`;
             if ('textLength' == column.xlsx_validation_type) {
-                html += `<tr><th>Maximum Text Length</th><td>${column.text_length}</td></tr>`
+                html += `<tr><th>Maximum Text Length</th><td>${column.text_length}</td></tr>`;
             }
             if (column.xlsx_validation_type) {
-                html += `<tr><th>Validation Type${column.requires_lookup_field ? ' (Django)' : ` (.xlsx)`}</th><td>${column.xlsx_validation_type}</td></tr>`
+                html += `<tr><th>Validation Type${column.requires_lookup_field ? ' (Django)' : ` (.xlsx)`}</th><td>${column.xlsx_validation_type}</td></tr>`;
             }
             if ('list' == column.xlsx_validation_type) {
                 if (column.choices && column.choices.length > 0) {
                     html += '<tr><th class="align-top">Choices</th><td>';
                     for (let choice of column.choices) {
-                        html += `${choice[1]}<br>`
+                        html += `${choice[1]}<br>`;
                     }
                     html += '</td></tr>';
                 } else {
                     if (column.requires_lookup_field) {
-                        html += `<tr><th>Lookup Field</th><td>${column.django_lookup_field_name}</td></tr>`
-                        if (column.lookup_filters && column.lookup_filters.length > 0) {
-                            html += `<tr><th>Lookup Filters</th><td>`
+                        html += `<tr><th>Lookup Field</th><td>${column.django_lookup_field_name}</td></tr>`;
+                        if (
+                            column.lookup_filters &&
+                            column.lookup_filters.length > 0
+                        ) {
+                            html += `<tr><th>Lookup Filters</th><td>`;
                             for (let lookupFilter of column.lookup_filters) {
-                                html += `<div>Field: ${lookupFilter.filter_field_name}, Filter Type: ${lookupFilter.filter_type}, Value: ${lookupFilter.values[0].filter_value}</div>`
+                                html += `<div>Field: ${lookupFilter.filter_field_name}, Filter Type: ${lookupFilter.filter_type}, Value: ${lookupFilter.values[0].filter_value}</div>`;
                             }
-                            html += '</td></tr>'
+                            html += '</td></tr>';
                         }
-                        html += `<tr><th>Preview Choices (.xlsx)</th><td><a class="ms-0 ps-0" href="/api/occurrence_report_bulk_import_schema_columns/${column.id}/preview_foreign_key_values_xlsx/">Preview ${column.filtered_foreign_key_count} Choices</a></td></tr>`
+                        html += `<tr><th>Preview Choices (.xlsx)</th><td><a class="ms-0 ps-0" href="/api/occurrence_report_bulk_import_schema_columns/${column.id}/preview_foreign_key_values_xlsx/">Preview ${column.filtered_foreign_key_count} Choices</a></td></tr>`;
                     }
                 }
             }
-            html += '</table>'
+            html += '</table>';
             return html;
-        }
-    },
-    created() {
-        this.fetchSchemas();
-        this.fetchImports();
-        this.fetchCurrentlyRunningImports();
-    },
-    mounted() {
-        this.form = document.getElementById('bulk-import-form');
-        this.timer = setInterval(() => {
-            this.fetchImports()
-        }, 5000)
-        this.currentlyRunningTimer = setInterval(() => {
-            this.fetchCurrentlyRunningImports()
-        }, 1000)
+        },
     },
-    beforeUnmount() {
-        clearInterval(this.timer)
-        clearInterval(this.currentlyRunningTimer)
-    }
-}
+};
 </script>
 <style scoped>
 table.custom-table th,
@@ -597,15 +1007,15 @@ div.currently-running {
 
 @keyframes border-pulsate {
     0% {
-        border-color: rgba(34, 111, 187, 1)
+        border-color: rgba(34, 111, 187, 1);
     }
 
     50% {
-        border-color: rgba(34, 111, 187, 0)
+        border-color: rgba(34, 111, 187, 0);
     }
 
     100% {
-        border-color: rgba(34, 111, 187, 1)
+        border-color: rgba(34, 111, 187, 1);
     }
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index c3ef4ebc..875f7d1d 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -1,13 +1,17 @@
 <template>
-    <div class="container gx-4" id="occurence-report-bulk-import-schema">
+    <div id="occurence-report-bulk-import-schema" class="container gx-4">
         <div class="row mb-2">
             <div class="col">
                 <div class="mb-4">
-                    <h2 class="text-capitalize">Occurrence Report Bulk Import Schema</h2>
+                    <h2 class="text-capitalize">
+                        Occurrence Report Bulk Import Schema
+                    </h2>
                 </div>
                 <div class="mb-3">
                     <alert type="primary">
-                        <i class="bi bi-info-circle-fill text-primary fs-4 help-text-popover me-2"></i>
+                        <i
+                            class="bi bi-info-circle-fill text-primary fs-4 help-text-popover me-2"
+                        ></i>
                         Some help text about defining a bulk import schema
                     </alert>
                 </div>
@@ -16,77 +20,162 @@
         <div v-if="schema" class="row mb-3">
             <div class="col">
                 <form>
-                    <fieldset id="main-schema-fieldset" :class="!schema.can_user_edit ? 'disabled' : ''">
+                    <fieldset
+                        id="main-schema-fieldset"
+                        :class="!schema.can_user_edit ? 'disabled' : ''"
+                    >
                         <div class="card">
                             <div class="card-body">
                                 <div class="border-bottom pb-3 mb-3">
                                     <div class="row">
                                         <div class="col-5">
-                                            <h4 class="text-capitalize">{{ schema.group_type_display }} Bulk Import
-                                                Schema <span class="badge bg-secondary ms-3">V{{ schema.version
-                                                    }}</span></h4>
+                                            <h4 class="text-capitalize">
+                                                {{
+                                                    schema.group_type_display
+                                                }}
+                                                Bulk Import Schema
+                                                <span
+                                                    class="badge bg-secondary ms-3"
+                                                    >V{{ schema.version }}</span
+                                                >
+                                            </h4>
                                         </div>
                                         <div class="col-7">
-                                            <div class="input-group float-start me-3" style="width:250px;">
-                                                <span class="input-group-text" id="basic-addon1"><i
-                                                        class="bi bi-tag-fill text-secondary"></i></span>
-                                                <input type="text" class="form-control form-control-sm"
-                                                    placeholder="Add tag" @keydown="addTag" />
+                                            <div
+                                                class="input-group float-start me-3"
+                                                style="width: 250px"
+                                            >
+                                                <span
+                                                    id="basic-addon1"
+                                                    class="input-group-text"
+                                                    ><i
+                                                        class="bi bi-tag-fill text-secondary"
+                                                    ></i
+                                                ></span>
+                                                <input
+type="text" class="form-control form-control-sm"
+                                                    placeholder="Add tag"
+                                                    @keydown="addTag"
+                                                />
                                             </div>
                                             <div class="float-end">
-                                                <button type="button" id="copy-schema" class="btn btn-primary me-2"
-                                                    :disabled="false" @click.prevent="copySchema(schema.id)"><i
-                                                        class="bi bi-copy me-2"></i>
-                                                    Copy</button>
-                                                <button type="button" class="btn btn-primary me-2"
-                                                    :disabled="validatingSchema" @click.prevent="validate()"><span
+                                                <button
+id="copy-schema" type="button" class="btn btn-primary me-2"
+                                                    :disabled="false"
+                                                    @click.prevent="
+                                                        copySchema(schema.id)
+                                                    "
+                                                >
+                                                    <i
+                                                        class="bi bi-copy me-2"
+                                                    ></i>
+                                                    Copy
+                                                </button>
+                                                <button
+type="button" class="btn btn-primary me-2"
+                                                    :disabled="validatingSchema"
+                                                    @click.prevent="validate()"
+                                                >
+                                                    <span
                                                         v-if="validatingSchema"
-                                                        class="spinner-border spinner-border-sm me-1" role="status"
-                                                        aria-hidden="true"></span><i v-else
-                                                        class="bi bi-card-checklist me-1"></i>
-                                                    Validat<template v-if="validatingSchema">ing</template><template
-                                                        v-else>e</template></button>
-                                                <a role="button" class="btn btn-primary"
-                                                    :href="`/api/occurrence_report_bulk_import_schemas/${schema.id}/preview_import_file/?updated=${schema.datetime_updated}`"><i
-                                                        class="bi bi-filetype-xlsx me-1"></i> Preview</a>
-
+                                                        class="spinner-border spinner-border-sm me-1"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span
+                                                    ><i
+                                                        v-else
+                                                        class="bi bi-card-checklist me-1"
+                                                    ></i>
+                                                    Validat<template
+                                                        v-if="validatingSchema"
+                                                        >ing</template
+                                                    ><template v-else
+                                                        >e</template
+                                                    >
+                                                </button>
+                                                <a
+role="button" class="btn btn-primary"
+                                                    :href="`/api/occurrence_report_bulk_import_schemas/${schema.id}/preview_import_file/?updated=${schema.datetime_updated}`"
+                                                    ><i
+                                                        class="bi bi-filetype-xlsx me-1"
+                                                    ></i>
+                                                    Preview</a
+                                                >
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="border-bottom pb-3 mb-2">
                                     <div class="row align-items-center">
-                                        <label for="schema-name" class="col-sm-1 col-form-label">Name</label>
+                                        <label
+                                            for="schema-name"
+                                            class="col-sm-1 col-form-label"
+                                            >Name</label
+                                        >
                                         <div class="col-sm-7">
-                                            <input type="text" class="form-control" id="schema-name" ref="schema-name"
-                                                v-model="schema.name" placeholder="Enter Schema Name" autofocus>
+                                            <input
+id="schema-name" ref="schema-name" v-model="schema.name" type="text"
+                                                class="form-control"
+                                                placeholder="Enter Schema Name"
+                                                autofocus
+                                            />
                                         </div>
                                     </div>
                                 </div>
                                 <div class="pb-0 mb-0">
                                     <div class="row align-items-center">
-                                        <label for="schema-name" class="col-sm-2 col-form-label">Master Schema<i
+                                        <label
+                                            for="schema-name"
+                                            class="col-sm-2 col-form-label"
+                                            >Master Schema<i
+                                                v-if="schema.is_master"
                                                 class="bi bi-lock-fill text-warning ms-2"
-                                                title="This is a Master Schema. When copied by an Occurrence Approver, any columns from the master will be locked."
-                                                v-if="schema.is_master"></i></label>
-                                        <div v-if="schema.can_user_toggle_master" class="col-sm-1">
-                                            <div class="form-check form-switch form-switch-lg"
-                                                style="transform: scale(1.3);">
-                                                <input class="form-check-input" type="checkbox" id="is-master-schema"
-                                                    v-model="schema.is_master" @change="save()">
+                                                title="This is a Master Schema. When copied by an Occurrence Approver, any columns from the master will be locked."></i></label>
+                                        <div
+                                            v-if="schema.can_user_toggle_master"
+                                            class="col-sm-1"
+                                        >
+                                            <div
+                                                class="form-check form-switch form-switch-lg"
+                                                style="transform: scale(1.3)"
+                                            >
+                                                <input
+id="is-master-schema" v-model="schema.is_master" class="form-check-input"
+                                                    type="checkbox"
+                                                    @change="save()"
+                                                />
                                             </div>
                                         </div>
-                                        <label for="schema-tags" class="col-sm-1 col-form-label">Tags</label>
+                                        <label
+                                            for="schema-tags"
+                                            class="col-sm-1 col-form-label"
+                                            >Tags</label
+                                        >
                                         <div class="col-sm-6">
-                                            <template v-if="schema.tags && schema.tags.length > 0">
+                                            <template
+                                                v-if="
+                                                    schema.tags &&
+                                                    schema.tags.length > 0
+                                                "
+                                            >
                                                 <span
-                                                    class="d-inline-flex align-items-center badge bg-info fs-6 my-2 me-2"
-                                                    v-for="(tag, index) in schema.tags" :key="tag">{{ tag }}<i
-                                                        v-if="schema.can_user_edit" class="bi bi-x-circle-fill ps-2"
-                                                        role="button" @click="removeTag(index)"></i></span>
+                                                    v-for="(tag, index) in schema.tags"
+                                                    :key="tag" class="d-inline-flex align-items-center badge bg-info fs-6 my-2 me-2">{{ tag }}<i
+                                                        v-if="
+                                                            schema.can_user_edit
+                                                        "
+                                                        class="bi bi-x-circle-fill ps-2"
+                                                        role="button"
+                                                        @click="
+                                                            removeTag(index)
+                                                        "
+                                                    ></i
+                                                ></span>
                                             </template>
                                             <template v-else>
-                                                <span class="text-muted">No tags added</span>
+                                                <span class="text-muted"
+                                                    >No tags added</span
+                                                >
                                             </template>
                                         </div>
                                     </div>
@@ -107,55 +196,146 @@
                 <div class="card">
                     <div class="card-body">
                         <h5 class="card-title border-bottom pb-3 mb-3">
-                            <i class="bi bi-filetype-xlsx text-success me-3"></i>Columns
+                            <i class="bi bi-filetype-xlsx text-success me-3"></i
+                            >Columns
                             <span class="text-muted ms-2 fs-6">(.xlsx)</span>
                         </h5>
                         <div class="">
-                            <table class="table table-hover table-sm table-schema">
+                            <table
+                                class="table table-hover table-sm table-schema"
+                            >
                                 <tbody class="columns">
-                                    <tr v-for="(column, index) in schema.columns"
-                                        :class="classesForRow(index, column, selectedColumn)"
-                                        @click="selectColumn(column)"
+                                    <tr
+v-for="(column, index) in schema.columns"
+                                        :key="column.id"
+                                        :class="
+                                            classesForRow(
+                                                index,
+                                                column,
+                                                selectedColumn
+                                            )
+                                        "
                                         :style="selectedColumn == column ? '' : `background-color:${stringToRGBAColor(column.model_name)};`"
-                                        role="button" :key="column.id">
-                                        <td style="width:5%" class="text-center fw-bold"
-                                            :class="selectedColumn == column ? 'text-light' : ''">{{ index +
-                                                1 }}
+                                        role="button"
+                                        @click="selectColumn(column)"
+                                    >
+                                        <td
+style="width:5%" class="text-center fw-bold"
+                                            :class="
+                                                selectedColumn == column
+                                                    ? 'text-light'
+                                                    : ''
+                                            "
+                                        >
+                                            {{ index + 1 }}
                                         </td>
-                                        <td class="ps-3 fw-bold" style="font-size:0.9em; width:40%"
-                                            :class="selectedColumn == column ? 'py-1' : ''">
-                                            <span class="text-truncate pe-1"
-                                                :class="selectedColumn == column ? 'text-light' : ''"
-                                                :title="column.xlsx_column_header_name">{{
-                                                    column.xlsx_column_header_name.length < 34 ?
-                                                        column.xlsx_column_header_name :
-                                                        column.xlsx_column_header_name.substr(0, 31) + '...' }}</span>
-                                                    <span class="text-danger" title="Mandatory Column"
-                                                        v-if="column.xlsx_data_validation_allow_blank == false">*</span>
-                                                    <small class="d-block text-capitalize mb-0"
-                                                        :class="selectedColumn == column ? 'text-light' : 'text-muted'">
-                                                        {{ column.model_name }}
-                                                    </small>
+                                        <td
+class="ps-3 fw-bold" style="font-size:0.9em; width:40%"
+                                            :class="
+                                                selectedColumn == column
+                                                    ? 'py-1'
+                                                    : ''
+                                            "
+                                        >
+                                            <span
+                                                class="text-truncate pe-1"
+                                                :class="
+                                                    selectedColumn == column
+                                                        ? 'text-light'
+                                                        : ''
+                                                "
+                                                :title="
+                                                    column.xlsx_column_header_name
+                                                "
+                                                >{{
+                                                    column
+                                                        .xlsx_column_header_name
+                                                        .length < 34
+                                                        ? column.xlsx_column_header_name
+                                                        : column.xlsx_column_header_name.substr(
+                                                              0,
+                                                              31
+                                                          ) + '...'
+                                                }}</span
+                                            >
+                                            <span
+                                                v-if="column.xlsx_data_validation_allow_blank == false"
+                                                class="text-danger"
+                                                        title="Mandatory Column">*</span>
+                                            >
+                                            <small
+                                                class="d-block text-capitalize mb-0"
+                                                :class="
+                                                    selectedColumn == column
+                                                        ? 'text-light'
+                                                        : 'text-muted'
+                                                "
+                                            >
+                                                {{ column.model_name }}
+                                            </small>
                                         </td>
-                                        <td class="text-center"
-                                            :class="selectedColumn == column ? 'text-light' : 'text-muted'"
-                                            style="width:10%">
-                                            <i class="bi bi-eye-fill " role="button"
-                                                :class="schema.can_user_edit && column.is_editable_by_user && (index == 0 || schema.columns.length <= 2 || !column.id) ? 'me-4' : 'me-2'"></i>
-                                            <i v-if="schema.can_user_edit && column.is_editable_by_user && (!index == 0 && schema.columns.length > 2 && column.id)"
-                                                class="bi bi-arrow-down-up" role="button" style="cursor:move;"></i>
-                                            <i v-if="column.id && !column.is_editable_by_user" class="bi bi-lock-fill"
-                                                :title="`Column ${column.xlsx_column_header_name} is locked as it was copied from a master schema`"></i>
+                                        <td
+                                            class="text-center"
+                                            :class="
+                                                selectedColumn == column
+                                                    ? 'text-light'
+                                                    : 'text-muted'
+                                            "
+                                            style="width: 10%"
+                                        >
+                                            <i
+class="bi bi-eye-fill " role="button"
+                                                :class="
+                                                    schema.can_user_edit &&
+                                                    column.is_editable_by_user &&
+                                                    (index == 0 ||
+                                                        schema.columns.length <=
+                                                            2 ||
+                                                        !column.id)
+                                                        ? 'me-4'
+                                                        : 'me-2'
+                                                "
+                                            ></i>
+                                            <i
+v-if="schema.can_user_edit && column.is_editable_by_user && (!index == 0 && schema.columns.length > 2 && column.id)"
+                                                class="bi bi-arrow-down-up"
+                                                role="button"
+                                                style="cursor: move"
+                                            ></i>
+                                            <i
+v-if="column.id && !column.is_editable_by_user" class="bi bi-lock-fill"
+                                                :title="`Column ${column.xlsx_column_header_name} is locked as it was copied from a master schema`"
+                                            ></i>
                                         </td>
                                     </tr>
-                                    <tr v-if="schema.can_user_edit" class="border-bottom-0"
-                                        :class="schema.columns.length == 0 ? 'border-top-0' : ''"
-                                        @click.prevent="addNewColumn" role="button">
-                                        <th class="border-0 ps-3 pt-2 text-muted" colspan="2">Add <template
-                                                v-if="schema.columns.length == 0">a</template><template
-                                                v-else>Another</template> Column</th>
-                                        <td class="border-0 text-muted text-center pt-2"><i
-                                                class="bi bi-plus-circle-fill text-success" role="button"></i>
+                                    <tr
+v-if="schema.can_user_edit" class="border-bottom-0"
+                                        :class="
+                                            schema.columns.length == 0
+                                                ? 'border-top-0'
+                                                : ''
+                                        "
+                                        role="button" @click.prevent="addNewColumn">
+                                        <th
+                                            class="border-0 ps-3 pt-2 text-muted"
+                                            colspan="2"
+                                        >
+                                            Add
+                                            <template
+                                                v-if="
+                                                    schema.columns.length == 0
+                                                "
+                                                >a</template
+                                            ><template v-else>Another</template>
+                                            Column
+                                        </th>
+                                        <td
+                                            class="border-0 text-muted text-center pt-2"
+                                        >
+                                            <i
+                                                class="bi bi-plus-circle-fill text-success"
+                                                role="button"
+                                            ></i>
                                         </td>
                                     </tr>
                                 </tbody>
@@ -165,279 +345,616 @@
                 </div>
             </div>
             <div class="col-8">
-                <div v-if="addEditMode && selectedColumn" class="card sticky-top">
+                <div
+                    v-if="addEditMode && selectedColumn"
+                    class="card sticky-top"
+                >
                     <div class="card-body">
                         <h5 class="card-title border-bottom pb-3 mb-3">
                             Selected Column Details
                         </h5>
-                        <form @submit.prevent="" class="needs-validation" novalidate>
-                            <fieldset :disabled="!schema.can_user_edit || !selectedColumn.is_editable_by_user">
+                        <form
+                            class="needs-validation"
+                            novalidate
+                            @submit.prevent=""
+                        >
+                            <fieldset
+                                :disabled="
+                                    !schema.can_user_edit ||
+                                    !selectedColumn.is_editable_by_user
+                                "
+                            >
                                 <div class="row d-flex align-items-center mb-2">
-                                    <label for="inputEmail3" class="col-sm-4 col-form-label">Django Import
-                                        Model</label>
-                                    <div class="col-sm-8 ">
-                                        <select class="form-select form-select-sm" aria-label="Django Import Model"
-                                            ref="django-import-model"
-                                            v-model="selectedColumn.django_import_content_type"
-                                            :disabled="selectedColumn.order == 0"
-                                            @change="selectDjangoImportContentType">
-                                            <option value="">Select Django Import Model
+                                    <label
+                                        for="inputEmail3"
+                                        class="col-sm-4 col-form-label"
+                                        >Django Import Model</label
+                                    >
+                                    <div class="col-sm-8">
+                                        <select
+ref="django-import-model" v-model="
+                                                selectedColumn.django_import_content_type
+                                            "
+                                            class="form-select form-select-sm"
+                                            aria-label="Django Import Model"
+                                            :disabled="
+                                                selectedColumn.order == 0
+                                            "
+                                            @change="
+                                                selectDjangoImportContentType
+                                            "
+                                        >
+                                            <option value="">
+                                                Select Django Import Model
                                             </option>
                                             <template v-if="selectedColumn.id">
-                                                <option v-for="djangoContentType in djangoContentTypes"
-                                                    :value="djangoContentType.id">{{
-                                                        djangoContentType.model_verbose_name ?
-                                                            djangoContentType.model_verbose_name : djangoContentType.model }}
+                                                <option
+                                                    v-for="djangoContentType in djangoContentTypes"
+                                                    :value="
+                                                        djangoContentType.id
+                                                    "
+                                                >
+                                                    {{
+                                                        djangoContentType.model_verbose_name
+                                                            ? djangoContentType.model_verbose_name
+                                                            : djangoContentType.model
+                                                    }}
                                                 </option>
                                             </template>
                                             <template v-else>
-                                                <option v-for="djangoContentType in djangoContentTypesFiltered"
-                                                    :value="djangoContentType.id">{{
-                                                        djangoContentType.model_verbose_name ?
-                                                            djangoContentType.model_verbose_name : djangoContentType.model }}
+                                                <option
+                                                    v-for="djangoContentType in djangoContentTypesFiltered"
+                                                    :value="
+                                                        djangoContentType.id
+                                                    "
+                                                >
+                                                    {{
+                                                        djangoContentType.model_verbose_name
+                                                            ? djangoContentType.model_verbose_name
+                                                            : djangoContentType.model
+                                                    }}
                                                 </option>
                                             </template>
                                         </select>
                                     </div>
                                 </div>
-                                <div v-if="selectedContentType && !selectedColumn?.id && !showDjangoImportFieldSelect"
-                                    class="row d-flex align-items-start mb-2">
-                                    <label for="inputEmail3" class="col-sm-4 col-form-label">Operation</label>
-                                    <div class="col-sm-8 ">
-                                        <button type="button" class="btn btn-primary btn-sm d-block mb-2"
-                                            @click.prevent="addAllColumns(false)"><i
-                                                class="bi bi-plus-circle-fill me-1"></i>
-                                            Add All Fields</button>
-                                        <button type="button" class="btn btn-primary btn-sm me-2 d-block mb-2"
-                                            @click.prevent="addAllColumns(true)"><i
-                                                class="bi bi-plus-circle-fill me-1"></i>
-                                            Add All Mandatory Fields</button>
-                                        <button type="button" class="btn btn-primary btn-sm d-block"
-                                            @click.prevent="addSingleColumn()"><i
-                                                class="bi bi-plus-circle-fill me-1"></i>
-                                            Add a Single Field</button>
+                                <div
+v-if="selectedContentType && !selectedColumn?.id && !showDjangoImportFieldSelect"
+                                    class="row d-flex align-items-start mb-2"
+                                >
+                                    <label
+                                        for="inputEmail3"
+                                        class="col-sm-4 col-form-label"
+                                        >Operation</label
+                                    >
+                                    <div class="col-sm-8">
+                                        <button
+type="button" class="btn btn-primary btn-sm d-block mb-2"
+                                            @click.prevent="
+                                                addAllColumns(false)
+                                            "
+                                        >
+                                            <i
+                                                class="bi bi-plus-circle-fill me-1"
+                                            ></i>
+                                            Add All Fields
+                                        </button>
+                                        <button
+type="button" class="btn btn-primary btn-sm me-2 d-block mb-2"
+                                            @click.prevent="addAllColumns(true)"
+                                        >
+                                            <i
+                                                class="bi bi-plus-circle-fill me-1"
+                                            ></i>
+                                            Add All Mandatory Fields
+                                        </button>
+                                        <button
+type="button" class="btn btn-primary btn-sm d-block"
+                                            @click.prevent="addSingleColumn()"
+                                        >
+                                            <i
+                                                class="bi bi-plus-circle-fill me-1"
+                                            ></i>
+                                            Add a Single Field
+                                        </button>
                                     </div>
                                 </div>
-                                <div v-if="showDjangoImportFieldSelect" class="row d-flex align-items-center mb-2">
-                                    <label for="inputEmail3" class="col-sm-4 col-form-label">Django Import
-                                        Field</label>
-                                    <div class="col-sm-8 ">
-                                        <select class="form-select form-select-sm" aria-label="Django Import Field"
-                                            ref="django-import-field" v-model="selectedColumn.django_import_field_name"
-                                            :disabled="selectedColumn.order == 0" @change="selectDjangoImportField">
-                                            <option value="">Select Django Import Field
+                                <div
+                                    v-if="showDjangoImportFieldSelect"
+                                    class="row d-flex align-items-center mb-2"
+                                >
+                                    <label
+                                        for="inputEmail3"
+                                        class="col-sm-4 col-form-label"
+                                        >Django Import Field</label
+                                    >
+                                    <div class="col-sm-8">
+                                        <select
+ref="django-import-field" v-model="selectedColumn.django_import_field_name"
+                                            class="form-select form-select-sm" aria-label="Django Import Field"
+                                            :disabled="
+                                                selectedColumn.order == 0
+                                            "
+                                            @change="selectDjangoImportField"
+                                        >
+                                            <option value="">
+                                                Select Django Import Field
                                             </option>
                                             <template v-if="selectedColumn.id">
-                                                <option v-for="modelField in selectedContentType.model_fields"
-                                                    :value="modelField.name">
+                                                <option
+                                                    v-for="modelField in selectedContentType.model_fields"
+                                                    :value="modelField.name"
+                                                >
                                                     {{
-                                                        modelField.display_name }} ({{
-                                                        modelField.type }}) <template
-                                                        v-if="!modelField.allow_null">*</template>
+                                                        modelField.display_name
+                                                    }}
+                                                    ({{ modelField.type }})
+                                                    <template
+                                                        v-if="
+                                                            !modelField.allow_null
+                                                        "
+                                                        >*</template
+                                                    >
                                                 </option>
                                             </template>
                                             <template v-else>
-                                                <option v-for="modelField in djangoImportFieldsFiltered"
-                                                    :value="modelField.name">
+                                                <option
+                                                    v-for="modelField in djangoImportFieldsFiltered"
+                                                    :value="modelField.name"
+                                                >
                                                     {{
-                                                        modelField.display_name }} ({{
-                                                        modelField.type }}) <template
-                                                        v-if="!modelField.allow_null">*</template>
+                                                        modelField.display_name
+                                                    }}
+                                                    ({{ modelField.type }})
+                                                    <template
+                                                        v-if="
+                                                            !modelField.allow_null
+                                                        "
+                                                        >*</template
+                                                    >
                                                 </option>
                                             </template>
                                         </select>
                                     </div>
                                 </div>
                                 <template v-if="selectedField">
-                                    <div class="row d-flex align-items-center mb-2">
-                                        <label for="column-name" class="col-sm-4 col-form-label">Column
-                                            Name</label>
-                                        <div class="col-sm-8 ">
-                                            <div class="input-group input-group-sm">
-                                                <input type="text" class="form-control" name="column-name"
-                                                    id="column-name" ref="column-name"
-                                                    v-model="selectedColumn.xlsx_column_header_name" />
+                                    <div
+                                        class="row d-flex align-items-center mb-2"
+                                    >
+                                        <label
+                                            for="column-name"
+                                            class="col-sm-4 col-form-label"
+                                            >Column Name</label
+                                        >
+                                        <div class="col-sm-8">
+                                            <div
+                                                class="input-group input-group-sm"
+                                            >
+                                                <input
+id="column-name" ref="column-name" v-model="
+                                                        selectedColumn.xlsx_column_header_name
+                                                    "
+                                                    type="text" class="form-control"
+                                                    name="column-name"
+                                                />
                                             </div>
                                         </div>
                                     </div>
-                                    <div v-if="selectedField.type == 'IntegerField' && this.defaultValueChoices && this.defaultValueChoices.length > 0"
-                                        class="row d-flex align-items-center mb-2">
-                                        <label for="default-value" class="col-sm-4 col-form-label">Default
-                                            Value</label>
-                                        <div class="col-sm-8 ">
-                                            <div class="input-group input-group-sm">
-                                                <select class="form-select" v-model="selectedColumn.default_value"
-                                                    id="default-value">
-                                                    <option :value="null">No Default
+                                    <div
+v-if="selectedField.type == 'IntegerField' && defaultValueChoices && defaultValueChoices.length > 0"
+                                        class="row d-flex align-items-center mb-2"
+                                    >
+                                        <label
+                                            for="default-value"
+                                            class="col-sm-4 col-form-label"
+                                            >Default Value</label
+                                        >
+                                        <div class="col-sm-8">
+                                            <div
+                                                class="input-group input-group-sm"
+                                            >
+                                                <select
+id="default-value" v-model="selectedColumn.default_value"
+                                                    class="form-select"
+                                                >
+                                                    <option :value="null">
+                                                        No Default
                                                     </option>
-                                                    <option v-for="choice in defaultValueChoices" :value="choice[0]">{{
-                                                        choice[1] }}
+                                                    <option
+                                                        v-for="choice in defaultValueChoices"
+                                                        :value="choice[0]"
+                                                    >
+                                                        {{ choice[1] }}
                                                     </option>
                                                 </select>
                                             </div>
                                         </div>
                                     </div>
-                                    <div v-if="selectedField.type == 'IntegerField' && !selectedColumn.default_value"
-                                        class="row d-flex align-items-center mb-2">
-                                        <label for="default-value" class="col-sm-4 col-form-label">Ledger Email User
-                                            Column?<i id="is-email-user-column-help-text"
+                                    <div
+v-if="selectedField.type == 'IntegerField' && !selectedColumn.default_value"
+                                        class="row d-flex align-items-center mb-2"
+                                    >
+                                        <label
+                                            for="default-value"
+                                            class="col-sm-4 col-form-label"
+                                            >Ledger Email User Column?<i
+                                                id="is-email-user-column-help-text"
                                                 class="bi bi-info-circle-fill text-primary ms-2"
-                                                data-bs-toggle="popover" data-bs-trigger="hover focus"
+                                                data-bs-toggle="popover"
+                                                data-bs-trigger="hover focus"
                                                 data-bs-content="If set to 'Yes' the column value will be validated as an email address during the import and  the email will be used to lookup the user id in ledger"
-                                                data-bs-placement="top"></i></label>
-                                        <div class="col-sm-8 ">
-                                            <div class="input-group input-group-sm">
-                                                <select class="form-select w-50" aria-label="Allow Blank"
-                                                    v-model="selectedColumn.is_emailuser_column">
-                                                    <option :value="true">Yes</option>
-                                                    <option :value="false">No</option>
+                                                data-bs-placement="top"
+                                            ></i
+                                        ></label>
+                                        <div class="col-sm-8">
+                                            <div
+                                                class="input-group input-group-sm"
+                                            >
+                                                <select
+v-model="selectedColumn.is_emailuser_column" class="form-select w-50"
+                                                    aria-label="Allow Blank">
+                                                    <option :value="true">
+                                                        Yes
+                                                    </option>
+                                                    <option :value="false">
+                                                        No
+                                                    </option>
                                                 </select>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="row d-flex align-items-center mb-2">
-                                        <label for="inputEmail3" class="col-sm-4 col-form-label">Django
-                                            Field
-                                            Type</label>
-                                        <div class="col-sm-8 ">
-                                            <div class="input-group input-group-sm">
-                                                <input type="text" class="form-control" name="" id="" placeholder=""
-                                                    disabled :value="selectedField.type" />
+                                    <div
+                                        class="row d-flex align-items-center mb-2"
+                                    >
+                                        <label
+                                            for="inputEmail3"
+                                            class="col-sm-4 col-form-label"
+                                            >Django Field Type</label
+                                        >
+                                        <div class="col-sm-8">
+                                            <div
+                                                class="input-group input-group-sm"
+                                            >
+                                                <input
+id="" type="text" class="form-control" name="" placeholder=""
+                                                    disabled
+                                                    :value="selectedField.type"
+                                                />
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="row d-flex align-items-center mb-2">
-                                        <label for="xlsx-validation-type" class="col-sm-4 col-form-label">Excel
-                                            Validation
-                                            Type</label>
-                                        <div class="col-sm-8 ">
-                                            <div class="input-group input-group-sm">
-                                                <input type="text" class="form-control form-control-sm"
-                                                    name="xlsx-validation-type" id="xlsx-validation-type" disabled
-                                                    :value="excelValidationType()" />
-                                                <template v-if="selectedField.xlsx_validation_type == 'date'">
-                                                    <span class="input-group-text" id="datetime-format">Format:</span>
-                                                    <span class="input-group-text" id="datetime-format-mask">DD/MM/YYYY
-                                                        HH:MM:SS</span>
+                                    <div
+                                        class="row d-flex align-items-center mb-2"
+                                    >
+                                        <label
+                                            for="xlsx-validation-type"
+                                            class="col-sm-4 col-form-label"
+                                            >Excel Validation Type</label
+                                        >
+                                        <div class="col-sm-8">
+                                            <div
+                                                class="input-group input-group-sm"
+                                            >
+                                                <input
+id="xlsx-validation-type" type="text"
+                                                    class="form-control form-control-sm" name="xlsx-validation-type" disabled
+                                                    :value="
+                                                        excelValidationType()
+                                                    "
+                                                />
+                                                <template
+                                                    v-if="
+                                                        selectedField.xlsx_validation_type ==
+                                                        'date'
+                                                    "
+                                                >
+                                                    <span
+                                                        id="datetime-format"
+                                                        class="input-group-text"
+                                                        >Format:</span
+                                                    >
+                                                    <span
+                                                        id="datetime-format-mask"
+                                                        class="input-group-text"
+                                                        >DD/MM/YYYY
+                                                        HH:MM:SS</span
+                                                    >
                                                 </template>
-                                                <template v-if="selectedField.xlsx_validation_type == 'list'">
-                                                    <button type="button"
+                                                <template
+                                                    v-if="
+                                                        selectedField.xlsx_validation_type ==
+                                                        'list'
+                                                    "
+                                                >
+                                                    <button
                                                         v-if="selectedField.choices && selectedField.choices.length > 0"
-                                                        class="btn btn-primary" data-bs-toggle="modal"
-                                                        data-bs-target="#preview-choices"><i class="bi bi-search"
-                                                            role="button"></i> Preview
-                                                        List Choices</button>
+                                                        type="button"
+                                                        class="btn btn-primary"
+                                                        data-bs-toggle="modal"
+                                                        data-bs-target="#preview-choices"
+                                                    >
+                                                        <i
+                                                            class="bi bi-search"
+                                                            role="button"
+                                                        ></i>
+                                                        Preview List Choices
+                                                    </button>
                                                 </template>
                                             </div>
                                         </div>
                                     </div>
-                                    <div v-if="selectedField.xlsx_validation_type" class="row mb-2">
-                                        <label for="inputEmail3" class="col-sm-4 col-form-label">Excel Data
-                                            Validations<i id="pre-import-validation-help-text"
+                                    <div
+                                        v-if="
+                                            selectedField.xlsx_validation_type
+                                        "
+                                        class="row mb-2"
+                                    >
+                                        <label
+                                            for="inputEmail3"
+                                            class="col-sm-4 col-form-label"
+                                            >Excel Data Validations<i
+                                                id="pre-import-validation-help-text"
                                                 class="bi bi-info-circle-fill text-primary ms-2"
-                                                data-bs-toggle="popover" data-bs-trigger="hover focus"
+                                                data-bs-toggle="popover"
+                                                data-bs-trigger="hover focus"
                                                 data-bs-content="Basic validations embedded in the .xlsx file"
-                                                data-bs-placement="top"></i></label>
+                                                data-bs-placement="top"
+                                            ></i
+                                        ></label>
                                         <div class="col-sm-4">
-                                            <div class="input-group input-group-sm mb-2">
-                                                <span class="input-group-text" id="allow-blank-label">Allow
-                                                    Blank</span>
-                                                <select class="form-select w-50" aria-label="Allow Blank"
-                                                    :disabled="!selectedField.allow_null && selectedField.name != 'occurrence_number'"
-                                                    v-model="selectedColumn.xlsx_data_validation_allow_blank">
-                                                    <option :value="true">Yes</option>
-                                                    <option :value="false">No</option>
+                                            <div
+                                                class="input-group input-group-sm mb-2"
+                                            >
+                                                <span
+                                                    id="allow-blank-label"
+                                                    class="input-group-text"
+                                                    >Allow Blank</span
+                                                >
+                                                <select
+v-model="selectedColumn.xlsx_data_validation_allow_blank" class="form-select w-50"
+                                                    aria-label="Allow Blank"
+                                                    :disabled="!selectedField.allow_null && selectedField.name != 'occurrence_number'">
+                                                    <option :value="true">
+                                                        Yes
+                                                    </option>
+                                                    <option :value="false">
+                                                        No
+                                                    </option>
                                                 </select>
                                             </div>
-                                            <div class="input-group input-group-sm mb-2">
-                                                <span class="input-group-text" id="max-length">Max
-                                                    Length</span>
-                                                <input type="text" class="form-control" aria-label="Max Length"
+                                            <div
+                                                class="input-group input-group-sm mb-2"
+                                            >
+                                                <span
+                                                    id="max-length"
+                                                    class="input-group-text"
+                                                    >Max Length</span
+                                                >
+                                                <input
+type="text" class="form-control" aria-label="Max Length"
                                                     aria-describedby="max-length"
-                                                    :value="selectedField.max_length ? selectedField.max_length : 'N/A'"
-                                                    disabled>
+                                                    :value="
+                                                        selectedField.max_length
+                                                            ? selectedField.max_length
+                                                            : 'N/A'
+                                                    "
+                                                    disabled
+                                                />
                                             </div>
                                         </div>
                                     </div>
                                 </template>
-                                <div v-if="showDjangoLookupField" class="row mb-2">
-                                    <label for="inputEmail3" class="col-sm-4 col-form-label">Django
-                                        Lookup Field<i id="django-lookup-field-help-text"
-                                            class="bi bi-info-circle-fill text-primary ms-2" data-bs-toggle="popover"
+                                <div
+                                    v-if="showDjangoLookupField"
+                                    class="row mb-2"
+                                >
+                                    <label
+                                        for="inputEmail3"
+                                        class="col-sm-4 col-form-label"
+                                        >Django Lookup Field<i
+                                            id="django-lookup-field-help-text"
+                                            class="bi bi-info-circle-fill text-primary ms-2"
+                                            data-bs-toggle="popover"
                                             data-bs-trigger="hover focus"
                                             :data-bs-content="`Which field to use when looking up the ${selectedField.display_name} record. <br>(Advanced: You can use a custom field name if it's not in the list and it may span model relationships e.g. 'taxonomy__scientific_name' )`"
-                                            data-bs-placement="top" :data-bs-html="true"></i></label>
+                                            data-bs-placement="top"
+                                            :data-bs-html="true"
+                                        ></i
+                                    ></label>
                                     <div class="col-sm-8">
                                         <fieldset class="border p-2 mb-2">
-                                            <div class="input-group input-group-sm mb-1">
-                                                <span class="input-group-text w-25" id="lookup-field">
-                                                    Lookup Field</span>
-                                                <template v-if="!customLookupField">
-                                                    <select class="form-select" aria-label="Lookup Field"
-                                                        v-model="selectedColumn.django_lookup_field_name"
-                                                        @change="selectLookupField()">
+                                            <div
+                                                class="input-group input-group-sm mb-1"
+                                            >
+                                                <span
+                                                    id="lookup-field"
+                                                    class="input-group-text w-25"
+                                                >
+                                                    Lookup Field</span
+                                                >
+                                                <template
+                                                    v-if="!customLookupField"
+                                                >
+                                                    <select
+v-model="selectedColumn.django_lookup_field_name" class="form-select"
+                                                        aria-label="Lookup Field"
+                                                        @change="
+                                                            selectLookupField()
+                                                        "
+                                                    >
                                                         <option
                                                             v-for="lookupField in selectedField.lookup_field_options"
-                                                            :value="lookupField">{{
-                                                                lookupField }}</option>
-                                                        <option value="custom">custom</option>
+                                                            :value="lookupField"
+                                                        >
+                                                            {{ lookupField }}
+                                                        </option>
+                                                        <option value="custom">
+                                                            custom
+                                                        </option>
                                                     </select>
-                                                    <a v-if="selectedColumn.id" class="btn btn-primary"
-                                                        :href="`/api/occurrence_report_bulk_import_schema_columns/${selectedColumn.id}/preview_foreign_key_values_xlsx/`"><i
-                                                            class="bi bi-filetype-xlsx" role="button"></i> Preview
-                                                        Choices</a>
+                                                    <a
+v-if="selectedColumn.id" class="btn btn-primary"
+                                                        :href="`/api/occurrence_report_bulk_import_schema_columns/${selectedColumn.id}/preview_foreign_key_values_xlsx/`"
+                                                        ><i
+                                                            class="bi bi-filetype-xlsx"
+                                                            role="button"
+                                                        ></i>
+                                                        Preview Choices</a
+                                                    >
                                                 </template>
-                                                <select v-else ref="lookup-field" class="form-select"
-                                                    aria-label="Lookup Field" @change="selectLookupField()">
-                                                    <option v-for="lookupField in selectedField.lookup_field_options"
-                                                        :value="lookupField">{{
-                                                            lookupField }}</option>
-                                                    <option value="custom" selected>custom</option>
+                                                <select
+v-else ref="lookup-field" class="form-select"
+                                                    aria-label="Lookup Field"
+                                                    @change="
+                                                        selectLookupField()
+                                                    "
+                                                >
+                                                    <option
+                                                        v-for="lookupField in selectedField.lookup_field_options"
+                                                        :value="lookupField"
+                                                    >
+                                                        {{ lookupField }}
+                                                    </option>
+                                                    <option
+                                                        value="custom"
+                                                        selected
+                                                    >
+                                                        custom
+                                                    </option>
                                                 </select>
                                             </div>
-                                            <div v-if="customLookupField" class="input-group input-group-sm mb-2 mt-2">
-                                                <input ref="custom-lookup-field" class="form-control form-control-sm"
-                                                    type="text" placeholder="Enter Custom Lookup Field"
-                                                    aria-label="Custom Lookup Field"
-                                                    v-model="selectedColumn.django_lookup_field_name">
-                                                <a v-if="selectedColumn.id" class="btn btn-primary"
-                                                    :href="`/api/occurrence_report_bulk_import_schema_columns/${selectedColumn.id}/preview_foreign_key_values_xlsx/`"><i
-                                                        class="bi bi-filetype-xlsx" role="button"></i> Preview {{
-                                                            selectedColumn.filtered_foreign_key_count }} Choices</a>
+                                            <div
+                                                v-if="customLookupField"
+                                                class="input-group input-group-sm mb-2 mt-2"
+                                            >
+                                                <input
+ref="custom-lookup-field" v-model="selectedColumn.django_lookup_field_name"
+                                                    class="form-control form-control-sm"
+                                                    type="text"
+                                                    placeholder="Enter Custom Lookup Field"
+                                                    aria-label="Custom Lookup Field">
+                                                <a
+v-if="selectedColumn.id" class="btn btn-primary"
+                                                    :href="`/api/occurrence_report_bulk_import_schema_columns/${selectedColumn.id}/preview_foreign_key_values_xlsx/`"
+                                                    ><i
+                                                        class="bi bi-filetype-xlsx"
+                                                        role="button"
+                                                    ></i>
+                                                    Preview
+                                                    {{
+                                                        selectedColumn.filtered_foreign_key_count
+                                                    }}
+                                                    Choices</a
+                                                >
                                             </div>
                                             <div>
-                                                <button type="button" class="btn btn-primary btn-sm mb-2"
-                                                    @click.prevent="addLookupFilter()">
-                                                    <i class="bi bi-plus-circle-fill me-2"></i>Add Lookup
-                                                    Filter</button>
+                                                <button
+type="button" class="btn btn-primary btn-sm mb-2"
+                                                    @click.prevent="
+                                                        addLookupFilter()
+                                                    "
+                                                >
+                                                    <i
+                                                        class="bi bi-plus-circle-fill me-2"
+                                                    ></i
+                                                    >Add Lookup Filter
+                                                </button>
                                                 <template
-                                                    v-if="selectedColumn.lookup_filters && selectedColumn.lookup_filters.length > 0">
-                                                    <div v-for="(lookupFilter, index) in selectedColumn.lookup_filters"
-                                                        class="input-group input-group-sm mb-2">
-                                                        <select class="form-select"
+                                                    v-if="
+                                                        selectedColumn.lookup_filters &&
+                                                        selectedColumn
+                                                            .lookup_filters
+                                                            .length > 0
+                                                    "
+                                                >
+                                                    <div
+v-for="(lookupFilter, index) in selectedColumn.lookup_filters"
+                                                        class="input-group input-group-sm mb-2"
+                                                    >
+                                                        <select
                                                             v-model="selectedColumn.lookup_filters[index].filter_field_name"
-                                                            @change="lookupFilterFieldChanged(selectedColumn.lookup_filters[index])">
-                                                            <option value="" disabled>Select Field</option>
-                                                            <option v-for="field in selectedField.filter_field_options"
-                                                                :value="field">{{ field }}</option>
+                                                            class="form-select"
+                                                            @change="
+                                                                lookupFilterFieldChanged(
+                                                                    selectedColumn
+                                                                        .lookup_filters[
+                                                                        index
+                                                                    ]
+                                                                )
+                                                            "
+                                                        >
+                                                            <option
+                                                                value=""
+                                                                disabled
+                                                            >
+                                                                Select Field
+                                                            </option>
+                                                            <option
+                                                                v-for="field in selectedField.filter_field_options"
+                                                                :value="field"
+                                                            >
+                                                                {{ field }}
+                                                            </option>
                                                         </select>
-                                                        <select class="form-select"
-                                                            v-model="selectedColumn.lookup_filters[index].filter_type">
-                                                            <option v-for="lookupFilter in lookupSchematypes"
-                                                                :value="lookupFilter[0]">{{ lookupFilter[1] }}</option>
+                                                        <select
+                                                            v-model="selectedColumn.lookup_filters[index].filter_type"
+                                                            class="form-select">
+                                                            <option
+                                                                v-for="lookupFilter in lookupSchematypes"
+                                                                :value="
+                                                                    lookupFilter[0]
+                                                                "
+                                                            >
+                                                                {{
+                                                                    lookupFilter[1]
+                                                                }}
+                                                            </option>
                                                         </select>
                                                         <input
-                                                            v-if="selectedColumn.lookup_filters[index].values && selectedColumn.lookup_filters[index].values.length > 0"
-                                                            type="text" class="form-control" placeholder="Enter Value"
-                                                            aria-label="Enter Value"
+                                                            v-if="
+                                                                selectedColumn
+                                                                    .lookup_filters[
+                                                                    index
+                                                                ].values &&
+                                                                selectedColumn
+                                                                    .lookup_filters[
+                                                                    index
+                                                                ].values
+                                                                    .length > 0
+                                                            "
                                                             v-model="selectedColumn.lookup_filters[index].values[0].filter_value"
-                                                            @change="lookupFilterValueChanged($event, selectedColumn.lookup_filters[index])">
-                                                        <input v-else type="text" class="form-control"
-                                                            placeholder="Select Field First" disabled>
+                                                            type="text"
+                                                            class="form-control"
+                                                            placeholder="Enter Value"
+                                                            aria-label="Enter Value"
+                                                            @change="
+                                                                lookupFilterValueChanged(
+                                                                    $event,
+                                                                    selectedColumn
+                                                                        .lookup_filters[
+                                                                        index
+                                                                    ]
+                                                                )
+                                                            "
+                                                        />
+                                                        <input
+v-else type="text" class="form-control"
+                                                            placeholder="Select Field First"
+                                                            disabled
+                                                        />
 
-                                                        <button type="button" class="btn btn-danger"
-                                                            @click.prevent="removeLookupFilter(selectedColumn, index)">
-                                                            <i class="bi bi-x-circle-fill"></i>
+                                                        <button
+type="button" class="btn btn-danger"
+                                                            @click.prevent="
+                                                                removeLookupFilter(
+                                                                    selectedColumn,
+                                                                    index
+                                                                )
+                                                            "
+                                                        >
+                                                            <i
+                                                                class="bi bi-x-circle-fill"
+                                                            ></i>
                                                         </button>
                                                     </div>
                                                 </template>
@@ -447,45 +964,74 @@
                                 </div>
                             </fieldset>
 
-                            <div class="border-top pt-3 d-flex justify-content-end">
-                                <button class="btn btn-primary btn-sm me-2" @click.prevent="selectedColumn = null">
-                                    <i class="bi bi-x-square me-1"></i> Unselect Column
+                            <div
+                                class="border-top pt-3 d-flex justify-content-end"
+                            >
+                                <button
+                                    class="btn btn-primary btn-sm me-2"
+                                    @click.prevent="selectedColumn = null"
+                                >
+                                    <i class="bi bi-x-square me-1"></i> Unselect
+                                    Column
                                 </button>
-                                <template v-if="schema.can_user_edit && selectedColumn.is_editable_by_user">
+                                <template
+                                    v-if="
+                                        schema.can_user_edit &&
+                                        selectedColumn.is_editable_by_user
+                                    "
+                                >
+                                    <button
+                                        v-if="
+                                            selectedColumn.django_import_content_type &&
+                                            selectedColumn.django_import_field_name
+                                        "
+                                        class="btn btn-primary btn-sm me-2"
+                                        :disabled="saving"
+                                        @click.prevent="save()"><i class="bi bi-floppy-fill me-1"></i>
+                                        Save Column
+                                        <template v-if="saving"
+                                            ><span
+                                                class="spinner-border spinner-border-sm ms-2"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            ></template
+                                        >
+                                    </button>
                                     <button
-                                        v-if="selectedColumn.django_import_content_type && selectedColumn.django_import_field_name"
-                                        class="btn btn-primary btn-sm me-2" @click.prevent="save()"
-                                        :disabled="saving"><i class="bi bi-floppy-fill me-1"></i>
-                                        Save
-                                        Column <template v-if="saving"><span
-                                                class="spinner-border spinner-border-sm ms-2" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></template></button>
-                                    <button class="btn btn-danger btn-sm" v-if="!selectedColumn.id"
-                                        @click.prevent="cancelAddingColumn(selectedColumn)" :disabled="saving"><i
-                                            class="bi bi-x-circle-fill me-1"></i>
-                                        Cancel
-                                        Adding
-                                        Column</button>
-                                    <button v-else-if="selectedColumn.order != 0" class="btn btn-danger btn-sm"
-                                        @click.prevent="removeColumn(selectedColumn)" :disabled="saving"><i
-                                            class="bi bi-trash3-fill me-1"></i>
-                                        Delete
-                                        Column</button>
+v-if="!selectedColumn.id" class="btn btn-danger btn-sm"
+                                        :disabled="saving" @click.prevent="cancelAddingColumn(selectedColumn)"><i
+                                    >
+                                        <i class="bi bi-x-circle-fill me-1"></i>
+                                        Cancel Adding Column
+                                    </button>
+                                    <button
+                                        v-else-if="selectedColumn.order != 0"
+                                        class="btn btn-danger btn-sm"
+                                        :disabled="saving" @click.prevent="removeColumn(selectedColumn)"><i
+                                    >
+                                        <i class="bi bi-trash3-fill me-1"></i>
+                                        Delete Column
+                                    </button>
                                 </template>
                             </div>
                         </form>
                     </div>
                 </div>
-                <div class="card sticky-top" v-else>
+                <div v-else class="card sticky-top">
                     <div class="card-body">
                         <h5 class="card-title border-bottom pb-2 mb-3">
                             No Column Selected
                         </h5>
                         <div>
-                            <alert type="info"><i class="bi bi-arrow-left-square-fill me-2"></i>
-                                Select a column from the left panel
-                                to view it's details
+                            <alert type="info"
+                                ><i
+                                    class="bi bi-arrow-left-square-fill me-2"
+                                ></i>
+                                Select a column from the left panel to view it's
+                                details
                             </alert>
                         </div>
                     </div>
@@ -500,53 +1046,106 @@
             </div>
         </div>
         <div v-if="schema" class="row">
-            <div class="navbar fixed-bottom" style="background-color: rgb(245, 245, 245);">
+            <div
+                class="navbar fixed-bottom"
+                style="background-color: rgb(245, 245, 245)"
+            >
                 <div class="container">
                     <div class="col-md-6">
-                        <div class="col-md-6"><a role="button" class="btn btn-primary me-2 float-start"
-                                href="/internal/occurrence-report/bulk_import_schema/">Return to Dashboard </a>
+                        <div class="col-md-6">
+                            <a
+                                role="button"
+                                class="btn btn-primary me-2 float-start"
+                                href="/internal/occurrence-report/bulk_import_schema/"
+                                >Return to Dashboard
+                            </a>
                         </div>
                     </div>
-                    <div v-if="schema.can_user_edit" class="col-md-6 text-end"><button
-                            class="btn btn-primary me-2 float-end" @click.prevent="save()" :disabled="saving">Save
-                            and
-                            Continue <template v-if="saving"><span class="spinner-border spinner-border-sm ms-2"
-                                    role="status" aria-hidden="true"></span>
-                                <span class="visually-hidden">Loading...</span></template></button><button
-                            class="btn btn-primary me-2 float-end" @click.prevent="saveAndExit()"
-                            :disabled="saving">Save
-                            and Exit
-                            <template v-if="saving"><span class="spinner-border spinner-border-sm ms-2" role="status"
-                                    aria-hidden="true"></span>
+                    <div v-if="schema.can_user_edit" class="col-md-6 text-end">
+                        <button
+                            class="btn btn-primary me-2 float-end"
+                            :disabled="saving"
+                            @click.prevent="save()"
+                        >
+                            Save and Continue
+                            <template v-if="saving"
+                                ><span
+                                    class="spinner-border spinner-border-sm ms-2"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden"
+                                    >Loading...</span
+                                ></template
+                            ></button
+                        ><button
+                            class="btn btn-primary me-2 float-end"
+                            :disabled="saving"
+                            @click.prevent="saveAndExit()">Save
+                            Save and Exit
+                            <template v-if="saving"
+                                ><span
+                                    class="spinner-border spinner-border-sm ms-2"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
                                 <span class="visually-hidden">Loading...</span>
-                            </template></button></div>
+                            </template>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
         <template
-            v-if="selectedField && selectedField.xlsx_validation_type == 'list' && selectedField.choices && selectedField.choices.length > 0">
-            <div class="modal fade" id="preview-choices" data-bs-backdrop="static" data-bs-keyboard="false"
-                tabindex="-1" aria-labelledby="preview-choices-label" aria-hidden="true">
+            v-if="
+                selectedField &&
+                selectedField.xlsx_validation_type == 'list' &&
+                selectedField.choices &&
+                selectedField.choices.length > 0
+            "
+        >
+            <div
+id="preview-choices" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false"
+                tabindex="-1"
+                aria-labelledby="preview-choices-label"
+                aria-hidden="true"
+            >
                 <div class="modal-dialog">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <h5 class="modal-title" id="preview-choices-label">
-                                {{
-                                    selectedField.display_name
-                                }} List
-                                Choices
+                            <h5 id="preview-choices-label" class="modal-title">
+                                {{ selectedField.display_name }} List Choices
                             </h5>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                            <button
+                                type="button"
+                                class="btn-close"
+                                data-bs-dismiss="modal"
+                                aria-label="Close"
+                            ></button>
                         </div>
                         <div class="modal-body">
                             <div class="table-responsive">
-                                <table class="table table-bordered table-hover table-sm">
+                                <table
+                                    class="table table-bordered table-hover table-sm"
+                                >
                                     <tbody>
-                                        <tr v-for="choice in selectedField.choices" class="">
+                                        <tr
+                                            v-for="choice in selectedField.choices"
+                                            class=""
+                                        >
                                             <td>
                                                 <template
-                                                    v-if="['MultiSelectField', 'ForeignKey', 'ManyToManyField'].includes(selectedField.type)">{{
-                                                        choice[1] }}</template>
+                                                    v-if="
+                                                        [
+                                                            'MultiSelectField',
+                                                            'ForeignKey',
+                                                            'ManyToManyField',
+                                                        ].includes(
+                                                            selectedField.type
+                                                        )
+                                                    "
+                                                    >{{ choice[1] }}</template
+                                                >
                                                 <template v-else>{{
                                                     choice[0]
                                                 }}</template>
@@ -557,7 +1156,13 @@
                             </div>
                         </div>
                         <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                            <button
+                                type="button"
+                                class="btn btn-secondary"
+                                data-bs-dismiss="modal"
+                            >
+                                Close
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -567,13 +1172,16 @@
 </template>
 
 <script>
-import alert from '@vue-utils/alert.vue'
-import Sortable from 'sortablejs'
+import alert from '@vue-utils/alert.vue';
+import Sortable from 'sortablejs';
 
-import { api_endpoints } from "@/utils/hooks.js"
+import { api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'OccurrenceReportBulkImportSchema',
+    components: {
+        alert
+    },
     data() {
         return {
             schema: null,
@@ -597,18 +1205,26 @@ export default {
             errors: null
         }
     },
-    components: {
-        alert
-    },
     computed: {
         showDjangoLookupField() {
-            return this.selectedColumn &&
+            return (
+                this.selectedColumn &&
                 this.selectedColumn.xlsx_column_header_name &&
                 this.selectedColumn.django_import_content_type &&
                 this.selectedColumn.requires_lookup_field &&
-                this.selectedColumn.django_import_field_name && this.selectedField && ['ManyToManyField', 'ForeignKey'].includes(this.selectedField.type);
+                this.selectedColumn.django_import_field_name &&
+                this.selectedField &&
+                ['ManyToManyField', 'ForeignKey'].includes(
+                    this.selectedField.type
+                )
+            );
         },
     },
+    created() {
+        this.fetchBulkImportSchema()
+        this.fetchDefaultValueChoices()
+        this.fetchLookupSchematypes()
+    },
     methods: {
         fetchLookupSchematypes() {
             fetch(api_endpoints.lookup_schema_types)
@@ -1163,15 +1779,10 @@ export default {
             })
         }
     },
-    created() {
-        this.fetchBulkImportSchema()
-        this.fetchDefaultValueChoices()
-        this.fetchLookupSchematypes()
-    },
     onRouteEnter() {
-        this.fetchBulkImportSchema()
-    }
-}
+        this.fetchBulkImportSchema();
+    },
+};
 </script>
 
 <style scoped>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
index c660b224..183657d3 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
@@ -1,77 +1,191 @@
 <template>
-    <div class="container gx-4" id="occurence-report-bulk-import-schema">
+    <div id="occurence-report-bulk-import-schema" class="container gx-4">
         <div class="row mb-2">
             <div class="col">
                 <div class="mb-4">
-                    <h2 class="text-capitalize">Occurrence Report Bulk Import Schemas</h2>
+                    <h2 class="text-capitalize">
+                        Occurrence Report Bulk Import Schemas
+                    </h2>
                 </div>
                 <div class="mb-3">
                     <div class="card">
                         <div class="card-body">
-                            <form id="bulk-import-form" class="needs-validation" no-validate>
+                            <form
+                                id="bulk-import-form"
+                                class="needs-validation"
+                                no-validate
+                            >
                                 <div class="mb-3">
-                                    <label for="schema-version" class="form-label">Group Type</label>
-                                    <select class="form-select text-secondary w-25" id="schema-version"
-                                        ref="schema-version" v-model="groupType" aria-label="Select Schema Version"
-                                        @change="fetchBulkSchemas">
-                                        <option :value="null" selected>Select Group Type</option>
-                                        <option v-for="groupType in groupTypes" :value="groupType.id">{{
-                                            groupType.name.charAt(0).toUpperCase() + groupType.name.substring(1) }}
+                                    <label
+                                        for="schema-version"
+                                        class="form-label"
+                                        >Group Type</label
+                                    >
+                                    <select
+                                        id="schema-version"
+                                        ref="schema-version"
+                                        v-model="groupType"
+                                        class="form-select text-secondary w-25"
+                                        aria-label="Select Schema Version"
+                                        @change="fetchBulkSchemas"
+                                    >
+                                        <option :value="null" selected>
+                                            Select Group Type
+                                        </option>
+                                        <option
+                                            v-for="groupType in groupTypes"
+                                            :value="groupType.id"
+                                        >
+                                            {{
+                                                groupType.name
+                                                    .charAt(0)
+                                                    .toUpperCase() +
+                                                groupType.name.substring(1)
+                                            }}
                                         </option>
                                     </select>
                                 </div>
                             </form>
                             <div>
-                                <button v-if="groupType" class="btn btn-primary float" @click="createNewVersion"><i
-                                        class="bi bi-plus-circle-fill me-2"></i>Create New Version</button>
+                                <button
+                                    v-if="groupType"
+                                    class="btn btn-primary float"
+                                    @click="createNewVersion"
+                                >
+                                    <i class="bi bi-plus-circle-fill me-2"></i
+                                    >Create New Version
+                                </button>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="mb-3">
-                    <div v-if="bulkSchemas && bulkSchemas.length > 0" class="table-responsive">
+                    <div
+                        v-if="bulkSchemas && bulkSchemas.length > 0"
+                        class="table-responsive"
+                    >
                         <table class="table table-sm">
                             <thead>
                                 <tr>
-                                    <th scope="col" style="width: 40px;">Version</th>
-                                    <th scope="col" style="width: 250px;">Name</th>
-                                    <th scope="col" style="width: 260px;">Tags</th>
-                                    <th scope="col" style="width: 170px;">Created</th>
-                                    <th scope="col" style="width: 170px;">Updated</th>
+                                    <th scope="col" style="width: 40px">
+                                        Version
+                                    </th>
+                                    <th scope="col" style="width: 250px">
+                                        Name
+                                    </th>
+                                    <th scope="col" style="width: 260px">
+                                        Tags
+                                    </th>
+                                    <th scope="col" style="width: 170px">
+                                        Created
+                                    </th>
+                                    <th scope="col" style="width: 170px">
+                                        Updated
+                                    </th>
                                     <th scope="col">Actions</th>
                                 </tr>
                             </thead>
                             <tbody class="text-muted">
-                                <tr v-for="schema in bulkSchemas" :class="schema.is_master ? 'master-schema' : ''">
-                                    <td>{{ schema.version }}<i class="bi bi-lock-fill text-warning fs-5 ps-2"
-                                            v-if="schema.is_master"></i></td>
-                                    <td class="text-truncate text-align-end" style="max-width: 285px;"
-                                        :title="schema.name">{{
-                                            schema.name }}</td>
-                                    <td class="text-truncate"><span class="badge bg-info fs-6 me-2"
-                                            v-for="(tag, index) in tags_to_show(schema.tags)" :key="tag">{{ tag
-                                            }}</span>
-                                        <span v-if="schema.tags.length > tags_to_show(schema.tags).length"
-                                            :title="String(schema.tags).replace(/,/g, ', ')" @click.prevent="">+{{
-                                                schema.tags.length - tags_to_show(schema.tags).length }}</span>
+                                <tr
+                                    v-for="schema in bulkSchemas"
+                                    :class="
+                                        schema.is_master ? 'master-schema' : ''
+                                    "
+                                >
+                                    <td>
+                                        {{ schema.version
+                                        }}<i
+                                            v-if="schema.is_master"
+                                            class="bi bi-lock-fill text-warning fs-5 ps-2"
+                                        ></i>
+                                    </td>
+                                    <td
+                                        class="text-truncate text-align-end"
+                                        style="max-width: 285px"
+                                        :title="schema.name"
+                                    >
+                                        {{ schema.name }}
+                                    </td>
+                                    <td class="text-truncate">
+                                        <span
+                                            v-for="(tag, index) in tags_to_show(
+                                                schema.tags
+                                            )"
+                                            :key="tag"
+                                            class="badge bg-info fs-6 me-2"
+                                            >{{ tag
+                                            >{{ tag }}</span
+                                        >
+                                        <span
+                                            v-if="
+                                                schema.tags.length >
+                                                tags_to_show(schema.tags).length
+                                            "
+                                            :title="
+                                                String(schema.tags).replace(
+                                                    /,/g,
+                                                    ', '
+                                                )
+                                            "
+                                            @click.prevent=""
+                                            >+{{
+                                                schema.tags.length -
+                                                tags_to_show(schema.tags).length
+                                            }}</span
+                                        >
+                                    </td>
+                                    <td>
+                                        {{
+                                            new Date(
+                                                schema.datetime_created
+                                            ).toLocaleDateString()
+                                        }}
+                                        {{
+                                            new Date(
+                                                schema.datetime_created
+                                            ).toLocaleTimeString()
+                                        }}
+                                    </td>
+                                    <td>
+                                        {{
+                                            new Date(
+                                                schema.datetime_updated
+                                            ).toLocaleDateString()
+                                        }}
+                                        {{
+                                            new Date(
+                                                schema.datetime_updated
+                                            ).toLocaleTimeString()
+                                        }}
                                     </td>
-                                    <td>{{ new
-                                        Date(schema.datetime_created).toLocaleDateString() }} {{ new
-                                            Date(schema.datetime_created).toLocaleTimeString() }}</td>
-                                    <td>{{ new
-                                        Date(schema.datetime_updated).toLocaleDateString() }} {{ new
-                                            Date(schema.datetime_updated).toLocaleTimeString() }}</td>
                                     <td>
-                                        <a class="btn btn-sm btn-primary my-0 me-2" role="button"
-                                            :href="`/internal/occurrence-report/bulk_import_schema/${schema.id}`"><i
+                                        <a
+                                            class="btn btn-sm btn-primary my-0 me-2"
+                                            role="button"
+                                            :href="`/internal/occurrence-report/bulk_import_schema/${schema.id}`"
+                                            ><i
                                                 class="bi me-2"
-                                                :class="schema.can_user_edit ? 'bi-pencil-fill' : 'bi-eye-fill'"></i>
-                                            <template v-if="schema.can_user_edit">Edit</template><template
-                                                v-else>View</template></a>
+                                                :class="
+                                                    schema.can_user_edit
+                                                        ? 'bi-pencil-fill'
+                                                        : 'bi-eye-fill'
+                                                "
+                                            ></i>
+                                            <template
+                                                v-if="schema.can_user_edit"
+                                                >Edit</template
+                                            ><template v-else>View</template></a
+                                        >
 
-                                        <button class="btn btn-sm btn-primary my-0"
-                                            @click.prevent="copySchema(schema.id)"><i class="bi bi-copy me-2"></i>
-                                            Create a Copy</button>
+                                        <button
+                                            class="btn btn-sm btn-primary my-0"
+                                            @click.prevent="
+                                                copySchema(schema.id)
+                                            "
+                                        >
+                                            <i class="bi bi-copy me-2"></i>
+                                            Create a Copy
+                                        </button>
                                     </td>
                                 </tr>
                             </tbody>
@@ -89,22 +203,29 @@
 </template>
 
 <script>
-import alert from '@vue-utils/alert.vue'
+import alert from '@vue-utils/alert.vue';
 
-import { api_endpoints } from "@/utils/hooks.js"
+import { api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'OccurrenceReportBulkImportSchemaList',
+    components: {
+        alert,
+    },
     data() {
         return {
             groupTypes: null,
             groupType: null,
             bulkSchemas: null,
-            loadingSchemas: false
-        }
+            loadingSchemas: false,
+        };
     },
-    components: {
-        alert
+    created() {
+        this.fetchGroupTypes();
+        if (localStorage.getItem('ocr-bulk-import-group-type')) {
+            this.groupType = localStorage.getItem('ocr-bulk-import-group-type');
+            this.fetchBulkSchemas();
+        }
     },
     methods: {
         fetchGroupTypes() {
@@ -112,81 +233,92 @@ export default {
                 .then(async (response) => {
                     this.groupTypes = await response.json();
                 })
-                .catch(error => {
-                    console.error(error)
-                })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         fetchBulkSchemas() {
             if (!this.groupType) {
-                this.bulkSchemas = null
-                return
+                this.bulkSchemas = null;
+                return;
             }
-            localStorage.setItem('ocr-bulk-import-group-type', this.groupType)
-            this.loadingSchemas = true
-            fetch(api_endpoints.occurrence_report_bulk_import_schemas + '?' + new URLSearchParams(
-                { group_type: this.groupType }
-            ).toString())
+            localStorage.setItem('ocr-bulk-import-group-type', this.groupType);
+            this.loadingSchemas = true;
+            fetch(
+                api_endpoints.occurrence_report_bulk_import_schemas +
+                    '?' +
+                    new URLSearchParams({
+                        group_type: this.groupType,
+                    }).toString()
+            )
                 .then(async (response) => {
-                    const data = await response.json()
-                    this.bulkSchemas = data.results
+                    const data = await response.json();
+                    this.bulkSchemas = data.results;
                 })
-                .catch(error => {
-                    console.error(error)
+                .catch((error) => {
+                    console.error(error);
                 })
                 .finally(() => {
-                    this.loadingSchemas = false
-                })
+                    this.loadingSchemas = false;
+                });
         },
         copySchema(id) {
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
                 }
-            })
+            )
                 .then(async (response) => {
-                    const data = await response.json()
+                    const data = await response.json();
                     if (response.status === 201) {
                         swal.fire({
                             title: 'Success',
                             text: 'Schema copied successfully',
                             icon: 'success',
                             showConfirmButton: false,
-                            timer: 1500
-                        })
-                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${data.id}`)
+                            timer: 1500,
+                        });
+                        this.$router.push(
+                            `/internal/occurrence-report/bulk_import_schema/${data.id}`
+                        );
                     }
                 })
-                .catch(error => {
-                    console.error(error)
-                })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         createNewVersion() {
             fetch(api_endpoints.occurrence_report_bulk_import_schemas, {
                 method: 'POST',
                 headers: {
-                    'Content-Type': 'application/json'
+                    'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    group_type: this.groupType
-                })
+                    group_type: this.groupType,
+                }),
             })
                 .then(async (response) => {
-                    const data = await response.json()
+                    const data = await response.json();
                     if (response.status === 201) {
                         swal.fire({
                             title: 'Success',
                             text: 'New version created successfully',
                             icon: 'success',
                             showConfirmButton: false,
-                            timer: 1500
-                        })
-                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${data.id}`)
+                            timer: 1500,
+                        });
+                        this.$router.push(
+                            `/internal/occurrence-report/bulk_import_schema/${data.id}`
+                        );
                     }
                 })
-                .catch(error => {
-                    console.error(error)
-                })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         tags_to_show(tags) {
             let total_chars = tags.length * 2;
@@ -200,16 +332,9 @@ export default {
                 }
             }
             return tags_to_show;
-        }
+        },
     },
-    created() {
-        this.fetchGroupTypes()
-        if (localStorage.getItem('ocr-bulk-import-group-type')) {
-            this.groupType = localStorage.getItem('ocr-bulk-import-group-type')
-            this.fetchBulkSchemas()
-        }
-    }
-}
+};
 </script>
 <style scoped>
 .master-schema {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue
index 9e78e3b7..b6f032e4 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue
@@ -2,17 +2,18 @@
     <div id="communityOccurrenceHistory">
         <modal
             transition="modal fade"
-            :title="'Occurrence OCC'+ occurrenceId +' - History'"
+            :title="'Occurrence OCC' + occurrenceId + ' - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'OCC'+occurrenceId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'Occurrence'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'OCC' + occurrenceId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'Occurrence'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -70,8 +73,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -108,16 +110,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.occurrence.fields.occurrence_number) {
-                        return full.data.occurrence.fields.occurrence_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.occurrence.fields.occurrence_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "OCC"+full.data.occurrence.pk+'-'+full.revision_sequence;
+                        return (
+                            'OCC' +
+                            full.data.occurrence.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -151,7 +161,6 @@ export default {
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -164,7 +173,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -177,7 +185,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -209,14 +216,13 @@ export default {
                     if (full.data.occurrence.fields.wild_status) {
                         return full.data.occurrence.fields.wild_status.name;
                     }
-                    return "";
+                    return '';
                 },
                 name: 'wild_status',
             };
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.occurrence.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
@@ -234,11 +240,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -263,7 +269,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence(this.occurrenceId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence(
+                            this.occurrenceId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -273,8 +282,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -282,65 +291,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue
index 22cf3026..a6bad237 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue
@@ -2,21 +2,25 @@
     <div id="communityOccurrenceReportHistory">
         <modal
             transition="modal fade"
-            :title="'Occurrence Report OCR'+ occurrenceReportId +' - History'"
+            :title="'Occurrence Report OCR' + occurrenceReportId + ' - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
-                                <div v-if="occurrenceReportId" class="col-lg-12">
+                                <div
+                                    v-if="occurrenceReportId"
+                                    class="col-lg-12"
+                                >
                                     <datatable
                                         :id="datatable_id"
                                         ref="history_datatable"
@@ -24,14 +28,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'OCR'+occurrenceReportId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OccurrenceReport'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'OCR' + occurrenceReportId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OccurrenceReport'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -70,8 +76,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -109,16 +114,28 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.occurrencereport.fields.occurrence_report_number) {
-                        return full.data.occurrencereport.fields.occurrence_report_number+'-'+full.revision_sequence;
+                    if (
+                        full.data.occurrencereport.fields
+                            .occurrence_report_number
+                    ) {
+                        return (
+                            full.data.occurrencereport.fields
+                                .occurrence_report_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "OCR"+full.data.occurrencereport.pk+'-'+full.revision_sequence;
+                        return (
+                            'OCR' +
+                            full.data.occurrencereport.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -145,14 +162,14 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencereport.fields.occurrence_report_number;
+                    return full.data.occurrencereport.fields
+                        .occurrence_report_number;
                 },
                 name: 'occurrence_report_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -165,7 +182,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -178,7 +194,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -201,7 +216,6 @@ export default {
         },
         column_occurrence: function () {
             return {
-
                 data: 'data.data.occurrencereport.fields.occurrence',
                 defaultContent: '',
                 orderable: true,
@@ -209,15 +223,16 @@ export default {
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.occurrencereport.fields.occurrence)
-                        return "OCC"+full.data.occurrencereport.fields.occurrence;
-                    return ""
+                        return (
+                            'OCC' + full.data.occurrencereport.fields.occurrence
+                        );
+                    return '';
                 },
                 name: 'occurrence',
             };
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.occurrencereport.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
@@ -235,11 +250,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -265,7 +280,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence_report(this.occurrenceReportId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence_report(
+                            this.occurrenceReportId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -275,8 +293,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -284,65 +302,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue b/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
index 1564b516..ad7eb87e 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
@@ -1,128 +1,243 @@
 <template>
-    <div class="container" id="internal-occurrence-dash">
-        <ul class="nav nav-pills" id="pills-tab" role="tablist">
+    <div id="internal-occurrence-dash" class="container">
+        <ul id="pills-tab" class="nav nav-pills" role="tablist">
             <li class="nav-item">
-                <a class="nav-link" id="pills-flora-tab" data-bs-toggle="pill" href="#pills-flora" role="tab"
-                    aria-controls="pills-flora" aria-selected="true" @click="set_active_tab('flora')">Flora</a>
+                <a
+                    id="pills-flora-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-flora"
+                    role="tab"
+                    aria-controls="pills-flora"
+                    aria-selected="true"
+                    @click="set_active_tab('flora')"
+                    >Flora</a
+                >
             </li>
             <li class="nav-item">
-                <a class="nav-link" id="pills-fauna-tab" data-bs-toggle="pill" href="#pills-fauna" role="tab"
-                    aria-controls="pills-fauna" aria-selected="false" @click="set_active_tab('fauna')">Fauna</a>
+                <a
+                    id="pills-fauna-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-fauna"
+                    role="tab"
+                    aria-controls="pills-fauna"
+                    aria-selected="false"
+                    @click="set_active_tab('fauna')"
+                    >Fauna</a
+                >
             </li>
             <li class="nav-item">
-                <a class="nav-link" id="pills-community-tab" data-bs-toggle="pill" href="#pills-community" role="tab"
-                    aria-controls="pills-community" aria-selected="false"
-                    @click="set_active_tab('community')">Communities</a>
+                <a
+                    id="pills-community-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-community"
+                    role="tab"
+                    aria-controls="pills-community"
+                    aria-selected="false"
+                    @click="set_active_tab('community')"
+                    >Communities</a
+                >
             </li>
         </ul>
-        <div class="tab-content" id="pills-tabContent">
-            <div class="tab-pane" id="pills-flora" role="tabpanel" aria-labelledby="pills-flora-tab">
-                <FormSection v-if="show_occurrences" :formCollapse="false" label="Occurrences - Flora"
-                    Index="occurrence-flora">
-                    <OccurrenceFloraDashboard v-if="isFlora" ref="occ_flora_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_occ_url"
-                        :profile="profile" />
+        <div id="pills-tabContent" class="tab-content">
+            <div
+                id="pills-flora"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-flora-tab"
+            >
+                <FormSection
+                    v-if="show_occurrences"
+                    :form-collapse="false"
+                    label="Occurrences - Flora"
+                    Index="occurrence-flora"
+                >
+                    <OccurrenceFloraDashboard
+                        v-if="isFlora"
+                        ref="occ_flora_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_occ_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection v-if="show_occurrence_reports" :formCollapse="false" label="Occurrence Report - Flora"
-                    Index="occurrence-report-flora">
-                    <OccurrenceReportFloraDashTable v-if="isFlora" ref="flora_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_ocr_url"
-                        :profile="profile" />
+                <FormSection
+                    v-if="show_occurrence_reports"
+                    :form-collapse="false"
+                    label="Occurrence Report - Flora"
+                    Index="occurrence-report-flora"
+                >
+                    <OccurrenceReportFloraDashTable
+                        v-if="isFlora"
+                        ref="flora_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_ocr_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection v-if="profile && profile.ocr_referral_count > 0" :formCollapse="false" label="Occurrence Report - Flora Referred to Me"
-                    Index="occurrence-report-flora-referred-to-me">
-                    <OccurrenceReportReferredToMeDashTable v-if="isFlora" ref="flora_referrals_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_ocr_referrals_url"
-                        :profile="profile" filterOCRReferralsOccurrence_cache="filterOCRFloraReferralsOccurrence"
+                <FormSection
+                    v-if="profile && profile.ocr_referral_count > 0"
+                    :form-collapse="false"
+                    label="Occurrence Report - Flora Referred to Me"
+                    Index="occurrence-report-flora-referred-to-me"
+                >
+                    <OccurrenceReportReferredToMeDashTable
+                        v-if="isFlora"
+                        ref="flora_referrals_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_ocr_referrals_url"
+                        :profile="profile"
+                        filterOCRReferralsOccurrence_cache="filterOCRFloraReferralsOccurrence"
                         filterOCRReferralsScientificName_cache="filterOCRFloraReferralsScientificName"
                         filterOCRReferralsName_cache="filterOCRFloraReferralsName"
-                        filterOCRReferralsStatus_cache="filterOCRFloraReferralsStatus" />
+                        filterOCRReferralsStatus_cache="filterOCRFloraReferralsStatus"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-fauna" role="tabpanel" aria-labelledby="pills-fauna-tab">
-                <FormSection v-if="show_occurrences" :formCollapse="false" label="Occurrences - Fauna"
-                    Index="occurrence-fauna">
-                    <OccurrenceFaunaDashboard v-if="isFauna" ref="occ_fauna_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_occ_url"
-                        :profile="profile" />
+            <div
+                id="pills-fauna"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-fauna-tab"
+            >
+                <FormSection
+                    v-if="show_occurrences"
+                    :form-collapse="false"
+                    label="Occurrences - Fauna"
+                    Index="occurrence-fauna"
+                >
+                    <OccurrenceFaunaDashboard
+                        v-if="isFauna"
+                        ref="occ_fauna_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_occ_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection v-if="show_occurrence_reports" :formCollapse="false" label="Occurrence Report - Fauna"
-                    Index="fauna">
-                    <OccurrenceReportFaunaDashTable v-if="isFauna" ref="fauna_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_ocr_url"
-                        :profile="profile" />
+                <FormSection
+                    v-if="show_occurrence_reports"
+                    :form-collapse="false"
+                    label="Occurrence Report - Fauna"
+                    Index="fauna"
+                >
+                    <OccurrenceReportFaunaDashTable
+                        v-if="isFauna"
+                        ref="fauna_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_ocr_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection v-if="profile && profile.ocr_referral_count > 0" :formCollapse="false" label="Occurrence Report - Fauna Referred to Me"
-                    Index="occurrence-report-fauna-referred-to-me">
-                    <OccurrenceReportReferredToMeDashTable v-if="isFauna" ref="fauna_referrals_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_ocr_referrals_url"
-                        :profile="profile" filterOCRReferralsOccurrence_cache="filterOCRCommunityReferralsOccurrence"
+                <FormSection
+                    v-if="profile && profile.ocr_referral_count > 0"
+                    :form-collapse="false"
+                    label="Occurrence Report - Fauna Referred to Me"
+                    Index="occurrence-report-fauna-referred-to-me"
+                >
+                    <OccurrenceReportReferredToMeDashTable
+                        v-if="isFauna"
+                        ref="fauna_referrals_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_ocr_referrals_url"
+                        :profile="profile"
+                        filterOCRReferralsOccurrence_cache="filterOCRCommunityReferralsOccurrence"
                         filterOCRReferralsScientificName_cache="filterOCRCommunityReferralsScientificName"
                         filterOCRReferralsName_cache="filterOCRCommunityReferralsName"
-                        filterOCRReferralsStatus_cache="filterOCRCommunityReferralsStatus" />
+                        filterOCRReferralsStatus_cache="filterOCRCommunityReferralsStatus"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-community" role="tabpanel" aria-labelledby="pills-community-tab">
-                <FormSection v-if="show_occurrences" :formCollapse="false" label="Occurrences - Community"
-                    Index="occurrence-community">
-                    <OccurrenceCommunityDashboard v-if="isCommunity" ref="occ_community_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="community_occ_url"
-                        :profile="profile" />
+            <div
+                id="pills-community"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-community-tab"
+            >
+                <FormSection
+                    v-if="show_occurrences"
+                    :form-collapse="false"
+                    label="Occurrences - Community"
+                    Index="occurrence-community"
+                >
+                    <OccurrenceCommunityDashboard
+                        v-if="isCommunity"
+                        ref="occ_community_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="community_occ_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection v-if="show_occurrence_reports" :formCollapse="false" label="Occurrence Report - Community"
-                    Index="community">
-                    <OccurrenceReportCommunityDashTable v-if="isCommunity" ref="community_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="community_ocr_url"
-                        :profile="profile" />
+                <FormSection
+                    v-if="show_occurrence_reports"
+                    :form-collapse="false"
+                    label="Occurrence Report - Community"
+                    Index="community"
+                >
+                    <OccurrenceReportCommunityDashTable
+                        v-if="isCommunity"
+                        ref="community_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="community_ocr_url"
+                        :profile="profile"
+                    />
                 </FormSection>
-                <FormSection v-if="profile && profile.ocr_referral_count > 0" :formCollapse="false" label="Occurrence Report - Community Referred to Me"
-                    Index="occurrence-report-community-referred-to-me">
-                    <OccurrenceReportReferredToMeDashTable v-if="isCommunity" ref="community_referrals_table"
-                        level="internal" :group_type_name="group_name" :group_type_id="getGroupId"
-                        :url="species_ocr_referrals_url" :profile="profile"
+                <FormSection
+                    v-if="profile && profile.ocr_referral_count > 0"
+                    :form-collapse="false"
+                    label="Occurrence Report - Community Referred to Me"
+                    Index="occurrence-report-community-referred-to-me"
+                >
+                    <OccurrenceReportReferredToMeDashTable
+                        v-if="isCommunity"
+                        ref="community_referrals_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_ocr_referrals_url"
+                        :profile="profile"
                         filterOCRReferralsOccurrence_cache="filterOCRFaunaReferralsOccurrence"
                         filterOCRReferralsScientificName_cache="filterOCRFaunaReferralsScientificName"
                         filterOCRReferralsName_cache="filterOCRFaunaReferralsName"
-                        filterOCRReferralsStatus_cache="filterOCRFaunaReferralsStatus" />
+                        filterOCRReferralsStatus_cache="filterOCRFaunaReferralsStatus"
+                    />
                 </FormSection>
             </div>
         </div>
-
     </div>
 </template>
 <script>
+import OccurrenceFloraDashboard from '@/components/common/occurrence_flora_dashboard.vue';
+import OccurrenceFaunaDashboard from '@/components/common/occurrence_fauna_dashboard.vue';
+import OccurrenceCommunityDashboard from '@/components/common/occurrence_community_dashboard.vue';
 
-import OccurrenceFloraDashboard from '@/components/common/occurrence_flora_dashboard.vue'
-import OccurrenceFaunaDashboard from '@/components/common/occurrence_fauna_dashboard.vue'
-import OccurrenceCommunityDashboard from '@/components/common/occurrence_community_dashboard.vue'
-
-import OccurrenceReportFloraDashTable from '@/components/common/occurrence_report_flora_dashboard.vue'
-import OccurrenceReportFaunaDashTable from '@common-utils/occurrence_report_fauna_dashboard.vue'
-import OccurrenceReportCommunityDashTable from '@common-utils/occurrence_report_community_dashboard.vue'
+import OccurrenceReportFloraDashTable from '@/components/common/occurrence_report_flora_dashboard.vue';
+import OccurrenceReportFaunaDashTable from '@common-utils/occurrence_report_fauna_dashboard.vue';
+import OccurrenceReportCommunityDashTable from '@common-utils/occurrence_report_community_dashboard.vue';
 
-import OccurrenceReportReferredToMeDashTable from '@common-utils/ocr_referrals_dashboard.vue'
+import OccurrenceReportReferredToMeDashTable from '@common-utils/ocr_referrals_dashboard.vue';
 
-import FormSection from '@/components/forms/section_toggle.vue'
+import FormSection from '@/components/forms/section_toggle.vue';
 
-import {
-    api_endpoints,
-    constants
-}
-    from '@/utils/hooks'
+import { api_endpoints, constants } from '@/utils/hooks';
 export default {
     name: 'InternalOccurrenceDashboard',
-    data() {
-        return {
-            group_types: [],
-            group_name: null,
-            species_occ_url: api_endpoints.occurrence_paginated_internal,
-            community_occ_url: api_endpoints.occurrence_paginated_internal,
-            species_ocr_url: api_endpoints.occurrence_report_paginated_internal,
-            community_ocr_url: api_endpoints.occurrence_report_paginated_internal,
-            species_ocr_referrals_url: api_endpoints.occurrence_report_paginated_referred_to_me,
-            profile: null,
-        }
-    },
     components: {
         OccurrenceFloraDashboard,
         OccurrenceFaunaDashboard,
@@ -133,27 +248,51 @@ export default {
         OccurrenceReportReferredToMeDashTable,
         FormSection,
     },
+    data() {
+        return {
+            group_types: [],
+            group_name: null,
+            species_occ_url: api_endpoints.occurrence_paginated_internal,
+            community_occ_url: api_endpoints.occurrence_paginated_internal,
+            species_ocr_url: api_endpoints.occurrence_report_paginated_internal,
+            community_ocr_url:
+                api_endpoints.occurrence_report_paginated_internal,
+            species_ocr_referrals_url:
+                api_endpoints.occurrence_report_paginated_referred_to_me,
+            profile: null,
+        };
+    },
     computed: {
         show_occurrences: function () {
-            return this.profile && this.profile.groups.some(i => [
-                constants.GROUPS.READ_ONLY_USERS,
-                constants.GROUPS.CONSERVATION_STATUS_ASSESSORS,
-                constants.GROUPS.CONSERVATION_STATUS_APPROVERS,
-                constants.GROUPS.OCCURRENCE_APPROVERS,
-                constants.GROUPS.OCCURRENCE_ASSESSORS,
-                constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS,
-            ].includes(i));
+            return (
+                this.profile &&
+                this.profile.groups.some((i) =>
+                    [
+                        constants.GROUPS.READ_ONLY_USERS,
+                        constants.GROUPS.CONSERVATION_STATUS_ASSESSORS,
+                        constants.GROUPS.CONSERVATION_STATUS_APPROVERS,
+                        constants.GROUPS.OCCURRENCE_APPROVERS,
+                        constants.GROUPS.OCCURRENCE_ASSESSORS,
+                        constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS,
+                    ].includes(i)
+                )
+            );
         },
         show_occurrence_reports: function () {
-            return this.profile && this.profile.groups.some(i => [
-                constants.GROUPS.READ_ONLY_USERS,
-                constants.GROUPS.CONSERVATION_STATUS_ASSESSORS,
-                constants.GROUPS.CONSERVATION_STATUS_APPROVERS,
-                constants.GROUPS.OCCURRENCE_APPROVERS,
-                constants.GROUPS.OCCURRENCE_ASSESSORS,
-                constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS,
-                constants.GROUPS.INTERNAL_CONTRIBUTORS
-            ].includes(i));
+            return (
+                this.profile &&
+                this.profile.groups.some((i) =>
+                    [
+                        constants.GROUPS.READ_ONLY_USERS,
+                        constants.GROUPS.CONSERVATION_STATUS_ASSESSORS,
+                        constants.GROUPS.CONSERVATION_STATUS_APPROVERS,
+                        constants.GROUPS.OCCURRENCE_APPROVERS,
+                        constants.GROUPS.OCCURRENCE_ASSESSORS,
+                        constants.GROUPS.SPECIES_AND_COMMUNITIES_APPROVERS,
+                        constants.GROUPS.INTERNAL_CONTRIBUTORS,
+                    ].includes(i)
+                )
+            );
         },
         isFlora: function () {
             return this.group_name == 'flora';
@@ -170,51 +309,58 @@ export default {
                     return this.group_types[i].id;
                 }
             }
-        }
+        },
+    },
+    created: function () {
+        fetch(api_endpoints.group_types_dict).then(
+            async (response) => {
+                this.group_types = await response.json();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+        this.fetchProfile();
+    },
+    mounted: function () {
+        chevron_toggle.init();
     },
     methods: {
         set_active_tab: function (group_name) {
             this.group_name = group_name;
-            if(!this.profile || !this.profile.area_of_interest){
-                localStorage.setItem("occurrenceActiveTab", group_name);
+            if (!this.profile || !this.profile.area_of_interest) {
+                localStorage.setItem('occurrenceActiveTab', group_name);
             }
-            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]')
-            let tab = bootstrap.Tab.getInstance(elem)
-            if (!tab)
-                tab = new bootstrap.Tab(elem)
-            tab.show()
+            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]');
+            let tab = bootstrap.Tab.getInstance(elem);
+            if (!tab) tab = new bootstrap.Tab(elem);
+            tab.show();
         },
         fetchProfile: function () {
             let vm = this;
-            fetch(api_endpoints.profile).then(async (response) => {
-                vm.profile = await response.json();
-                vm.$nextTick(() => {
-                    if (vm.profile && vm.profile.area_of_interest) {
-                        vm.set_active_tab(vm.profile.area_of_interest);
-                        return;
-                    }
-                    let occurrenceActiveTab = localStorage.getItem('occurrenceActiveTab')
-                    if (occurrenceActiveTab === null) {
-                        vm.set_active_tab('flora');
-                    } else {
-                        vm.set_active_tab(occurrenceActiveTab);
-                    }
-                })
-            }, (error) => {
-                console.log(error);
-            });
-        }
-    },
-    created: function () {
-        fetch(api_endpoints.group_types_dict).then(async (response) => {
-            this.group_types = await response.json();
-        }, (error) => {
-            console.log(error);
-        });
-        this.fetchProfile();
-    },
-    mounted: function () {
-        chevron_toggle.init();
+            fetch(api_endpoints.profile).then(
+                async (response) => {
+                    vm.profile = await response.json();
+                    vm.$nextTick(() => {
+                        if (vm.profile && vm.profile.area_of_interest) {
+                            vm.set_active_tab(vm.profile.area_of_interest);
+                            return;
+                        }
+                        let occurrenceActiveTab = localStorage.getItem(
+                            'occurrenceActiveTab'
+                        );
+                        if (occurrenceActiveTab === null) {
+                            vm.set_active_tab('flora');
+                        } else {
+                            vm.set_active_tab(occurrenceActiveTab);
+                        }
+                    });
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue
index 8b506720..abb47809 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue
@@ -2,17 +2,18 @@
     <div id="occConservationThreatHistory">
         <modal
             transition="modal fade"
-            :title="'OCC Conservation Threat T' + threatId + ' - History ' "
+            :title="'OCC Conservation Threat T' + threatId + ' - History '"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'T'+threatId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OCCConservationThreat'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'T' + threatId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OCCConservationThreat'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -104,16 +107,25 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.occconservationthreat.fields.threat_number) {
-                        return full.data.occconservationthreat.fields.threat_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.occconservationthreat.fields
+                                .threat_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "T"+full.data.occconservationthreat.pk+'-'+full.revision_sequence;
+                        return (
+                            'T' +
+                            full.data.occconservationthreat.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -141,14 +153,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occconservationthreat.fields.threat_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.occconservationthreat.fields.threat_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'threat_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -161,7 +176,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -174,7 +188,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -193,10 +206,13 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occconservationthreat.fields.threat_category) {
-                        return full.data.occconservationthreat.fields.threat_category.name;
+                    if (
+                        full.data.occconservationthreat.fields.threat_category
+                    ) {
+                        return full.data.occconservationthreat.fields
+                            .threat_category.name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'threat_category', //_name',
@@ -213,7 +229,7 @@ export default {
                 render: function (row, type, full) {
                     let value = full.data.occconservationthreat.fields.comment;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'comment',
             };
@@ -224,11 +240,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -253,7 +269,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occ_conservation_threat(this.threatId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occ_conservation_threat(
+                            this.threatId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -263,8 +282,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -272,84 +291,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue
index 29156fa3..7e4f9054 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue
@@ -2,17 +2,18 @@
     <div id="occContactDetailHistory">
         <modal
             transition="modal fade"
-            :title="'OCC Contact Details - History' "
+            :title="'OCC Contact Details - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,14 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="''"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OCCContactDetail'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="''"
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OCCContactDetail'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -107,13 +108,16 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occcontactdetail.pk+'-'+full.revision_sequence;
+                    return (
+                        full.data.occcontactdetail.pk +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'revision_sequence',
             };
@@ -140,14 +144,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occcontactdetail.fields.id+'-'+full.revision_sequence;
+                    return (
+                        full.data.occcontactdetail.fields.id +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -160,7 +167,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -173,7 +179,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -192,10 +197,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occcontactdetail.fields.contact_name) {
+                    if (full.data.occcontactdetail.fields.contact_name) {
                         return full.data.occcontactdetail.fields.contact_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'contact_name',
@@ -209,10 +214,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occcontactdetail.fields.role) {
+                    if (full.data.occcontactdetail.fields.role) {
                         return full.data.occcontactdetail.fields.role;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'role',
@@ -226,12 +231,12 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occcontactdetail.fields.contact) {
+                    if (full.data.occcontactdetail.fields.contact) {
                         let value = full.data.occcontactdetail.fields.contact;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'contact_details',
@@ -245,10 +250,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occcontactdetail.fields.organisation) {
+                    if (full.data.occcontactdetail.fields.organisation) {
                         return full.data.occcontactdetail.fields.organisation;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'organisation',
@@ -262,12 +267,12 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occcontactdetail.fields.notes) {
+                    if (full.data.occcontactdetail.fields.notes) {
                         let value = full.data.occcontactdetail.fields.notes;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'notes',
@@ -279,11 +284,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -310,7 +315,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occ_contact_detail(this.contactId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occ_contact_detail(
+                            this.contactId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -320,92 +328,100 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue
index 4735d606..3b4b49e1 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue
@@ -2,17 +2,24 @@
     <div id="occurrenceDocumentHistory">
         <modal
             transition="modal fade"
-            :title="'Occurrence  OCC'+ occurrenceId +' - Document D' + documentId + ' - History ' "
+            :title="
+                'Occurrence  OCC' +
+                occurrenceId +
+                ' - Document D' +
+                documentId +
+                ' - History '
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +31,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'D'+documentId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OccurrenceDocument'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'D' + documentId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OccurrenceDocument'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -73,8 +82,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -112,16 +120,25 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.occurrencedocument.fields.document_number) {
-                        return full.data.occurrencedocument.fields.document_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.occurrencedocument.fields
+                                .document_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "D"+full.data.occurrencedocument.pk+'-'+full.revision_sequence;
+                        return (
+                            'D' +
+                            full.data.occurrencedocument.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -149,14 +166,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencedocument.fields.document_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.occurrencedocument.fields.document_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'document_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -169,7 +189,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -182,7 +201,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -201,10 +219,11 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencedocument.fields.document_category) {
-                        return full.data.occurrencedocument.fields.document_category.document_category_name;
+                    if (full.data.occurrencedocument.fields.document_category) {
+                        return full.data.occurrencedocument.fields
+                            .document_category.document_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_category',
@@ -212,17 +231,20 @@ export default {
         },
         column_sub_category: function () {
             return {
-
                 data: 'data.data.occurrencedocument.fields.document_sub_category',
                 defaultContent: '',
                 orderable: false,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencedocument.fields.document_sub_category) {
-                        return full.data.occurrencedocument.fields.document_sub_category.document_sub_category_name;
+                    if (
+                        full.data.occurrencedocument.fields
+                            .document_sub_category
+                    ) {
+                        return full.data.occurrencedocument.fields
+                            .document_sub_category.document_sub_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_sub_category',
@@ -237,15 +259,23 @@ export default {
                 searchable: true,
                 visible: true,
                 mRender: function (row, type, full) {
-                    let links='';
-                    if(full.data.occurrencedocument.fields.active){
+                    let links = '';
+                    if (full.data.occurrencedocument.fields.active) {
                         let value = full.data.occurrencedocument.fields.name;
                         let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                        links+='<span><a href="/private-media/'+ full.data.occurrencedocument.fields._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                    }else{
+                        links +=
+                            '<span><a href="/private-media/' +
+                            full.data.occurrencedocument.fields._file +
+                            '" target="_blank">' +
+                            result.text +
+                            '</a> ' +
+                            result.link +
+                            '</span>';
+                    } else {
                         let value = full.data.occurrencedocument.fields.name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        links += type == 'export' ? value : '<s>' + result + '</s>';
+                        links +=
+                            type == 'export' ? value : '<s>' + result + '</s>';
                     }
                     return links;
                 },
@@ -263,7 +293,7 @@ export default {
                 render: function (row, type, full) {
                     let value = full.data.occurrencedocument.fields.description;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'description',
             };
@@ -274,11 +304,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -305,7 +335,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence_document(this.documentId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence_document(
+                            this.documentId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -315,8 +348,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -324,84 +357,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue
index b25c5df8..c464b095 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue
@@ -2,17 +2,18 @@
     <div id="occurrenceSiteHistory">
         <modal
             transition="modal fade"
-            :title="'OCC Site ST' + siteId + ' - History ' "
+            :title="'OCC Site ST' + siteId + ' - History '"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'ST'+siteId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OccurrenceSite'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'ST' + siteId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OccurrenceSite'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -106,16 +109,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.occurrencesite.fields.site_number) {
-                        return full.data.occurrencesite.fields.site_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.occurrencesite.fields.site_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "ST"+full.data.occurrencesite.pk+'-'+full.revision_sequence;
+                        return (
+                            'ST' +
+                            full.data.occurrencesite.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -143,14 +154,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencesite.fields.site_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.occurrencesite.fields.site_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'site_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -163,7 +177,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -176,7 +189,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -195,10 +207,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencesite.fields.site_name) {
+                    if (full.data.occurrencesite.fields.site_name) {
                         return full.data.occurrencesite.fields.site_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'site_name', //_name',
@@ -212,12 +224,12 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencesite.fields.geometry) {
+                    if (full.data.occurrencesite.fields.geometry) {
                         let value = full.data.occurrencesite.fields.geometry;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'geometry', //_name',
@@ -231,12 +243,12 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencesite.fields.comments) {
+                    if (full.data.occurrencesite.fields.comments) {
                         let value = full.data.occurrencesite.fields.comments;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'comment', //_name',
@@ -250,22 +262,27 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (data, type, full) {
-                    if(full.data.occurrencesite.fields.related_occurrence_reports) {
+                    if (
+                        full.data.occurrencesite.fields
+                            .related_occurrence_reports
+                    ) {
                         let related_occurrence_reports = [];
-                        full.data.occurrencesite.fields.related_occurrence_reports.forEach((report) => {
-                                related_occurrence_reports.push("OCR"+report)
+                        full.data.occurrencesite.fields.related_occurrence_reports.forEach(
+                            (report) => {
+                                related_occurrence_reports.push('OCR' + report);
                             }
                         );
-                        let related_occurrence_reports_formatted = related_occurrence_reports.join(", ");
+                        let related_occurrence_reports_formatted =
+                            related_occurrence_reports.join(', ');
                         let value = related_occurrence_reports_formatted;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         return result;
                     } else {
-                        return "";
+                        return '';
                     }
                 },
                 name: 'related_occurrence_reports',
-            }
+            };
         },
         column_action: function () {
             return {
@@ -273,11 +290,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -303,7 +320,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence_site(this.siteId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence_site(
+                            this.siteId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -313,8 +333,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -322,84 +342,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue
index 95e9137f..89e7430d 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue
@@ -2,17 +2,18 @@
     <div id="occurrenceTenureHistory">
         <modal
             transition="modal fade"
-            :title="'OCC Tenure - History ' "
+            :title="'OCC Tenure - History '"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,14 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="''"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OccurrenceTenure'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="''"
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OccurrenceTenure'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -90,7 +91,7 @@ export default {
                 'Purpose',
                 'Signif. to OCC',
                 'Comment',
-                'Owner\'s Name',
+                "Owner's Name",
                 'Action',
             ];
         },
@@ -109,13 +110,16 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencetenure.pk+'-'+full.revision_sequence;
+                    return (
+                        full.data.occurrencetenure.pk +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'revision_sequence',
             };
@@ -142,14 +146,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencetenure.pk+'-'+full.revision_sequence;
+                    return (
+                        full.data.occurrencetenure.pk +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'tenure_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -162,7 +169,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -175,7 +181,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -194,11 +199,17 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencetenure.fields.tenure_area_id
-                    && full.data.occurrencetenure.fields.tenure_area_id.split(".").length > 1) {
-                        return full.data.occurrencetenure.fields.tenure_area_id.split(".")[1];
+                    if (
+                        full.data.occurrencetenure.fields.tenure_area_id &&
+                        full.data.occurrencetenure.fields.tenure_area_id.split(
+                            '.'
+                        ).length > 1
+                    ) {
+                        return full.data.occurrencetenure.fields.tenure_area_id.split(
+                            '.'
+                        )[1];
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'feature_id', //_name',
@@ -212,10 +223,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencetenure.fields.status) {
+                    if (full.data.occurrencetenure.fields.status) {
                         return full.data.occurrencetenure.fields.status;
                     } else {
-                        return "";
+                        return '';
                     }
                 },
                 name: 'status', //_name',
@@ -229,10 +240,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencetenure.fields.vesting) {
+                    if (full.data.occurrencetenure.fields.vesting) {
                         return full.data.occurrencetenure.fields.vesting.code;
                     } else {
-                        return "";
+                        return '';
                     }
                 },
                 name: 'vesting',
@@ -246,10 +257,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencetenure.fields.purpose) {
+                    if (full.data.occurrencetenure.fields.purpose) {
                         return full.data.occurrencetenure.fields.purpose.code;
                     } else {
-                        return "";
+                        return '';
                     }
                 },
                 name: 'purpose',
@@ -263,7 +274,8 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencetenure.fields.significant_to_occurrence;
+                    return full.data.occurrencetenure.fields
+                        .significant_to_occurrence;
                 },
                 name: 'purpose',
             };
@@ -276,12 +288,12 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencetenure.fields.comments) {
+                    if (full.data.occurrencetenure.fields.comments) {
                         let value = full.data.occurrencetenure.fields.comments;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'comments',
@@ -295,10 +307,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencetenure.fields.owner_name) {
+                    if (full.data.occurrencetenure.fields.owner_name) {
                         return full.data.occurrencetenure.fields.owner_name;
                     } else {
-                        return "";
+                        return '';
                     }
                 },
                 name: 'purpose',
@@ -310,11 +322,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -343,7 +355,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence_tenure(this.tenureId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence_tenure(
+                            this.tenureId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -353,8 +368,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -362,84 +377,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
index 73cfef6b..14b1dbb4 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
@@ -1,29 +1,47 @@
 <template lang="html">
-    <div class="container" id="internal-occurence-detail">
-        <div class="row" style="padding-bottom: 50px;">
+    <div id="internal-occurence-detail" class="container">
+        <div class="row" style="padding-bottom: 50px">
             <div v-if="occurrence" class="col">
-                <h3>Occurrence: {{ occurrence.occurrence_number }} - <span class="text-capitalize">{{ display_group_type
-                        }}</span></h3>
-                <h4 v-if="occurrence.combined_occurrence" class="text-muted mb-3">
-                    Combined in to Occurrence:
-                    OCC{{ occurrence.combined_occurrence_id }} <small><a
+                <h3>
+                    Occurrence: {{ occurrence.occurrence_number }} -
+                    <span class="text-capitalize">{{
+                        display_group_type
+                    }}</span>
+                </h3>
+                <h4
+                    v-if="occurrence.combined_occurrence"
+                    class="text-muted mb-3"
+                >
+                    Combined in to Occurrence: OCC{{
+                        occurrence.combined_occurrence_id
+                    }}
+                    <small
+                        ><a
                             :href="`/internal/occurrence/${occurrence.combined_occurrence_id}?group_type_name=${occurrence.group_type}&action=view`"
-                            target="_blank"><i class="bi bi-box-arrow-up-right"></i></a></small>
+                            target="_blank"
+                            ><i class="bi bi-box-arrow-up-right"></i></a
+                    ></small>
                 </h4>
                 <div class="row pb-4">
                     <div v-if="!comparing" class="col-md-3">
+                        <CommsLogs
+                            :comms_url="comms_url"
+                            :logs_url="logs_url"
+                            :comms_add_url="comms_add_url"
+                            :disable_add_entry="!occurrence.can_add_log"
+                            class="mb-3"
+                        />
 
-                        <CommsLogs :comms_url="comms_url" :logs_url="logs_url" :comms_add_url="comms_add_url"
-                            :disable_add_entry="!occurrence.can_add_log" class="mb-3" />
-
-                        <Submission v-if="canSeeSubmission" :submitter_first_name="submitter_first_name"
-                            :submitter_last_name="submitter_last_name" :lodgement_date="occurrence.lodgement_date"
-                            class="mb-3" />
+                        <Submission
+                            v-if="canSeeSubmission"
+                            :submitter_first_name="submitter_first_name"
+                            :submitter_last_name="submitter_last_name"
+                            :lodgement_date="occurrence.lodgement_date"
+                            class="mb-3"
+                        />
 
                         <div class="card card-default sticky-top">
-                            <div class="card-header">
-                                Workflow
-                            </div>
+                            <div class="card-header">Workflow</div>
                             <div class="card-body card-collapse">
                                 <strong>Status</strong><br />
                                 {{ occurrence.processing_status }}
@@ -38,22 +56,59 @@
                                         </div>
                                         <div v-if="isDraft" class="row">
                                             <div class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary mb-2"
-                                                    @click.prevent="activateOccurrence()">Activate</button><br />
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary mb-2"
+                                                    @click.prevent="
+                                                        activateOccurrence()
+                                                    "
+                                                >
+                                                    Activate</button
+                                                ><br />
                                             </div>
                                         </div>
                                         <div v-else class="row">
-                                            <div v-if="canLock" class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary mb-2"
-                                                    @click.prevent="lockOccurrence()">Lock</button><br />
+                                            <div
+                                                v-if="canLock"
+                                                class="col-sm-12"
+                                            >
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary mb-2"
+                                                    @click.prevent="
+                                                        lockOccurrence()
+                                                    "
+                                                >
+                                                    Lock</button
+                                                ><br />
                                             </div>
-                                            <div v-if="canClose" class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary mb-2"
-                                                    @click.prevent="splitOccurrence()">Split</button><br />
+                                            <div
+                                                v-if="canClose"
+                                                class="col-sm-12"
+                                            >
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary mb-2"
+                                                    @click.prevent="
+                                                        splitOccurrence()
+                                                    "
+                                                >
+                                                    Split</button
+                                                ><br />
                                             </div>
-                                            <div v-if="canClose" class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary mb-2"
-                                                    @click.prevent="combineOccurrence()">Combine</button><br />
+                                            <div
+                                                v-if="canClose"
+                                                class="col-sm-12"
+                                            >
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary mb-2"
+                                                    @click.prevent="
+                                                        combineOccurrence()
+                                                    "
+                                                >
+                                                    Combine</button
+                                                ><br />
                                             </div>
                                         </div>
                                     </template>
@@ -64,15 +119,29 @@
                                             </div>
                                         </div>
                                         <div class="col-sm-12">
-                                            <button style="width:80%;" class="btn btn-primary mb-2"
-                                                @click.prevent="unlockOccurrence()">Unlock</button><br />
+                                            <button
+                                                style="width: 80%"
+                                                class="btn btn-primary mb-2"
+                                                @click.prevent="
+                                                    unlockOccurrence()
+                                                "
+                                            >
+                                                Unlock</button
+                                            ><br />
                                         </div>
                                     </template>
                                     <template v-else-if="canReopen">
                                         <div class="row mb-2">
                                             <div class="col-sm-12">
-                                                <button style="width:80%;" class="btn btn-primary mb-2"
-                                                    @click.prevent="reopenOccurrence()">Reopen</button><br />
+                                                <button
+                                                    style="width: 80%"
+                                                    class="btn btn-primary mb-2"
+                                                    @click.prevent="
+                                                        reopenOccurrence()
+                                                    "
+                                                >
+                                                    Reopen</button
+                                                ><br />
                                             </div>
                                         </div>
                                     </template>
@@ -81,32 +150,76 @@
                         </div>
                     </div>
                     <div class="col-md-9">
-                        <form :action="occurrence_form_url" method="post" name="occurrence"
-                            enctype="multipart/form-data">
-
-                            <ProposalOccurrence v-if="occurrence" :occurrence_obj="occurrence" id="OccurrenceStart"
-                                ref="occurrence" @refreshFromResponse="refreshFromResponse">
+                        <form
+                            :action="occurrence_form_url"
+                            method="post"
+                            name="occurrence"
+                            enctype="multipart/form-data"
+                        >
+                            <ProposalOccurrence
+                                v-if="occurrence"
+                                id="OccurrenceStart"
+                                ref="occurrence"
+                                :occurrence_obj="occurrence"
+                                @refresh-from-response="refreshFromResponse"
+                            >
                             </ProposalOccurrence>
 
-                            <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                            <input type='hidden' name="occurrence_id" :value="1" />
+                            <input
+                                type="hidden"
+                                name="csrfmiddlewaretoken"
+                                :value="csrf_token"
+                            />
+                            <input
+                                type="hidden"
+                                name="occurrence_id"
+                                :value="1"
+                            />
                             <div class="row" style="margin-bottom: 50px">
-                                <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                <div
+                                    class="navbar fixed-bottom"
+                                    style="background-color: #f5f5f5"
+                                >
                                     <div class="container">
                                         <div class="col-md-6">
-                                            <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
-                                                @click.prevent="returnToDashboard">
-                                                Return to Dashboard</button>
+                                            <button
+                                                class="btn btn-primary me-2 pull-left"
+                                                style="margin-top: 5px"
+                                                @click.prevent="
+                                                    returnToDashboard
+                                                "
+                                            >
+                                                Return to Dashboard
+                                            </button>
                                         </div>
-                                        <div v-if="hasUserEditMode" class="col-md-6 text-end">
-                                            <button v-if="savingOccurrence" class="btn btn-primary pull-right"
-                                                style="margin-top:5px;" disabled>Save Changes <span
-                                                    class="spinner-border spinner-border-sm" role="status"
-                                                    aria-hidden="true"></span>
-                                                <span class="visually-hidden">Loading...</span></button>
-                                            <button v-else class="btn btn-primary pull-right" style="margin-top:5px;"
-                                                @click.prevent="save()">Save
-                                                Changes</button>
+                                        <div
+                                            v-if="hasUserEditMode"
+                                            class="col-md-6 text-end"
+                                        >
+                                            <button
+                                                v-if="savingOccurrence"
+                                                class="btn btn-primary pull-right"
+                                                style="margin-top: 5px"
+                                                disabled
+                                            >
+                                                Save Changes
+                                                <span
+                                                    class="spinner-border spinner-border-sm"
+                                                    role="status"
+                                                    aria-hidden="true"
+                                                ></span>
+                                                <span class="visually-hidden"
+                                                    >Loading...</span
+                                                >
+                                            </button>
+                                            <button
+                                                v-else
+                                                class="btn btn-primary pull-right"
+                                                style="margin-top: 5px"
+                                                @click.prevent="save()"
+                                            >
+                                                Save Changes
+                                            </button>
                                         </div>
                                     </div>
                                 </div>
@@ -118,29 +231,55 @@
         </div>
         <!-- <OccurrenceSplit ref="occurrence_split" :occurrence="occurrence" :is_internal="true"
             @refreshFromResponse="refreshFromResponse" />-->
-        <OccurrenceCombine v-if="occurrence" ref="occurrence_combine" :main_occurrence_obj="occurrence"
-            :is_internal="true" @refreshFromResponse="refreshFromResponse" :key="combine_key" />
+        <OccurrenceCombine
+            v-if="occurrence"
+            ref="occurrence_combine"
+            :key="combine_key"
+            :main_occurrence_obj="occurrence"
+            :is_internal="true"
+            @refresh-from-response="refreshFromResponse"
+        />
     </div>
-
 </template>
 <script>
-
-import datatable from '@vue-utils/datatable.vue'
-import CommsLogs from '@common-utils/comms_logs.vue'
-import Submission from '@common-utils/submission.vue'
-import ProposalOccurrence from '@/components/form_occurrence.vue'
+import datatable from '@vue-utils/datatable.vue';
+import CommsLogs from '@common-utils/comms_logs.vue';
+import Submission from '@common-utils/submission.vue';
+import ProposalOccurrence from '@/components/form_occurrence.vue';
 
 // import OccurrenceSplit from './occurrence_split.vue'
-import OccurrenceCombine from './occurrence_combine.vue'
+import OccurrenceCombine from './occurrence_combine.vue';
 // import OccurrenceRename from './occurrence_rename.vue'
 
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'InternalOccurrenceDetail',
+    components: {
+        datatable,
+        CommsLogs,
+        Submission,
+        ProposalOccurrence,
+        // OccurrenceSplit,
+        OccurrenceCombine,
+    },
+    filters: {
+        formatDate: function (data) {
+            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        },
+    },
+    beforeRouteEnter: function (to, from, next) {
+        //if (to.query.group_type_name === 'flora' || to.query.group_type_name === "fauna") {
+        fetch(`/api/occurrence/${to.params.occurrence_id}/`).then(
+            async (response) => {
+                next(async (vm) => {
+                    vm.occurrence = await response.json();
+                });
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    },
     data: function () {
         let vm = this;
         return {
@@ -155,27 +294,14 @@ export default {
 
             DATE_TIME_FORMAT: 'DD/MM/YYYY HH:mm:ss',
             comparing: false,
-        }
-    },
-    components: {
-        datatable,
-        CommsLogs,
-        Submission,
-        ProposalOccurrence,
-        // OccurrenceSplit,
-        OccurrenceCombine,
-    },
-    filters: {
-        formatDate: function (data) {
-            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
-        }
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         isCommunity: function () {
-            return this.occurrence.group_type === "community"
+            return this.occurrence.group_type === 'community';
         },
         occurrence_form_url: function () {
             return `/api/occurrence/${this.occurrence.id}/occurrence_save.json`;
@@ -194,69 +320,105 @@ export default {
         },
         submitter_first_name: function () {
             if (this.occurrence && this.occurrence.submitter) {
-                return this.occurrence.submitter.first_name
+                return this.occurrence.submitter.first_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_last_name: function () {
             if (this.occurrence && this.occurrence.submitter) {
-                return this.occurrence.submitter.last_name
+                return this.occurrence.submitter.last_name;
             } else {
-                return ''
+                return '';
             }
         },
         canSeeSubmission: function () {
             //return this.proposal && (this.proposal.processing_status != 'With Assessor (Requirements)' && this.proposal.processing_status != 'With Approver' && !this.isFinalised)
             //return this.proposal && (this.proposal.processing_status != 'With Assessor (Requirements)')
-            return true
+            return true;
         },
         hasUserEditMode: function () {
             // Need to check for approved status as to show 'Save changes' button only when edit and not while view
-            return this.occurrence && this.occurrence.can_user_edit ? true : false;
+            return this.occurrence && this.occurrence.can_user_edit
+                ? true
+                : false;
         },
         isDraft: function () {
-            return this.occurrence && this.occurrence.processing_status === "Draft" ? true : false;
+            return this.occurrence &&
+                this.occurrence.processing_status === 'Draft'
+                ? true
+                : false;
         },
         canLock: function () {
-            return this.occurrence && this.occurrence.processing_status === "Active" ? true : false;
+            return this.occurrence &&
+                this.occurrence.processing_status === 'Active'
+                ? true
+                : false;
         },
         canUnlock: function () {
-            return this.occurrence && this.occurrence.processing_status === "Locked" ? true : false;
+            return this.occurrence &&
+                this.occurrence.processing_status === 'Locked'
+                ? true
+                : false;
         },
         canClose: function () {
-            return this.occurrence && this.occurrence.processing_status === "Active" ? true : false;
+            return this.occurrence &&
+                this.occurrence.processing_status === 'Active'
+                ? true
+                : false;
         },
         canReopen: function () {
-            return (this.occurrence && this.occurrence.can_user_reopen) ? true : false;
+            return this.occurrence && this.occurrence.can_user_reopen
+                ? true
+                : false;
         },
         comms_url: function () {
-            return helpers.add_endpoint_json(api_endpoints.occurrence, this.$route.params.occurrence_id + '/comms_log')
+            return helpers.add_endpoint_json(
+                api_endpoints.occurrence,
+                this.$route.params.occurrence_id + '/comms_log'
+            );
         },
         comms_add_url: function () {
-            return helpers.add_endpoint_json(api_endpoints.occurrence, this.$route.params.occurrence_id + '/add_comms_log')
+            return helpers.add_endpoint_json(
+                api_endpoints.occurrence,
+                this.$route.params.occurrence_id + '/add_comms_log'
+            );
         },
         logs_url: function () {
-            return helpers.add_endpoint_json(api_endpoints.occurrence, this.$route.params.occurrence_id + '/action_log')
+            return helpers.add_endpoint_json(
+                api_endpoints.occurrence,
+                this.$route.params.occurrence_id + '/action_log'
+            );
         },
     },
+    created: function () {
+        if (!this.occurrence) {
+            this.fetchOccurrence();
+        }
+    },
+    updated: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.form = document.forms.occurrence;
+        });
+    },
     methods: {
         save: async function () {
             let vm = this;
 
             console.log(vm.occurrence);
 
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             vm.isSaved = false;
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.savingOccurrence = true;
@@ -270,7 +432,9 @@ export default {
                     vm.$refs.occurrence.$refs.occ_location.OccGeometryFromMap();
                 vm.occurrence.occ_geometry = JSON.stringify(occ_geometry);
                 vm.occurrence.site_geometry =
-                    vm.$refs.occurrence.$refs.occ_location.$refs.component_map.getJSONFeatures("site_layer");
+                    vm.$refs.occurrence.$refs.occ_location.$refs.component_map.getJSONFeatures(
+                        'site_layer'
+                    );
             }
 
             let payload = new Object();
@@ -280,50 +444,57 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(payload)
-            }).then(async (response) => {
-                const data = await response.json();
-                swal.fire({
-                    title: "Saved",
-                    text: "Your changes have been saved",
-                    icon: "success",
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingOccurrence = false;
-                vm.isSaved = true;
-                vm.refreshFromResponse(data);
-                vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(false);
-                vm.$refs.occurrence.$refs.occ_location.incrementComponentMapKey();
-                vm.$refs.occurrence.$refs.occ_location.refreshDatatables();
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Save Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingOccurrence = false;
-                vm.isSaved = false;
-                vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(false);
-            });
+                body: JSON.stringify(payload),
+            }).then(
+                async (response) => {
+                    const data = await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Your changes have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingOccurrence = false;
+                    vm.isSaved = true;
+                    vm.refreshFromResponse(data);
+                    vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(
+                        false
+                    );
+                    vm.$refs.occurrence.$refs.occ_location.incrementComponentMapKey();
+                    vm.$refs.occurrence.$refs.occ_location.refreshDatatables();
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Save Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingOccurrence = false;
+                    vm.isSaved = false;
+                    vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(
+                        false
+                    );
+                }
+            );
         },
         save_exit: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 //vm.paySubmitting=false;
                 return false;
             }
@@ -331,10 +502,9 @@ export default {
             await vm.save().then(() => {
                 if (vm.isSaved === true) {
                     vm.$router.push({
-                        name: 'internal-occurrence-dash'
+                        name: 'internal-occurrence-dash',
                     });
-                }
-                else {
+                } else {
                     vm.saveExitOccurrence = false;
                 }
             });
@@ -351,113 +521,132 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(payload)
-            }).then(async (response) => {
-                //return true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    //helpers.apiVueResourceError(err),
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                })
-                vm.submitOccurrence = false;
-                vm.saveError = true;
-                //return false;
-            });
+                body: JSON.stringify(payload),
+            }).then(
+                async (response) => {
+                    //return true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        //helpers.apiVueResourceError(err),
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitOccurrence = false;
+                    vm.saveError = true;
+                    //return false;
+                }
+            );
             return result;
         },
         can_submit: function (check_action) {
             let vm = this;
-            let blank_fields = []
-            if (vm.occurrence.group_type == 'flora' || vm.occurrence.group_type == 'fauna') {
-                if (vm.occurrence.species == null || vm.occurrence.species == '') {
-                    blank_fields.push('Scientific Name is missing')
+            let blank_fields = [];
+            if (
+                vm.occurrence.group_type == 'flora' ||
+                vm.occurrence.group_type == 'fauna'
+            ) {
+                if (
+                    vm.occurrence.species == null ||
+                    vm.occurrence.species == ''
+                ) {
+                    blank_fields.push('Scientific Name is missing');
                 }
-            }
-            else {
-                if (vm.occurrence.community == null || vm.occurrence.community == '') {
-                    blank_fields.push('Community Name is missing')
+            } else {
+                if (
+                    vm.occurrence.community == null ||
+                    vm.occurrence.community == ''
+                ) {
+                    blank_fields.push('Community Name is missing');
                 }
             }
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
         submit: async function () {
             let vm = this;
 
-            var missing_data = vm.can_submit("submit");
+            var missing_data = vm.can_submit('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 //vm.paySubmitting=false;
                 return false;
             }
 
             vm.submitOccurrence = true;
             swal.fire({
-                title: "Submit Occurrence",
-                text: "Are you sure you want to submit this Occurrence?",
-                icon: "question",
+                title: 'Submit Occurrence',
+                text: 'Are you sure you want to submit this Occurrence?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "submit",
+                confirmButtonText: 'submit',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.occurrence);
-                        helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence.id + '/submit');
-                        fetch(submit_url, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload)
-                        }).then(async (response) => {
-                            vm.occurrence = await response.json();
-                            vm.$router.push({
-                                name: 'internal-occurrence-dash'
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        let result = await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.occurrence);
+                            helpers.add_endpoint_json(
+                                api_endpoints.occurrence,
+                                vm.occurrence.id + '/submit'
+                            );
+                            fetch(submit_url, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                        });
+                                body: JSON.stringify(payload),
+                            }).then(
+                                async (response) => {
+                                    vm.occurrence = await response.json();
+                                    vm.$router.push({
+                                        name: 'internal-occurrence-dash',
+                                    });
+                                },
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Submit Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                }
+                            );
+                        }
                     }
+                },
+                (error) => {
+                    vm.submitOccurrence = false;
                 }
-            }, (error) => {
-                vm.submitOccurrence = false;
-            });
+            );
         },
         returnToDashboard: function () {
             let vm = this;
             vm.$router.push({
-                name: 'internal-occurrence-dash'
+                name: 'internal-occurrence-dash',
             });
         },
         refreshFromResponse: async function (response) {
@@ -474,97 +663,112 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(async (response) => {
-                swal.fire({
-                    title: "Activated",
-                    text: "Occurrence has been Activated",
-                    icon: "success",
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                }).then(async (swalresult) => {
-                    this.$router.go(this.$router.currentRoute);
-                });
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Activate Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            });
+            }).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Activated',
+                        text: 'Occurrence has been Activated',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then(async (swalresult) => {
+                        this.$router.go(this.$router.currentRoute);
+                    });
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Activate Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                }
+            );
         },
         lockOccurrence: async function () {
             let vm = this;
-            await fetch(`/api/occurrence/${this.occurrence.id}/lock_occurrence.json`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                swal.fire({
-                    title: "Locked",
-                    text: "Occurrence has been Locked",
-                    icon: "success",
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                }).then(async (swalresult) => {
-                    this.$router.go(this.$router.currentRoute);
-                });
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Lock Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            await fetch(
+                `/api/occurrence/${this.occurrence.id}/lock_occurrence.json`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-            });
+                }
+            ).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Locked',
+                        text: 'Occurrence has been Locked',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then(async (swalresult) => {
+                        this.$router.go(this.$router.currentRoute);
+                    });
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Lock Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                }
+            );
         },
         unlockOccurrence: async function () {
             let vm = this;
-            await fetch(`/api/occurrence/${this.occurrence.id}/unlock_occurrence.json`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                swal.fire({
-                    title: "Unlocked",
-                    text: "Occurrence has been Unlocked",
-                    icon: "success",
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            await fetch(
+                `/api/occurrence/${this.occurrence.id}/unlock_occurrence.json`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                }).then(async (swalresult) => {
-                    this.$router.go(this.$router.currentRoute);
-                });
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Unlock Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            });
+                }
+            ).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Unlocked',
+                        text: 'Occurrence has been Unlocked',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then(async (swalresult) => {
+                        this.$router.go(this.$router.currentRoute);
+                    });
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Unlock Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                }
+            );
         },
         closeOccurrence: async function () {
             let vm = this;
             swal.fire({
-                title: "Close",
-                text: "Are you sure you want to close this Occurrence?",
-                icon: "question",
+                title: 'Close',
+                text: 'Are you sure you want to close this Occurrence?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Close Occurrence",
+                confirmButtonText: 'Close Occurrence',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
@@ -572,46 +776,52 @@ export default {
                 reverseButtons: true,
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    await fetch(`/api/occurrence/${this.occurrence.id}/close_occurrence.json`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    }).then(async (response) => {
-                        swal.fire({
-                            title: "Closed",
-                            text: "Occurrence has been Closed",
-                            icon: "success",
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
+                    await fetch(
+                        `/api/occurrence/${this.occurrence.id}/close_occurrence.json`,
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
                             },
-                        }).then(async (swalresult) => {
-                            vm.$router.push({
-                                name: 'internal-occurrence-dash'
+                        }
+                    ).then(
+                        async (response) => {
+                            swal.fire({
+                                title: 'Closed',
+                                text: 'Occurrence has been Closed',
+                                icon: 'success',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            }).then(async (swalresult) => {
+                                vm.$router.push({
+                                    name: 'internal-occurrence-dash',
+                                });
                             });
-                        });
-                    }, err => {
-                        var errorText = helpers.apiVueResourceError(err);
-                        swal.fire({
-                            title: 'Close Error',
-                            text: errorText,
-                            icon: 'error',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        });
-                    });
+                        },
+                        (err) => {
+                            var errorText = helpers.apiVueResourceError(err);
+                            swal.fire({
+                                title: 'Close Error',
+                                text: errorText,
+                                icon: 'error',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            });
+                        }
+                    );
                 }
             });
         },
         reopenOccurrence: async function () {
             let vm = this;
             swal.fire({
-                title: "Reopen",
-                text: "Are you sure you want to reopen this Occurrence?",
-                icon: "question",
+                title: 'Reopen',
+                text: 'Are you sure you want to reopen this Occurrence?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Reopen Occurrence",
+                confirmButtonText: 'Reopen Occurrence',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
@@ -619,33 +829,39 @@ export default {
                 reverseButtons: true,
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    await fetch(`/api/occurrence/${this.occurrence.id}/reopen_occurrence.json`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    }).then(async (response) => {
-                        swal.fire({
-                            title: "Reopened",
-                            text: "Occurrence has been Reopened",
-                            icon: "success",
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        }).then(async (swalresult) => {
-                            this.$router.go(this.$router.currentRoute);
-                        });
-                    }, err => {
-                        var errorText = helpers.apiVueResourceError(err);
-                        swal.fire({
-                            title: 'Reopen Error',
-                            text: errorText,
-                            icon: 'error',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
+                    await fetch(
+                        `/api/occurrence/${this.occurrence.id}/reopen_occurrence.json`,
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
                             },
-                        });
-                    });
+                        }
+                    ).then(
+                        async (response) => {
+                            swal.fire({
+                                title: 'Reopened',
+                                text: 'Occurrence has been Reopened',
+                                icon: 'success',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            }).then(async (swalresult) => {
+                                this.$router.go(this.$router.currentRoute);
+                            });
+                        },
+                        (err) => {
+                            var errorText = helpers.apiVueResourceError(err);
+                            swal.fire({
+                                title: 'Reopen Error',
+                                text: errorText,
+                                icon: 'error',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            });
+                        }
+                    );
                 }
             });
         },
@@ -657,35 +873,15 @@ export default {
         },
         fetchOccurrence: function () {
             let vm = this;
-            fetch(`/api/occurrence/${this.$route.params.occurrence_id}/`).then(async (response) => {
-                vm.occurrence = await response.json();
-            },
-                err => {
+            fetch(`/api/occurrence/${this.$route.params.occurrence_id}/`).then(
+                async (response) => {
+                    vm.occurrence = await response.json();
+                },
+                (err) => {
                     console.log(err);
-                });
-        },
-    },
-    created: function () {
-        if (!this.occurrence) {
-            this.fetchOccurrence();
-        }
-    },
-    updated: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.form = document.forms.occurrence;
-        });
-    },
-    beforeRouteEnter: function (to, from, next) {
-        //if (to.query.group_type_name === 'flora' || to.query.group_type_name === "fauna") {
-        fetch(`/api/occurrence/${to.params.occurrence_id}/`).then(async (response) => {
-            next(async vm => {
-                vm.occurrence = await response.json();
-            });
+                }
+            );
         },
-            err => {
-                console.log(err);
-            });
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
index a167d7a3..5b224c5c 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
@@ -1,35 +1,62 @@
 <template lang="html">
     <div id="occurrenceCombine">
-        <modal transition="modal fade" :title="'Combine Occurrences'" :extraLarge="true" :full="true" :showOK="false"
-            cancel-text="Cancel" @cancel="close()">
-
+        <modal
+            transition="modal fade"
+            :title="'Combine Occurrences'"
+            :extra-large="true"
+            :full="true"
+            :show-o-k="false"
+            cancel-text="Cancel"
+            @cancel="close()"
+        >
             <!--OCC Selection Drop Down-->
-            <div class="row mb-3" id="occurrence_name_lookup_form_group_id">
-                <label class="col-sm-3 control-label" for="occurrence_name_lookup">
+            <div id="occurrence_name_lookup_form_group_id" class="row mb-3">
+                <label
+                    class="col-sm-3 control-label"
+                    for="occurrence_name_lookup"
+                >
                     Select Occurrence:
                 </label>
                 <div class="col-sm-6">
-                    <select id="occurrence_name_lookup" name="occurrence_name_lookup" ref="occurrence_name_lookup"
-                        class="form-control" />
+                    <select
+                        id="occurrence_name_lookup"
+                        ref="occurrence_name_lookup"
+                        name="occurrence_name_lookup"
+                        class="form-control"
+                    />
                 </div>
             </div>
             <!--OCC Selection Table-->
             <div class="row mb-3">
-                <OccurrenceCombineSelect :selectedOccurrences="selectedOccurrences"
-                    :selectedOccurrenceIds="selectedOccurrenceIds" :mainOccurrenceId="main_occurrence_obj.id" />
+                <OccurrenceCombineSelect
+                    :selected-occurrences="selectedOccurrences"
+                    :selected-occurrence-ids="selectedOccurrenceIds"
+                    :main-occurrence-id="main_occurrence_obj.id"
+                />
             </div>
 
             <template v-if="occ_combine_data.combine_ids.length >= 2">
-
-                <alert type="primary" class="d-flex align-items-center py-1 my-4">
-                    <div class="float-start pe-3"><span class="align-middle"><i
-                                class="bi bi-info-circle-fill text-primary fs-4"></i></span></div>
+                <alert
+                    type="primary"
+                    class="d-flex align-items-center py-1 my-4"
+                >
+                    <div class="float-start pe-3">
+                        <span class="align-middle"
+                            ><i
+                                class="bi bi-info-circle-fill text-primary fs-4"
+                            ></i
+                        ></span>
+                    </div>
                     <ul class="list-group list-group-flush">
-                        <li class="list-group-item bg-transparent">Browse the contents of
-                            each to tab to select the data you would like to combine into Occurrence {{
-                                main_occurrence_obj.occurrence_number }}</li>
-                        <li class="list-group-item bg-transparent">Once you are
-                            finished click the 'Finalise Combine' tab to completed the process.</li>
+                        <li class="list-group-item bg-transparent">
+                            Browse the contents of each to tab to select the
+                            data you would like to combine into Occurrence
+                            {{ main_occurrence_obj.occurrence_number }}
+                        </li>
+                        <li class="list-group-item bg-transparent">
+                            Once you are finished click the 'Finalise Combine'
+                            tab to completed the process.
+                        </li>
                     </ul>
                 </alert>
 
@@ -38,93 +65,215 @@
                     <div class="col-md-12">
                         <ul id="pills-tab" class="nav nav-pills" role="tablist">
                             <li class="nav-item">
-                                <a id="pills-occurrence-tab" class="nav-link active" data-bs-toggle="pill"
-                                    :href="'#' + occurrenceBody" role="tab" :aria-controls="occurrenceBody"
-                                    aria-selected="true">
+                                <a
+                                    id="pills-occurrence-tab"
+                                    class="nav-link active"
+                                    data-bs-toggle="pill"
+                                    :href="'#' + occurrenceBody"
+                                    role="tab"
+                                    :aria-controls="occurrenceBody"
+                                    aria-selected="true"
+                                >
                                     Occurrence
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a id="pills-location-tab" class="nav-link" data-bs-toggle="pill"
-                                    :href="'#' + locationBody" role="tab" aria-selected="false">
+                                <a
+                                    id="pills-location-tab"
+                                    class="nav-link"
+                                    data-bs-toggle="pill"
+                                    :href="'#' + locationBody"
+                                    role="tab"
+                                    aria-selected="false"
+                                >
                                     Location
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a id="pills-habitat-tab" class="nav-link" data-bs-toggle="pill"
-                                    :href="'#' + habitatBody" role="tab" aria-selected="false">
+                                <a
+                                    id="pills-habitat-tab"
+                                    class="nav-link"
+                                    data-bs-toggle="pill"
+                                    :href="'#' + habitatBody"
+                                    role="tab"
+                                    aria-selected="false"
+                                >
                                     Habitat
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a id="pills-observation-tab" class="nav-link" data-bs-toggle="pill"
-                                    :href="'#' + observationBody" role="tab" aria-selected="false">
+                                <a
+                                    id="pills-observation-tab"
+                                    class="nav-link"
+                                    data-bs-toggle="pill"
+                                    :href="'#' + observationBody"
+                                    role="tab"
+                                    aria-selected="false"
+                                >
                                     Observation
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a id="pills-documents-tab" class="nav-link" data-bs-toggle="pill"
-                                    :href="'#' + documentBody" role="tab" aria-selected="false">
+                                <a
+                                    id="pills-documents-tab"
+                                    class="nav-link"
+                                    data-bs-toggle="pill"
+                                    :href="'#' + documentBody"
+                                    role="tab"
+                                    aria-selected="false"
+                                >
                                     Documents
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a id="pills-threats-tab" class="nav-link" data-bs-toggle="pill"
-                                    :href="'#' + threatBody" role="tab" aria-selected="false">
+                                <a
+                                    id="pills-threats-tab"
+                                    class="nav-link"
+                                    data-bs-toggle="pill"
+                                    :href="'#' + threatBody"
+                                    role="tab"
+                                    aria-selected="false"
+                                >
                                     Threats
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a id="pills-finalise-combine-tab" class="nav-link" data-bs-toggle="pill"
-                                    href="'#finalise-occurrence-combine" role="tab" aria-selected="false"><i
-                                        class="bi bi-check2-circle"></i>
+                                <a
+                                    id="pills-finalise-combine-tab"
+                                    class="nav-link"
+                                    data-bs-toggle="pill"
+                                    href="'#finalise-occurrence-combine"
+                                    role="tab"
+                                    aria-selected="false"
+                                    ><i class="bi bi-check2-circle"></i>
                                     Finalise Combine
                                 </a>
                             </li>
                         </ul>
                         <div id="pills-tabContent" class="tab-content">
-                            <div :id="occurrenceBody" class="tab-pane fade show active" role="tabpanel"
-                                aria-labelledby="pills-occurrence-tab">
+                            <div
+                                :id="occurrenceBody"
+                                class="tab-pane fade show active"
+                                role="tabpanel"
+                                aria-labelledby="pills-occurrence-tab"
+                            >
                                 <!--Main OCC Form-->
-                                <FormSection :formCollapse="false" label="Occurrence" Index="combine_occurrence">
+                                <FormSection
+                                    :form-collapse="false"
+                                    label="Occurrence"
+                                    Index="combine_occurrence"
+                                >
                                     <div class="row mb-3">
-                                        <label for="" class="col-sm-3 control-label">Occurrence Name:</label>
+                                        <label
+                                            for=""
+                                            class="col-sm-3 control-label"
+                                            >Occurrence Name:</label
+                                        >
                                         <div class="col-sm-9">
-                                            <textarea disabled class="form-control" rows="1"
-                                                v-model="main_occurrence_obj.occurrence_name" />
+                                            <textarea
+                                                v-model="
+                                                    main_occurrence_obj.occurrence_name
+                                                "
+                                                disabled
+                                                class="form-control"
+                                                rows="1"
+                                            />
                                         </div>
                                     </div>
-                                    <div v-if="main_occurrence_obj.group_type == 'flora' || main_occurrence_obj.group_type == 'fauna'"
-                                        class="row mb-3">
-                                        <label for="" class="col-sm-3 control-label">Scientific Name:</label>
+                                    <div
+                                        v-if="
+                                            main_occurrence_obj.group_type ==
+                                                'flora' ||
+                                            main_occurrence_obj.group_type ==
+                                                'fauna'
+                                        "
+                                        class="row mb-3"
+                                    >
+                                        <label
+                                            for=""
+                                            class="col-sm-3 control-label"
+                                            >Scientific Name:</label
+                                        >
                                         <div class="col-sm-9">
-                                            <textarea disabled class="form-control" rows="1"
-                                                v-model="main_occurrence_obj.scientific_name" />
+                                            <textarea
+                                                v-model="
+                                                    main_occurrence_obj.scientific_name
+                                                "
+                                                disabled
+                                                class="form-control"
+                                                rows="1"
+                                            />
                                         </div>
                                     </div>
                                     <div v-else class="row mb-3">
-                                        <label for="" class="col-sm-3 control-label">Community Name:</label>
+                                        <label
+                                            for=""
+                                            class="col-sm-3 control-label"
+                                            >Community Name:</label
+                                        >
                                         <div class="col-sm-9">
-                                            <textarea disabled class="form-control" rows="1"
-                                                v-model="main_occurrence_obj.community_name" />
+                                            <textarea
+                                                v-model="
+                                                    main_occurrence_obj.community_name
+                                                "
+                                                disabled
+                                                class="form-control"
+                                                rows="1"
+                                            />
                                         </div>
                                     </div>
                                     <div class="row mb-3">
-                                        <label for="" class="col-sm-3 control-label">Occurrence Source:</label>
+                                        <label
+                                            for=""
+                                            class="col-sm-3 control-label"
+                                            >Occurrence Source:</label
+                                        >
                                         <div class="col-sm-9">
-                                            <select id="combine_occurrence_source" ref="combine_occurrence_source"
-                                                class="form-select" v-model="occ_combine_data.occurrence_source"
-                                                :key="occ_form_key">
-                                                <option v-for="occurrence in selectedOccurrences" :value="occurrence.id"
-                                                    v-bind:key="occurrence.id">
-                                                    {{ occurrence.occurrence_number }}:
-                                                    <span v-for="source in occurrence.occurrence_source">
-                                                        <span v-for="occ_source in occurrence_source_list">
-                                                            <span v-if="occ_source[0] == source">{{ occ_source[1]
-                                                                }}</span>
+                                            <select
+                                                id="combine_occurrence_source"
+                                                ref="combine_occurrence_source"
+                                                :key="occ_form_key"
+                                                v-model="
+                                                    occ_combine_data.occurrence_source
+                                                "
+                                                class="form-select"
+                                            >
+                                                <option
+                                                    v-for="occurrence in selectedOccurrences"
+                                                    :key="occurrence.id"
+                                                    :value="occurrence.id"
+                                                >
+                                                    {{
+                                                        occurrence.occurrence_number
+                                                    }}:
+                                                    <span
+                                                        v-for="source in occurrence.occurrence_source"
+                                                    >
+                                                        <span
+                                                            v-for="occ_source in occurrence_source_list"
+                                                        >
+                                                            <span
+                                                                v-if="
+                                                                    occ_source[0] ==
+                                                                    source
+                                                                "
+                                                                >{{
+                                                                    occ_source[1]
+                                                                }}</span
+                                                            >
                                                         </span>
                                                         <span
-                                                            v-if="source != occurrence.occurrence_source[occurrence.occurrence_source.length - 1]">,
+                                                            v-if="
+                                                                source !=
+                                                                occurrence
+                                                                    .occurrence_source[
+                                                                    occurrence
+                                                                        .occurrence_source
+                                                                        .length -
+                                                                        1
+                                                                ]
+                                                            "
+                                                            >,
                                                         </span>
                                                     </span>
                                                 </option>
@@ -132,256 +281,587 @@
                                         </div>
                                     </div>
                                     <div class="row mb-3">
-                                        <label for="" class="col-sm-3 control-label">Wild Status:</label>
+                                        <label
+                                            for=""
+                                            class="col-sm-3 control-label"
+                                            >Wild Status:</label
+                                        >
                                         <div class="col-sm-9">
-                                            <select id="combine_wild_status" ref="combine_wild_status"
-                                                class="form-select" v-model="occ_combine_data.wild_status"
-                                                :key="occ_form_key">
-                                                <option v-for="occurrence in selectedOccurrences" :value="occurrence.id"
-                                                    v-bind:key="occurrence.id">
-                                                    {{ occurrence.occurrence_number }}:
-                                                    <span v-for="wild_status in wild_status_list">
-                                                        <span v-if="wild_status.id == occurrence.wild_status">{{
-                                                            wild_status.name }}</span>
+                                            <select
+                                                id="combine_wild_status"
+                                                ref="combine_wild_status"
+                                                :key="occ_form_key"
+                                                v-model="
+                                                    occ_combine_data.wild_status
+                                                "
+                                                class="form-select"
+                                            >
+                                                <option
+                                                    v-for="occurrence in selectedOccurrences"
+                                                    :key="occurrence.id"
+                                                    :value="occurrence.id"
+                                                >
+                                                    {{
+                                                        occurrence.occurrence_number
+                                                    }}:
+                                                    <span
+                                                        v-for="wild_status in wild_status_list"
+                                                    >
+                                                        <span
+                                                            v-if="
+                                                                wild_status.id ==
+                                                                occurrence.wild_status
+                                                            "
+                                                            >{{
+                                                                wild_status.name
+                                                            }}</span
+                                                        >
                                                     </span>
                                                 </option>
                                             </select>
                                         </div>
                                     </div>
                                     <div class="row mb-3">
-                                        <label for="" class="col-sm-3 control-label">Review Due Date:</label>
+                                        <label
+                                            for=""
+                                            class="col-sm-3 control-label"
+                                            >Review Due Date:</label
+                                        >
                                         <div class="col-sm-9">
-                                            <select id="combine_review_due_date" ref="combine_review_due_date"
-                                                class="form-select" v-model="occ_combine_data.review_due_date"
-                                                :key="occ_form_key">
-                                                <option v-for="occurrence in selectedOccurrences" :value="occurrence.id"
-                                                    v-bind:key="occurrence.id">
-                                                    {{ occurrence.occurrence_number }}: {{ occurrence.review_due_date }}
+                                            <select
+                                                id="combine_review_due_date"
+                                                ref="combine_review_due_date"
+                                                :key="occ_form_key"
+                                                v-model="
+                                                    occ_combine_data.review_due_date
+                                                "
+                                                class="form-select"
+                                            >
+                                                <option
+                                                    v-for="occurrence in selectedOccurrences"
+                                                    :key="occurrence.id"
+                                                    :value="occurrence.id"
+                                                >
+                                                    {{
+                                                        occurrence.occurrence_number
+                                                    }}:
+                                                    {{
+                                                        occurrence.review_due_date
+                                                    }}
                                                 </option>
                                             </select>
                                         </div>
                                     </div>
                                     <div class="row mb-3">
-                                        <label for="" class="col-sm-3 control-label">Comment:</label>
+                                        <label
+                                            for=""
+                                            class="col-sm-3 control-label"
+                                            >Comment:</label
+                                        >
                                         <div class="col-sm-9">
-                                            <select id="combine_comment" ref="combine_comment" class="form-select"
-                                                v-model="occ_combine_data.comment" :key="occ_form_key">
-                                                <option v-for="occurrence in selectedOccurrences" :value="occurrence.id"
-                                                    v-bind:key="occurrence.id">
-                                                    {{ occurrence.occurrence_number }}: {{ occurrence.comment }}
+                                            <select
+                                                id="combine_comment"
+                                                ref="combine_comment"
+                                                :key="occ_form_key"
+                                                v-model="
+                                                    occ_combine_data.comment
+                                                "
+                                                class="form-select"
+                                            >
+                                                <option
+                                                    v-for="occurrence in selectedOccurrences"
+                                                    :key="occurrence.id"
+                                                    :value="occurrence.id"
+                                                >
+                                                    {{
+                                                        occurrence.occurrence_number
+                                                    }}: {{ occurrence.comment }}
                                                 </option>
                                             </select>
                                         </div>
                                     </div>
                                 </FormSection>
                                 <!--Key Contacts Table-->
-                                <FormSection :formCollapse="true" label="Key Contacts" Index="combine_keyContacts"
-                                    @toggle-collapse="toggleKeyContacts">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Key Contacts"
+                                    Index="combine_keyContacts"
+                                    @toggle-collapse="toggleKeyContacts"
+                                >
                                     <div class="row mb-3">
-                                        <OccurrenceCombineContacts :selectedKeyContacts="key_contacts"
-                                            :combineKeyContactIds="occ_combine_data.combine_key_contact_ids"
-                                            :mainOccurrenceId="main_occurrence_obj.id" :key="contact_table_key"
-                                            ref="key_contacts_section" />
+                                        <OccurrenceCombineContacts
+                                            :key="contact_table_key"
+                                            ref="key_contacts_section"
+                                            :selected-key-contacts="
+                                                key_contacts
+                                            "
+                                            :combine-key-contact-ids="
+                                                occ_combine_data.combine_key_contact_ids
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                             </div>
-                            <div :id="locationBody" class="tab-pane fade" role="tabpanel"
-                                aria-labelledby="pills-location-tab">
+                            <div
+                                :id="locationBody"
+                                class="tab-pane fade"
+                                role="tabpanel"
+                                aria-labelledby="pills-location-tab"
+                            >
                                 <!--Location Form-->
-                                <FormSection :formCollapse="true" label="Location"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_location_section"
-                                    Index="combine_location">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Location"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_location_section
+                                    "
+                                    Index="combine_location"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_location_section"
-                                            :section_type="'location'" :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_location_section
+                                            "
+                                            :section_type="'location'"
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
-                                <FormSection :formCollapse="true" label="Sites" Index="combine_sites"
-                                    @toggle-collapse="toggleSites">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Sites"
+                                    Index="combine_sites"
+                                    @toggle-collapse="toggleSites"
+                                >
                                     <div class="row mb-3">
-                                        <OccurrenceCombineSites :selectedSites="sites"
-                                            :combineSiteIds="occ_combine_data.combine_site_ids"
-                                            :mainOccurrenceId="main_occurrence_obj.id" :key="site_table_key"
-                                            ref="sites_section" />
+                                        <OccurrenceCombineSites
+                                            :key="site_table_key"
+                                            ref="sites_section"
+                                            :selected-sites="sites"
+                                            :combine-site-ids="
+                                                occ_combine_data.combine_site_ids
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
-                                <FormSection :formCollapse="true" label="Tenures" Index="combine_tenures"
-                                    @toggle-collapse="toggleTenures">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Tenures"
+                                    Index="combine_tenures"
+                                    @toggle-collapse="toggleTenures"
+                                >
                                     <div class="row mb-3">
-                                        <OccurrenceCombineTenures :selectedTenures="tenures"
-                                            :combineTenureIds="occ_combine_data.combine_tenure_ids"
-                                            :mainOccurrenceId="main_occurrence_obj.id" :key="tenure_table_key"
-                                            ref="tenures_section" />
+                                        <OccurrenceCombineTenures
+                                            :key="tenure_table_key"
+                                            ref="tenures_section"
+                                            :selected-tenures="tenures"
+                                            :combine-tenure-ids="
+                                                occ_combine_data.combine_tenure_ids
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                             </div>
-                            <div :id="habitatBody" class="tab-pane fade" role="tabpanel"
-                                aria-labelledby="pills-habitat-tab">
+                            <div
+                                :id="habitatBody"
+                                class="tab-pane fade"
+                                role="tabpanel"
+                                aria-labelledby="pills-habitat-tab"
+                            >
                                 <!--Habitat Composition Form-->
-                                <FormSection :formCollapse="true" label="Habitat Composition"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_habitat_composition_section"
-                                    Index="combine_habitat_composition">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Habitat Composition"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_habitat_composition_section
+                                    "
+                                    Index="combine_habitat_composition"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_habitat_composition_section"
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_habitat_composition_section
+                                            "
                                             :section_type="'habitat_composition'"
-                                            :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                                 <!--Habitat Condition Form-->
-                                <FormSection :formCollapse="true" label="Habitat Condition"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_habitat_condition_section"
-                                    Index="combine_habitat_condition">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Habitat Condition"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_habitat_condition_section
+                                    "
+                                    Index="combine_habitat_condition"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_habitat_condition_section"
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_habitat_condition_section
+                                            "
                                             :section_type="'habitat_condition'"
-                                            :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                                 <!--Vegetation Structure Form-->
-                                <FormSection :formCollapse="true" label="Vegetation Structure"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_vegetation_structure_section"
-                                    Index="combine_vegetation_structure">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Vegetation Structure"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_vegetation_structure_section
+                                    "
+                                    Index="combine_vegetation_structure"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_vegetation_structure_section"
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_vegetation_structure_section
+                                            "
                                             :section_type="'vegetation_structure'"
-                                            :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                                 <!--Fire History Form-->
-                                <FormSection :formCollapse="true" label="Fire History"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_fire_history_section"
-                                    Index="combine_fire_history">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Fire History"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_fire_history_section
+                                    "
+                                    Index="combine_fire_history"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_fire_history_section"
-                                            :section_type="'fire_history'" :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_fire_history_section
+                                            "
+                                            :section_type="'fire_history'"
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                                 <!--Associated Species Form-->
-                                <FormSection :formCollapse="true" label="Associated Species"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_associated_species_section"
-                                    Index="combine_associated_species">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Associated Species"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_associated_species_section
+                                    "
+                                    Index="combine_associated_species"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_associated_species_section"
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_associated_species_section
+                                            "
                                             :section_type="'associated_species'"
-                                            :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                             </div>
-                            <div :id="observationBody" class="tab-pane fade" role="tabpanel"
-                                aria-labelledby="pills-observation-tab">
+                            <div
+                                :id="observationBody"
+                                class="tab-pane fade"
+                                role="tabpanel"
+                                aria-labelledby="pills-observation-tab"
+                            >
                                 <!--Observation Details Form-->
-                                <FormSection :formCollapse="true" label="Observation Details"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_observation_detail_section"
-                                    Index="combine_observation_details">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Observation Details"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_observation_detail_section
+                                    "
+                                    Index="combine_observation_details"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_observation_detail_section"
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_observation_detail_section
+                                            "
                                             :section_type="'observation_detail'"
-                                            :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                                 <!--Animal Observation Form (fauna only)-->
-                                <FormSection v-if="main_occurrence_obj.group_type == 'fauna'" :formCollapse="true"
+                                <FormSection
+                                    v-if="
+                                        main_occurrence_obj.group_type ==
+                                        'fauna'
+                                    "
+                                    :form-collapse="true"
                                     label="Animal Observation"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_animal_observation_section"
-                                    Index="combine_animal_observation">
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_animal_observation_section
+                                    "
+                                    Index="combine_animal_observation"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_animal_observation_section"
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_animal_observation_section
+                                            "
                                             :section_type="'animal_observation'"
-                                            :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                                 <!--Plant Count Form (flora only)-->
-                                <FormSection v-if="main_occurrence_obj.group_type == 'flora'" :formCollapse="true"
+                                <FormSection
+                                    v-if="
+                                        main_occurrence_obj.group_type ==
+                                        'flora'
+                                    "
+                                    :form-collapse="true"
                                     label="Plant Count"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_plant_count_section"
-                                    Index="combine_plant_count">
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_plant_count_section
+                                    "
+                                    Index="combine_plant_count"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_plant_count_section"
-                                            :section_type="'plant_count'" :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_plant_count_section
+                                            "
+                                            :section_type="'plant_count'"
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                                 <!--Identification Form-->
-                                <FormSection :formCollapse="true" label="Identification"
-                                    :subtitle="' - OCC' + occ_combine_data.chosen_identification_section"
-                                    Index="combine_identification">
+                                <FormSection
+                                    :form-collapse="true"
+                                    label="Identification"
+                                    :subtitle="
+                                        ' - OCC' +
+                                        occ_combine_data.chosen_identification_section
+                                    "
+                                    Index="combine_identification"
+                                >
                                     <div class="row mb-3">
                                         <OccurrenceCombineSelect
-                                            :occ_chosen_section="occ_combine_data.chosen_identification_section"
-                                            :section_type="'identification'" :selectedOccurrences="selectedOccurrences"
-                                            :selectedOccurrenceIds="selectedOccurrenceIds"
-                                            :mainOccurrenceId="main_occurrence_obj.id"
-                                            @updateChosenSection="updateChosenSection" />
+                                            :occ_chosen_section="
+                                                occ_combine_data.chosen_identification_section
+                                            "
+                                            :section_type="'identification'"
+                                            :selected-occurrences="
+                                                selectedOccurrences
+                                            "
+                                            :selected-occurrence-ids="
+                                                selectedOccurrenceIds
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                            @update-chosen-section="
+                                                updateChosenSection
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                             </div>
-                            <div :id="documentBody" class="tab-pane fade" role="tabpanel"
-                                aria-labelledby="pills-documents-tab">
+                            <div
+                                :id="documentBody"
+                                class="tab-pane fade"
+                                role="tabpanel"
+                                aria-labelledby="pills-documents-tab"
+                            >
                                 <!--Documents Table-->
-                                <FormSection :formCollapse="false" label="Documents" Index="combine_documents"
-                                    @toggle-collapse="toggleDocuments">
+                                <FormSection
+                                    :form-collapse="false"
+                                    label="Documents"
+                                    Index="combine_documents"
+                                    @toggle-collapse="toggleDocuments"
+                                >
                                     <div class="row mb-3">
-                                        <OccurrenceCombineDocuments :selectedDocuments="documents"
-                                            :combineDocumentIds="occ_combine_data.combine_document_ids"
-                                            :mainOccurrenceId="main_occurrence_obj.id" :key="document_table_key"
-                                            ref="documents_section" />
+                                        <OccurrenceCombineDocuments
+                                            :key="document_table_key"
+                                            ref="documents_section"
+                                            :selected-documents="documents"
+                                            :combine-document-ids="
+                                                occ_combine_data.combine_document_ids
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                             </div>
-                            <div :id="threatBody" class="tab-pane fade" role="tabpanel"
-                                aria-labelledby="pills-threats-tab">
+                            <div
+                                :id="threatBody"
+                                class="tab-pane fade"
+                                role="tabpanel"
+                                aria-labelledby="pills-threats-tab"
+                            >
                                 <!--Threats Table-->
-                                <FormSection :formCollapse="false" label="Threats" Index="combine_threats">
+                                <FormSection
+                                    :form-collapse="false"
+                                    label="Threats"
+                                    Index="combine_threats"
+                                >
                                     <div class="row mb-3">
-                                        <OccurrenceCombineThreats :selectedThreats="threats"
-                                            :combineThreatIds="occ_combine_data.combine_threat_ids"
-                                            :mainOccurrenceId="main_occurrence_obj.id" :key="threat_table_key"
-                                            ref="threats_section" />
+                                        <OccurrenceCombineThreats
+                                            :key="threat_table_key"
+                                            ref="threats_section"
+                                            :selected-threats="threats"
+                                            :combine-threat-ids="
+                                                occ_combine_data.combine_threat_ids
+                                            "
+                                            :main-occurrence-id="
+                                                main_occurrence_obj.id
+                                            "
+                                        />
                                     </div>
                                 </FormSection>
                             </div>
-                            <div id="finalise-occurrence-combine" class="tab-pane fade" role="tabpanel"
-                                aria-labelledby="pills-occurrence-combine-tab">
-                                <FormSection :formCollapse="false" label="Finalise Combine" Index="finalise_combine">
+                            <div
+                                id="finalise-occurrence-combine"
+                                class="tab-pane fade"
+                                role="tabpanel"
+                                aria-labelledby="pills-occurrence-combine-tab"
+                            >
+                                <FormSection
+                                    :form-collapse="false"
+                                    label="Finalise Combine"
+                                    Index="finalise_combine"
+                                >
                                     <div class="row mb-3">
                                         <div class="col-sm-12">
-                                            <button type="button" class="btn btn-primary" @click="ok()"><i
-                                                    class="bi bi-check2-circle"></i> Finalise Combine</button>
+                                            <button
+                                                type="button"
+                                                class="btn btn-primary"
+                                                @click="ok()"
+                                            >
+                                                <i
+                                                    class="bi bi-check2-circle"
+                                                ></i>
+                                                Finalise Combine
+                                            </button>
                                         </div>
                                     </div>
                                 </FormSection>
@@ -396,23 +876,17 @@
 
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
-import alert from '@vue-utils/alert.vue'
+import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import { helpers, api_endpoints } from "@/utils/hooks.js"
-import OccurrenceCombineSelect from './occurrence_combine_selection.vue'
-import OccurrenceCombineContacts from './occurrence_combine_contacts.vue'
-import OccurrenceCombineSites from './occurrence_combine_sites.vue'
-import OccurrenceCombineTenures from './occurrence_combine_tenures.vue'
-import OccurrenceCombineDocuments from './occurrence_combine_documents.vue'
-import OccurrenceCombineThreats from './occurrence_combine_threats.vue'
+import { helpers, api_endpoints } from '@/utils/hooks.js';
+import OccurrenceCombineSelect from './occurrence_combine_selection.vue';
+import OccurrenceCombineContacts from './occurrence_combine_contacts.vue';
+import OccurrenceCombineSites from './occurrence_combine_sites.vue';
+import OccurrenceCombineTenures from './occurrence_combine_tenures.vue';
+import OccurrenceCombineDocuments from './occurrence_combine_documents.vue';
+import OccurrenceCombineThreats from './occurrence_combine_threats.vue';
 export default {
     name: 'OccurrenceCombine',
-    props: {
-        main_occurrence_obj: {
-            type: Object,
-            required: true
-        },
-    },
     components: {
         alert,
         modal,
@@ -424,6 +898,12 @@ export default {
         OccurrenceCombineSites,
         OccurrenceCombineTenures,
     },
+    props: {
+        main_occurrence_obj: {
+            type: Object,
+            required: true,
+        },
+    },
     data: function () {
         let vm = this;
         return {
@@ -471,7 +951,8 @@ export default {
                 chosen_location_section: this.main_occurrence_obj.id,
                 chosen_habitat_composition_section: this.main_occurrence_obj.id,
                 chosen_habitat_condition_section: this.main_occurrence_obj.id,
-                chosen_vegetation_structure_section: this.main_occurrence_obj.id,
+                chosen_vegetation_structure_section:
+                    this.main_occurrence_obj.id,
                 chosen_fire_history_section: this.main_occurrence_obj.id,
                 chosen_associated_species_section: this.main_occurrence_obj.id,
                 chosen_observation_detail_section: this.main_occurrence_obj.id,
@@ -479,21 +960,73 @@ export default {
                 chosen_plant_count_section: this.main_occurrence_obj.id,
                 chosen_identification_section: this.main_occurrence_obj.id,
             },
-        }
+        };
+    },
+    watch: {
+        isModalOpen: function () {
+            if (this.isModalOpen) {
+                let vm = this;
+
+                vm.getKeyContactIds();
+                vm.getDocumentIds();
+                vm.getThreatIds();
+                vm.getSiteIds();
+                vm.getTenureIds();
+
+                let dict_url =
+                    api_endpoints.occ_profile_dict +
+                    '?group_type=' +
+                    vm.main_occurrence_obj.group_type;
+                fetch(dict_url).then(
+                    async (response) => {
+                        vm.occ_profile_dict = await response.json();
+                        vm.wild_status_list =
+                            vm.occ_profile_dict.wild_status_list;
+                        vm.occurrence_source_list =
+                            vm.occ_profile_dict.occurrence_source_list;
+                    },
+                    (error) => {
+                        console.log(error);
+                    }
+                );
+                vm.$nextTick(() => {
+                    $(vm.$refs.occurrence_name_lookup).select2('open');
+                });
+            }
+        },
+        selectedOccurrenceIds: function () {
+            let vm = this;
+            vm.occ_combine_data.combine_ids = vm.selectedOccurrenceIds;
+            vm.getKeyContactIds();
+            vm.getDocumentIds();
+            vm.getThreatIds();
+            vm.getSiteIds();
+            vm.getTenureIds();
+            vm.checkFormValues();
+        },
+    },
+    mounted: function () {
+        this.initialiseOccurrenceNameLookup();
     },
     methods: {
         sendData: function () {
             let vm = this;
             let formData = new FormData();
             formData.append('data', JSON.stringify(vm.occ_combine_data));
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, vm.main_occurrence_obj.id + '/combine'), {
-                method: 'POST',
-                body: formData,
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            })
-                .then((response) => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.main_occurrence_obj.id + '/combine'
+                ),
+                {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
+            ).then(
+                (response) => {
                     swal.fire({
                         title: 'Combined',
                         text: 'Selected Occurrences have been combined.',
@@ -504,7 +1037,8 @@ export default {
                     }).then((swalresult) => {
                         vm.$router.go();
                     });
-                }, (err) => {
+                },
+                (err) => {
                     var errorText = helpers.apiVueResourceError(err);
                     swal.fire({
                         title: 'Submit Error',
@@ -516,7 +1050,8 @@ export default {
                     });
                     vm.paySubmitting = false;
                     vm.saveError = true;
-                });
+                }
+            );
         },
         ok: function () {
             let vm = this;
@@ -525,7 +1060,7 @@ export default {
             if (this.occ_combine_data.combine_ids.length < 2) {
                 swal.fire({
                     title: 'Submit Error',
-                    text: "No additional Occurrences have been selected to combine.",
+                    text: 'No additional Occurrences have been selected to combine.',
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
@@ -534,14 +1069,14 @@ export default {
             } else {
                 //confirm before sending
                 swal.fire({
-                    title: "Combine Occurrences",
-                    text: "Are you sure you want to combine the selected Occurrences, with the selected sections, fields, and table rows?",
-                    icon: "question",
+                    title: 'Combine Occurrences',
+                    text: 'Are you sure you want to combine the selected Occurrences, with the selected sections, fields, and table rows?',
+                    icon: 'question',
                     showCancelButton: true,
                     confirmButtonText: 'Combine Occurrences',
                     customClass: {
                         confirmButton: 'btn btn-primary',
-                        cancelButton: 'btn btn-secondary'
+                        cancelButton: 'btn btn-secondary',
                     },
                     reverseButtons: true,
                 }).then((swalresult) => {
@@ -573,8 +1108,11 @@ export default {
         },
         updateChosenSection: function (id, sectionType) {
             let vm = this;
-            vm.occ_combine_data["chosen_" + sectionType + "_section"] = parseInt(id);
-            console.log(vm.occ_combine_data["chosen_" + sectionType + "_section"]);
+            vm.occ_combine_data['chosen_' + sectionType + '_section'] =
+                parseInt(id);
+            console.log(
+                vm.occ_combine_data['chosen_' + sectionType + '_section']
+            );
         },
         close: function () {
             this.errorString = '';
@@ -584,13 +1122,15 @@ export default {
         addOccurrence: function () {
             let vm = this;
             vm.addOccurrenceLoading = true;
-            if (vm.selectedAddOccurrence != null &&
-                !vm.selectedOccurrenceIds.includes(vm.selectedAddOccurrence.id)) {
+            if (
+                vm.selectedAddOccurrence != null &&
+                !vm.selectedOccurrenceIds.includes(vm.selectedAddOccurrence.id)
+            ) {
                 vm.selectedOccurrenceIds.push(vm.selectedAddOccurrence.id);
                 vm.selectedOccurrences.push(vm.selectedAddOccurrence);
             }
             vm.selectedAddOccurrence = null;
-            $(vm.$refs.occurrence_name_lookup).val(null).trigger("change");
+            $(vm.$refs.occurrence_name_lookup).val(null).trigger('change');
             vm.occ_form_key++;
             vm.$nextTick(() => {
                 vm.addTabEventListeners();
@@ -599,372 +1139,497 @@ export default {
         checkFormValues: function () {
             let vm = this;
 
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_location_section)) {
-                vm.occ_combine_data.chosen_location_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_location_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_location_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_habitat_composition_section)) {
-                vm.occ_combine_data.chosen_habitat_composition_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_habitat_composition_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_habitat_composition_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_habitat_condition_section)) {
-                vm.occ_combine_data.chosen_habitat_condition_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_habitat_condition_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_habitat_condition_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_vegetation_structure_section)) {
-                vm.occ_combine_data.chosen_vegetation_structure_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_vegetation_structure_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_vegetation_structure_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_fire_history_section)) {
-                vm.occ_combine_data.chosen_fire_history_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_fire_history_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_fire_history_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_associated_species_section)) {
-                vm.occ_combine_data.chosen_associated_species_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_associated_species_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_associated_species_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_observation_detail_section)) {
-                vm.occ_combine_data.chosen_observation_detail_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_observation_detail_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_observation_detail_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_animal_observation_section)) {
-                vm.occ_combine_data.chosen_animal_observation_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_animal_observation_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_animal_observation_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_plant_count_section)) {
-                vm.occ_combine_data.chosen_plant_count_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_plant_count_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_plant_count_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.chosen_identification_section)) {
-                vm.occ_combine_data.chosen_identification_section = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.chosen_identification_section
+                )
+            ) {
+                vm.occ_combine_data.chosen_identification_section =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.occurrence_source)) {
-                vm.occ_combine_data.occurrence_source = vm.main_occurrence_obj.id;
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.occurrence_source
+                )
+            ) {
+                vm.occ_combine_data.occurrence_source =
+                    vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.wild_status)) {
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.wild_status
+                )
+            ) {
                 vm.occ_combine_data.wild_status = vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.review_due_date)) {
+            if (
+                !vm.selectedOccurrenceIds.includes(
+                    vm.occ_combine_data.review_due_date
+                )
+            ) {
                 vm.occ_combine_data.review_due_date = vm.main_occurrence_obj.id;
             }
-            if (!vm.selectedOccurrenceIds.includes(vm.occ_combine_data.comment)) {
+            if (
+                !vm.selectedOccurrenceIds.includes(vm.occ_combine_data.comment)
+            ) {
                 vm.occ_combine_data.comment = vm.main_occurrence_obj.id;
             }
         },
         getKeyContactIds: function () {
             let vm = this;
-            let formData = new FormData()
-            formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
+            let formData = new FormData();
+            formData.append(
+                'occurrence_ids',
+                JSON.stringify(vm.selectedOccurrenceIds)
+            );
             //get all key contact ids for all OCCs
-            fetch(
-                api_endpoints.combine_key_contacts_lookup, {
+            fetch(api_endpoints.combine_key_contacts_lookup, {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'Content-Type': 'application/json',
-                }
-            }).then(async (response) => {
-                const data = await response.json();
-                //copy old list
-                let old_list = vm.key_contact_ids;
-                //add to main list
-                vm.key_contact_ids = data.id_list;
-                vm.key_contacts = data.values_list;
+                },
+            }).then(
+                async (response) => {
+                    const data = await response.json();
+                    //copy old list
+                    let old_list = vm.key_contact_ids;
+                    //add to main list
+                    vm.key_contact_ids = data.id_list;
+                    vm.key_contacts = data.values_list;
 
-                let contact_names = {};
-                let taken_names = [];
-                vm.key_contacts.forEach(contact => {
-                    if (vm.occ_combine_data.combine_key_contact_ids.includes(contact.id)) {
-                        taken_names.push(contact.contact_name);
-                    }
-                    contact_names[contact.id] = contact.contact_name;
-                });
+                    let contact_names = {};
+                    let taken_names = [];
+                    vm.key_contacts.forEach((contact) => {
+                        if (
+                            vm.occ_combine_data.combine_key_contact_ids.includes(
+                                contact.id
+                            )
+                        ) {
+                            taken_names.push(contact.contact_name);
+                        }
+                        contact_names[contact.id] = contact.contact_name;
+                    });
 
-                //remove ids from combine list if not in new list
-                vm.occ_combine_data.combine_key_contact_ids.forEach(id => {
-                    if (!vm.key_contact_ids.includes(id)) {
-                        vm.occ_combine_data.combine_key_contact_ids.splice(vm.occ_combine_data.combine_key_contact_ids.indexOf(id), 1);
-                    }
-                });
+                    //remove ids from combine list if not in new list
+                    vm.occ_combine_data.combine_key_contact_ids.forEach(
+                        (id) => {
+                            if (!vm.key_contact_ids.includes(id)) {
+                                vm.occ_combine_data.combine_key_contact_ids.splice(
+                                    vm.occ_combine_data.combine_key_contact_ids.indexOf(
+                                        id
+                                    ),
+                                    1
+                                );
+                            }
+                        }
+                    );
 
-                //add new ids to combine list if not in old list - unless they share a name
-                data.id_list.forEach(id => {
-                    if (!old_list.includes(id) && !taken_names.includes(contact_names[id])) {
-                        vm.occ_combine_data.combine_key_contact_ids.push(id);
-                        taken_names.push(contact_names[id]);
-                    }
-                });
+                    //add new ids to combine list if not in old list - unless they share a name
+                    data.id_list.forEach((id) => {
+                        if (
+                            !old_list.includes(id) &&
+                            !taken_names.includes(contact_names[id])
+                        ) {
+                            vm.occ_combine_data.combine_key_contact_ids.push(
+                                id
+                            );
+                            taken_names.push(contact_names[id]);
+                        }
+                    });
 
-                vm.contact_table_key++;
-            }, (error) => {
-                console.error(error);
-            });
+                    vm.contact_table_key++;
+                },
+                (error) => {
+                    console.error(error);
+                }
+            );
         },
         getDocumentIds: function () {
             let vm = this;
-            let formData = new FormData()
-            formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
+            let formData = new FormData();
+            formData.append(
+                'occurrence_ids',
+                JSON.stringify(vm.selectedOccurrenceIds)
+            );
             //get all document ids for all OCCs
-            fetch(
-                api_endpoints.combine_documents_lookup, {
+            fetch(api_endpoints.combine_documents_lookup, {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'Content-Type': 'application/json',
-                }
-            }).then(async (response) => {
-                const data = await response.json();
-                //copy old list
-                let old_list = vm.document_ids;
-                //add to main list
-                vm.document_ids = data.id_list;
-                vm.documents = data.values_list;
-                //remove ids from combine list if not in new list
-                vm.occ_combine_data.combine_document_ids.forEach(id => {
-                    if (!data.id_list.includes(id)) {
-                        vm.occ_combine_data.combine_document_ids.splice(vm.occ_combine_data.combine_document_ids.indexOf(id), 1);
-                    }
-                });
-                //add new ids to combine list if not in old list
-                data.id_list.forEach(id => {
-                    if (!old_list.includes(id)) {
-                        vm.occ_combine_data.combine_document_ids.push(id);
-                    }
-                });
+                },
+            }).then(
+                async (response) => {
+                    const data = await response.json();
+                    //copy old list
+                    let old_list = vm.document_ids;
+                    //add to main list
+                    vm.document_ids = data.id_list;
+                    vm.documents = data.values_list;
+                    //remove ids from combine list if not in new list
+                    vm.occ_combine_data.combine_document_ids.forEach((id) => {
+                        if (!data.id_list.includes(id)) {
+                            vm.occ_combine_data.combine_document_ids.splice(
+                                vm.occ_combine_data.combine_document_ids.indexOf(
+                                    id
+                                ),
+                                1
+                            );
+                        }
+                    });
+                    //add new ids to combine list if not in old list
+                    data.id_list.forEach((id) => {
+                        if (!old_list.includes(id)) {
+                            vm.occ_combine_data.combine_document_ids.push(id);
+                        }
+                    });
 
-                vm.document_table_key++;
-            }, (error) => {
-                console.error(error);
-            });
+                    vm.document_table_key++;
+                },
+                (error) => {
+                    console.error(error);
+                }
+            );
         },
         getThreatIds: function () {
             let vm = this;
-            let formData = new FormData()
-            formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
+            let formData = new FormData();
+            formData.append(
+                'occurrence_ids',
+                JSON.stringify(vm.selectedOccurrenceIds)
+            );
             //get all threat ids for all OCCs
-            fetch(
-                api_endpoints.combine_threats_lookup, {
+            fetch(api_endpoints.combine_threats_lookup, {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'Content-Type': 'application/json',
-                }
-            }).then(async (response) => {
-                const data = await response.json();
-                //copy old list
-                let old_list = vm.threat_ids;
-                //add to main list
-                vm.threat_ids = data.id_list;
-                vm.threats = data.values_list;
+                },
+            }).then(
+                async (response) => {
+                    const data = await response.json();
+                    //copy old list
+                    let old_list = vm.threat_ids;
+                    //add to main list
+                    vm.threat_ids = data.id_list;
+                    vm.threats = data.values_list;
 
-                let threat_original_reports = {};
-                let taken_reports = [];
-                vm.threats.forEach(threat => {
-                    if (vm.occ_combine_data.combine_threat_ids.includes(threat.id) && threat.occurrence_report_threat__threat_number != null) {
-                        taken_reports.push(threat.occurrence_report_threat__threat_number);
-                    }
-                    threat_original_reports[threat.id] = threat.occurrence_report_threat__threat_number;
-                });
+                    let threat_original_reports = {};
+                    let taken_reports = [];
+                    vm.threats.forEach((threat) => {
+                        if (
+                            vm.occ_combine_data.combine_threat_ids.includes(
+                                threat.id
+                            ) &&
+                            threat.occurrence_report_threat__threat_number !=
+                                null
+                        ) {
+                            taken_reports.push(
+                                threat.occurrence_report_threat__threat_number
+                            );
+                        }
+                        threat_original_reports[threat.id] =
+                            threat.occurrence_report_threat__threat_number;
+                    });
 
-                //remove ids from combine list if not in new list
-                vm.occ_combine_data.combine_threat_ids.forEach(id => {
-                    if (!data.id_list.includes(id)) {
-                        vm.occ_combine_data.combine_threat_ids.splice(vm.occ_combine_data.combine_threat_ids.indexOf(id), 1);
-                    }
-                });
-                //add new ids to combine list if not in old list - unless they share an original report
-                data.id_list.forEach(id => {
-                    if (!old_list.includes(id) && !taken_reports.includes(threat_original_reports[id])) {
-                        vm.occ_combine_data.combine_threat_ids.push(id);
-                        taken_reports.push(threat_original_reports[id]);
-                    }
-                });
-                vm.threat_table_key++;
-            }, (error) => {
-                console.error(error);
-            });
+                    //remove ids from combine list if not in new list
+                    vm.occ_combine_data.combine_threat_ids.forEach((id) => {
+                        if (!data.id_list.includes(id)) {
+                            vm.occ_combine_data.combine_threat_ids.splice(
+                                vm.occ_combine_data.combine_threat_ids.indexOf(
+                                    id
+                                ),
+                                1
+                            );
+                        }
+                    });
+                    //add new ids to combine list if not in old list - unless they share an original report
+                    data.id_list.forEach((id) => {
+                        if (
+                            !old_list.includes(id) &&
+                            !taken_reports.includes(threat_original_reports[id])
+                        ) {
+                            vm.occ_combine_data.combine_threat_ids.push(id);
+                            taken_reports.push(threat_original_reports[id]);
+                        }
+                    });
+                    vm.threat_table_key++;
+                },
+                (error) => {
+                    console.error(error);
+                }
+            );
         },
         getSiteIds: function () {
             let vm = this;
-            let formData = new FormData()
-            formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
+            let formData = new FormData();
+            formData.append(
+                'occurrence_ids',
+                JSON.stringify(vm.selectedOccurrenceIds)
+            );
             //get all site ids for all OCCs
-            fetch(
-                api_endpoints.combine_sites_lookup, {
+            fetch(api_endpoints.combine_sites_lookup, {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'Content-Type': 'application/json',
-                }
-            }).then(async (response) => {
-                const data = await response.json();
-                //copy old list
-                let old_list = vm.site_ids;
-                //add to main list
-                vm.site_ids = data.id_list;
-                vm.sites = data.values_list;
+                },
+            }).then(
+                async (response) => {
+                    const data = await response.json();
+                    //copy old list
+                    let old_list = vm.site_ids;
+                    //add to main list
+                    vm.site_ids = data.id_list;
+                    vm.sites = data.values_list;
 
-                let site_names = {};
-                let taken_names = [];
-                vm.sites.forEach(site => {
-                    if (vm.occ_combine_data.combine_site_ids.includes(site.id)) {
-                        taken_names.push(site.site_name);
-                    }
-                    site_names[site.id] = site.site_name;
-                });
+                    let site_names = {};
+                    let taken_names = [];
+                    vm.sites.forEach((site) => {
+                        if (
+                            vm.occ_combine_data.combine_site_ids.includes(
+                                site.id
+                            )
+                        ) {
+                            taken_names.push(site.site_name);
+                        }
+                        site_names[site.id] = site.site_name;
+                    });
 
-                //remove ids from combine list if not in new list
-                vm.occ_combine_data.combine_site_ids.forEach(id => {
-                    if (!vm.site_ids.includes(id)) {
-                        vm.occ_combine_data.combine_site_ids.splice(vm.occ_combine_data.combine_site_ids.indexOf(id), 1);
-                    }
-                });
+                    //remove ids from combine list if not in new list
+                    vm.occ_combine_data.combine_site_ids.forEach((id) => {
+                        if (!vm.site_ids.includes(id)) {
+                            vm.occ_combine_data.combine_site_ids.splice(
+                                vm.occ_combine_data.combine_site_ids.indexOf(
+                                    id
+                                ),
+                                1
+                            );
+                        }
+                    });
 
-                //add new ids to combine list if not in old list - unless they share a name
-                data.id_list.forEach(id => {
-                    if (!old_list.includes(id) && !taken_names.includes(site_names[id])) {
-                        vm.occ_combine_data.combine_site_ids.push(id);
-                        taken_names.push(site_names[id]);
-                    }
-                });
+                    //add new ids to combine list if not in old list - unless they share a name
+                    data.id_list.forEach((id) => {
+                        if (
+                            !old_list.includes(id) &&
+                            !taken_names.includes(site_names[id])
+                        ) {
+                            vm.occ_combine_data.combine_site_ids.push(id);
+                            taken_names.push(site_names[id]);
+                        }
+                    });
 
-                vm.site_table_key++;
-            }, (error) => {
-                console.error(error);
-            });
+                    vm.site_table_key++;
+                },
+                (error) => {
+                    console.error(error);
+                }
+            );
         },
         getTenureIds: function () {
             let vm = this;
-            let formData = new FormData()
-            formData.append("occurrence_ids", JSON.stringify(vm.selectedOccurrenceIds));
+            let formData = new FormData();
+            formData.append(
+                'occurrence_ids',
+                JSON.stringify(vm.selectedOccurrenceIds)
+            );
             //get all site ids for all OCCs
-            fetch(
-                api_endpoints.combine_tenures_lookup, {
+            fetch(api_endpoints.combine_tenures_lookup, {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'Content-Type': 'application/json',
-                }
-            }).then(async (response) => {
-                const data = await response.json();
-                //copy old list
-                let old_list = vm.tenure_ids;
-                //add to main list
-                vm.tenure_ids = data.id_list;
-                vm.tenures = data.values_list;
+                },
+            }).then(
+                async (response) => {
+                    const data = await response.json();
+                    //copy old list
+                    let old_list = vm.tenure_ids;
+                    //add to main list
+                    vm.tenure_ids = data.id_list;
+                    vm.tenures = data.values_list;
 
-                let tenure_feature_ids = {};
-                let taken_feature_ids = [];
-                vm.tenures.forEach(tenure => {
-                    if (vm.occ_combine_data.combine_tenure_ids.includes(tenure.id) && tenure.status_display == "Current") {
-                        taken_feature_ids.push(tenure.featureid);
-                    }
-                    if (tenure.status_display == "Current") {
-                        tenure_feature_ids[tenure.id] = tenure.featureid;
-                    }
-                });
+                    let tenure_feature_ids = {};
+                    let taken_feature_ids = [];
+                    vm.tenures.forEach((tenure) => {
+                        if (
+                            vm.occ_combine_data.combine_tenure_ids.includes(
+                                tenure.id
+                            ) &&
+                            tenure.status_display == 'Current'
+                        ) {
+                            taken_feature_ids.push(tenure.featureid);
+                        }
+                        if (tenure.status_display == 'Current') {
+                            tenure_feature_ids[tenure.id] = tenure.featureid;
+                        }
+                    });
 
-                //remove ids from combine list if not in new list
-                vm.occ_combine_data.combine_tenure_ids.forEach(id => {
-                    if (!vm.tenure_ids.includes(id)) {
-                        vm.occ_combine_data.combine_tenure_ids.splice(vm.occ_combine_data.combine_tenure_ids.indexOf(id), 1);
-                    }
-                });
+                    //remove ids from combine list if not in new list
+                    vm.occ_combine_data.combine_tenure_ids.forEach((id) => {
+                        if (!vm.tenure_ids.includes(id)) {
+                            vm.occ_combine_data.combine_tenure_ids.splice(
+                                vm.occ_combine_data.combine_tenure_ids.indexOf(
+                                    id
+                                ),
+                                1
+                            );
+                        }
+                    });
 
-                //add new ids to combine list if not in old list - unless they share a feature id while current
-                data.id_list.forEach(id => {
-                    if (!old_list.includes(id) && !(tenure_feature_ids[id] && taken_feature_ids.includes(tenure_feature_ids[id]))) {
-                        vm.occ_combine_data.combine_tenure_ids.push(id);
-                        if (tenure_feature_ids[id]) {
-                            taken_feature_ids.push(tenure_feature_ids[id]);
+                    //add new ids to combine list if not in old list - unless they share a feature id while current
+                    data.id_list.forEach((id) => {
+                        if (
+                            !old_list.includes(id) &&
+                            !(
+                                tenure_feature_ids[id] &&
+                                taken_feature_ids.includes(
+                                    tenure_feature_ids[id]
+                                )
+                            )
+                        ) {
+                            vm.occ_combine_data.combine_tenure_ids.push(id);
+                            if (tenure_feature_ids[id]) {
+                                taken_feature_ids.push(tenure_feature_ids[id]);
+                            }
                         }
-                    }
-                });
+                    });
 
-                vm.tenure_table_key++;
-            }, (error) => {
-                console.error(error);
-            });
+                    vm.tenure_table_key++;
+                },
+                (error) => {
+                    console.error(error);
+                }
+            );
         },
         initialiseOccurrenceNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occurrence_name_lookup).select2({
-                width: '100%',
-                minimumInputLength: 2,
-                theme: 'bootstrap-5',
-                allowClear: true,
-                dropdownParent: $("#occurrence_name_lookup_form_group_id"),
-                placeholder: `Search Name of Occurrence to combine with ${vm.main_occurrence_obj.occurrence_number}`,
-                ajax: {
-                    url: api_endpoints.combine_occurrence_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            occurrence_id: vm.main_occurrence_obj.id,
-                        }
-                        return query;
+            $(vm.$refs.occurrence_name_lookup)
+                .select2({
+                    width: '100%',
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    dropdownParent: $('#occurrence_name_lookup_form_group_id'),
+                    placeholder: `Search Name of Occurrence to combine with ${vm.main_occurrence_obj.occurrence_number}`,
+                    ajax: {
+                        url: api_endpoints.combine_occurrence_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                occurrence_id: vm.main_occurrence_obj.id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     vm.selectedAddOccurrence = e.params.data;
                     vm.addOccurrence();
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occurrence_name_lookup-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occurrence_name_lookup-results"]'
+                    );
                     searchField[0].focus();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     vm.selectedAddOccurrence = null;
                 });
         },
         addTabEventListeners: function () {
             let vm = this;
-            document.querySelectorAll('a[data-bs-toggle="pill"]').forEach((el) => {
-                el.addEventListener('shown.bs.tab', () => {
-                    if (el.id == 'pills-occurrence-tab') {
-                        vm.$refs.key_contacts_section.adjust_table_width();
-                    } else if (el.id == 'pills-location-tab') {
-                        vm.$refs.sites_section.adjust_table_width();
-                        vm.$refs.tenures_section.adjust_table_width();
-                    } else if (el.id == 'pills-documents-tab') {
-                        vm.$refs.documents_section.adjust_table_width();
-                    } else if (el.id == 'pills-threats-tab') {
-                        vm.$refs.threats_section.adjust_table_width();
-                    }
-                });
-            });
-        },
-    },
-    mounted: function () {
-        this.initialiseOccurrenceNameLookup();
-    },
-    watch: {
-        isModalOpen: function () {
-            if (this.isModalOpen) {
-                let vm = this;
-
-                vm.getKeyContactIds();
-                vm.getDocumentIds();
-                vm.getThreatIds();
-                vm.getSiteIds();
-                vm.getTenureIds();
-
-                let dict_url = api_endpoints.occ_profile_dict + '?group_type=' + vm.main_occurrence_obj.group_type
-                fetch(dict_url).then(async (response) => {
-                    vm.occ_profile_dict = await response.json();
-                    vm.wild_status_list = vm.occ_profile_dict.wild_status_list;
-                    vm.occurrence_source_list = vm.occ_profile_dict.occurrence_source_list;
-                }, (error) => {
-                    console.log(error);
-                })
-                vm.$nextTick(() => {
-                    $(vm.$refs.occurrence_name_lookup).select2('open');
+            document
+                .querySelectorAll('a[data-bs-toggle="pill"]')
+                .forEach((el) => {
+                    el.addEventListener('shown.bs.tab', () => {
+                        if (el.id == 'pills-occurrence-tab') {
+                            vm.$refs.key_contacts_section.adjust_table_width();
+                        } else if (el.id == 'pills-location-tab') {
+                            vm.$refs.sites_section.adjust_table_width();
+                            vm.$refs.tenures_section.adjust_table_width();
+                        } else if (el.id == 'pills-documents-tab') {
+                            vm.$refs.documents_section.adjust_table_width();
+                        } else if (el.id == 'pills-threats-tab') {
+                            vm.$refs.threats_section.adjust_table_width();
+                        }
+                    });
                 });
-            }
-        },
-        selectedOccurrenceIds: function () {
-            let vm = this;
-            vm.occ_combine_data.combine_ids = vm.selectedOccurrenceIds;
-            vm.getKeyContactIds();
-            vm.getDocumentIds();
-            vm.getThreatIds();
-            vm.getSiteIds();
-            vm.getTenureIds();
-            vm.checkFormValues();
         },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
index 3b19dea2..3bc6873f 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
@@ -1,40 +1,55 @@
 <template lang="html">
     <div id="occurrenceCombineContacts">
-        <datatable ref="contacts_datatable" :id="panelBody" :dtOptions="contacts_options"
-                    :dtHeaders="contacts_headers"/>
+        <datatable
+            :id="panelBody"
+            ref="contacts_datatable"
+            :dt-options="contacts_options"
+            :dt-headers="contacts_headers"
+        />
     </div>
 </template>
 
 <script>
 import datatable from '@vue-utils/datatable.vue';
-import {constants, helpers} from '@/utils/hooks'
+import { constants, helpers } from '@/utils/hooks';
 
 export default {
-    name: 'occurrenceCombineContacts',
+    name: 'OccurrenceCombineContacts',
+    components: {
+        datatable,
+    },
     props: {
         selectedKeyContacts: {
             type: Array,
-            required: true
+            required: true,
         },
         combineKeyContactIds: {
             type: Array,
-            required: true
+            required: true,
         },
         mainOccurrenceId: {
             type: Number,
-            required: true
+            required: true,
         },
     },
-    data:function () {
+    data: function () {
         let vm = this;
-        return{
-            panelBody: "contact-combine-select-"+vm._uid,
+        return {
+            panelBody: 'contact-combine-select-' + vm._uid,
             checkedContactNames: [],
-            contacts_headers:["Occurrence", "Name", "Role", "Contact Details", "Organisation", "Notes", "Action"],
-            contacts_options:{
+            contacts_headers: [
+                'Occurrence',
+                'Name',
+                'Role',
+                'Contact Details',
+                'Organisation',
+                'Notes',
+                'Action',
+            ],
+            contacts_options: {
                 autowidth: true,
-                language:{
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 paging: true,
                 responsive: true,
@@ -44,27 +59,28 @@ export default {
                 ],
                 data: vm.selectedKeyContacts,
                 order: [],
-                buttons:[],
+                buttons: [],
                 searching: true,
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                        "<'row'<'col-sm-12'tr>>" +
-                        "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: [
                     {
-                        data: "occurrence__occurrence_number",
+                        data: 'occurrence__occurrence_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "contact_name",
+                        data: 'contact_name',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "role",
+                        data: 'role',
                     },
                     {
-                        data: "contact",
+                        data: 'contact',
                         mRender: function (data, type, full) {
                             let value = full.contact;
                             let result = helpers.dtPopover(value, 30, 'hover');
@@ -72,10 +88,10 @@ export default {
                         },
                     },
                     {
-                        data: "organisation",
+                        data: 'organisation',
                     },
                     {
-                        data: "notes",
+                        data: 'notes',
                         mRender: function (data, type, full) {
                             let value = full.notes;
                             let result = helpers.dtPopover(value, 30, 'hover');
@@ -83,25 +99,31 @@ export default {
                         },
                     },
                     {
-                        data: "id",
-                        mRender:function (data,type,full){
+                        data: 'id',
+                        mRender: function (data, type, full) {
                             if (vm.combineKeyContactIds.includes(full.id)) {
-                                if (full.occurrence__id == vm.mainOccurrenceId) {
-                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox' checked disabled/>`
+                                if (
+                                    full.occurrence__id == vm.mainOccurrenceId
+                                ) {
+                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox' checked disabled/>`;
                                 } else {
-                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox' checked/>`
+                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox' checked/>`;
                                 }
                             } else {
                                 //console.log(vm.checkedContactNames)
-                                if (vm.checkedContactNames.includes(full.contact_name)) {
-                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox' disabled/>`
+                                if (
+                                    vm.checkedContactNames.includes(
+                                        full.contact_name
+                                    )
+                                ) {
+                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox' disabled/>`;
                                 } else {
-                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox'/>`
+                                    return `<input id='${full.id}' data-contact-checkbox='${full.id}' contact-name='${full.contact_name}' type='checkbox'/>`;
                                 }
                             }
-                        }
+                        },
                     },
-                ]
+                ],
             },
             drawCallback: function () {
                 setTimeout(function () {
@@ -114,77 +136,104 @@ export default {
                     vm.adjust_table_width();
                 }, 100);
             },
-        }
+        };
     },
-    components: {
-        datatable,
+    created: function () {
+        let vm = this;
+        vm.getSelectedContactNames();
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         getSelectedContactNames: function () {
-            let vm=this;   
-            let names = []
-            vm.selectedKeyContacts.forEach(contact => {
-                if (vm.combineKeyContactIds.includes(contact.id) && !names.includes(contact.contact_name)) {
+            let vm = this;
+            let names = [];
+            vm.selectedKeyContacts.forEach((contact) => {
+                if (
+                    vm.combineKeyContactIds.includes(contact.id) &&
+                    !names.includes(contact.contact_name)
+                ) {
                     names.push(contact.contact_name);
                 }
-            })
+            });
             vm.checkedContactNames = names;
         },
         adjust_table_width: function () {
-            if (this.$refs.contacts_datatable !== undefined) { this.$refs.contacts_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.contacts_datatable !== undefined) {
+                this.$refs.contacts_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
             helpers.enablePopovers();
         },
-        removeContact: function(id) {
-            let vm=this;   
-            vm.combineKeyContactIds.splice(vm.combineKeyContactIds.indexOf(id), 1);
+        removeContact: function (id) {
+            let vm = this;
+            vm.combineKeyContactIds.splice(
+                vm.combineKeyContactIds.indexOf(id),
+                1
+            );
             vm.getSelectedContactNames();
-        }, 
-        addContact: function(id) {
-            let vm=this;   
+        },
+        addContact: function (id) {
+            let vm = this;
             vm.combineKeyContactIds.push(id);
             vm.getSelectedContactNames();
-        }, 
-        addEventListeners:function (){
-            let vm=this;     
-            vm.$refs.contacts_datatable.vmDataTable.on('change', 'input[data-contact-checkbox]', function(e) {
-                e.preventDefault();
-                var id = parseInt($(this).attr('data-contact-checkbox'));
-                if($(this).prop('checked')) {
-                    vm.addContact(id);
-                    vm.selectedKeyContacts.forEach(contact=> {
-                        let checkbox = vm.$refs.contacts_datatable.vmDataTable.$("#"+contact.id);
-                        if (id != checkbox.attr('data-contact-checkbox') && checkbox.attr('contact-name') == $(this).attr('contact-name')) {
-                            checkbox.prop('disabled', true);
-                        }
-                    });
-                } else {
-                    vm.removeContact(id);
-                    vm.selectedKeyContacts.forEach(contact=> {
-                        let checkbox = vm.$refs.contacts_datatable.vmDataTable.$("#"+contact.id);
-                        if (id != checkbox.attr('data-contact-checkbox') && checkbox.attr('contact-name') == $(this).attr('contact-name')) {
-                            checkbox.prop('disabled', false);
-                        }
-                    });
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.contacts_datatable.vmDataTable.on(
+                'change',
+                'input[data-contact-checkbox]',
+                function (e) {
+                    e.preventDefault();
+                    var id = parseInt($(this).attr('data-contact-checkbox'));
+                    if ($(this).prop('checked')) {
+                        vm.addContact(id);
+                        vm.selectedKeyContacts.forEach((contact) => {
+                            let checkbox =
+                                vm.$refs.contacts_datatable.vmDataTable.$(
+                                    '#' + contact.id
+                                );
+                            if (
+                                id != checkbox.attr('data-contact-checkbox') &&
+                                checkbox.attr('contact-name') ==
+                                    $(this).attr('contact-name')
+                            ) {
+                                checkbox.prop('disabled', true);
+                            }
+                        });
+                    } else {
+                        vm.removeContact(id);
+                        vm.selectedKeyContacts.forEach((contact) => {
+                            let checkbox =
+                                vm.$refs.contacts_datatable.vmDataTable.$(
+                                    '#' + contact.id
+                                );
+                            if (
+                                id != checkbox.attr('data-contact-checkbox') &&
+                                checkbox.attr('contact-name') ==
+                                    $(this).attr('contact-name')
+                            ) {
+                                checkbox.prop('disabled', false);
+                            }
+                        });
+                    }
                 }
-            });
-            vm.$refs.contacts_datatable.vmDataTable.on('draw', function(e) {
-                helpers.enablePopovers();
-            });
-            vm.$refs.contacts_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+            );
+            vm.$refs.contacts_datatable.vmDataTable.on('draw', function (e) {
                 helpers.enablePopovers();
             });
-        }
-    },
-    created: function(){
-        let vm = this;    
-        vm.getSelectedContactNames();
-    },
-    mounted: function(){
-        let vm = this;    
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
+            vm.$refs.contacts_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
-}
-
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
index ca92c4cc..7fa1669e 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
@@ -1,39 +1,55 @@
 <template lang="html">
     <div id="occurrenceCombineDocuments">
-        <datatable ref="documents_datatable" :id="panelBody" :dtOptions="documents_options"
-                    :dtHeaders="documents_headers"/>
+        <datatable
+            :id="panelBody"
+            ref="documents_datatable"
+            :dt-options="documents_options"
+            :dt-headers="documents_headers"
+        />
     </div>
 </template>
 
 <script>
 import datatable from '@vue-utils/datatable.vue';
-import {constants, helpers} from '@/utils/hooks'
+import { constants, helpers } from '@/utils/hooks';
 
 export default {
-    name: 'occurrenceCombineDocuments',
+    name: 'OccurrenceCombineDocuments',
+    components: {
+        datatable,
+    },
     props: {
         selectedDocuments: {
             type: Array,
-            required: true
+            required: true,
         },
         combineDocumentIds: {
             type: Array,
-            required: true
+            required: true,
         },
         mainOccurrenceId: {
             type: Number,
-            required: true
+            required: true,
         },
     },
-    data:function () {
+    data: function () {
         let vm = this;
-        return{
-            panelBody: "document-combine-select-"+vm._uid,
-            documents_headers:["Occurrence", "Number", "Category", "Sub Category", "Document", "Description", "Date/Time", "Action"],
-            documents_options:{
+        return {
+            panelBody: 'document-combine-select-' + vm._uid,
+            documents_headers: [
+                'Occurrence',
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
+            documents_options: {
                 autowidth: true,
-                language:{
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 paging: true,
                 responsive: true,
@@ -43,66 +59,82 @@ export default {
                 ],
                 data: vm.selectedDocuments,
                 order: [],
-                buttons:[],
+                buttons: [],
                 searching: true,
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                        "<'row'<'col-sm-12'tr>>" +
-                        "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: [
                     {
-                        data: "occurrence__occurrence_number",
+                        data: 'occurrence__occurrence_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "document_number",
+                        data: 'document_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "document_category__document_category_name",
+                        data: 'document_category__document_category_name',
                     },
                     {
-                        data: "document_sub_category__document_sub_category_name",
+                        data: 'document_sub_category__document_sub_category_name',
                     },
                     {
-                        data: "name",
-                        mRender: function(data,type,full){
-                            let links='';
+                        data: 'name',
+                        mRender: function (data, type, full) {
+                            let links = '';
                             let value = full.name;
-                            let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                            links+='<span><a href="/private-media/'+ full._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
+                            let result = helpers.dtPopoverSplit(
+                                value,
+                                30,
+                                'hover'
+                            );
+                            links +=
+                                '<span><a href="/private-media/' +
+                                full._file +
+                                '" target="_blank">' +
+                                result.text +
+                                '</a> ' +
+                                result.link +
+                                '</span>';
                             return links;
                         },
                     },
                     {
-                        data: "description",
-                        'render': function(value, type, full){
+                        data: 'description',
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
-                            return type=='export' ? value : result;
+                            return type == 'export' ? value : result;
                         },
                     },
                     {
-                        data: "uploaded_date",
-                        mRender:function (data,type,full){
-                            return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm'):'';
-                        }
+                        data: 'uploaded_date',
+                        mRender: function (data, type, full) {
+                            return data != '' && data != null
+                                ? moment(data).format('DD/MM/YYYY HH:mm')
+                                : '';
+                        },
                     },
                     {
-                        data: "id",
-                        mRender:function (data,type,full){
+                        data: 'id',
+                        mRender: function (data, type, full) {
                             if (vm.combineDocumentIds.includes(full.id)) {
-                                if (full.occurrence__id == vm.mainOccurrenceId) {
-                                    return `<input id='${full.id}' data-document-checkbox='${full.id}' type='checkbox' checked disabled/>`
+                                if (
+                                    full.occurrence__id == vm.mainOccurrenceId
+                                ) {
+                                    return `<input id='${full.id}' data-document-checkbox='${full.id}' type='checkbox' checked disabled/>`;
                                 } else {
-                                    return `<input id='${full.id}' data-document-checkbox='${full.id}' type='checkbox' checked/>`
+                                    return `<input id='${full.id}' data-document-checkbox='${full.id}' type='checkbox' checked/>`;
                                 }
                             } else {
-                                return `<input id='${full.id}' data-document-checkbox='${full.id}' type='checkbox'/>`
+                                return `<input id='${full.id}' data-document-checkbox='${full.id}' type='checkbox'/>`;
                             }
-                        }
+                        },
                     },
-                ]
+                ],
             },
             drawCallback: function () {
                 helpers.enablePopovers();
@@ -111,55 +143,61 @@ export default {
                 }, 100);
             },
             initComplete: function () {
-                
                 // another option to fix the responsive table overflow css on tab switch
                 setTimeout(function () {
                     vm.adjust_table_width();
                 }, 100);
             },
-        }
+        };
     },
-    components: {
-        datatable,
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         adjust_table_width: function () {
-            if (this.$refs.documents_datatable !== undefined) { this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
             helpers.enablePopovers();
         },
-        removeDocument: function(id) {
-            let vm=this;   
+        removeDocument: function (id) {
+            let vm = this;
             vm.combineDocumentIds.splice(vm.combineDocumentIds.indexOf(id), 1);
-        }, 
-        addDocument: function(id) {
-            let vm=this;   
+        },
+        addDocument: function (id) {
+            let vm = this;
             vm.combineDocumentIds.push(id);
-        }, 
-        addEventListeners:function (){
-            let vm=this;     
-            vm.$refs.documents_datatable.vmDataTable.on('change', 'input[data-document-checkbox]', function(e) {
-                e.preventDefault();
-                var id = parseInt($(this).attr('data-document-checkbox'));
-                if($(this).prop('checked')) {
-                    vm.addDocument(id);
-                } else {
-                    vm.removeDocument(id);
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'change',
+                'input[data-document-checkbox]',
+                function (e) {
+                    e.preventDefault();
+                    var id = parseInt($(this).attr('data-document-checkbox'));
+                    if ($(this).prop('checked')) {
+                        vm.addDocument(id);
+                    } else {
+                        vm.removeDocument(id);
+                    }
                 }
-            });
-            vm.$refs.documents_datatable.vmDataTable.on('draw', function(e) {
+            );
+            vm.$refs.documents_datatable.vmDataTable.on('draw', function (e) {
                 helpers.enablePopovers();
             });
-            vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
-    },
-    mounted: function() {
-        let vm = this;    
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
-}
-
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
index a2592e50..7af7d7d4 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
@@ -1,107 +1,121 @@
 <template lang="html">
     <div id="occurrenceCombineSelect">
-        <datatable ref="occurrences_datatable" :id="panelBody" :dtOptions="occurrences_options"
-                    :dtHeaders="occurrences_headers" :key="tableKey"/>
+        <datatable
+            :id="panelBody"
+            ref="occurrences_datatable"
+            :key="tableKey"
+            :dt-options="occurrences_options"
+            :dt-headers="occurrences_headers"
+        />
 
         <div v-if="sectionOCCId">
             <SectionModal
                 ref="section_modal"
                 :key="sectionOCCId"
-                :sectionTypeDisplay="sectionTypeFormatted"
-                :sectionType="section_type"
-                :occNumber="sectionOCCId"
-                :sectionObj="sectionObj"
+                :section-type-display="sectionTypeFormatted"
+                :section-type="section_type"
+                :occ-number="sectionOCCId"
+                :section-obj="sectionObj"
             />
         </div>
     </div>
 </template>
 
 <script>
-
 import datatable from '@vue-utils/datatable.vue';
-import {constants,api_endpoints,helpers} from '@/utils/hooks'
-import SectionModal from '@/components/common/occurrence/occ_section_modal.vue'
+import { constants, api_endpoints, helpers } from '@/utils/hooks';
+import SectionModal from '@/components/common/occurrence/occ_section_modal.vue';
 
 export default {
     name: 'OccurrenceCombineSelect',
+    components: {
+        datatable,
+        SectionModal,
+    },
     props: {
         selectedOccurrences: {
             type: Array,
-            required: true
+            required: true,
         },
         selectedOccurrenceIds: {
             type: Array,
-            required: true
+            required: true,
         },
         mainOccurrenceId: {
             type: Number,
-            required: true
+            required: true,
         },
         section_type: {
             type: String,
             required: false,
-            default: "",
+            default: '',
         },
         occ_chosen_section: {
             type: Number,
             required: false,
         },
     },
-    data:function () {
+    data: function () {
         let vm = this;
 
-        let headers = ["Number", "Name", "Action"];
+        let headers = ['Number', 'Name', 'Action'];
         let columns = [
-                    {
-                        data: "occurrence_number",
-                    },
-                    {
-                        data: "occurrence_name",
-                    },
-                    {
-                        data: "id",
-                        mRender:function (data,type,full){
-                            let links = '';
-                            if (vm.section_type === "" || vm.section_type === undefined) {
-                                links += `<a href='/internal/occurrence/${full.id}' target="_blank">View</a><br>`;
-
-                                if (full.id != vm.mainOccurrenceId) {
-                                    links += `<a href='#' data-remove-occurrence='${full.id}'>Remove</a><br>`;
-                                }
-                            } else {
-                                links += `<a href='#' data-view-section='${full.id}'>View Section</a><br>`;
-                            }
+            {
+                data: 'occurrence_number',
+            },
+            {
+                data: 'occurrence_name',
+            },
+            {
+                data: 'id',
+                mRender: function (data, type, full) {
+                    let links = '';
+                    if (
+                        vm.section_type === '' ||
+                        vm.section_type === undefined
+                    ) {
+                        links += `<a href='/internal/occurrence/${full.id}' target="_blank">View</a><br>`;
 
-                            return links;
+                        if (full.id != vm.mainOccurrenceId) {
+                            links += `<a href='#' data-remove-occurrence='${full.id}'>Remove</a><br>`;
                         }
-                    },
-                ]
+                    } else {
+                        links += `<a href='#' data-view-section='${full.id}'>View Section</a><br>`;
+                    }
+
+                    return links;
+                },
+            },
+        ];
 
-        if (vm.section_type !== "" && vm.section_type !== undefined) {
-            headers.push("");
+        if (vm.section_type !== '' && vm.section_type !== undefined) {
+            headers.push('');
             columns.push({
-                data: "id",
-                mRender:function (data,type,full){
-                    if (vm.occ_chosen_section !== undefined && vm.occ_chosen_section == full.id) {
-                        return `<input id='${full.id}' type="radio" data-section-radio='${full.id}' checked>`
+                data: 'id',
+                mRender: function (data, type, full) {
+                    if (
+                        vm.occ_chosen_section !== undefined &&
+                        vm.occ_chosen_section == full.id
+                    ) {
+                        return `<input id='${full.id}' type="radio" data-section-radio='${full.id}' checked>`;
                     } else {
-                        return `<input id='${full.id}' type="radio" data-section-radio='${full.id}'>`
+                        return `<input id='${full.id}' type="radio" data-section-radio='${full.id}'>`;
                     }
-                }
-            })
+                },
+            });
         }
 
-        return{
+        return {
             tableKey: 0,
-            panelBody: "occ-combine-select-"+vm._uid,
+            panelBody: 'occ-combine-select-' + vm._uid,
             sectionTypeFormatted: null,
             sectionObj: null,
             sectionOCCId: null,
-            occurrences_headers:headers,
-            occurrences_options:{
+            occurrences_headers: headers,
+            occurrences_options: {
                 autowidth: true,
-                language:{
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 paging: false,
                 responsive: true,
@@ -111,11 +125,12 @@ export default {
                 ],
                 data: vm.selectedOccurrences,
                 order: [],
-                buttons:[],
+                buttons: [],
                 searching: false,
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                        "<'row'<'col-sm-12'tr>>" +
-                        "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 drawCallback: function () {
                     helpers.enablePopovers();
@@ -124,93 +139,112 @@ export default {
                     helpers.enablePopovers();
                 },
             },
-        }
+        };
     },
-    components: {
-        datatable,
-        SectionModal,
+    watch: {
+        selectedOccurrences: function () {
+            let vm = this;
+            vm.tableKey++;
+            this.$nextTick(() => {
+                vm.addEventListeners();
+            });
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
-        removeOccurrence: function(id) {
-            let vm=this;
+        removeOccurrence: function (id) {
+            let vm = this;
             if (vm.selectedOccurrenceIds.includes(parseInt(id))) {
                 for (var i = 0; i < vm.selectedOccurrenceIds.length; i++) {
                     if (vm.selectedOccurrenceIds[i] == id) {
                         vm.selectedOccurrenceIds.splice(i, 1);
-                        break
+                        break;
                     }
                 }
                 for (var i = 0; i < vm.selectedOccurrences.length; i++) {
                     if (vm.selectedOccurrences[i].id == id) {
                         vm.selectedOccurrences.splice(i, 1);
-                        break
+                        break;
                     }
                 }
             }
         },
-        viewSection:function (id) {
-            let vm=this;
+        viewSection: function (id) {
+            let vm = this;
             //get occ object with id
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence,id)).then(async (response) => {
-                let occObj=response.json();
+            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, id)).then(
+                async (response) => {
+                    let occObj = response.json();
 
-                vm.sectionObj = occObj[vm.section_type];
-                vm.sectionOCCId = id;
-                vm.sectionTypeFormatted = vm.section_type.split('_')
-                .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
-                .join(' ');
+                    vm.sectionObj = occObj[vm.section_type];
+                    vm.sectionOCCId = id;
+                    vm.sectionTypeFormatted = vm.section_type
+                        .split('_')
+                        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+                        .join(' ');
 
-                this.$nextTick(() => {
-                this.$refs.section_modal.isModalOpen = true;
-                });
-            },
-            err => {
-                console.log(err);
-            });
+                    this.$nextTick(() => {
+                        this.$refs.section_modal.isModalOpen = true;
+                    });
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
         },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.occurrences_datatable.vmDataTable.on('change', 'input[data-section-radio]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-section-radio');
-                vm.$emit("updateChosenSection",id, vm.section_type);
-                vm.selectedOccurrences.forEach(occ=> {
-                    let radio = vm.$refs.occurrences_datatable.vmDataTable.$("#"+occ.id);
-                    if (radio.attr('data-section-radio') != $(this).attr('data-section-radio')) {
-                        radio.prop('checked', false);
-                    }
-                });
-            });
-            vm.$refs.occurrences_datatable.vmDataTable.on('click', 'a[data-view-section]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-section');
-                vm.viewSection(id);
-            });
-            vm.$refs.occurrences_datatable.vmDataTable.on('click', 'a[data-remove-occurrence]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-remove-occurrence');
-                vm.removeOccurrence(id);
-            });
-            vm.$refs.occurrences_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
-    },
-    watch: {
-        selectedOccurrences: function() {
+        addEventListeners: function () {
             let vm = this;
-            vm.tableKey++;
-            this.$nextTick(() => {
-                vm.addEventListeners();
-            });
-        }
-    },
-    mounted: function(){
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
+            vm.$refs.occurrences_datatable.vmDataTable.on(
+                'change',
+                'input[data-section-radio]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-section-radio');
+                    vm.$emit('updateChosenSection', id, vm.section_type);
+                    vm.selectedOccurrences.forEach((occ) => {
+                        let radio =
+                            vm.$refs.occurrences_datatable.vmDataTable.$(
+                                '#' + occ.id
+                            );
+                        if (
+                            radio.attr('data-section-radio') !=
+                            $(this).attr('data-section-radio')
+                        ) {
+                            radio.prop('checked', false);
+                        }
+                    });
+                }
+            );
+            vm.$refs.occurrences_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-section]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-section');
+                    vm.viewSection(id);
+                }
+            );
+            vm.$refs.occurrences_datatable.vmDataTable.on(
+                'click',
+                'a[data-remove-occurrence]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-remove-occurrence');
+                    vm.removeOccurrence(id);
+                }
+            );
+            vm.$refs.occurrences_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
-}
-
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
index 3ab69e92..c35fc758 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
@@ -1,40 +1,55 @@
 <template lang="html">
     <div id="occurrenceCombineSites">
-        <datatable ref="sites_datatable" :id="panelBody" :dtOptions="sites_options"
-                    :dtHeaders="sites_headers"/>
+        <datatable
+            :id="panelBody"
+            ref="sites_datatable"
+            :dt-options="sites_options"
+            :dt-headers="sites_headers"
+        />
     </div>
 </template>
 
 <script>
 import datatable from '@vue-utils/datatable.vue';
-import {constants, helpers} from '@/utils/hooks'
+import { constants, helpers } from '@/utils/hooks';
 
 export default {
-    name: 'occurrenceCombineSites',
+    name: 'OccurrenceCombineSites',
+    components: {
+        datatable,
+    },
     props: {
         selectedSites: {
             type: Array,
-            required: true
+            required: true,
         },
         combineSiteIds: {
             type: Array,
-            required: true
+            required: true,
         },
         mainOccurrenceId: {
             type: Number,
-            required: true
+            required: true,
         },
     },
-    data:function () {
+    data: function () {
         let vm = this;
-        return{
-            panelBody: "site-combine-select-"+vm._uid,
+        return {
+            panelBody: 'site-combine-select-' + vm._uid,
             checkedSiteNames: [],
-            sites_headers:["Occurrence", "Number", "Name", "Coordinates", "Comments", "Related Occurrence Reports", "Action"],
-            sites_options:{
+            sites_headers: [
+                'Occurrence',
+                'Number',
+                'Name',
+                'Coordinates',
+                'Comments',
+                'Related Occurrence Reports',
+                'Action',
+            ],
+            sites_options: {
                 autowidth: true,
-                language:{
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 paging: true,
                 responsive: true,
@@ -44,51 +59,61 @@ export default {
                 ],
                 data: vm.selectedSites,
                 order: [],
-                buttons:[],
+                buttons: [],
                 searching: true,
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                        "<'row'<'col-sm-12'tr>>" +
-                        "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: [
                     {
-                        data: "occurrence_number",
+                        data: 'occurrence_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "site_number",
+                        data: 'site_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "site_name",
+                        data: 'site_name',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "id",
+                        data: 'id',
                         mRender: function (data, type, full) {
                             if (full.point_coord1 && full.point_coord2) {
-                                let coord1 = full.point_coord1.toString()
-                                let coord2 = full.point_coord2.toString()
+                                let coord1 = full.point_coord1.toString();
+                                let coord2 = full.point_coord2.toString();
 
-                                if (Number.isInteger((full.point_coord1))) {
-                                    coord1 += ".0";
+                                if (Number.isInteger(full.point_coord1)) {
+                                    coord1 += '.0';
                                 }
-                                if (Number.isInteger((full.point_coord2))) {
-                                    coord2 += ".0"; 
+                                if (Number.isInteger(full.point_coord2)) {
+                                    coord2 += '.0';
                                 }
 
-                                let value = coord1 + ", " + coord2 + " - " + full.datum_name;
-                                let result = helpers.dtPopover(value, 30, 'hover');
+                                let value =
+                                    coord1 +
+                                    ', ' +
+                                    coord2 +
+                                    ' - ' +
+                                    full.datum_name;
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
                                 return result;
                             } else {
-                                return ""
+                                return '';
                             }
                         },
                     },
                     {
-                        data: "comments",
+                        data: 'comments',
                         mRender: function (data, type, full) {
                             let value = full.comments;
                             let result = helpers.dtPopover(value, 30, 'hover');
@@ -96,32 +121,34 @@ export default {
                         },
                     },
                     {
-                        data: "related_occurrence_report_numbers",
+                        data: 'related_occurrence_report_numbers',
                         mRender: function (data, type, full) {
                             let value = full.related_occurrence_report_numbers;
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return result;
-                        }
+                        },
                     },
                     {
-                        data: "id",
-                        mRender:function (data,type,full){
+                        data: 'id',
+                        mRender: function (data, type, full) {
                             if (vm.combineSiteIds.includes(full.id)) {
                                 if (full.occurrence == vm.mainOccurrenceId) {
-                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox' checked disabled/>`
+                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox' checked disabled/>`;
                                 } else {
-                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox' checked/>`
+                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox' checked/>`;
                                 }
                             } else {
-                                if (vm.checkedSiteNames.includes(full.site_name)) {
-                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox' disabled/>`
+                                if (
+                                    vm.checkedSiteNames.includes(full.site_name)
+                                ) {
+                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox' disabled/>`;
                                 } else {
-                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox'/>`
+                                    return `<input id='${full.id}' data-site-checkbox='${full.id}' site-name='${full.site_name}' type='checkbox'/>`;
                                 }
                             }
-                        }
+                        },
                     },
-                ]
+                ],
             },
             drawCallback: function () {
                 setTimeout(function () {
@@ -134,78 +161,102 @@ export default {
                     vm.adjust_table_width();
                 }, 100);
             },
-        }
+        };
     },
-    components: {
-        datatable,
+    created: function () {
+        let vm = this;
+        vm.getSelectedSiteNames();
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         getSelectedSiteNames: function () {
-            let vm=this;   
-            let names = []
-            vm.selectedSites.forEach(site => {
-                if (vm.combineSiteIds.includes(site.id) && !names.includes(site.site_name)) {
+            let vm = this;
+            let names = [];
+            vm.selectedSites.forEach((site) => {
+                if (
+                    vm.combineSiteIds.includes(site.id) &&
+                    !names.includes(site.site_name)
+                ) {
                     names.push(site.site_name);
                 }
-            })
+            });
             vm.checkedSiteNames = names;
         },
         adjust_table_width: function () {
-            if (this.$refs.sites_datatable !== undefined) { this.$refs.sites_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.sites_datatable !== undefined) {
+                this.$refs.sites_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
             helpers.enablePopovers();
         },
-        removeSite: function(id) {
-            let vm=this;   
+        removeSite: function (id) {
+            let vm = this;
             vm.combineSiteIds.splice(vm.combineSiteIds.indexOf(id), 1);
             vm.getSelectedSiteNames();
-        }, 
-        addSite: function(id) {
-            let vm=this;   
+        },
+        addSite: function (id) {
+            let vm = this;
             vm.combineSiteIds.push(id);
             vm.getSelectedSiteNames();
-        }, 
-        addEventListeners:function (){
-            let vm=this;     
+        },
+        addEventListeners: function () {
+            let vm = this;
 
-            vm.$refs.sites_datatable.vmDataTable.on('change', 'input[data-site-checkbox]', function(e) {
-                e.preventDefault();
-                var id = parseInt($(this).attr('data-site-checkbox'));
-                if($(this).prop('checked')) {
-                    vm.addSite(id);
-                    vm.selectedSites.forEach(site=> {
-                        let checkbox = vm.$refs.sites_datatable.vmDataTable.$("#"+site.id);
-                        if (id != checkbox.attr('data-site-checkbox') && checkbox.attr('site-name') == $(this).attr('site-name')) {
-                            checkbox.prop('disabled', true);
-                        }
-                    });
-                } else {
-                    vm.removeSite(id);
-                    vm.selectedSites.forEach(site=> {
-                        let checkbox = vm.$refs.sites_datatable.vmDataTable.$("#"+site.id);
-                        if (id != checkbox.attr('data-site-checkbox') && checkbox.attr('site-name') == $(this).attr('site-name')) {
-                            checkbox.prop('disabled', false);
-                        }
-                    });
+            vm.$refs.sites_datatable.vmDataTable.on(
+                'change',
+                'input[data-site-checkbox]',
+                function (e) {
+                    e.preventDefault();
+                    var id = parseInt($(this).attr('data-site-checkbox'));
+                    if ($(this).prop('checked')) {
+                        vm.addSite(id);
+                        vm.selectedSites.forEach((site) => {
+                            let checkbox =
+                                vm.$refs.sites_datatable.vmDataTable.$(
+                                    '#' + site.id
+                                );
+                            if (
+                                id != checkbox.attr('data-site-checkbox') &&
+                                checkbox.attr('site-name') ==
+                                    $(this).attr('site-name')
+                            ) {
+                                checkbox.prop('disabled', true);
+                            }
+                        });
+                    } else {
+                        vm.removeSite(id);
+                        vm.selectedSites.forEach((site) => {
+                            let checkbox =
+                                vm.$refs.sites_datatable.vmDataTable.$(
+                                    '#' + site.id
+                                );
+                            if (
+                                id != checkbox.attr('data-site-checkbox') &&
+                                checkbox.attr('site-name') ==
+                                    $(this).attr('site-name')
+                            ) {
+                                checkbox.prop('disabled', false);
+                            }
+                        });
+                    }
                 }
-            });
-            vm.$refs.sites_datatable.vmDataTable.on('draw', function(e) {
-                helpers.enablePopovers();
-            });
-            vm.$refs.sites_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+            );
+            vm.$refs.sites_datatable.vmDataTable.on('draw', function (e) {
                 helpers.enablePopovers();
             });
-        }
-    },
-    created: function(){
-        let vm = this;    
-        vm.getSelectedSiteNames();
-    },
-    mounted: function(){
-        let vm = this;    
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
+            vm.$refs.sites_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
-}
-
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
index e5065e03..bd3250a5 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
@@ -1,40 +1,58 @@
 <template lang="html">
     <div id="occurrenceCombineTenures">
-        <datatable ref="tenures_datatable" :id="panelBody" :dtOptions="tenures_options"
-                    :dtHeaders="tenures_headers"/>
+        <datatable
+            :id="panelBody"
+            ref="tenures_datatable"
+            :dt-options="tenures_options"
+            :dt-headers="tenures_headers"
+        />
     </div>
 </template>
 
 <script>
 import datatable from '@vue-utils/datatable.vue';
-import {constants, helpers} from '@/utils/hooks'
+import { constants, helpers } from '@/utils/hooks';
 
 export default {
-    name: 'occurrenceCombineTenures',
+    name: 'OccurrenceCombineTenures',
+    components: {
+        datatable,
+    },
     props: {
         selectedTenures: {
             type: Array,
-            required: true
+            required: true,
         },
         combineTenureIds: {
             type: Array,
-            required: true
+            required: true,
         },
         mainOccurrenceId: {
             type: Number,
-            required: true
+            required: true,
         },
     },
-    data:function () {
+    data: function () {
         let vm = this;
-        return{
-            panelBody: "tenure-combine-select-"+vm._uid,
+        return {
+            panelBody: 'tenure-combine-select-' + vm._uid,
             checkedTenureNames: [],
-            tenures_headers:["Occurrence", "Feature Id", "Status", "Vesting", "Purpose", "Signif. to OCC", "Comments", "Owner/Manager", "Updated", "Action"],
-            tenures_options:{
+            tenures_headers: [
+                'Occurrence',
+                'Feature Id',
+                'Status',
+                'Vesting',
+                'Purpose',
+                'Signif. to OCC',
+                'Comments',
+                'Owner/Manager',
+                'Updated',
+                'Action',
+            ],
+            tenures_options: {
                 autowidth: true,
-                language:{
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 paging: true,
                 responsive: true,
@@ -44,36 +62,37 @@ export default {
                 ],
                 data: vm.selectedTenures,
                 order: [],
-                buttons:[],
+                buttons: [],
                 searching: true,
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                        "<'row'<'col-sm-12'tr>>" +
-                        "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: [
                     {
-                        data: "occurrence_number",
+                        data: 'occurrence_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "featureid",
+                        data: 'featureid',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "status_display",
+                        data: 'status_display',
                     },
                     {
-                        data: "vesting",
+                        data: 'vesting',
                     },
                     {
-                        data: "purpose",
+                        data: 'purpose',
                     },
                     {
-                        data: "significant_to_occurrence",
+                        data: 'significant_to_occurrence',
                     },
                     {
-                        data: "comments",
+                        data: 'comments',
                         mRender: function (data, type, full) {
                             let value = full.comments;
                             let result = helpers.dtPopover(value, 30, 'hover');
@@ -81,37 +100,41 @@ export default {
                         },
                     },
                     {
-                        data: "owner_name",
+                        data: 'owner_name',
                         mRender: function (data, type, full) {
                             let value = full.related_occurrence_report_numbers;
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return result;
-                        }
+                        },
                     },
                     {
-                        data: "datetime_updated",
+                        data: 'datetime_updated',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "id",
-                        mRender:function (data,type,full){
+                        data: 'id',
+                        mRender: function (data, type, full) {
                             if (vm.combineTenureIds.includes(full.id)) {
                                 if (full.occurrence_id == vm.mainOccurrenceId) {
-                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox' checked disabled/>`
+                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox' checked disabled/>`;
                                 } else {
-                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox' checked/>`
+                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox' checked/>`;
                                 }
                             } else {
-                                if (vm.checkedTenureNames.includes(full.featureid)) {
-                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox' disabled/>`
+                                if (
+                                    vm.checkedTenureNames.includes(
+                                        full.featureid
+                                    )
+                                ) {
+                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox' disabled/>`;
                                 } else {
-                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox'/>`
+                                    return `<input id='${full.id}' data-tenure-checkbox='${full.id}' tenure-feature-id='${full.featureid}' tenure-status='${full.status_display}' type='checkbox'/>`;
                                 }
                             }
-                        }
+                        },
                     },
-                ]
+                ],
             },
             drawCallback: function () {
                 setTimeout(function () {
@@ -124,84 +147,106 @@ export default {
                     vm.adjust_table_width();
                 }, 100);
             },
-        }
+        };
     },
-    components: {
-        datatable,
+    created: function () {
+        let vm = this;
+        vm.getSelectedTenureNames();
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         getSelectedTenureNames: function () {
-            let vm=this;
-            let names = []
-            vm.selectedTenures.forEach(tenure => {
-                if (vm.combineTenureIds.includes(tenure.id) && !names.includes(tenure.featureid)) {
+            let vm = this;
+            let names = [];
+            vm.selectedTenures.forEach((tenure) => {
+                if (
+                    vm.combineTenureIds.includes(tenure.id) &&
+                    !names.includes(tenure.featureid)
+                ) {
                     names.push(tenure.featureid);
                 }
-            })
+            });
             vm.checkedTenureNames = names;
         },
         adjust_table_width: function () {
-            if (this.$refs.tenures_datatable !== undefined) { this.$refs.tenures_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.tenures_datatable !== undefined) {
+                this.$refs.tenures_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
             helpers.enablePopovers();
         },
-        removeTenure: function(id) {
-            let vm=this;
+        removeTenure: function (id) {
+            let vm = this;
             vm.combineTenureIds.splice(vm.combineTenureIds.indexOf(id), 1);
             vm.getSelectedTenureNames();
         },
-        addTenure: function(id) {
-            let vm=this;
+        addTenure: function (id) {
+            let vm = this;
             vm.combineTenureIds.push(id);
             vm.getSelectedTenureNames();
         },
-        addEventListeners:function (){
-            let vm=this;
+        addEventListeners: function () {
+            let vm = this;
 
-            vm.$refs.tenures_datatable.vmDataTable.on('change', 'input[data-tenure-checkbox]', function(e) {
-                e.preventDefault();
-                var id = parseInt($(this).attr('data-tenure-checkbox'));
-                if($(this).prop('checked')) {
-                    vm.addTenure(id);
-                    vm.selectedTenures.forEach(tenure=> {
-                        let checkbox = vm.$refs.tenures_datatable.vmDataTable.$("#"+tenure.id);
-                        if (id != checkbox.attr('data-tenure-checkbox')
-                            && checkbox.attr('tenure-feature-id') == $(this).attr('tenure-feature-id')
-                            && (checkbox.attr('tenure-status') == "Current" && $(this).attr('tenure-status') == "Current")
-                        ) {
-                            checkbox.prop('disabled', true);
-                        }
-                    });
-                } else {
-                    vm.removeTenure(id);
-                    vm.selectedTenures.forEach(tenure=> {
-                        let checkbox = vm.$refs.tenures_datatable.vmDataTable.$("#"+tenure.id);
-                        if (id != checkbox.attr('data-tenure-checkbox')
-                            && checkbox.attr('tenure-feature-id') == $(this).attr('tenure-feature-id')
-                            && (checkbox.attr('tenure-status') == "Current" && $(this).attr('tenure-status') == "Current")
-                        ) {
-                            checkbox.prop('disabled', false);
-                        }
-                    });
+            vm.$refs.tenures_datatable.vmDataTable.on(
+                'change',
+                'input[data-tenure-checkbox]',
+                function (e) {
+                    e.preventDefault();
+                    var id = parseInt($(this).attr('data-tenure-checkbox'));
+                    if ($(this).prop('checked')) {
+                        vm.addTenure(id);
+                        vm.selectedTenures.forEach((tenure) => {
+                            let checkbox =
+                                vm.$refs.tenures_datatable.vmDataTable.$(
+                                    '#' + tenure.id
+                                );
+                            if (
+                                id != checkbox.attr('data-tenure-checkbox') &&
+                                checkbox.attr('tenure-feature-id') ==
+                                    $(this).attr('tenure-feature-id') &&
+                                checkbox.attr('tenure-status') == 'Current' &&
+                                $(this).attr('tenure-status') == 'Current'
+                            ) {
+                                checkbox.prop('disabled', true);
+                            }
+                        });
+                    } else {
+                        vm.removeTenure(id);
+                        vm.selectedTenures.forEach((tenure) => {
+                            let checkbox =
+                                vm.$refs.tenures_datatable.vmDataTable.$(
+                                    '#' + tenure.id
+                                );
+                            if (
+                                id != checkbox.attr('data-tenure-checkbox') &&
+                                checkbox.attr('tenure-feature-id') ==
+                                    $(this).attr('tenure-feature-id') &&
+                                checkbox.attr('tenure-status') == 'Current' &&
+                                $(this).attr('tenure-status') == 'Current'
+                            ) {
+                                checkbox.prop('disabled', false);
+                            }
+                        });
+                    }
                 }
-            });
-            vm.$refs.tenures_datatable.vmDataTable.on('draw', function(e) {
-                helpers.enablePopovers();
-            });
-            vm.$refs.tenures_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+            );
+            vm.$refs.tenures_datatable.vmDataTable.on('draw', function (e) {
                 helpers.enablePopovers();
             });
-        }
-    },
-    created: function(){
-        let vm = this;
-        vm.getSelectedTenureNames();
-    },
-    mounted: function(){
-        let vm = this;
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
+            vm.$refs.tenures_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
-}
-
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
index 7416dfb4..801ce285 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
@@ -1,40 +1,58 @@
 <template lang="html">
     <div id="occurrenceCombineThreats">
-        <datatable ref="threats_datatable" :id="panelBody" :dtOptions="threats_options"
-                    :dtHeaders="threats_headers"/>
+        <datatable
+            :id="panelBody"
+            ref="threats_datatable"
+            :dt-options="threats_options"
+            :dt-headers="threats_headers"
+        />
     </div>
 </template>
 
 <script>
 import datatable from '@vue-utils/datatable.vue';
-import {constants, helpers} from '@/utils/hooks'
+import { constants, helpers } from '@/utils/hooks';
 
 export default {
-    name: 'occurrenceCombineThreats',
+    name: 'OccurrenceCombineThreats',
+    components: {
+        datatable,
+    },
     props: {
         selectedThreats: {
             type: Array,
-            required: true
+            required: true,
         },
         combineThreatIds: {
             type: Array,
-            required: true
+            required: true,
         },
         mainOccurrenceId: {
             type: Number,
-            required: true
+            required: true,
         },
     },
-    data:function () {
+    data: function () {
         let vm = this;
-        return{
+        return {
             checkedOriginalReports: [],
-            panelBody: "threat-combine-select-"+vm._uid,
-            threats_headers:["Occurrence", "Number", "Original Report", "Category", "Date Observed", "Threat Agent", "Current Impact", "Potential Impact", "Comments", "Action"],
-            threats_options:{
+            panelBody: 'threat-combine-select-' + vm._uid,
+            threats_headers: [
+                'Occurrence',
+                'Number',
+                'Original Report',
+                'Category',
+                'Date Observed',
+                'Threat Agent',
+                'Current Impact',
+                'Potential Impact',
+                'Comments',
+                'Action',
+            ],
+            threats_options: {
                 autowidth: true,
-                language:{
-                    processing: constants.DATATABLE_PROCESSING_HTML
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
                 },
                 paging: true,
                 responsive: true,
@@ -44,80 +62,113 @@ export default {
                 ],
                 data: vm.selectedThreats,
                 order: [],
-                buttons:[],
+                buttons: [],
                 searching: true,
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                        "<'row'<'col-sm-12'tr>>" +
-                        "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: [
                     {
-                        data: "occurrence__occurrence_number",
+                        data: 'occurrence__occurrence_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "threat_number",
+                        data: 'threat_number',
                         orderable: true,
                         searchable: true,
                     },
                     {
-                        data: "occurrence_report_threat__occurrence_report__occurrence_report_number",
-                        mRender:function (data,type,full){
-                            if (full.occurrence_report_threat__occurrence_report__occurrence_report_number) {
-                                return full.occurrence_report_threat__occurrence_report__occurrence_report_number + ' - ' + full.occurrence_report_threat__threat_number;
+                        data: 'occurrence_report_threat__occurrence_report__occurrence_report_number',
+                        mRender: function (data, type, full) {
+                            if (
+                                full.occurrence_report_threat__occurrence_report__occurrence_report_number
+                            ) {
+                                return (
+                                    full.occurrence_report_threat__occurrence_report__occurrence_report_number +
+                                    ' - ' +
+                                    full.occurrence_report_threat__threat_number
+                                );
                             }
-                            return ""
-                        }
+                            return '';
+                        },
                     },
                     {
-                        data: "threat_category__name",
+                        data: 'threat_category__name',
                     },
                     {
-                        data: "date_observed",
-                        mRender:function (data,type,full){
-                            return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm'):'';
-                        }
+                        data: 'date_observed',
+                        mRender: function (data, type, full) {
+                            return data != '' && data != null
+                                ? moment(data).format('DD/MM/YYYY HH:mm')
+                                : '';
+                        },
                     },
                     {
-                        data: "threat_agent__name",
+                        data: 'threat_agent__name',
                     },
                     {
-                        data: "current_impact__name",
+                        data: 'current_impact__name',
                     },
                     {
-                        data: "potential_impact__name",
+                        data: 'potential_impact__name',
                     },
                     {
-                        data: "comment",
-                        'render': function(value, type, full){
+                        data: 'comment',
+                        render: function (value, type, full) {
                             let result = helpers.dtPopover(value, 30, 'hover');
-                            return type=='export' ? value : result;
+                            return type == 'export' ? value : result;
                         },
                     },
                     {
-                        data: "id",
-                        mRender:function (data,type,full){
-                            let original_threat = "";
-                            if (full.occurrence_report_threat__threat_number != null) {
-                                original_threat = `original-threat='${full.occurrence_report_threat__threat_number}'`
+                        data: 'id',
+                        mRender: function (data, type, full) {
+                            let original_threat = '';
+                            if (
+                                full.occurrence_report_threat__threat_number !=
+                                null
+                            ) {
+                                original_threat = `original-threat='${full.occurrence_report_threat__threat_number}'`;
                             }
                             if (vm.combineThreatIds.includes(full.id)) {
-                                if (full.occurrence__id == vm.mainOccurrenceId) {
-                                    return `<input id='${full.id}' data-threat-checkbox='${full.id}' `+original_threat+` type='checkbox' checked disabled/>`
+                                if (
+                                    full.occurrence__id == vm.mainOccurrenceId
+                                ) {
+                                    return (
+                                        `<input id='${full.id}' data-threat-checkbox='${full.id}' ` +
+                                        original_threat +
+                                        ` type='checkbox' checked disabled/>`
+                                    );
                                 } else {
-                                    return `<input id='${full.id}' data-threat-checkbox='${full.id}' `+original_threat+` type='checkbox' checked/>`
+                                    return (
+                                        `<input id='${full.id}' data-threat-checkbox='${full.id}' ` +
+                                        original_threat +
+                                        ` type='checkbox' checked/>`
+                                    );
                                 }
                             } else {
-                                
-                                if (vm.checkedOriginalReports.includes(full.occurrence_report_threat__threat_number)) {
-                                    return `<input id='${full.id}' data-threat-checkbox='${full.id}' `+original_threat+` type='checkbox' disabled/>`
+                                if (
+                                    vm.checkedOriginalReports.includes(
+                                        full.occurrence_report_threat__threat_number
+                                    )
+                                ) {
+                                    return (
+                                        `<input id='${full.id}' data-threat-checkbox='${full.id}' ` +
+                                        original_threat +
+                                        ` type='checkbox' disabled/>`
+                                    );
                                 } else {
-                                    return `<input id='${full.id}' data-threat-checkbox='${full.id}' `+original_threat+` type='checkbox'/>`
+                                    return (
+                                        `<input id='${full.id}' data-threat-checkbox='${full.id}' ` +
+                                        original_threat +
+                                        ` type='checkbox'/>`
+                                    );
                                 }
                             }
                         },
                     },
-                ]
+                ],
             },
             drawCallback: function () {
                 setTimeout(function () {
@@ -130,77 +181,109 @@ export default {
                     vm.adjust_table_width();
                 }, 100);
             },
-        }
+        };
     },
-    components: {
-        datatable,
+    created: function () {
+        let vm = this;
+        vm.getSelectedOriginalReports();
+    },
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+        });
     },
     methods: {
         getSelectedOriginalReports: function () {
-            let vm=this;   
-            let reports = []
-            vm.selectedThreats.forEach(threat => {
-                if (vm.combineThreatIds.includes(threat.id) && !reports.includes(threat.occurrence_report_threat__threat_number)) {
-                    reports.push(threat.occurrence_report_threat__threat_number);
+            let vm = this;
+            let reports = [];
+            vm.selectedThreats.forEach((threat) => {
+                if (
+                    vm.combineThreatIds.includes(threat.id) &&
+                    !reports.includes(
+                        threat.occurrence_report_threat__threat_number
+                    )
+                ) {
+                    reports.push(
+                        threat.occurrence_report_threat__threat_number
+                    );
                 }
-            })
+            });
             vm.checkedOriginalReports = reports;
         },
         adjust_table_width: function () {
-            if (this.$refs.threats_datatable !== undefined) { this.$refs.threats_datatable.vmDataTable.columns.adjust().responsive.recalc() };
+            if (this.$refs.threats_datatable !== undefined) {
+                this.$refs.threats_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
             helpers.enablePopovers();
         },
-        removeThreat: function(id) {
-            let vm=this;   
+        removeThreat: function (id) {
+            let vm = this;
             vm.combineThreatIds.splice(vm.combineThreatIds.indexOf(id), 1);
             vm.getSelectedOriginalReports();
-        }, 
-        addThreat: function(id) {
-            let vm=this;   
+        },
+        addThreat: function (id) {
+            let vm = this;
             vm.combineThreatIds.push(id);
             vm.getSelectedOriginalReports();
-        }, 
-        addEventListeners:function (){
-            let vm=this;     
-            vm.$refs.threats_datatable.vmDataTable.on('change', 'input[data-threat-checkbox]', function(e) {
-                e.preventDefault();
-                var id = parseInt($(this).attr('data-threat-checkbox'));
-                if($(this).prop('checked')) {
-                    vm.addThreat(id);
-                    vm.selectedThreats.forEach(threat=> {
-                        let checkbox = vm.$refs.threats_datatable.vmDataTable.$("#"+threat.id);
-                        if (id != checkbox.attr('data-threat-checkbox') && checkbox.attr('original-threat') !== undefined && checkbox.attr('original-threat') == $(this).attr('original-threat')) {
-                            checkbox.prop('disabled', true);
-                        }
-                    });
-                } else {
-                    vm.removeThreat(id);
-                    vm.selectedThreats.forEach(threat=> {
-                        let checkbox = vm.$refs.threats_datatable.vmDataTable.$("#"+threat.id);
-                        if (id != checkbox.attr('data-threat-checkbox') && checkbox.attr('original-threat') !== undefined && checkbox.attr('original-threat') == $(this).attr('original-threat')) {
-                            checkbox.prop('disabled', false);
-                        }
-                    });
+        },
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'change',
+                'input[data-threat-checkbox]',
+                function (e) {
+                    e.preventDefault();
+                    var id = parseInt($(this).attr('data-threat-checkbox'));
+                    if ($(this).prop('checked')) {
+                        vm.addThreat(id);
+                        vm.selectedThreats.forEach((threat) => {
+                            let checkbox =
+                                vm.$refs.threats_datatable.vmDataTable.$(
+                                    '#' + threat.id
+                                );
+                            if (
+                                id != checkbox.attr('data-threat-checkbox') &&
+                                checkbox.attr('original-threat') !==
+                                    undefined &&
+                                checkbox.attr('original-threat') ==
+                                    $(this).attr('original-threat')
+                            ) {
+                                checkbox.prop('disabled', true);
+                            }
+                        });
+                    } else {
+                        vm.removeThreat(id);
+                        vm.selectedThreats.forEach((threat) => {
+                            let checkbox =
+                                vm.$refs.threats_datatable.vmDataTable.$(
+                                    '#' + threat.id
+                                );
+                            if (
+                                id != checkbox.attr('data-threat-checkbox') &&
+                                checkbox.attr('original-threat') !==
+                                    undefined &&
+                                checkbox.attr('original-threat') ==
+                                    $(this).attr('original-threat')
+                            ) {
+                                checkbox.prop('disabled', false);
+                            }
+                        });
+                    }
                 }
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('draw', function(e) {
-                helpers.enablePopovers();
-            });
-            vm.$refs.threats_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+            );
+            vm.$refs.threats_datatable.vmDataTable.on('draw', function (e) {
                 helpers.enablePopovers();
             });
-        }
-    },
-    created: function(){
-        let vm = this;    
-        vm.getSelectedOriginalReports();
-    },
-    mounted: function() {
-        let vm = this;    
-        this.$nextTick(() => {
-            vm.addEventListeners();
-        });
+            vm.$refs.threats_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
-}
-
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
index a7b8ef5d..b2816aec 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
@@ -1,40 +1,67 @@
 <template lang="html">
-    <div v-if="occurrence_report" class="container" id="internal-occurence-report-detail">
+    <div
+        v-if="occurrence_report"
+        id="internal-occurence-report-detail"
+        class="container"
+    >
         <div class="row mb-2">
             <div class="col">
-                <h3 class="float-start">Occurrence Report: {{ occurrence_report.occurrence_report_number }} - <span
-                        class="text-capitalize">{{ display_group_type }}</span></h3>
+                <h3 class="float-start">
+                    Occurrence Report:
+                    {{ occurrence_report.occurrence_report_number }} -
+                    <span class="text-capitalize">{{
+                        display_group_type
+                    }}</span>
+                </h3>
                 <h4 class="text-muted mb-3 float-end">
-                    <span class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-3">
-                        <template v-if="occurrence_report.occurrence">Occurrence:
-                            {{ occurrence_report.occurrence.occurrence_number }}<small><a
+                    <span
+                        class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-3"
+                    >
+                        <template v-if="occurrence_report.occurrence"
+                            >Occurrence:
+                            {{ occurrence_report.occurrence.occurrence_number
+                            }}<small
+                                ><a
                                     :href="`/internal/occurrence/${occurrence_report.occurrence.id}?group_type_name=${occurrence_report.group_type}&action=view`"
-                                    target="_blank"><i class="bi bi-box-arrow-up-right ms-2"></i></a></small>
-                        </template>
-                        <template v-else>
-                            Occurrence: NOT SET
+                                    target="_blank"
+                                    ><i
+                                        class="bi bi-box-arrow-up-right ms-2"
+                                    ></i></a
+                            ></small>
                         </template>
+                        <template v-else> Occurrence: NOT SET </template>
                     </span>
-                    <span class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-2 align-middle">
+                    <span
+                        class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-2 align-middle"
+                    >
                         <template v-if="isCommunity">
                             <template v-if="occurrence_report.community_id">
-                                Community: {{ occurrence_report.community_number }}<small><a
+                                Community:
+                                {{ occurrence_report.community_number
+                                }}<small
+                                    ><a
                                         :href="`/internal/species-communities/${occurrence_report.community_id}?group_type_name=${occurrence_report.group_type}&action=view`"
-                                        target="_blank"><i class="bi bi-box-arrow-up-right ms-2"></i></a></small>
-                            </template>
-                            <template v-else>
-                                Community: NOT SET
+                                        target="_blank"
+                                        ><i
+                                            class="bi bi-box-arrow-up-right ms-2"
+                                        ></i></a
+                                ></small>
                             </template>
+                            <template v-else> Community: NOT SET </template>
                         </template>
                         <template v-else>
                             <template v-if="occurrence_report.species_id">
-                                Species: {{ occurrence_report.species_number }}<small><a
+                                Species: {{ occurrence_report.species_number
+                                }}<small
+                                    ><a
                                         :href="`/internal/species-communities/${occurrence_report.species_id}?group_type_name=${occurrence_report.group_type}&action=view`"
-                                        target="_blank"><i class="bi bi-box-arrow-up-right ms-2"></i></a></small>
-                            </template>
-                            <template v-else>
-                                Species: NOT SET
+                                        target="_blank"
+                                        ><i
+                                            class="bi bi-box-arrow-up-right ms-2"
+                                        ></i></a
+                                ></small>
                             </template>
+                            <template v-else> Species: NOT SET </template>
                         </template>
                     </span>
                 </h4>
@@ -42,77 +69,130 @@
         </div>
         <div class="row pb-4">
             <div class="col-md-3">
+                <CommsLogs
+                    :comms_url="comms_url"
+                    :logs_url="logs_url"
+                    :comms_add_url="comms_add_url"
+                    :disable_add_entry="!occurrence_report.can_add_log"
+                    class="mb-3"
+                />
 
-                <CommsLogs :comms_url="comms_url" :logs_url="logs_url" :comms_add_url="comms_add_url"
-                    :disable_add_entry="!occurrence_report.can_add_log" class="mb-3" />
-
-                <Submission :submitter_first_name="submitter_first_name" :submitter_last_name="submitter_last_name"
+                <Submission
+:submitter_first_name="submitter_first_name" :submitter_last_name="submitter_last_name"
                     :lodgement_date="occurrence_report.lodgement_date"
-                    :is_new_contributor="occurrence_report.is_new_contributor" class="mb-3" />
+                    :is_new_contributor="occurrence_report.is_new_contributor"
+                    class="mb-3"
+                />
 
                 <div class="card card-default sticky-top">
-                    <div class="card-header">
-                        Workflow
-                    </div>
+                    <div class="card-header">Workflow</div>
                     <div class="card-body border-bottom">
                         <strong>Status</strong><br />
                         {{ occurrence_report.processing_status }}
                     </div>
                     <div class="card-body">
-                        <div class="mb-2"><strong>Currently assigned to</strong></div>
+                        <div class="mb-2">
+                            <strong>Currently assigned to</strong>
+                        </div>
                         <template v-if="with_approver">
-                            <select ref="assigned_officer" :disabled="!occurrence_report.can_user_approve"
-                                class="form-select mb-2" v-model="occurrence_report.assigned_approver">
-                                <option v-for="member in occurrence_report.allowed_assessors" :value="member.id"
-                                    :selected="member.id == occurrence_report.assigned_approver">
-                                    {{ member.first_name }} {{ member.last_name }}</option>
+                            <select
+ref="assigned_officer" v-model="occurrence_report.assigned_approver"
+                                :disabled="!occurrence_report.can_user_approve" class="form-select mb-2">
+                                <option
+v-for="member in occurrence_report.allowed_assessors" :value="member.id"
+                                    :selected="
+                                        member.id ==
+                                        occurrence_report.assigned_approver
+                                    "
+                                >
+                                    {{ member.first_name }}
+                                    {{ member.last_name }}
+                                </option>
                             </select>
-                            <a v-if="with_approver && occurrence_report.assigned_approver != occurrence_report.current_assessor.id && occurrence_report.assessor_mode.assessor_can_assess"
-                                @click.prevent="assignRequestUser()" class="actionBtn float-end" role="button">Assign to
-                                me</a>
+                            <a
+v-if="with_approver && occurrence_report.assigned_approver != occurrence_report.current_assessor.id && occurrence_report.assessor_mode.assessor_can_assess"
+                                class="actionBtn float-end" role="button" @click.prevent="assignRequestUser()">Assign to
+                            >
                         </template>
                         <template v-else>
-                            <select ref="assigned_officer" :disabled="!occurrence_report.can_user_assess"
-                                class="form-select mb-2" v-model="occurrence_report.assigned_officer">
-                                <option v-for="member in occurrence_report.allowed_assessors" :value="member.id"
-                                    :selected="member.id == occurrence_report.current_assessor.id">
-                                    {{ member.first_name }} {{ member.last_name }}</option>
+                            <select
+ref="assigned_officer" v-model="occurrence_report.assigned_officer"
+                                :disabled="!occurrence_report.can_user_assess" class="form-select mb-2">
+                                <option
+v-for="member in occurrence_report.allowed_assessors" :value="member.id"
+                                    :selected="
+                                        member.id ==
+                                        occurrence_report.current_assessor.id
+                                    "
+                                >
+                                    {{ member.first_name }}
+                                    {{ member.last_name }}
+                                </option>
                             </select>
-                            <a v-if="(with_assessor || with_referral || unlocked) && occurrence_report.assigned_officer != occurrence_report.current_assessor.id && occurrence_report.assessor_mode.assessor_can_assess"
-                                @click.prevent="assignRequestUser()" class="actionBtn float-end" role="button">Assign to
-                                me</a>
+                            <a
+v-if="(with_assessor || with_referral || unlocked) && occurrence_report.assigned_officer != occurrence_report.current_assessor.id && occurrence_report.assessor_mode.assessor_can_assess"
+                                class="actionBtn float-end" role="button" @click.prevent="assignRequestUser()">Assign to
+                            >
                         </template>
                     </div>
-                    <div v-if="display_referral_actions" class="card-body border-top">
+                    <div
+                        v-if="display_referral_actions"
+                        class="card-body border-top"
+                    >
                         <div class="mb-2"><strong>Referrals</strong></div>
                         <div class="form-group mb-3">
-                            <select :disabled="!canAction" ref="department_users" class="form-control">
-                            </select>
-                            <template v-if='!sendingReferral'>
+                            <select
+                                ref="department_users"
+                                :disabled="!canAction"
+                                class="form-control"
+                            ></select>
+                            <template v-if="!sendingReferral">
                                 <template v-if="selected_referral">
-                                    <label class="control-label mt-3" for="referral_text">Comments</label>
-                                    <textarea class="form-control" name="referral_text" ref="referral_text"
-                                        v-model="referral_text"></textarea>
-                                    <a v-if="canAction" @click.prevent="sendReferral()" class="actionBtn float-end mt-2"
-                                        role="button">Send</a>
+                                    <label
+                                        class="control-label mt-3"
+                                        for="referral_text"
+                                        >Comments</label
+                                    >
+                                    <textarea
+ref="referral_text" v-model="referral_text" class="form-control"
+                                        name="referral_text"
+                                    ></textarea>
+                                    <a
+v-if="canAction" class="actionBtn float-end mt-2" role="button"
+                                        @click.prevent="sendReferral()"
+                                        >Send</a
+                                    >
                                 </template>
                             </template>
                             <template v-else>
-                                <span v-if="canAction" @click.prevent="sendReferral()" disabled
-                                    class="actionBtn text-primary float-end">
+                                <span
+v-if="canAction" disabled class="actionBtn text-primary float-end"
+                                    @click.prevent="sendReferral()"
+                                >
                                     Sending Referral&nbsp;
-                                    <span class="spinner-border spinner-border-sm" role="status"
-                                        aria-hidden="true"></span>
-                                    <span class="visually-hidden">Loading...</span>
+                                    <span
+class="spinner-border spinner-border-sm" role="status"
+                                        aria-hidden="true"
+                                    ></span>
+                                    <span class="visually-hidden"
+                                        >Loading...</span
+                                    >
                                 </span>
                             </template>
                         </div>
-                        <div v-if="
-                            occurrence_report.external_referral_invites &&
-                            occurrence_report.external_referral_invites.length > 0
-                        ">
-                            <div class="fw-bold mb-1">External Referee Invites</div>
-                            <table class="table table-sm table-hover table-referrals">
+                        <div
+                            v-if="
+                                occurrence_report.external_referral_invites &&
+                                occurrence_report.external_referral_invites
+                                    .length > 0
+                            "
+                        >
+                            <div class="fw-bold mb-1">
+                                External Referee Invites
+                            </div>
+                            <table
+                                class="table table-sm table-hover table-referrals"
+                            >
                                 <thead>
                                     <tr>
                                         <th scope="col">Referee</th>
@@ -121,31 +201,50 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr v-for="external_referee_invite in occurrence_report.external_referral_invites"
-                                        :key="external_referee_invite.id">
+                                    <tr
+                                        v-for="external_referee_invite in occurrence_report.external_referral_invites"
+                                        :key="external_referee_invite.id"
+                                    >
                                         <td class="truncate-name">
-                                            {{ external_referee_invite.full_name }}
+                                            {{
+                                                external_referee_invite.full_name
+                                            }}
                                         </td>
                                         <td>Pending</td>
                                         <td class="text-center">
-                                            <a role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
-                                                :data-bs-content="'Send a reminder to ' +
+                                            <a
+role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
+                                                :data-bs-content="
+                                                    'Send a reminder to ' +
                                                     external_referee_invite.full_name
-                                                    " data-bs-placement="bottom" @click.prevent="
-                                                        remindExternalReferee(
-                                                            external_referee_invite
-                                                        )
-                                                        "><i class="fa fa-bell text-warning" aria-hidden="true"></i>
+                                                "
+                                                data-bs-placement="bottom"
+                                                @click.prevent="
+                                                    remindExternalReferee(
+                                                        external_referee_invite
+                                                    )
+                                                "
+                                                ><i
+                                                    class="fa fa-bell text-warning"
+                                                    aria-hidden="true"
+                                                ></i>
                                             </a>
-                                            <a role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
-                                                :data-bs-content="'Retract the external referee invite sent to ' +
+                                            <a
+role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
+                                                :data-bs-content="
+                                                    'Retract the external referee invite sent to ' +
                                                     external_referee_invite.full_name
-                                                    " data-bs-placement="bottom" @click.prevent="
-                                                        retractExternalRefereeInvite(
-                                                            external_referee_invite
-                                                        )
-                                                        "><i class="fa fa-times-circle text-danger"
-                                                    aria-hidden="true"></i>
+                                                "
+                                                data-bs-placement="bottom"
+                                                @click.prevent="
+                                                    retractExternalRefereeInvite(
+                                                        external_referee_invite
+                                                    )
+                                                "
+                                                ><i
+                                                    class="fa fa-times-circle text-danger"
+                                                    aria-hidden="true"
+                                                ></i>
                                             </a>
                                         </td>
                                     </tr>
@@ -153,19 +252,32 @@
                             </table>
                         </div>
                     </div>
-                    <div v-if="display_referral_actions &&
-                        isAssignedOfficer &&
-                        occurrence_report.latest_referrals &&
-                        occurrence_report.latest_referrals.length > 0
-                    " class="card-body border-top">
+                    <div
+v-if="display_referral_actions &&
+                            isAssignedOfficer &&
+                            occurrence_report.latest_referrals &&
+                            occurrence_report.latest_referrals.length > 0
+                        "
+                        class="card-body border-top"
+                    >
                         <div>
                             <div class="fw-bold mb-1">
                                 Recent Referrals
-                                <small class="text-secondary fw-lighter">(Showing {{
-                                    occurrence_report.latest_referrals.length }} of
-                                    {{ occurrence_report.referrals.length }})</small>
+                                <small class="text-secondary fw-lighter"
+                                    >(Showing
+                                    {{
+                                        occurrence_report.latest_referrals
+                                            .length
+                                    }}
+                                    of
+                                    {{
+                                        occurrence_report.referrals.length
+                                    }})</small
+                                >
                             </div>
-                            <table class="table table-sm table-hover table-referrals">
+                            <table
+                                class="table table-sm table-hover table-referrals"
+                            >
                                 <thead>
                                     <tr>
                                         <th>Referee</th>
@@ -174,7 +286,10 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr v-for="r in occurrence_report.latest_referrals" :key="r.id">
+                                    <tr
+                                        v-for="r in occurrence_report.latest_referrals"
+                                        :key="r.id"
+                                    >
                                         <td class="truncate-name">
                                             {{ r.referral.first_name }}
                                             {{ r.referral.last_name }}
@@ -183,41 +298,75 @@
                                             {{ r.processing_status }}
                                         </td>
                                         <td class="text-center">
-                                            <template v-if="'Awaiting' == r.processing_status">
-                                                <a v-if="canAction" role="button" data-bs-toggle="popover"
-                                                    data-bs-trigger="hover" :data-bs-content="'Send a reminder to ' +
+                                            <template
+                                                v-if="
+                                                    'Awaiting' ==
+                                                    r.processing_status
+                                                "
+                                            >
+                                                <a
+v-if="canAction" role="button" data-bs-toggle="popover"
+                                                    data-bs-trigger="hover"
+                                                    :data-bs-content="
+                                                        'Send a reminder to ' +
                                                         r.referral['fullname']
-                                                        " data-bs-placement="bottom" @click.prevent="
-                                                            remindReferral(r)
-                                                            "><i class="fa fa-bell text-warning"
-                                                        aria-hidden="true"></i>
+                                                    "
+                                                    data-bs-placement="bottom"
+                                                    @click.prevent="
+                                                        remindReferral(r)
+                                                    "
+                                                    ><i
+                                                        class="fa fa-bell text-warning"
+                                                        aria-hidden="true"
+                                                    ></i>
                                                 </a>
-                                                <a role="button" data-bs-toggle="popover" data-bs-trigger="hover"
-                                                    :data-bs-content="'Recall the referral request sent to ' +
+                                                <a
+role="button" data-bs-toggle="popover" data-bs-trigger="hover"
+                                                    :data-bs-content="
+                                                        'Recall the referral request sent to ' +
                                                         r.referral['fullname']
-                                                        " data-bs-placement="bottom" @click.prevent="
-                                                            recallReferral(r)
-                                                            "><i class="fa fa-times-circle text-danger"
-                                                        aria-hidden="true"></i>
+                                                    "
+                                                    data-bs-placement="bottom"
+                                                    @click.prevent="
+                                                        recallReferral(r)
+                                                    "
+                                                    ><i
+                                                        class="fa fa-times-circle text-danger"
+                                                        aria-hidden="true"
+                                                    ></i>
                                                 </a>
                                             </template>
                                             <template v-else>
-                                                <small v-if="canAction"><a role="button" data-bs-toggle="popover"
-                                                        data-bs-trigger="hover" :data-bs-content="'Resend this referral request to ' +
-                                                            r.referral['fullname']
-                                                            " @click.prevent="
-                                                                resendReferral(r)
-                                                                "><i class="fa fa-envelope text-primary"
-                                                            aria-hidden="true"></i>
-                                                    </a></small>
+                                                <small v-if="canAction"
+                                                    ><a
+                                                        role="button"
+                                                        data-bs-toggle="popover"
+                                                        data-bs-trigger="hover"
+                                                        :data-bs-content="
+                                                            'Resend this referral request to ' +
+                                                            r.referral[
+                                                                'fullname'
+                                                            ]
+                                                        "
+                                                        @click.prevent="
+                                                            resendReferral(r)
+                                                        "
+                                                        ><i
+                                                            class="fa fa-envelope text-primary"
+                                                            aria-hidden="true"
+                                                        ></i> </a
+                                                ></small>
                                             </template>
                                         </td>
                                     </tr>
                                 </tbody>
                             </table>
-                            <ShowAllReferrals @refreshFromResponse="refreshFromResponse"
-                                :occurrence_report_obj="occurrence_report" :canAction="canAction"
-                                :isFinalised="occurrence_report.finalised" :referral_url="referralListURL" />
+                            <ShowAllReferrals
+                                :occurrence_report_obj="occurrence_report"
+                                :can-action="canAction" :is-finalised="occurrence_report.finalised"
+                                :referral_url="referralListURL"
+                                @refresh-from-response="refreshFromResponse"
+                            />
                         </div>
                     </div>
                     <div v-if="canAction" class="card-body border-top">
@@ -225,96 +374,201 @@
                             <strong>Actions</strong>
                         </div>
                         <div class="text-center">
-                            <button v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-4"
-                                @click.prevent="amendmentRequest()">Request
-                                Amendment</button>
-                            <button v-if="with_approver || unlocked" style="width:80%;" class="btn btn-primary mb-4"
-                                @click.prevent="backToAssessor()">Back to Assessor</button>
-
-                            <button v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-2"
-                                @click.prevent="proposeApprove">Propose Approve</button>
-                            <button v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-4"
-                                @click.prevent="proposeDecline">Propose Decline</button>
+                            <button
+v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-4"
+                                @click.prevent="amendmentRequest()"
+                            >
+                                Request Amendment
+                            </button>
+                            <button
+v-if="with_approver || unlocked" style="width:80%;" class="btn btn-primary mb-4"
+                                @click.prevent="backToAssessor()"
+                            >
+                                Back to Assessor
+                            </button>
 
-                            <button v-if="display_approve_button" style="width:80%;" class="btn btn-primary mb-4"
-                                @click.prevent="approve()">Approve</button>
-                            <button v-if="display_decline_button" style="width:80%;" class="btn btn-primary mb-4"
-                                @click.prevent="decline()">Decline</button>
+                            <button
+v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-2"
+                                @click.prevent="proposeApprove"
+                            >
+                                Propose Approve
+                            </button>
+                            <button
+v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-4"
+                                @click.prevent="proposeDecline"
+                            >
+                                Propose Decline
+                            </button>
 
-                            <button v-if="approved" style="width:80%;" class="btn btn-primary mb-4"
-                                @click.prevent="unlock()">Unlock</button>
-                            <button v-if="unlocked" style="width:80%;" class="btn btn-primary mb-4"
-                                @click.prevent="lock()">Lock</button>
+                            <button
+v-if="display_approve_button" style="width:80%;" class="btn btn-primary mb-4"
+                                @click.prevent="approve()"
+                            >
+                                Approve
+                            </button>
+                            <button
+v-if="display_decline_button" style="width:80%;" class="btn btn-primary mb-4"
+                                @click.prevent="decline()"
+                            >
+                                Decline
+                            </button>
 
+                            <button
+v-if="approved" style="width:80%;" class="btn btn-primary mb-4"
+                                @click.prevent="unlock()"
+                            >
+                                Unlock
+                            </button>
+                            <button
+v-if="unlocked" style="width:80%;" class="btn btn-primary mb-4"
+                                @click.prevent="lock()"
+                            >
+                                Lock
+                            </button>
                         </div>
                     </div>
-                    <div v-if="occurrence_report.user_is_assessor" class="card-body border-top text-center">
-                        <button style="width:80%;" class="btn btn-primary mb-1"
-                            @click.prevent="copyOccurrenceReport()"><i class="bi bi-copy me-1"></i> Copy {{
+                    <div
+                        v-if="occurrence_report.user_is_assessor"
+                        class="card-body border-top text-center"
+                    >
+                        <button
+style="width:80%;" class="btn btn-primary mb-1"
+                            @click.prevent="copyOccurrenceReport()"
+                        >
+                            <i class="bi bi-copy me-1"></i> Copy
+                            {{
                                 occurrence_report.occurrence_report_number
-                            }}</button><br />
+                            }}</button
+                        ><br />
                     </div>
                 </div>
             </div>
             <div class="col-md-9">
-                <form :action="occurrence_report_form_url" method="post" name="occurrence_report"
-                    enctype="multipart/form-data">
-                    <ProposalOccurrenceReport v-if="occurrence_report" :occurrence_report_obj="occurrence_report"
-                        id="OccurrenceReportStart" :canEditStatus="false" :is_external="false" :is_internal="true"
-                        ref="occurrence_report" @refreshFromResponse="refreshFromResponse"
-                        @refreshOccurrenceReport="refreshOccurrenceReport()"
-                        @saveOccurrenceReport="save_before_submit()">
+                <form
+:action="occurrence_report_form_url" method="post" name="occurrence_report"
+                    enctype="multipart/form-data"
+                >
+                    <ProposalOccurrenceReport
+v-if="occurrence_report" id="OccurrenceReportStart"
+                        ref="occurrence_report" :occurrence_report_obj="occurrence_report" :can-edit-status="false" :is_external="false"
+                        :is_internal="true" @refresh-from-response="refreshFromResponse"
+                        @refresh-occurrence-report="refreshOccurrenceReport()"
+                        @save-occurrence-report="save_before_submit()"
+                    >
                     </ProposalOccurrenceReport>
 
-                    <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                    <input type='hidden' name="occurrence_report_id" :value="1" />
+                    <input
+                        type="hidden"
+                        name="csrfmiddlewaretoken"
+                        :value="csrf_token"
+                    />
+                    <input
+                        type="hidden"
+                        name="occurrence_report_id"
+                        :value="1"
+                    />
                     <div class="row" style="margin-bottom: 50px">
-                        <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                        <div
+                            class="navbar fixed-bottom"
+                            style="background-color: #f5f5f5"
+                        >
                             <div class="container">
-                                <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
-                                    @click.prevent="returnToDashboard">
-                                    Return to Dashboard</button>
-                                <div v-if="occurrence_report.internal_application && occurrence_report.can_user_edit"
-                                    class="col-md-6 text-end">
-                                    <button v-if="savingOccurrenceReport" class="btn btn-primary me-2"
-                                        style="margin-top:5px;" disabled>Save and Continue&nbsp;
-                                        <span class="spinner-border spinner-border-sm" role="status"
-                                            aria-hidden="true"></span>
-                                        <span class="visually-hidden">Loading...</span></button>
-                                    <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                        @click.prevent="save()"
-                                        :disabled="saveExitOccurrenceReport || submitOccurrenceReport">Save
-                                        and Continue</button>
+                                <button
+class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
+                                    @click.prevent="returnToDashboard"
+                                >
+                                    Return to Dashboard
+                                </button>
+                                <div
+v-if="occurrence_report.internal_application && occurrence_report.can_user_edit"
+                                    class="col-md-6 text-end"
+                                >
+                                    <button
+v-if="savingOccurrenceReport" class="btn btn-primary me-2"
+                                        style="margin-top: 5px"
+                                        disabled
+                                    >
+                                        Save and Continue&nbsp;
+                                        <span
+class="spinner-border spinner-border-sm" role="status"
+                                            aria-hidden="true"
+                                        ></span>
+                                        <span class="visually-hidden"
+                                            >Loading...</span
+                                        >
+                                    </button>
+                                    <button
+v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                        :disabled="saveExitOccurrenceReport || submitOccurrenceReport"
+                                        @click.prevent="save()">Save
+                                        Save and Continue
+                                    </button>
 
-                                    <button v-if="saveExitOccurrenceReport" class="btn btn-primary me-2"
-                                        style="margin-top:5px;" disabled>Save and Exit&nbsp;
-                                        <span class="spinner-border spinner-border-sm" role="status"
-                                            aria-hidden="true"></span>
-                                        <span class="visually-hidden">Loading...</span></button>
-                                    <button v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                        @click.prevent="save_exit()"
-                                        :disabled="savingOccurrenceReport || submitOccurrenceReport">Save
-                                        and Exit</button>
+                                    <button
+v-if="saveExitOccurrenceReport" class="btn btn-primary me-2"
+                                        style="margin-top: 5px"
+                                        disabled
+                                    >
+                                        Save and Exit&nbsp;
+                                        <span
+class="spinner-border spinner-border-sm" role="status"
+                                            aria-hidden="true"
+                                        ></span>
+                                        <span class="visually-hidden"
+                                            >Loading...</span
+                                        >
+                                    </button>
+                                    <button
+v-else class="btn btn-primary me-2" style="margin-top:5px;"
+                                        :disabled="savingOccurrenceReport || submitOccurrenceReport"
+                                        @click.prevent="save_exit()">Save
+                                        Save and Exit
+                                    </button>
 
-                                    <button v-if="submitOccurrenceReport" class="btn btn-primary"
-                                        style="margin-top:5px;" disabled>Submit&nbsp;
-                                        <span class="spinner-border spinner-border-sm" role="status"
-                                            aria-hidden="true"></span>
-                                        <span class="visually-hidden">Loading...</span></button>
-                                    <button v-else class="btn btn-primary" style="margin-top:5px;"
-                                        @click.prevent="submit()"
-                                        :disabled="saveExitOccurrenceReport || savingOccurrenceReport">Submit</button>
+                                    <button
+v-if="submitOccurrenceReport" class="btn btn-primary"
+                                        style="margin-top: 5px"
+                                        disabled
+                                    >
+                                        Submit&nbsp;
+                                        <span
+class="spinner-border spinner-border-sm" role="status"
+                                            aria-hidden="true"
+                                        ></span>
+                                        <span class="visually-hidden"
+                                            >Loading...</span
+                                        >
+                                    </button>
+                                    <button
+v-else class="btn btn-primary" style="margin-top:5px;"
+                                        :disabled="saveExitOccurrenceReport || savingOccurrenceReport"
+                                        @click.prevent="submit()">Submit</button>
                                 </div>
-                                <div v-else-if="(occurrence_report.assessor_mode.has_assessor_mode || occurrence_report.assessor_mode.has_unlocked_mode)"
-                                    class="col-md-6 text-end">
-                                    <button v-if="savingOccurrenceReport" class="btn btn-primary"
-                                        style="margin-top:5px;" disabled>Save Changes <span
-                                            class="spinner-border spinner-border-sm" role="status"
-                                            aria-hidden="true"></span>
-                                        <span class="visually-hidden">Loading...</span></button>
-                                    <button v-else class="btn btn-primary" style="margin-top:5px;"
-                                        @click.prevent="save()">Save
-                                        Changes</button>
+                                <div
+v-else-if="(occurrence_report.assessor_mode.has_assessor_mode || occurrence_report.assessor_mode.has_unlocked_mode)"
+                                    class="col-md-6 text-end"
+                                >
+                                    <button
+v-if="savingOccurrenceReport" class="btn btn-primary"
+                                        style="margin-top: 5px"
+                                        disabled
+                                    >
+                                        Save Changes
+                                        <span
+                                            class="spinner-border spinner-border-sm"
+                                            role="status"
+                                            aria-hidden="true"
+                                        ></span>
+                                        <span class="visually-hidden"
+                                            >Loading...</span
+                                        >
+                                    </button>
+                                    <button
+v-else class="btn btn-primary" style="margin-top:5px;"
+                                        @click.prevent="save()"
+                                    >
+                                        Save Changes
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -323,59 +577,111 @@
             </div>
         </div>
 
-        <AmendmentRequest ref="amendment_request" :occurrence_report_id="occurrence_report.id"
-            @refreshFromResponse="refreshFromResponse"></AmendmentRequest>
-        <BackToAssessor ref="back_to_assessor" :occurrence_report_id="occurrence_report.id"
-            :occurrence_report_number="occurrence_report.occurrence_report_number"
-            @refreshFromResponse="refreshFromResponse">
+        <AmendmentRequest
+ref="amendment_request" :occurrence_report_id="occurrence_report.id"
+            @refresh-from-response="refreshFromResponse"
+        ></AmendmentRequest>
+        <BackToAssessor
+ref="back_to_assessor" :occurrence_report_id="occurrence_report.id"
+            :occurrence_report_number="
+                occurrence_report.occurrence_report_number
+            "
+            @refresh-from-response="refreshFromResponse"
+        >
         </BackToAssessor>
-        <ProposeAppprove ref="propose_approve" :occurrence_report="occurrence_report"
-            :occurrence_report_number="occurrence_report.occurrence_report_number"
-            :occurrence="occurrence_report.occurrence" :group_type_id="occurrence_report.group_type_id"
-            @refreshFromResponse="refreshFromResponse">
+        <ProposeAppprove
+ref="propose_approve" :occurrence_report="occurrence_report"
+            :occurrence_report_number="
+                occurrence_report.occurrence_report_number
+            "
+            :occurrence="occurrence_report.occurrence"
+            :group_type_id="occurrence_report.group_type_id"
+            @refresh-from-response="refreshFromResponse"
+        >
         </ProposeAppprove>
-        <ProposeDecline ref="propose_decline" :occurrence_report_id="occurrence_report.id"
-            :occurrence_report_number="occurrence_report.occurrence_report_number"
-            @refreshFromResponse="refreshFromResponse">
+        <ProposeDecline
+ref="propose_decline" :occurrence_report_id="occurrence_report.id"
+            :occurrence_report_number="
+                occurrence_report.occurrence_report_number
+            "
+            @refresh-from-response="refreshFromResponse"
+        >
         </ProposeDecline>
 
-        <Decline v-if="display_decline_button" ref="decline" :occurrence_report_id="occurrence_report.id"
-            :occurrence_report_number="occurrence_report.occurrence_report_number"
-            :declined_details="occurrence_report.declined_details" @refreshFromResponse="refreshFromResponse">
+        <Decline
+v-if="display_decline_button" ref="decline" :occurrence_report_id="occurrence_report.id"
+            :occurrence_report_number="
+                occurrence_report.occurrence_report_number
+            "
+            :declined_details="occurrence_report.declined_details"
+            @refresh-from-response="refreshFromResponse"
+        >
         </Decline>
-        <Approve v-if="display_approve_button && occurrence_report.approval_details" ref="approve"
+        <Approve
+v-if="display_approve_button && occurrence_report.approval_details" ref="approve"
             :occurrence_report_id="occurrence_report.id"
-            :occurrence_report_number="occurrence_report.occurrence_report_number"
-            :approval_details="occurrence_report.approval_details" @refreshFromResponse="refreshFromResponse">
+            :occurrence_report_number="
+                occurrence_report.occurrence_report_number
+            "
+            :approval_details="occurrence_report.approval_details"
+            @refresh-from-response="refreshFromResponse"
+        >
         </Approve>
-        <InviteExternalReferee ref="inviteExternalReferee" :pk="occurrence_report.id" model="occurrence_report"
-            :email="external_referee_email" @externalRefereeInviteSent="externalRefereeInviteSent" />
+        <InviteExternalReferee
+ref="inviteExternalReferee" :pk="occurrence_report.id" model="occurrence_report"
+            :email="external_referee_email"
+            @external-referee-invite-sent="externalRefereeInviteSent"
+        />
     </div>
-
-
 </template>
 <script>
+import datatable from '@vue-utils/datatable.vue';
+import CommsLogs from '@common-utils/comms_logs.vue';
+import Submission from '@common-utils/submission.vue';
+import ShowAllReferrals from '@common-utils/occurrence/ocr_more_referrals.vue';
+import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue';
+import AmendmentRequest from './amendment_request.vue';
+import BackToAssessor from './back_to_assessor.vue';
+import ProposeDecline from './ocr_propose_decline.vue';
+import ProposeAppprove from './ocr_propose_approve.vue';
+import InviteExternalReferee from '@common-utils/invite_external_referee.vue';
+import Decline from './ocr_decline.vue';
+import Approve from './ocr_approve.vue';
 
-import datatable from '@vue-utils/datatable.vue'
-import CommsLogs from '@common-utils/comms_logs.vue'
-import Submission from '@common-utils/submission.vue'
-import ShowAllReferrals from '@common-utils/occurrence/ocr_more_referrals.vue'
-import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue'
-import AmendmentRequest from './amendment_request.vue'
-import BackToAssessor from './back_to_assessor.vue'
-import ProposeDecline from './ocr_propose_decline.vue'
-import ProposeAppprove from './ocr_propose_approve.vue'
-import InviteExternalReferee from '@common-utils/invite_external_referee.vue'
-import Decline from './ocr_decline.vue'
-import Approve from './ocr_approve.vue'
-
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'InternalOccurrenceReportDetail',
+    components: {
+        datatable,
+        CommsLogs,
+        Submission,
+        ShowAllReferrals,
+        ProposalOccurrenceReport,
+        AmendmentRequest,
+        BackToAssessor,
+        ProposeDecline,
+        ProposeAppprove,
+        Decline,
+        Approve,
+        InviteExternalReferee,
+    },
+    filters: {
+        formatDate: function (data) {
+            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        },
+    },
+    beforeRouteEnter: function (to, from, next) {
+        fetch(`/api/occurrence_report/${to.params.occurrence_report_id}/`).then(
+            async (response) => {
+                next(async (vm) => {
+                    vm.occurrence_report = await response.json();
+                });
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    },
     data: function () {
         return {
             occurrence_report: null,
@@ -396,34 +702,20 @@ export default {
             external_referee_email: '',
         }
     },
-    components: {
-        datatable,
-        CommsLogs,
-        Submission,
-        ShowAllReferrals,
-        ProposalOccurrenceReport,
-        AmendmentRequest,
-        BackToAssessor,
-        ProposeDecline,
-        ProposeAppprove,
-        Decline,
-        Approve,
-        InviteExternalReferee,
-    },
-    filters: {
-        formatDate: function (data) {
-            return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
-        }
-    },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         isCommunity: function () {
-            return this.occurrence_report && this.occurrence_report.group_type === "community"
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.group_type === 'community'
+            );
         },
         occurrence_report_form_url: function () {
-            return (this.occurrence_report) ? `/api/occurrence_report/${this.occurrence_report.id}/draft.json` : '';
+            return this.occurrence_report
+                ? `/api/occurrence_report/${this.occurrence_report.id}/draft.json`
+                : '';
         },
         display_group_type: function () {
             if (this.occurrence_report && this.occurrence_report.group_type) {
@@ -432,79 +724,148 @@ export default {
             return '';
         },
         display_number: function () {
-            return (this.occurrence_report.group_type === "community") ?
-                this.occurrence_report.community_number :
-                this.occurrence_report.species_number;
+            return this.occurrence_report.group_type === 'community'
+                ? this.occurrence_report.community_number
+                : this.occurrence_report.species_number;
         },
         display_name: function () {
-            return (this.occurrence_report.group_type === "community") ?
-                (this.occurrence_report.taxonomy_details != null) ? this.occurrence_report.taxonomy_details.community_migrated_id : '' :
-                (this.occurrence_report.taxonomy_details != null) ? this.occurrence_report.taxonomy_details.scientific_name + " (" + this.occurrence_report.taxonomy_details.taxon_name_id + ")" : '';
+            return this.occurrence_report.group_type === 'community'
+                ? this.occurrence_report.taxonomy_details != null
+                    ? this.occurrence_report.taxonomy_details
+                          .community_migrated_id
+                    : ''
+                : this.occurrence_report.taxonomy_details != null
+                  ? this.occurrence_report.taxonomy_details.scientific_name +
+                    ' (' +
+                    this.occurrence_report.taxonomy_details.taxon_name_id +
+                    ')'
+                  : '';
         },
         display_approve_button: function () {
-            return this.with_approver && this.occurrence_report.approval_details
+            return (
+                this.with_approver && this.occurrence_report.approval_details
+            );
         },
         display_decline_button: function () {
-            return this.with_approver && this.occurrence_report.proposed_decline_status && this.occurrence_report.declined_details
+            return (
+                this.with_approver &&
+                this.occurrence_report.proposed_decline_status &&
+                this.occurrence_report.declined_details
+            );
         },
         display_referral_actions: function () {
-            return this.occurrence_report && ['With Assessor', 'With Referral'].includes(this.occurrence_report.processing_status) && this.isAssignedOfficer
+            return (
+                this.occurrence_report &&
+                ['With Assessor', 'With Referral'].includes(
+                    this.occurrence_report.processing_status
+                ) &&
+                this.isAssignedOfficer
+            );
         },
         submitter_first_name: function () {
             if (this.occurrence_report && this.occurrence_report.submitter) {
-                return this.occurrence_report.submitter.first_name
+                return this.occurrence_report.submitter.first_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_last_name: function () {
             if (this.occurrence_report && this.occurrence_report.submitter) {
-                return this.occurrence_report.submitter.last_name
+                return this.occurrence_report.submitter.last_name;
             } else {
-                return ''
+                return '';
             }
         },
         with_assessor: function () {
-            return this.occurrence_report && this.occurrence_report.processing_status === 'With Assessor'
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.processing_status === 'With Assessor'
+            );
         },
         with_referral: function () {
-            return this.occurrence_report && this.occurrence_report.processing_status === 'With Referral'
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.processing_status === 'With Referral'
+            );
         },
         with_approver: function () {
-            return this.occurrence_report && this.occurrence_report.processing_status === 'With Approver'
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.processing_status === 'With Approver'
+            );
         },
         approved: function () {
-            return this.occurrence_report && this.occurrence_report.processing_status === 'Approved'
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.processing_status === 'Approved'
+            );
         },
         unlocked: function () {
-            return this.occurrence_report && this.occurrence_report.processing_status === 'Unlocked'
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.processing_status === 'Unlocked'
+            );
         },
         isAssignedOfficer: function () {
-            return this.occurrence_report && this.occurrence_report.assigned_officer == this.occurrence_report.current_assessor.id;
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.assigned_officer ==
+                    this.occurrence_report.current_assessor.id
+            );
         },
         isAssignedApprover: function () {
-            return this.occurrence_report && this.occurrence_report.assigned_approver == this.occurrence_report.current_assessor.id;
+            return (
+                this.occurrence_report &&
+                this.occurrence_report.assigned_approver ==
+                    this.occurrence_report.current_assessor.id
+            );
         },
         canAction: function () {
-            return this.occurrence_report && this.occurrence_report.can_user_action;
+            return (
+                this.occurrence_report && this.occurrence_report.can_user_action
+            );
         },
         comms_url: function () {
-            return helpers.add_endpoint_json(api_endpoints.occurrence_report, this.$route.params.occurrence_report_id + '/comms_log')
+            return helpers.add_endpoint_json(
+                api_endpoints.occurrence_report,
+                this.$route.params.occurrence_report_id + '/comms_log'
+            );
         },
         comms_add_url: function () {
-            return helpers.add_endpoint_json(api_endpoints.occurrence_report, this.$route.params.occurrence_report_id + '/add_comms_log')
+            return helpers.add_endpoint_json(
+                api_endpoints.occurrence_report,
+                this.$route.params.occurrence_report_id + '/add_comms_log'
+            );
         },
         logs_url: function () {
-            return helpers.add_endpoint_json(api_endpoints.occurrence_report, this.$route.params.occurrence_report_id + '/action_log')
+            return helpers.add_endpoint_json(
+                api_endpoints.occurrence_report,
+                this.$route.params.occurrence_report_id + '/action_log'
+            );
         },
         referralListURL: function () {
             return this.occurrence_report != null
-                ?
-                api_endpoints.occurrence_report +
-                `/${this.occurrence_report.id}/referrals/`
+                ? api_endpoints.occurrence_report +
+                      `/${this.occurrence_report.id}/referrals/`
                 : '';
+        },
+    },
+    created: function () {
+        if (!this.occurrence_report) {
+            this.fetchOccurrenceReport(this.$route.params.occurrence_report_id);
         }
     },
+    mounted: function () {
+        let vm = this;
+        vm.fetchDeparmentUsers();
+    },
+    updated: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.initialiseSelects();
+            vm.form = document.forms.occurrence_report;
+        });
+    },
     methods: {
         discardOCRProposal: function () {
             let vm = this;
@@ -1366,31 +1727,5 @@ export default {
             this.fetchOccurrenceReport(this.$route.params.occurrence_report_id);
         },
     },
-    created: function () {
-        if (!this.occurrence_report) {
-            this.fetchOccurrenceReport(this.$route.params.occurrence_report_id);
-        }
-    },
-    mounted: function () {
-        let vm = this;
-        vm.fetchDeparmentUsers();
-    },
-    updated: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.initialiseSelects();
-            vm.form = document.forms.occurrence_report;
-        });
-    },
-    beforeRouteEnter: function (to, from, next) {
-        fetch(`/api/occurrence_report/${to.params.occurrence_report_id}/`).then(async (response) => {
-            next(async vm => {
-                vm.occurrence_report = await response.json();
-            });
-        },
-            err => {
-                console.log(err);
-            });
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
index 235e7383..b3885a08 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
@@ -3,27 +3,44 @@
         <form class="form-horizontal" action="index.html" method="post">
             <div class="col-sm-12">
                 <div class="text-end">
-                    <button :disabled="isReadOnly" type="button" class="btn btn-primary mb-2 " @click.prevent="newSite">
+                    <button
+                        :disabled="isReadOnly"
+                        type="button"
+                        class="btn btn-primary mb-2"
+                        @click.prevent="newSite"
+                    >
                         <i class="fa-solid fa-circle-plus"></i>
                         Add New Site
                     </button>
                 </div>
             </div>
         </form>
-        <datatable :id="datatable_id" ref="occurrence_site_datatable" :dt-options="options" :dt-headers="headers" />
-        <SiteDetail ref="site_detail" @refreshFromResponse="updatedSites" :url="occ_site_url"
-            :occurrence_obj="occurrence_obj">
+        <datatable
+            :id="datatable_id"
+            ref="occurrence_site_datatable"
+            :dt-options="options"
+            :dt-headers="headers"
+        />
+        <SiteDetail
+            ref="site_detail"
+            :url="occ_site_url"
+            :occurrence_obj="occurrence_obj"
+            @refresh-from-response="updatedSites"
+        >
         </SiteDetail>
         <div v-if="occSiteHistoryId">
-            <OCCSiteHistory ref="occ_site_history" :key="occSiteHistoryId" :site-id="occSiteHistoryId" />
+            <OCCSiteHistory
+                ref="occ_site_history"
+                :key="occSiteHistoryId"
+                :site-id="occSiteHistoryId"
+            />
         </div>
     </div>
 </template>
 
 <script>
-
 import datatable from '@/utils/vue/datatable.vue';
-import SiteDetail from '@/components/internal/occurrence/add_site.vue'
+import SiteDetail from '@/components/internal/occurrence/add_site.vue';
 import OCCSiteHistory from '../../internal/occurrence/occ_site_history.vue';
 import { api_endpoints, constants, helpers } from '@/utils/hooks';
 
@@ -60,54 +77,64 @@ export default {
     },
     computed: {
         isReadOnly: function () {
-            return !(this.occurrence_obj.can_user_edit);
+            return !this.occurrence_obj.can_user_edit;
         },
         column_site_number: function () {
             let vm = this;
             return {
-                data: "site_number",
+                data: 'site_number',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
-                        return vm.occurrence_obj.occurrence_number + " - " + full.site_number
+                        return (
+                            vm.occurrence_obj.occurrence_number +
+                            ' - ' +
+                            full.site_number
+                        );
                     } else {
-                        return '<s>' + vm.occurrence_obj.occurrence_number + " - " + full.site_number + '</s>'
+                        return (
+                            '<s>' +
+                            vm.occurrence_obj.occurrence_number +
+                            ' - ' +
+                            full.site_number +
+                            '</s>'
+                        );
                     }
                 },
-            }
+            };
         },
         column_site_name: function () {
             return {
-                data: "site_name",
+                data: 'site_name',
                 orderable: true,
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
-                        return full.site_name
+                        return full.site_name;
                     } else {
-                        return '<s>' + full.site_name + '</s>'
+                        return '<s>' + full.site_name + '</s>';
                     }
-                }
-            }
+                },
+            };
         },
         column_point_coordinates: function () {
             return {
-                data: "id",
+                data: 'id',
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.point_coord1 && full.point_coord2) {
-                        let coord1 = full.point_coord1.toString()
-                        let coord2 = full.point_coord2.toString()
+                        let coord1 = full.point_coord1.toString();
+                        let coord2 = full.point_coord2.toString();
 
-                        if (Number.isInteger((full.point_coord1))) {
-                            coord1 += ".0";
+                        if (Number.isInteger(full.point_coord1)) {
+                            coord1 += '.0';
                         }
-                        if (Number.isInteger((full.point_coord2))) {
-                            coord2 += ".0";
+                        if (Number.isInteger(full.point_coord2)) {
+                            coord2 += '.0';
                         }
 
-                        let value = coord2 + ", " + coord1;
+                        let value = coord2 + ', ' + coord1;
                         let result = helpers.dtPopover(value, 30, 'hover');
                         if (full.visible) {
                             return result;
@@ -115,14 +142,14 @@ export default {
                             return '<s>' + result + '</s>';
                         }
                     } else {
-                        return ""
+                        return '';
                     }
                 },
-            }
+            };
         },
         column_datum: function () {
             return {
-                data: "id",
+                data: 'id',
                 searchable: true,
                 mRender: function (data, type, full) {
                     if (full.visible) {
@@ -131,11 +158,11 @@ export default {
                         return '<s>' + full.datum_name + '</s>';
                     }
                 },
-            }
+            };
         },
         column_comments: function () {
             return {
-                data: "comments",
+                data: 'comments',
                 searchable: true,
                 mRender: function (data, type, full) {
                     let value = full.comments;
@@ -145,12 +172,12 @@ export default {
                     } else {
                         return '<s>' + result + '</s>';
                     }
-                }
-            }
+                },
+            };
         },
         column_related_reports: function () {
             return {
-                data: "related_occurrence_report_numbers",
+                data: 'related_occurrence_report_numbers',
                 mRender: function (data, type, full) {
                     let value = full.related_occurrence_report_numbers;
                     let result = helpers.dtPopover(value, 30, 'hover');
@@ -159,13 +186,13 @@ export default {
                     } else {
                         return '<s>' + result + '</s>';
                     }
-                }
-            }
+                },
+            };
         },
         column_action: function () {
             let vm = this;
             return {
-                data: "id",
+                data: 'id',
                 mRender: function (data, type, full) {
                     let links = '';
                     if (full.visible) {
@@ -179,8 +206,8 @@ export default {
                     }
                     links += `<a href='#' data-history-site='${full.id}'>History</a><br>`;
                     return links;
-                }
-            }
+                },
+            };
         },
         options: function () {
             let vm = this;
@@ -211,10 +238,14 @@ export default {
                     { responsivePriority: 2, targets: -1 },
                 ],
                 ajax: {
-                    "url": helpers.add_endpoint_json(api_endpoints.occurrence, vm.occurrence_obj.id + '/sites'),
-                    "dataSrc": ''
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.occurrence,
+                        vm.occurrence_obj.id + '/sites'
+                    ),
+                    dataSrc: '',
                 },
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'d-flex align-items-center'<'me-auto'i>p>",
                 buttons: [],
@@ -241,7 +272,11 @@ export default {
     methods: {
         adjust_table_width: function () {
             let vm = this;
-            if (vm.$refs.occurrence_site_datatable !== undefined) { vm.$refs.occurrence_site_datatable.vmDataTable.columns.adjust().responsive.recalc(); }
+            if (vm.$refs.occurrence_site_datatable !== undefined) {
+                vm.$refs.occurrence_site_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
         newSite: function () {
             let vm = this;
@@ -250,7 +285,7 @@ export default {
             var new_occ_site = {
                 occurrence: vm.occurrence_obj.id,
                 related_occurrence_reports: [],
-            }
+            };
             this.$refs.site_detail.siteObj = new_occ_site;
             this.$refs.site_detail.site_action = 'add';
             this.$refs.site_detail.isModalOpen = true;
@@ -259,24 +294,28 @@ export default {
             let vm = this;
             this.$refs.site_detail.site_id = id;
             this.$refs.site_detail.site_action = 'edit';
-            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(async (response) => {
-                this.$refs.site_detail.siteObj = await response.json();
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(
+                async (response) => {
+                    this.$refs.site_detail.siteObj = await response.json();
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.site_detail.isModalOpen = true;
         },
         viewSite: function (id) {
             let vm = this;
             this.$refs.site_detail.site_id = id;
             this.$refs.site_detail.site_action = 'view';
-            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(async (response) => {
-                this.$refs.site_detail.siteObj = await response.json();
-            },
-                err => {
+            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(
+                async (response) => {
+                    this.$refs.site_detail.siteObj = await response.json();
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
             this.$refs.site_detail.isModalOpen = true;
         },
         updatedSites: function () {
@@ -286,9 +325,9 @@ export default {
         discardSite: function (id) {
             let vm = this;
             swal.fire({
-                title: "Discard Site",
-                text: "Are you sure you want to discard this Site?",
-                icon: "question",
+                title: 'Discard Site',
+                text: 'Are you sure you want to discard this Site?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Site',
                 customClass: {
@@ -296,42 +335,57 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id + '/discard'), {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The Site has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.occ_site,
+                                id + '/discard'
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            }).then((result) => {
-                                vm.updatedSites();
-                            });
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The Site has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                }).then((result) => {
+                                    vm.updatedSites();
+                                });
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         reinstateSite: function (id) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id + '/reinstate'), {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            })
-                .then((response) => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occ_site,
+                    id + '/reinstate'
+                ),
+                {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                }
+            ).then(
+                (response) => {
                     swal.fire({
                         title: 'Reinstated',
                         text: 'The Site has been reinstated',
@@ -342,7 +396,8 @@ export default {
                     }).then((result) => {
                         vm.updatedSites();
                     });
-                }, (error) => {
+                },
+                (error) => {
                     var errorText = helpers.apiVueResourceError(error);
                     swal.fire({
                         title: 'Error',
@@ -352,7 +407,8 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         historySite: function (id) {
             this.occSiteHistoryId = parseInt(id);
@@ -381,24 +437,39 @@ export default {
                     vm.editSite(id);
                 }
             );
-            vm.$refs.occurrence_site_datatable.vmDataTable.on('click', 'a[data-delete-site]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-delete-site');
-                vm.discardSite(id);
-            });
-            vm.$refs.occurrence_site_datatable.vmDataTable.on('click', 'a[data-reinstate-site]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-reinstate-site');
-                vm.reinstateSite(id);
-            });
-            vm.$refs.occurrence_site_datatable.vmDataTable.on('click', 'a[data-history-site]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-site');
-                vm.historySite(id);
-            });
-            vm.$refs.occurrence_site_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.occurrence_site_datatable.vmDataTable.on(
+                'click',
+                'a[data-delete-site]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-delete-site');
+                    vm.discardSite(id);
+                }
+            );
+            vm.$refs.occurrence_site_datatable.vmDataTable.on(
+                'click',
+                'a[data-reinstate-site]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-reinstate-site');
+                    vm.reinstateSite(id);
+                }
+            );
+            vm.$refs.occurrence_site_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-site]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-site');
+                    vm.historySite(id);
+                }
+            );
+            vm.$refs.occurrence_site_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
     },
 };
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue
index 430aca7e..705632e2 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue
@@ -1,21 +1,43 @@
 <template>
     <div id="occurrence_tenure_datatable_template">
-        <CollapsibleFilters ref="collapsible_filters" component_title="Filters" :collapsed="!filterApplied"
-            @created="collapsible_component_mounted">
+        <CollapsibleFilters
+            ref="collapsible_filters"
+            component_title="Filters"
+            :collapsed="!filterApplied"
+            @created="collapsible_component_mounted"
+        >
             <div class="row">
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="occurrence_tenure_feature_id_lookup">Feature ID:</label>
-                        <select id="occurrence_tenure_feature_id_lookup" ref="occurrence_tenure_feature_id_lookup"
-                            name="occurrence_tenure_feature_id_lookup" class="form-control" />
+                        <label for="occurrence_tenure_feature_id_lookup"
+                            >Feature ID:</label
+                        >
+                        <select
+                            id="occurrence_tenure_feature_id_lookup"
+                            ref="occurrence_tenure_feature_id_lookup"
+                            name="occurrence_tenure_feature_id_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="occurrence_tenure_status_lookup" class="text-nowrap">Status:</label>
-                        <select ref="occurrence_tenure_status_lookup" v-model="filterStatus" class="form-select">
+                        <label
+                            for="occurrence_tenure_status_lookup"
+                            class="text-nowrap"
+                            >Status:</label
+                        >
+                        <select
+                            ref="occurrence_tenure_status_lookup"
+                            v-model="filterStatus"
+                            class="form-select"
+                        >
                             <option value="all">All</option>
-                            <option v-for="status in tenure_statuses" :key="status.value" :value="status.value">
+                            <option
+                                v-for="status in tenure_statuses"
+                                :key="status.value"
+                                :value="status.value"
+                            >
                                 {{ status.name }}
                             </option>
                         </select>
@@ -23,27 +45,54 @@
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="occurrence_tenure_vesting_lookup">Vesting:</label>
-                        <select id="occurrence_tenure_vesting_lookup" ref="occurrence_tenure_vesting_lookup"
-                            name="occurrence_tenure_vesting_lookup" class="form-control" />
+                        <label for="occurrence_tenure_vesting_lookup"
+                            >Vesting:</label
+                        >
+                        <select
+                            id="occurrence_tenure_vesting_lookup"
+                            ref="occurrence_tenure_vesting_lookup"
+                            name="occurrence_tenure_vesting_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
                 <div class="col-md-3">
                     <div class="form-group">
-                        <label for="occurrence_tenure_purpose_lookup">Purpose:</label>
-                        <select id="occurrence_tenure_purpose_lookup" ref="occurrence_tenure_purpose_lookup"
-                            name="occurrence_tenure_purpose_lookup" class="form-control" />
+                        <label for="occurrence_tenure_purpose_lookup"
+                            >Purpose:</label
+                        >
+                        <select
+                            id="occurrence_tenure_purpose_lookup"
+                            ref="occurrence_tenure_purpose_lookup"
+                            name="occurrence_tenure_purpose_lookup"
+                            class="form-control"
+                        />
                     </div>
                 </div>
             </div>
         </CollapsibleFilters>
-        <datatable :id="datatable_id" ref="occurrence_tenure_datatable" :dt-options="options" :dt-headers="headers" />
-        <OccurrenceTenureModal ref="occurrence_tenure_modal" title="Tenure Area" :occurrence-id="occurrenceId"
-            :url="occ_tenure_url" :change-warning="''" :always-read-only="['status', 'tenure_area_id', 'owner_name']"
-            @refreshFromResponse="updatedTenureArea">
+        <datatable
+            :id="datatable_id"
+            ref="occurrence_tenure_datatable"
+            :dt-options="options"
+            :dt-headers="headers"
+        />
+        <OccurrenceTenureModal
+            ref="occurrence_tenure_modal"
+            title="Tenure Area"
+            :occurrence-id="occurrenceId"
+            :url="occ_tenure_url"
+            :change-warning="''"
+            :always-read-only="['status', 'tenure_area_id', 'owner_name']"
+            @refresh-from-response="updatedTenureArea"
+        >
         </OccurrenceTenureModal>
         <div v-if="occTenureHistoryId">
-            <OCCTenureHistory ref="occ_tenure_history" :key="occTenureHistoryId" :tenure-id="occTenureHistoryId" />
+            <OCCTenureHistory
+                ref="occ_tenure_history"
+                :key="occTenureHistoryId"
+                :tenure-id="occTenureHistoryId"
+            />
         </div>
     </div>
 </template>
@@ -112,7 +161,7 @@ export default {
                 'Purpose',
                 'Signif. to OCC',
                 'Comments',
-                "Owner/Manager",
+                'Owner/Manager',
                 'Updated',
                 'Action',
             ],
@@ -242,12 +291,12 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                // eslint-disable-next-line no-unused-vars
+
                 render: function (data, type, row) {
                     const coordinates = row.tenure_area_point_on_surface
                         ? JSON.stringify(
-                            row.tenure_area_point_on_surface.coordinates
-                        )
+                              row.tenure_area_point_on_surface.coordinates
+                          )
                         : '';
                     let html = `<a href="#${vm.hrefContainerId}" data-highlight-on-map-coordinates="${coordinates}">Highlight on Map</a>`;
                     html += `<br><a href="#" data-edit-tenure-details="${data}">Edit Tenure Details</a>`;
@@ -331,7 +380,7 @@ export default {
                 columns: columns,
                 processing: true,
                 serverSide: true,
-                // eslint-disable-next-line no-unused-vars
+
                 drawCallback: function () {
                     helpers.enablePopovers();
                 },
@@ -441,14 +490,21 @@ export default {
                     vm.editTenureDetails(id);
                 }
             );
-            vm.$refs.occurrence_tenure_datatable.vmDataTable.on('click', 'a[data-history-tenure]', function (e) {
-                e.preventDefault();
-                var id = $(this).attr('data-history-tenure');
-                vm.historyTenure(id);
-            });
-            vm.$refs.occurrence_tenure_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
+            vm.$refs.occurrence_tenure_datatable.vmDataTable.on(
+                'click',
+                'a[data-history-tenure]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-history-tenure');
+                    vm.historyTenure(id);
+                }
+            );
+            vm.$refs.occurrence_tenure_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
         },
         highlightOnMap: function (coordinates = null) {
             this.$emit('highlight-on-map', JSON.parse(coordinates));
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
index b2d78209..f9665676 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
@@ -1,56 +1,110 @@
 <template lang="html">
     <div id="occurrence_tenure_modal">
-        <modal transition="modal fade" :title="modalTitle" large @ok="ok()" @cancel="cancel()">
+        <modal
+            transition="modal fade"
+            :title="modalTitle"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="modalForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
-                        <alert v-if="changeWarning && !isReadOnly" type="warning"><strong>{{ changeWarning }}</strong>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
+                        <alert
+                            v-if="changeWarning && !isReadOnly"
+                            type="warning"
+                            ><strong>{{ changeWarning }}</strong>
                         </alert>
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Status</label>
+                                        <label class="control-label pull-left"
+                                            >Status</label
+                                        >
                                     </div>
                                     <div class="col-sm-3">
                                         <!-- status_display -->
-                                        <input id="status_id" v-model="tenureObj.status" :disabled="isReadOnly ||
-                                            isAlwaysReadOnly('status')
-                                            " type="text" class="form-control" placeholder="Status" />
+                                        <input
+                                            id="status_id"
+                                            v-model="tenureObj.status"
+                                            :disabled="
+                                                isReadOnly ||
+                                                isAlwaysReadOnly('status')
+                                            "
+                                            type="text"
+                                            class="form-control"
+                                            placeholder="Status"
+                                        />
                                     </div>
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label">Tenure Area Id</label>
+                                <label for="" class="col-sm-3 control-label"
+                                    >Tenure Area Id</label
+                                >
                                 <div class="col-sm-9">
-                                    <input id="tenure_area_id" v-model="tenureObj.tenure_area_id" :disabled="isReadOnly ||
-                                        isAlwaysReadOnly('tenure_area_id')
-                                        " type="text" class="form-control" placeholder="Tenure Area Id" />
+                                    <input
+                                        id="tenure_area_id"
+                                        v-model="tenureObj.tenure_area_id"
+                                        :disabled="
+                                            isReadOnly ||
+                                            isAlwaysReadOnly('tenure_area_id')
+                                        "
+                                        type="text"
+                                        class="form-control"
+                                        placeholder="Tenure Area Id"
+                                    />
                                 </div>
                             </div>
                             <div class="row mb-3">
                                 <div class="col-sm-3">
-                                    <label class="control-label pull-left">Owner/Manager</label>
+                                    <label class="control-label pull-left"
+                                        >Owner/Manager</label
+                                    >
                                 </div>
                                 <div class="col-sm-9">
-                                    <input id="owner_name" v-model="tenureObj.owner_name" :disabled="isReadOnly ||
-                                        isAlwaysReadOnly('owner_name')
-                                        " type="text" class="form-control" placeholder="Owner Name" />
+                                    <input
+                                        id="owner_name"
+                                        v-model="tenureObj.owner_name"
+                                        :disabled="
+                                            isReadOnly ||
+                                            isAlwaysReadOnly('owner_name')
+                                        "
+                                        type="text"
+                                        class="form-control"
+                                        placeholder="Owner Name"
+                                    />
                                 </div>
                             </div>
                             <div class="row mb-3">
                                 <div class="col-sm-3">
-                                    <label class="control-label pull-left">Vesting</label>
+                                    <label class="control-label pull-left"
+                                        >Vesting</label
+                                    >
                                 </div>
                                 <div class="col-sm-9">
-                                    <select ref="vesting_select" v-model="tenureObj.vesting_id" :disabled="isReadOnly ||
-                                        isAlwaysReadOnly('vesting_id')
-                                        " style="width: 100%" class="form-select input-sm">
+                                    <select
+                                        ref="vesting_select"
+                                        v-model="tenureObj.vesting_id"
+                                        :disabled="
+                                            isReadOnly ||
+                                            isAlwaysReadOnly('vesting_id')
+                                        "
+                                        style="width: 100%"
+                                        class="form-select input-sm"
+                                    >
                                         <option :value="null" selected>
                                             Select a Vesting
                                         </option>
-                                        <option v-for="vesting in vestings" :key="vesting.id" :value="vesting.id">
+                                        <option
+                                            v-for="vesting in vestings"
+                                            :key="vesting.id"
+                                            :value="vesting.id"
+                                        >
                                             {{ vesting.code }} -
                                             {{ vesting.label }}
                                         </option>
@@ -59,47 +113,86 @@
                             </div>
                             <div class="row mb-3">
                                 <div class="col-sm-3">
-                                    <label class="control-label pull-left">Purpose</label>
+                                    <label class="control-label pull-left"
+                                        >Purpose</label
+                                    >
                                 </div>
                                 <div class="col-sm-9">
-
                                     <template v-if="!isReadOnly">
                                         <template
-                                            v-if="purposes && purposes.length > 0 && tenureObj.purpose_id && !purposes.map((d) => d.id).includes(tenureObj.purpose_id)">
-                                            <input type="text" v-if="tenureObj.purpose" class="form-control mb-3"
-                                                :value="tenureObj.purpose + ' (Now Archived)'" disabled />
+                                            v-if="
+                                                purposes &&
+                                                purposes.length > 0 &&
+                                                tenureObj.purpose_id &&
+                                                !purposes
+                                                    .map((d) => d.id)
+                                                    .includes(
+                                                        tenureObj.purpose_id
+                                                    )
+                                            "
+                                        >
+                                            <input
+                                                v-if="tenureObj.purpose"
+                                                type="text"
+                                                class="form-control mb-3"
+                                                :value="
+                                                    tenureObj.purpose +
+                                                    ' (Now Archived)'
+                                                "
+                                                disabled
+                                            />
                                             <div class="mb-3 text-muted">
                                                 Change purpose to:
                                             </div>
                                         </template>
-                                        <select class="form-select" v-model="tenureObj.purpose_id">
+                                        <select
+                                            v-model="tenureObj.purpose_id"
+                                            class="form-select"
+                                        >
                                             <option :value="null" selected>
                                                 Select a Purpose
                                             </option>
-                                            <option v-for="purpose in purposes" :value="purpose.id"
-                                                v-bind:key="purpose.id">
+                                            <option
+                                                v-for="purpose in purposes"
+                                                :key="purpose.id"
+                                                :value="purpose.id"
+                                            >
                                                 {{ purpose.code }} -
                                                 {{ purpose.label }}
                                             </option>
                                         </select>
                                     </template>
                                     <template v-else>
-                                        <input class="form-control" type="text" :disabled="isReadOnly"
-                                            v-model="tenureObj.purpose" />
+                                        <input
+                                            v-model="tenureObj.purpose"
+                                            class="form-control"
+                                            type="text"
+                                            :disabled="isReadOnly"
+                                        />
                                     </template>
                                 </div>
                             </div>
                             <div class="row mb-3">
                                 <div class="col-sm-3">
-                                    <label class="control-label pull-left">Significant to Occurrence</label>
+                                    <label class="control-label pull-left"
+                                        >Significant to Occurrence</label
+                                    >
                                 </div>
                                 <div class="col-sm-3">
-                                    <select ref="significant_to_occurrence_select" v-model="tenureObj.significant_to_occurrence
-                                        " :disabled="isReadOnly ||
+                                    <select
+                                        ref="significant_to_occurrence_select"
+                                        v-model="
+                                            tenureObj.significant_to_occurrence
+                                        "
+                                        :disabled="
+                                            isReadOnly ||
                                             isAlwaysReadOnly(
                                                 'significant_to_occurrence'
                                             )
-                                            " style="width: 100%" class="form-select input-sm">
+                                        "
+                                        style="width: 100%"
+                                        class="form-select input-sm"
+                                    >
                                         <option :value="true">Yes</option>
                                         <option :value="false">No</option>
                                     </select>
@@ -108,13 +201,21 @@
                             <div class="form-group">
                                 <div class="row mb-3">
                                     <div class="col-sm-3">
-                                        <label class="control-label pull-left">Comments</label>
+                                        <label class="control-label pull-left"
+                                            >Comments</label
+                                        >
                                     </div>
                                     <div class="col-sm-9">
-                                        <textarea v-model="tenureObj.comments" :disabled="isReadOnly ||
-                                            isAlwaysReadOnly('comments')
-                                            " rows="2" class="form-control">
-            </textarea>
+                                        <textarea
+                                            v-model="tenureObj.comments"
+                                            :disabled="
+                                                isReadOnly ||
+                                                isAlwaysReadOnly('comments')
+                                            "
+                                            rows="2"
+                                            class="form-control"
+                                        >
+                                        </textarea>
                                     </div>
                                 </div>
                             </div>
@@ -122,33 +223,69 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">
-                    Cancel
-                </button>
-                <template v-if="modal_action != 'view'">
-                    <template v-if="object_id">
-                        <button v-if="updatingEntry" type="button" disabled class="btn btn-primary" @click="ok">
-                            Updating <span class="spinner-border spinner-border-sm" role="status"
-                                aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span>
-                        </button>
-                        <button v-else type="button" class="btn btn-primary" @click="ok">
-                            Update
-                        </button>
-                    </template>
-                    <template v-else>
-                        <button v-if="addingEntry" type="button" disabled class="btn btn-primary" @click="ok">
-                            Adding <span class="spinner-border spinner-border-sm" role="status"
-                                aria-hidden="true"></span>
-                            <span class="visually-hidden">Loading...</span>
-                        </button>
-                        <button v-else type="button" class="btn btn-primary" @click="ok">
-                            Add Entry
-                        </button>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <template v-if="modal_action != 'view'">
+                        <template v-if="object_id">
+                            <button
+                                v-if="updatingEntry"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Updating
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Update
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button
+                                v-if="addingEntry"
+                                type="button"
+                                disabled
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Adding
+                                <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                                ></span>
+                                <span class="visually-hidden">Loading...</span>
+                            </button>
+                            <button
+                                v-else
+                                type="button"
+                                class="btn btn-primary"
+                                @click="ok"
+                            >
+                                Add Entry
+                            </button>
+                        </template>
                     </template>
-                </template>
-            </div>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
index 7c1a3656..966850aa 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
@@ -1,13 +1,25 @@
 <template lang="html">
     <div id="internal-ocr-approve-request">
-        <modal id="ocr-approve-modal" transition="modal fade" @ok="ok()" ok-text="Approve" @cancel="close()"
-            :title="`Approve ${occurrence_report_number}`" large>
+        <modal
+            id="ocr-approve-modal"
+            transition="modal fade"
+            ok-text="Approve"
+            :title="`Approve ${occurrence_report_number}`"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container">
                 <form id="approve-form">
-
-                    <div v-if="approval_details.occurrence" class="row mb-3 border-bottom">
-                        <label for="occurrence" class="col-sm-4 col-form-label fw-bold">Add to Existing
-                            Occurrence</label>
+                    <div
+                        v-if="approval_details.occurrence"
+                        class="row mb-3 border-bottom"
+                    >
+                        <label
+                            for="occurrence"
+                            class="col-sm-4 col-form-label fw-bold"
+                            >Add to Existing Occurrence</label
+                        >
                         <div class="col-sm-8">
                             <span class="badge bg-primary fs-6 p-2">
                                 {{ approval_details.occurrence_number }} -
@@ -17,8 +29,11 @@
                     </div>
                     <template v-else>
                         <div class="row mb-3 border-bottom">
-                            <label for="create_new_occurrence" class="col-sm-4 col-form-label fw-bold">New Occurrence
-                                Name</label>
+                            <label
+                                for="create_new_occurrence"
+                                class="col-sm-4 col-form-label fw-bold"
+                                >New Occurrence Name</label
+                            >
                             <div class="col-sm-8 d-flex align-items-center">
                                 {{ approval_details.new_occurrence_name }}
                             </div>
@@ -26,27 +41,37 @@
                     </template>
 
                     <div class="row mb-3 border-bottom">
-                        <label for="proposed_by" class="col-sm-4 col-form-label fw-bold">Proposed By</label>
+                        <label
+                            for="proposed_by"
+                            class="col-sm-4 col-form-label fw-bold"
+                            >Proposed By</label
+                        >
                         <div class="col-sm-8 d-flex align-items-center">
                             {{ approval_details.officer_name }}
                         </div>
                     </div>
 
                     <div class="row mb-3 border-bottom">
-                        <label for="details_from_assessor" class="col-sm-4 col-form-label fw-bold">Details from
-                            Assessor</label>
+                        <label
+                            for="details_from_assessor"
+                            class="col-sm-4 col-form-label fw-bold"
+                            >Details from Assessor</label
+                        >
                         <div class="col-sm-8 d-flex align-items-center">
                             {{ approval_details.details }}
                         </div>
                     </div>
 
                     <div class="row">
-                        <label class="col-sm-4 col-form-label fw-bold" for="cc_email">CC email</label>
+                        <label
+                            class="col-sm-4 col-form-label fw-bold"
+                            for="cc_email"
+                            >CC email</label
+                        >
                         <div class="col-sm-8">
                             {{ approval_details.cc_email }}
                         </div>
                     </div>
-
                 </form>
             </div>
         </modal>
@@ -54,12 +79,12 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'ocr-approve',
+    name: 'OcrApprove',
     components: {
         modal,
         alert,
@@ -76,29 +101,37 @@ export default {
         },
         approval_details: {
             type: Object,
-        }
+        },
     },
     data: function () {
         return {
             isModalOpen: false,
             form: null,
             errorString: '',
-        }
+        };
+    },
+    computed: {
+        proposeApproveButtonDisabled: function () {
+            return (
+                !this.approve.create_new_occurrence && !this.approve.occurrence
+            );
+        },
     },
     watch: {
         isModalOpen: function (value) {
             if (value) {
                 this.$nextTick(() => {
-                    $(this.$refs.occurrence_name_lookup_approve).select2('open');
+                    $(this.$refs.occurrence_name_lookup_approve).select2(
+                        'open'
+                    );
                 });
             }
-        }
-    },
-    computed: {
-        proposeApproveButtonDisabled: function () {
-            return !this.approve.create_new_occurrence && !this.approve.occurrence;
         },
     },
+    mounted: function () {
+        this.form = document.forms['approve-form'];
+        this.initialiseOccurrenceNameLookup();
+    },
     methods: {
         ok: function () {
             let vm = this;
@@ -123,7 +156,7 @@ export default {
             swal.fire({
                 title: `Approve Occurrence Report ${vm.occurrence_report_number}`,
                 text: confirmation,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Approve',
                 customClass: {
@@ -133,14 +166,20 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/approve/')), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(vm.approve),
-                    })
-                        .then((response) => {
+                    fetch(
+                        helpers.add_endpoint_join(
+                            api_endpoints.occurrence_report,
+                            '/' + (vm.occurrence_report_id + '/approve/')
+                        ),
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(vm.approve),
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Occurrence Report Successfully Approved',
                                 text: `Occurrence Report: ${vm.occurrence_report_number} has been successfully approved.`,
@@ -150,13 +189,15 @@ export default {
                                 },
                             });
                             vm.$router.push({
-                                name: 'internal-occurrence-dash'
+                                name: 'internal-occurrence-dash',
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
                             vm.errorString = helpers.apiVueResourceError(error);
                             vm.amendingProposal = true;
-                        });
+                        }
+                    );
                 }
             });
         },
@@ -173,43 +214,44 @@ export default {
         },
         initialiseOccurrenceNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occurrence_name_lookup_approve).select2({
-                width: '100%',
-                minimumInputLength: 2,
-                dropdownParent: $("#occurrence_name_lookup_approve_form_group_id"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Search Name of Occurrence",
-                ajax: {
-                    url: api_endpoints.occurrence_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                        }
-                        return query;
+            $(vm.$refs.occurrence_name_lookup_approve)
+                .select2({
+                    width: '100%',
+                    minimumInputLength: 2,
+                    dropdownParent: $(
+                        '#occurrence_name_lookup_approve_form_group_id'
+                    ),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search Name of Occurrence',
+                    ajax: {
+                        url: api_endpoints.occurrence_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     vm.approve.occurrence_id = e.params.data.id;
                     vm.approve.occurrence_name = e.params.data.text;
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occurrence_name_lookup_approve-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occurrence_name_lookup_approve-results"]'
+                    );
                     searchField[0].focus();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     vm.approve.occurrence_id = null;
                     vm.approve.occurrence_name = null;
                 });
         },
     },
-    mounted: function () {
-        this.form = document.forms['approve-form'];
-        this.initialiseOccurrenceNameLookup();
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue
index 5f814cef..6034062a 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue
@@ -2,17 +2,18 @@
     <div id="ocrConservationThreatHistory">
         <modal
             transition="modal fade"
-            :title="'OCR Conservation Threat T' + threatId + ' - History ' "
+            :title="'OCR Conservation Threat T' + threatId + ' - History '"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'T'+threatId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OCRConservationThreat'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'T' + threatId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OCRConservationThreat'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -104,16 +107,25 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.ocrconservationthreat.fields.threat_number) {
-                        return full.data.ocrconservationthreat.fields.threat_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.ocrconservationthreat.fields
+                                .threat_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "T"+full.data.ocrconservationthreat.pk+'-'+full.revision_sequence;
+                        return (
+                            'T' +
+                            full.data.ocrconservationthreat.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -141,14 +153,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.ocrconservationthreat.fields.threat_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.ocrconservationthreat.fields.threat_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'threat_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -161,7 +176,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -174,7 +188,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -193,10 +206,13 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.ocrconservationthreat.fields.threat_category) {
-                        return full.data.ocrconservationthreat.fields.threat_category.name;
+                    if (
+                        full.data.ocrconservationthreat.fields.threat_category
+                    ) {
+                        return full.data.ocrconservationthreat.fields
+                            .threat_category.name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'threat_category', //_name',
@@ -213,7 +229,7 @@ export default {
                 render: function (row, type, full) {
                     let value = full.data.ocrconservationthreat.fields.comment;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'comment',
             };
@@ -224,11 +240,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -253,7 +269,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_ocr_conservation_threat(this.threatId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_ocr_conservation_threat(
+                            this.threatId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -263,8 +282,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -272,84 +291,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
index c0aabe83..92f767a5 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
@@ -1,23 +1,48 @@
 <template lang="html">
     <div id="internal-ocr-decline-request">
-        <modal id="ocr-decline-modal" transition="modal fade" @ok="ok()" ok-text="Decline" @cancel="close()"
-            :title="`Decline ${occurrence_report_number}`" large>
+        <modal
+            id="ocr-decline-modal"
+            transition="modal fade"
+            ok-text="Decline"
+            :title="`Decline ${occurrence_report_number}`"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="decline-form">
-                        <alert v-if="errorString" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="errorString" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="row mb-3">
                             <div class="col-sm-12">
-                                <label class="control-label mb-3" for="reason">Reason</label>
-                                <textarea class="form-control" name="reason" v-model="decline.reason" id="reason"
-                                    ref="reason" required></textarea>
+                                <label class="control-label mb-3" for="reason"
+                                    >Reason</label
+                                >
+                                <textarea
+                                    id="reason"
+                                    ref="reason"
+                                    v-model="decline.reason"
+                                    class="form-control"
+                                    name="reason"
+                                    required
+                                ></textarea>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-sm-12">
-                                <label class="control-label" for="cc_email">CC email</label>
-                                <input type="text" readonly style="width: 70%;" class="form-control" name="cc_email"
-                                    v-model="decline.cc_email" />
+                                <label class="control-label" for="cc_email"
+                                    >CC email</label
+                                >
+                                <input
+                                    v-model="decline.cc_email"
+                                    type="text"
+                                    readonly
+                                    style="width: 70%"
+                                    class="form-control"
+                                    name="cc_email"
+                                />
                             </div>
                         </div>
                     </form>
@@ -28,12 +53,12 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'ocr-decline',
+    name: 'OcrDecline',
     components: {
         modal,
         alert,
@@ -59,7 +84,7 @@ export default {
                 cc_email: '',
             },
             errorString: '',
-        }
+        };
     },
     watch: {
         isModalOpen: function (val) {
@@ -74,6 +99,9 @@ export default {
             }
         },
     },
+    mounted: function () {
+        this.form = document.forms['decline-form'];
+    },
     methods: {
         ok: function () {
             let vm = this;
@@ -87,7 +115,7 @@ export default {
             this.isModalOpen = false;
             this.decline = {
                 reason: '',
-                occurrence_report: this.occurrence_report_id
+                occurrence_report: this.occurrence_report_id,
             };
             this.errorString = '';
             this.form.reset();
@@ -95,9 +123,9 @@ export default {
         proposeDecline: function () {
             let vm = this;
             swal.fire({
-                title: "Decline Occurrence Report",
+                title: 'Decline Occurrence Report',
                 text: `Are you sure you want to decline occurrence report ${vm.occurrence_report_number}?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Decline',
                 customClass: {
@@ -107,14 +135,20 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/decline/')), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(vm.decline),
-                    })
-                        .then((response) => {
+                    fetch(
+                        helpers.add_endpoint_join(
+                            api_endpoints.occurrence_report,
+                            '/' + (vm.occurrence_report_id + '/decline/')
+                        ),
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(vm.decline),
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Occurrence Report Successfully Declined',
                                 text: `Occurrence Report ${vm.occurrence_report_number} has been successfully declined. The proponent has been notified via email.`,
@@ -124,19 +158,18 @@ export default {
                                 },
                             });
                             vm.$router.push({
-                                name: 'internal-occurrence-dash'
+                                name: 'internal-occurrence-dash',
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
                             vm.errorString = helpers.apiVueResourceError(error);
                             vm.amendingProposal = true;
-                        });
+                        }
+                    );
                 }
             });
         },
     },
-    mounted: function () {
-        this.form = document.forms['decline-form'];
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue
index 5839e5e6..1e592400 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue
@@ -2,17 +2,24 @@
     <div id="occurrenceReportDocumentHistory">
         <modal
             transition="modal fade"
-            :title="'Occurrence Report OCR'+ occurrenceReportId +' - Document D' + documentId + ' - History ' "
+            :title="
+                'Occurrence Report OCR' +
+                occurrenceReportId +
+                ' - Document D' +
+                documentId +
+                ' - History '
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +31,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'D'+documentId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OccurrenceReportDocument'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'D' + documentId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OccurrenceReportDocument'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -73,8 +82,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -112,16 +120,28 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.occurrencereportdocument.fields.document_number) {
-                        return full.data.occurrencereportdocument.fields.document_number+'-'+full.revision_sequence;
+                    if (
+                        full.data.occurrencereportdocument.fields
+                            .document_number
+                    ) {
+                        return (
+                            full.data.occurrencereportdocument.fields
+                                .document_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "D"+full.data.occurrencereportdocument.pk+'-'+full.revision_sequence;
+                        return (
+                            'D' +
+                            full.data.occurrencereportdocument.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -149,14 +169,18 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencereportdocument.fields.document_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.occurrencereportdocument.fields
+                            .document_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'document_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -169,7 +193,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -182,7 +205,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -201,10 +223,14 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencereportdocument.fields.document_category) {
-                        return full.data.occurrencereportdocument.fields.document_category.document_category_name;
+                    if (
+                        full.data.occurrencereportdocument.fields
+                            .document_category
+                    ) {
+                        return full.data.occurrencereportdocument.fields
+                            .document_category.document_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_category',
@@ -212,17 +238,20 @@ export default {
         },
         column_sub_category: function () {
             return {
-
                 data: 'data.data.occurrencereportdocument.fields.document_sub_category',
                 defaultContent: '',
                 orderable: false,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.occurrencereportdocument.fields.document_sub_category) {
-                        return full.data.occurrencereportdocument.fields.document_sub_category.document_sub_category_name;
+                    if (
+                        full.data.occurrencereportdocument.fields
+                            .document_sub_category
+                    ) {
+                        return full.data.occurrencereportdocument.fields
+                            .document_sub_category.document_sub_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_sub_category',
@@ -237,15 +266,25 @@ export default {
                 searchable: true,
                 visible: true,
                 mRender: function (row, type, full) {
-                    let links='';
-                    if(full.data.occurrencereportdocument.fields.active){
-                        let value = full.data.occurrencereportdocument.fields.name;
+                    let links = '';
+                    if (full.data.occurrencereportdocument.fields.active) {
+                        let value =
+                            full.data.occurrencereportdocument.fields.name;
                         let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                        links+='<span><a href="/private-media/'+ full.data.occurrencereportdocument.fields._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                    }else{
-                        let value = full.data.occurrencereportdocument.fields.name;
+                        links +=
+                            '<span><a href="/private-media/' +
+                            full.data.occurrencereportdocument.fields._file +
+                            '" target="_blank">' +
+                            result.text +
+                            '</a> ' +
+                            result.link +
+                            '</span>';
+                    } else {
+                        let value =
+                            full.data.occurrencereportdocument.fields.name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        links += type == 'export' ? value : '<s>' + result + '</s>';
+                        links +=
+                            type == 'export' ? value : '<s>' + result + '</s>';
                     }
                     return links;
                 },
@@ -261,9 +300,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    let value = full.data.occurrencereportdocument.fields.description;
+                    let value =
+                        full.data.occurrencereportdocument.fields.description;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'description',
             };
@@ -274,11 +314,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -305,7 +345,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence_report_document(this.documentId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence_report_document(
+                            this.documentId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -315,8 +358,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -324,84 +367,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue
index 96e0664b..fc73a0c5 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue
@@ -2,17 +2,18 @@
     <div id="ocrObserverDetailHistory">
         <modal
             transition="modal fade"
-            :title="'OCR Observer Details - History' "
+            :title="'OCR Observer Details - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,14 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="''"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OCRObserverDetail'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="''"
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OCRObserverDetail'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -106,13 +107,16 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.ocrobserverdetail.pk+'-'+full.revision_sequence;
+                    return (
+                        full.data.ocrobserverdetail.pk +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'revision_sequence',
             };
@@ -139,14 +143,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.ocrobserverdetail.fields.id+'-'+full.revision_sequence;
+                    return (
+                        full.data.ocrobserverdetail.fields.id +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -159,7 +166,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -172,7 +178,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -191,10 +196,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.ocrobserverdetail.fields.observer_name) {
+                    if (full.data.ocrobserverdetail.fields.observer_name) {
                         return full.data.ocrobserverdetail.fields.observer_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'observer_name',
@@ -208,10 +213,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.ocrobserverdetail.fields.role) {
+                    if (full.data.ocrobserverdetail.fields.role) {
                         return full.data.ocrobserverdetail.fields.role;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'role',
@@ -225,12 +230,12 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.ocrobserverdetail.fields.observer) {
+                    if (full.data.ocrobserverdetail.fields.observer) {
                         let value = full.data.ocrobserverdetail.fields.observer;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'observer_details',
@@ -244,10 +249,10 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.ocrobserverdetail.fields.organisation) {
+                    if (full.data.ocrobserverdetail.fields.organisation) {
                         return full.data.ocrobserverdetail.fields.organisation;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'organisation',
@@ -259,11 +264,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -289,7 +294,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_ocr_observer_detail(this.observerId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_ocr_observer_detail(
+                            this.observerId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -299,8 +307,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -308,84 +316,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
index ac6f9a5d..9af5aa65 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
@@ -1,75 +1,169 @@
 <template lang="html">
     <div id="internal-ocr-propose-approve-request">
-        <modal id="ocr-propose-approve-modal" transition="modal fade" @ok="ok()" ok-text="Propose Approve"
-            @cancel="close()" :title="`Propose Approve ${occurrence_report_number}`" large>
+        <modal
+            id="ocr-propose-approve-modal"
+            transition="modal fade"
+            ok-text="Propose Approve"
+            :title="`Propose Approve ${occurrence_report_number}`"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container">
                 <form id="propose-approve-form">
                     <div v-if="errorString" class="row mb-3">
                         <div class="col">
-                            <alert type="danger"><strong>{{ errorString }}</strong></alert>
+                            <alert type="danger"
+                                ><strong>{{ errorString }}</strong></alert
+                            >
                         </div>
                     </div>
                     <div class="row mb-3">
                         <div class="col">
                             <div class="form-check form-check-inline">
-                                <input class="form-check-input" type="radio" name="create_new_occurrence"
-                                    id="create_new_occurrence_new" :value="true"
-                                    v-model="propose_approve.create_new_occurrence" @change="resetSelectedOccurrence" />
-                                <label class="form-check-label" for="create_new_occurrence_new">Create New
-                                    Occurrence</label>
+                                <input
+                                    id="create_new_occurrence_new"
+                                    v-model="
+                                        propose_approve.create_new_occurrence
+                                    "
+                                    class="form-check-input"
+                                    type="radio"
+                                    name="create_new_occurrence"
+                                    :value="true"
+                                    @change="resetSelectedOccurrence"
+                                />
+                                <label
+                                    class="form-check-label"
+                                    for="create_new_occurrence_new"
+                                    >Create New Occurrence</label
+                                >
                             </div>
                             <div class="form-check form-check-inline">
-                                <input class="form-check-input" type="radio" name="create_new_occurrence"
-                                    id="create_new_occurrence_existing" :value="false"
-                                    v-model="propose_approve.create_new_occurrence"
-                                    @change="reinitialiseOccurrenceNameLookup" />
-                                <label class="form-check-label" for="create_new_occurrence_existing">Add to Existing
-                                    Occurrence</label>
+                                <input
+                                    id="create_new_occurrence_existing"
+                                    v-model="
+                                        propose_approve.create_new_occurrence
+                                    "
+                                    class="form-check-input"
+                                    type="radio"
+                                    name="create_new_occurrence"
+                                    :value="false"
+                                    @change="reinitialiseOccurrenceNameLookup"
+                                />
+                                <label
+                                    class="form-check-label"
+                                    for="create_new_occurrence_existing"
+                                    >Add to Existing Occurrence</label
+                                >
                             </div>
                             <hr />
-                            <div v-if="!propose_approve.create_new_occurrence" class="mt-3">
-                                <div v-if="occurrence_report.ocr_for_occ_number" class="form-group mb-3">
-                                    <label for="occurrence_report_is_for_occurrence_number">Proposed / Suggested OCC
-                                        Number:</label>
-                                    <input id="occurrence_report_is_for_occurrence_number" type="text" v-model="occurrence_report.ocr_for_occ_number
-                                        " :disabled="true" class="form-control" autocomplete="new-password" />
+                            <div
+                                v-if="!propose_approve.create_new_occurrence"
+                                class="mt-3"
+                            >
+                                <div
+                                    v-if="occurrence_report.ocr_for_occ_number"
+                                    class="form-group mb-3"
+                                >
+                                    <label
+                                        for="occurrence_report_is_for_occurrence_number"
+                                        >Proposed / Suggested OCC Number:</label
+                                    >
+                                    <input
+                                        id="occurrence_report_is_for_occurrence_number"
+                                        v-model="
+                                            occurrence_report.ocr_for_occ_number
+                                        "
+                                        type="text"
+                                        :disabled="true"
+                                        class="form-control"
+                                        autocomplete="new-password"
+                                    />
                                 </div>
-                                <div v-if="occurrence_report.ocr_for_occ_name" class="form-group mb-3">
-                                    <label for="occurrence_report_for_occurrence_name">Proposed / Suggested Occurrence
-                                        Name:</label>
-                                    <input id="occurrence_report_for_occurrence_name" type="text" v-model="occurrence_report.ocr_for_occ_name
-                                        " :disabled="true" class="form-control" autocomplete="new-password" />
+                                <div
+                                    v-if="occurrence_report.ocr_for_occ_name"
+                                    class="form-group mb-3"
+                                >
+                                    <label
+                                        for="occurrence_report_for_occurrence_name"
+                                        >Proposed / Suggested Occurrence
+                                        Name:</label
+                                    >
+                                    <input
+                                        id="occurrence_report_for_occurrence_name"
+                                        v-model="
+                                            occurrence_report.ocr_for_occ_name
+                                        "
+                                        type="text"
+                                        :disabled="true"
+                                        class="form-control"
+                                        autocomplete="new-password"
+                                    />
                                 </div>
-                                <div class="form-group" id="occurrence_name_lookup_propose_approve_form_group_id">
-                                    <label class="mb-3" for="occurrence_name_lookup_propose_approve">Existing
-                                        Occurrence:</label>
-                                    <select id="occurrence_name_lookup_propose_approve"
+                                <div
+                                    id="occurrence_name_lookup_propose_approve_form_group_id"
+                                    class="form-group"
+                                >
+                                    <label
+                                        class="mb-3"
+                                        for="occurrence_name_lookup_propose_approve"
+                                        >Existing Occurrence:</label
+                                    >
+                                    <select
+                                        id="occurrence_name_lookup_propose_approve"
+                                        ref="occurrence_name_lookup_propose_approve"
                                         name="occurrence_name_lookup_propose_approve"
-                                        ref="occurrence_name_lookup_propose_approve" class="form-control" required />
+                                        class="form-control"
+                                        required
+                                    />
                                 </div>
                             </div>
                             <div v-else class="mt-3">
-                                <label class="mb-3" for="new_occurrence_name">New
-                                    Occurrence Name:</label>
-                                <input type="text" class="form-control" id="new_occurrence_name"
-                                    name="new_occurrence_name" ref="new_occurrence_name"
-                                    v-model="propose_approve.new_occurrence_name" required />
+                                <label class="mb-3" for="new_occurrence_name"
+                                    >New Occurrence Name:</label
+                                >
+                                <input
+                                    id="new_occurrence_name"
+                                    ref="new_occurrence_name"
+                                    v-model="
+                                        propose_approve.new_occurrence_name
+                                    "
+                                    type="text"
+                                    class="form-control"
+                                    name="new_occurrence_name"
+                                    required
+                                />
                             </div>
                             <div class="mt-3">
-                                <label class="form-label" for="details">Details for Approver</label>
-                                <textarea type="date" class="form-control" id="details" name="details"
-                                    v-model="propose_approve.details" required></textarea>
+                                <label class="form-label" for="details"
+                                    >Details for Approver</label
+                                >
+                                <textarea
+                                    id="details"
+                                    v-model="propose_approve.details"
+                                    type="date"
+                                    class="form-control"
+                                    name="details"
+                                    required
+                                ></textarea>
                             </div>
                             <div class="mt-3">
                                 <div class="col-sm-12">
-                                    <label class="control-label" for="cc_email">CC email</label>
-                                    <input type="text" style="width: 70%;" class="form-control" name="cc_email"
-                                        v-model="propose_approve.cc_email" />
+                                    <label class="control-label" for="cc_email"
+                                        >CC email</label
+                                    >
+                                    <input
+                                        v-model="propose_approve.cc_email"
+                                        type="text"
+                                        style="width: 70%"
+                                        class="form-control"
+                                        name="cc_email"
+                                    />
                                 </div>
                             </div>
                             <div class="mt-3">
-                                some blurb to let the user know to go through the report and add sections to the
-                                occurrence.
+                                some blurb to let the user know to go through
+                                the report and add sections to the occurrence.
                             </div>
                         </div>
                     </div>
@@ -80,12 +174,12 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'ocr-propose-approve',
+    name: 'OcrProposeApprove',
     components: {
         modal,
         alert,
@@ -102,7 +196,7 @@ export default {
         },
         occurrence: {
             type: Object,
-        }
+        },
     },
     data: function () {
         return {
@@ -117,37 +211,61 @@ export default {
                 cc_email: '',
             },
             errorString: '',
-        }
+        };
+    },
+    computed: {
+        proposeApproveButtonDisabled: function () {
+            return (
+                !this.propose_approve.create_new_occurrence &&
+                !this.propose_approve.occurrence
+            );
+        },
     },
     watch: {
         isModalOpen: function (value) {
             if (value) {
-                if (this.occurrence !== null && this.occurrence.id !== undefined &&
-                    (
-                        (this.occurrence_report.species_id !== null && this.occurrence_report.species_id === this.occurrence.species) ||
-                        (this.occurrence_report.community_id !== null && this.occurrence_report.community_id === this.occurrence.community)
-                    )
+                if (
+                    this.occurrence !== null &&
+                    this.occurrence.id !== undefined &&
+                    ((this.occurrence_report.species_id !== null &&
+                        this.occurrence_report.species_id ===
+                            this.occurrence.species) ||
+                        (this.occurrence_report.community_id !== null &&
+                            this.occurrence_report.community_id ===
+                                this.occurrence.community))
                 ) {
-                    var newOption = new Option(this.occurrence.occurrence_number + " - " +
-                        this.occurrence.occurrence_name + " (" + this.occurrence.group_type + ")",
-                        this.occurrence.id, false, true);
-                    $(this.$refs.occurrence_name_lookup_propose_approve).append(newOption);
+                    var newOption = new Option(
+                        this.occurrence.occurrence_number +
+                            ' - ' +
+                            this.occurrence.occurrence_name +
+                            ' (' +
+                            this.occurrence.group_type +
+                            ')',
+                        this.occurrence.id,
+                        false,
+                        true
+                    );
+                    $(this.$refs.occurrence_name_lookup_propose_approve).append(
+                        newOption
+                    );
 
                     this.propose_approve.occurrence_id = this.occurrence.id;
-                    this.propose_approve.occurrence_name = this.occurrence.occurrence_name;
+                    this.propose_approve.occurrence_name =
+                        this.occurrence.occurrence_name;
                 } else {
                     this.$nextTick(() => {
-                        $(this.$refs.occurrence_name_lookup_propose_approve).select2('open');
+                        $(
+                            this.$refs.occurrence_name_lookup_propose_approve
+                        ).select2('open');
                     });
                 }
             }
-        }
-    },
-    computed: {
-        proposeApproveButtonDisabled: function () {
-            return !this.propose_approve.create_new_occurrence && !this.propose_approve.occurrence;
         },
     },
+    mounted: function () {
+        this.form = document.forms['propose-approve-form'];
+        this.initialiseOccurrenceNameLookup();
+    },
     methods: {
         ok: function () {
             let vm = this;
@@ -165,7 +283,9 @@ export default {
                 new_occurrence_name: '',
                 details: '',
             };
-            $(this.$refs.occurrence_name_lookup_propose_approve).empty().trigger('change');
+            $(this.$refs.occurrence_name_lookup_propose_approve)
+                .empty()
+                .trigger('change');
             this.errorString = '';
             this.isModalOpen = false;
         },
@@ -180,7 +300,7 @@ export default {
             swal.fire({
                 title: `Propose Approve Occurrence Report ${vm.occurrence_report_number}`,
                 text: confirmation,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Propose Approve',
                 customClass: {
@@ -190,14 +310,21 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report.id + '/propose_approve/')), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(vm.propose_approve),
-                    })
-                        .then((response) => {
+                    fetch(
+                        helpers.add_endpoint_join(
+                            api_endpoints.occurrence_report,
+                            '/' +
+                                (vm.occurrence_report.id + '/propose_approve/')
+                        ),
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(vm.propose_approve),
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Proposal to Approve Successful',
                                 text: `Your proposal to approve occurrence report ${vm.occurrence_report_number} has been successfully submitted.`,
@@ -208,11 +335,13 @@ export default {
                             }).then((result) => {
                                 vm.$router.go();
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
                             vm.errorString = helpers.apiVueResourceError(error);
                             vm.amendingProposal = true;
-                        });
+                        }
+                    );
                 }
             });
         },
@@ -226,50 +355,53 @@ export default {
         reinitialiseOccurrenceNameLookup: function () {
             let vm = this;
             vm.$nextTick(() => {
-                $(vm.$refs.occurrence_name_lookup_propose_approve).select2('destroy');
+                $(vm.$refs.occurrence_name_lookup_propose_approve).select2(
+                    'destroy'
+                );
                 vm.initialiseOccurrenceNameLookup();
             });
         },
         initialiseOccurrenceNameLookup: function () {
             let vm = this;
-            $(vm.$refs.occurrence_name_lookup_propose_approve).select2({
-                width: '100%',
-                minimumInputLength: 2,
-                dropdownParent: $("#occurrence_name_lookup_propose_approve_form_group_id"),
-                theme: 'bootstrap-5',
-                allowClear: true,
-                placeholder: "Search Name of Occurrence",
-                ajax: {
-                    url: api_endpoints.occurrence_name_lookup,
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                            group_type_id: vm.group_type_id,
-                            occurrence_report_id: vm.occurrence_report.id,
-                        }
-                        return query;
+            $(vm.$refs.occurrence_name_lookup_propose_approve)
+                .select2({
+                    width: '100%',
+                    minimumInputLength: 2,
+                    dropdownParent: $(
+                        '#occurrence_name_lookup_propose_approve_form_group_id'
+                    ),
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search Name of Occurrence',
+                    ajax: {
+                        url: api_endpoints.occurrence_name_lookup,
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                                group_type_id: vm.group_type_id,
+                                occurrence_report_id: vm.occurrence_report.id,
+                            };
+                            return query;
+                        },
                     },
-                },
-            }).
-                on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     vm.propose_approve.occurrence_id = e.params.data.id;
                     vm.propose_approve.occurrence_name = e.params.data.text;
-                }).
-                on("select2:open", function (e) {
-                    const searchField = $('[aria-controls="select2-occurrence_name_lookup_propose_approve-results"]')
+                })
+                .on('select2:open', function (e) {
+                    const searchField = $(
+                        '[aria-controls="select2-occurrence_name_lookup_propose_approve-results"]'
+                    );
                     searchField[0].focus();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     vm.propose_approve.occurrence_id = null;
                     vm.propose_approve.occurrence_name = null;
                 });
         },
     },
-    mounted: function () {
-        this.form = document.forms['propose-approve-form'];
-        this.initialiseOccurrenceNameLookup();
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
index 7f4841ea..12473ec8 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
@@ -1,23 +1,47 @@
 <template lang="html">
     <div id="internal-ocr-propose-decline-request">
-        <modal id="ocr-propose-decline-modal" transition="modal fade" @ok="ok()" ok-text="Propose Decline"
-            @cancel="close()" :title="`Propose Decline ${occurrence_report_number}`" large>
+        <modal
+            id="ocr-propose-decline-modal"
+            transition="modal fade"
+            ok-text="Propose Decline"
+            :title="`Propose Decline ${occurrence_report_number}`"
+            large
+            @ok="ok()"
+            @cancel="close()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="propose-decline-form">
-                        <alert v-if="errorString" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="errorString" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="row mb-3">
                             <div class="col-sm-12">
-                                <label class="control-label mb-3" for="reason">Reason</label>
-                                <textarea class="form-control" name="reason" v-model="propose_decline.reason"
-                                    id="reason" ref="reason" required></textarea>
+                                <label class="control-label mb-3" for="reason"
+                                    >Reason</label
+                                >
+                                <textarea
+                                    id="reason"
+                                    ref="reason"
+                                    v-model="propose_decline.reason"
+                                    class="form-control"
+                                    name="reason"
+                                    required
+                                ></textarea>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-sm-12">
-                                <label class="control-label" for="cc_email">CC email</label>
-                                <input type="text" style="width: 70%;" class="form-control" name="cc_email"
-                                    v-model="propose_decline.cc_email" />
+                                <label class="control-label" for="cc_email"
+                                    >CC email</label
+                                >
+                                <input
+                                    v-model="propose_decline.cc_email"
+                                    type="text"
+                                    style="width: 70%"
+                                    class="form-control"
+                                    name="cc_email"
+                                />
                             </div>
                         </div>
                     </form>
@@ -28,12 +52,12 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'ocr-propose-decline',
+    name: 'OcrProposeDecline',
     components: {
         modal,
         alert,
@@ -56,7 +80,7 @@ export default {
                 cc_email: '',
             },
             errorString: '',
-        }
+        };
     },
     watch: {
         isModalOpen: function (val) {
@@ -67,6 +91,9 @@ export default {
             }
         },
     },
+    mounted: function () {
+        this.form = document.forms['propose-decline-form'];
+    },
     methods: {
         ok: function () {
             let vm = this;
@@ -80,7 +107,7 @@ export default {
             this.isModalOpen = false;
             this.propose_decline = {
                 reason: '',
-                occurrence_report: this.occurrence_report_id
+                occurrence_report: this.occurrence_report_id,
             };
             this.errorString = '';
             $(this.$refs.reason).val(null).trigger('change');
@@ -89,9 +116,9 @@ export default {
         proposeDecline: function () {
             let vm = this;
             swal.fire({
-                title: "Propose Decline Application",
+                title: 'Propose Decline Application',
                 text: `Are you sure you want to propose to decline occurrence report ${vm.occurrence_report_number}?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Propose Decline',
                 customClass: {
@@ -101,14 +128,21 @@ export default {
                 reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
-                    fetch(helpers.add_endpoint_join(api_endpoints.occurrence_report, '/' + (vm.occurrence_report_id + '/propose_decline/')), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(vm.propose_decline),
-                    })
-                        .then((response) => {
+                    fetch(
+                        helpers.add_endpoint_join(
+                            api_endpoints.occurrence_report,
+                            '/' +
+                                (vm.occurrence_report_id + '/propose_decline/')
+                        ),
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(vm.propose_decline),
+                        }
+                    ).then(
+                        (response) => {
                             swal.fire({
                                 title: 'Proposal to Decline Successful',
                                 text: `Your proposal to decline occurrence report ${vm.occurrence_report_number} has been successfully submitted.`,
@@ -119,17 +153,16 @@ export default {
                             }).then((result) => {
                                 vm.$router.go();
                             });
-                        }, (error) => {
+                        },
+                        (error) => {
                             console.log(error);
                             vm.errorString = helpers.apiVueResourceError(error);
                             vm.amendingProposal = true;
-                        });
+                        }
+                    );
                 }
             });
         },
     },
-    mounted: function () {
-        this.form = document.forms['propose-decline-form'];
-    }
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
index f6ec8bdc..1da96bb3 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
@@ -1,45 +1,74 @@
 <template lang="html">
-    <div v-if="occurrence_report_obj" class="container" id="internalCSReferral">
+    <div v-if="occurrence_report_obj" id="internalCSReferral" class="container">
         <div class="row">
-            <h3><span class="text-capitalize">{{ occurrence_report_obj.group_type }}</span> {{
-                occurrence_report_obj.occurrence_report_number }} - Referral</h3>
+            <h3>
+                <span class="text-capitalize">{{
+                    occurrence_report_obj.group_type
+                }}</span>
+                {{ occurrence_report_obj.occurrence_report_number }} - Referral
+            </h3>
         </div>
         <div class="row">
             <div class="col-md-3">
-                <Submission :submitter_first_name="submitter_first_name" :submitter_last_name="submitter_last_name"
-                    :lodgement_date="occurrence_report_obj.lodgement_date" class="mb-3" />
+                <Submission
+                    :submitter_first_name="submitter_first_name"
+                    :submitter_last_name="submitter_last_name"
+                    :lodgement_date="occurrence_report_obj.lodgement_date"
+                    class="mb-3"
+                />
                 <div class="card card-default sticky-top">
-                    <div class="card-header">
-                        Referral
-                    </div>
+                    <div class="card-header">Referral</div>
                     <div class="card-body">
                         <strong>Status</strong><br />
                         {{ referral.processing_status }}
                     </div>
                     <template
-                        v-if="!isFinalised && referral.referral == occurrence_report_obj.current_assessor.id && referral.can_be_completed">
+                        v-if="
+                            !isFinalised &&
+                            referral.referral ==
+                                occurrence_report_obj.current_assessor.id &&
+                            referral.can_be_completed
+                        "
+                    >
                         <div class="card-body border-top pb-0">
                             <strong>Referrer</strong>
-                            <div class="alert alert-primary px-1 py-2 mt-2" role="alert">
+                            <div
+                                class="alert alert-primary px-1 py-2 mt-2"
+                                role="alert"
+                            >
                                 <div class="mb-1">
-                                    <i class="bi bi-person-fill"></i> {{ referral.sent_by.fullname }}
+                                    <i class="bi bi-person-fill"></i>
+                                    {{ referral.sent_by.fullname }}
                                 </div>
                                 <div>
-                                    <i class="bi bi-envelope"></i> <a :href="'mailto:' + referral.sent_by.email"
-                                        target="_balnk">{{ referral.sent_by.email }}</a>
+                                    <i class="bi bi-envelope"></i>
+                                    <a
+                                        :href="
+                                            'mailto:' + referral.sent_by.email
+                                        "
+                                        target="_balnk"
+                                        >{{ referral.sent_by.email }}</a
+                                    >
                                 </div>
                             </div>
                         </div>
                         <div class="card-body border-top">
                             <strong>Referrer's Comments</strong>
                             <div class="mt-2">
-                                <em class="text-muted">"{{ referral.text }}"</em>
+                                <em class="text-muted"
+                                    >"{{ referral.text }}"</em
+                                >
                             </div>
                         </div>
                         <div class="card-body border-top">
                             <strong>Your Comments</strong><br />
-                            <textarea id="your-comments" class="form-control" rows="6"
-                                v-model="referral.referral_comment" autofocus></textarea>
+                            <textarea
+                                id="your-comments"
+                                v-model="referral.referral_comment"
+                                class="form-control"
+                                rows="6"
+                                autofocus
+                            ></textarea>
                         </div>
                         <div class="card-body mt-2 border-top">
                             <div class="row mb-3">
@@ -47,10 +76,16 @@
                             </div>
                             <div class="row">
                                 <div class="col-sm-12">
-                                    <button style="width:80%;" class="btn btn-primary"
-                                        :disabled="occurrence_report_obj.can_user_edit"
-                                        @click.prevent="completeReferral">Complete Referral
-                                        Task</button>
+                                    <button
+                                        style="width: 80%"
+                                        class="btn btn-primary"
+                                        :disabled="
+                                            occurrence_report_obj.can_user_edit
+                                        "
+                                        @click.prevent="completeReferral"
+                                    >
+                                        Complete Referral Task
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -61,25 +96,60 @@
                 <div class="row">
                     <div class="">
                         <div class="row">
-                            <form :action="species_community_ocr_form_url" method="post" name="new_occurrence_report"
-                                enctype="multipart/form-data">
-                                <ProposalOccurrenceReport v-if="occurrence_report_obj && profile"
-                                    :occurrence_report_obj="occurrence_report_obj" id="OccurrenceReportStart"
-                                    :canEditStatus="canEditStatus" ref="occurrence_report" :referral="referral"
-                                    @refreshOccurrenceReport="refreshOccurrenceReport()"
+                            <form
+                                :action="species_community_ocr_form_url"
+                                method="post"
+                                name="new_occurrence_report"
+                                enctype="multipart/form-data"
+                            >
+                                <ProposalOccurrenceReport
+                                    v-if="occurrence_report_obj && profile"
+                                    id="OccurrenceReportStart"
+                                    ref="occurrence_report"
+                                    :occurrence_report_obj="
+                                        occurrence_report_obj
+                                    "
+                                    :can-edit-status="canEditStatus"
+                                    :referral="referral"
                                     :show_observer_contact_information="false"
-                                    @refreshFromResponse="refreshFromResponse" :is_internal="profile.is_internal">
+                                    :is_internal="profile.is_internal"
+                                    @refresh-occurrence-report="
+                                        refreshOccurrenceReport()
+                                    "
+                                    @refresh-from-response="refreshFromResponse"
+                                >
                                 </ProposalOccurrenceReport>
-                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                <input type='hidden' name="occurrence_report_id" :value="1" />
+                                <input
+                                    type="hidden"
+                                    name="csrfmiddlewaretoken"
+                                    :value="csrf_token"
+                                />
+                                <input
+                                    type="hidden"
+                                    name="occurrence_report_id"
+                                    :value="1"
+                                />
                                 <div class="row" style="margin-bottom: 50px">
-                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;"
-                                        v-if="!occurrence_report_obj.can_user_edit && !isFinalised">
-                                        <div v-if="!isFinalised" class="container">
+                                    <div
+                                        v-if="
+                                            !occurrence_report_obj.can_user_edit &&
+                                            !isFinalised
+                                        "
+                                        class="navbar fixed-bottom"
+                                        style="background-color: #f5f5f5"
+                                    >
+                                        <div
+                                            v-if="!isFinalised"
+                                            class="container"
+                                        >
                                             <div class="col-md-12 text-end">
-                                                <button class="btn btn-primary pull-right" style="margin-top:5px;"
-                                                    @click.prevent="save()">Save
-                                                    Changes</button>
+                                                <button
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    @click.prevent="save()"
+                                                >
+                                                    Save Changes
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
@@ -93,38 +163,55 @@
     </div>
 </template>
 <script>
-
-import datatable from '@vue-utils/datatable.vue'
-import Submission from '@common-utils/submission.vue'
-import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue'
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import datatable from '@vue-utils/datatable.vue';
+import Submission from '@common-utils/submission.vue';
+import ProposalOccurrenceReport from '@/components/form_occurrence_report.vue';
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'OccurrenceReportReferral',
+    components: {
+        datatable,
+        Submission,
+        ProposalOccurrenceReport,
+    },
+    beforeRouteEnter: function (to, from, next) {
+        fetch(
+            helpers.add_endpoint_json(
+                api_endpoints.ocr_referrals,
+                to.params.referral_id
+            )
+        ).then(
+            async (reponse) => {
+                const data = await response.json();
+                next(async (vm) => {
+                    vm.referral = data;
+                });
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    },
     data: function () {
         return {
             profile: null,
             savingOccurrenceReport: false,
             referral: null,
-        }
-    },
-    components: {
-        datatable,
-        Submission,
-        ProposalOccurrenceReport,
+        };
     },
     computed: {
         occurrence_report_obj: function () {
-            return this.referral != null && this.referral != 'undefined' ? this.referral.occurrence_report : null;
+            return this.referral != null && this.referral != 'undefined'
+                ? this.referral.occurrence_report
+                : null;
         },
         canEditStatus: function () {
-            return this.occurrence_report_obj ? this.occurrence_report_obj.can_user_edit : 'false';
+            return this.occurrence_report_obj
+                ? this.occurrence_report_obj.can_user_edit
+                : 'false';
         },
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         species_community_ocr_form_url: function () {
             return `/api/occurrence_report/${this.occurrence_report_obj.id}/occurrence_report_save.json`;
@@ -134,22 +221,28 @@ export default {
         },
         submitter_first_name: function () {
             if (this.occurrence_report_obj.submitter) {
-                return this.occurrence_report_obj.submitter.first_name
+                return this.occurrence_report_obj.submitter.first_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_last_name: function () {
             if (this.occurrence_report_obj.submitter) {
-                return this.occurrence_report_obj.submitter.last_name
+                return this.occurrence_report_obj.submitter.last_name;
             } else {
-                return ''
+                return '';
             }
         },
         isFinalised: function () {
             return this.referral.processing_status != 'Awaiting';
         },
     },
+    created: function () {
+        this.fetchProfile();
+        if (!this.referral) {
+            this.fetchReferral();
+        }
+    },
     methods: {
         save: async function () {
             let vm = this;
@@ -169,25 +262,28 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(payload)
-            }).then(async (response) => {
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Your changes have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingOccurrenceReport = false;
-                component_map.setLoadingMap(false);
-                this.$nextTick(async () => {
-                    ocr_location.incrementComponentMapKey();
-                });
-            }, err => {
-                vm.savingOccurrenceReport = false;
-                component_map.setLoadingMap(false);
-            });
+                body: JSON.stringify(payload),
+            }).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Your changes have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingOccurrenceReport = false;
+                    component_map.setLoadingMap(false);
+                    this.$nextTick(async () => {
+                        ocr_location.incrementComponentMapKey();
+                    });
+                },
+                (err) => {
+                    vm.savingOccurrenceReport = false;
+                    component_map.setLoadingMap(false);
+                }
+            );
         },
         refreshFromResponse: async function (response) {
             let vm = this;
@@ -206,94 +302,100 @@ export default {
                     },
                     didClose: function () {
                         $('#your-comments').focus();
-                    }
+                    },
                 });
                 return;
             }
             swal.fire({
-                title: "Complete Referral",
-                text: "Are you sure you want to complete this referral?",
-                icon: "question",
+                title: 'Complete Referral',
+                text: 'Are you sure you want to complete this referral?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Complete Referral',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    let payload = new Object();
-                    Object.assign(payload, vm.referral);
-                    fetch(vm.species_community_ocr_referral_form_url, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(payload)
-                    }).then(async (response) => {
-                        fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, vm.$route.params.referral_id + '/complete')).then(async (response) => {
-                            const data = await response.json();
-                            vm.referral = Object.assign({}, data);
-                        },
-                            error => {
-                                swal.fire({
-                                    title: 'Referral Error',
-                                    text: helpers.apiVueResourceError(error),
-                                    icon: 'error',
-                                    customClass: {
-                                        confirmButton: 'btn btn-primary',
+                reverseButtons: true,
+            }).then(
+                (result) => {
+                    if (result.isConfirmed) {
+                        let payload = new Object();
+                        Object.assign(payload, vm.referral);
+                        fetch(vm.species_community_ocr_referral_form_url, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        }).then(
+                            async (response) => {
+                                fetch(
+                                    helpers.add_endpoint_json(
+                                        api_endpoints.ocr_referrals,
+                                        vm.$route.params.referral_id +
+                                            '/complete'
+                                    )
+                                ).then(
+                                    async (response) => {
+                                        const data = await response.json();
+                                        vm.referral = Object.assign({}, data);
                                     },
-                                });
-                            });
-
-                    }, err => {
-                        console.log(err);
-                    });
+                                    (error) => {
+                                        swal.fire({
+                                            title: 'Referral Error',
+                                            text: helpers.apiVueResourceError(
+                                                error
+                                            ),
+                                            icon: 'error',
+                                            customClass: {
+                                                confirmButton:
+                                                    'btn btn-primary',
+                                            },
+                                        });
+                                    }
+                                );
+                            },
+                            (err) => {
+                                console.log(err);
+                            }
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         refreshOccurrenceReport: function () {
             this.fetchOccurrenceReport(this.referral.occurrence_report.id);
         },
         fetchReferral: function () {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, vm.$route.params.referral_id)).then(async (response) => {
-                const data = await response.json();
-                vm.referral = Object.assign({}, data);
-            },
-                err => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.ocr_referrals,
+                    vm.$route.params.referral_id
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.referral = Object.assign({}, data);
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         fetchProfile() {
             fetch(api_endpoints.profile)
                 .then(async (response) => {
                     this.profile = await response.json();
                 })
-                .catch(error => {
-                    console.log(error)
-                })
-        },
-    },
-    created: function () {
-        this.fetchProfile();
-        if (!this.referral) {
-            this.fetchReferral();
-        }
-    },
-    beforeRouteEnter: function (to, from, next) {
-        fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, to.params.referral_id)).then(async (reponse) => {
-            const data = await response.json();
-            next(async vm => {
-                vm.referral = data;
-            });
+                .catch((error) => {
+                    console.log(error);
+                });
         },
-            err => {
-                console.log(err);
-            });
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue
index 9aa7464a..2a360871 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue
@@ -2,17 +2,18 @@
     <div id="speciesOccurrenceHistory">
         <modal
             transition="modal fade"
-            :title="'Occurrence OCC'+ occurrenceId +' - History'"
+            :title="'Occurrence OCC' + occurrenceId + ' - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'OCC'+occurrenceId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'Occurrence'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'OCC' + occurrenceId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'Occurrence'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -70,8 +73,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -108,16 +110,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.occurrence.fields.occurrence_number) {
-                        return full.data.occurrence.fields.occurrence_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.occurrence.fields.occurrence_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "OCC"+full.data.occurrence.pk+'-'+full.revision_sequence;
+                        return (
+                            'OCC' +
+                            full.data.occurrence.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -151,7 +161,6 @@ export default {
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -164,7 +173,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -177,7 +185,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -196,13 +203,16 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.taxonomy !== undefined && full.data.taxonomy.fields !== undefined) {
+                    if (
+                        full.data.taxonomy !== undefined &&
+                        full.data.taxonomy.fields !== undefined
+                    ) {
                         //return full.data.taxonomy.fields.scientific_name;
                         let value = full.data.taxonomy.fields.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'scientific_name', //_name',
@@ -219,14 +229,13 @@ export default {
                     if (full.data.occurrence.fields.wild_status) {
                         return full.data.occurrence.fields.wild_status.name;
                     }
-                    return "";
+                    return '';
                 },
                 name: 'wild_status',
             };
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.occurrence.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
@@ -244,11 +253,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -273,7 +282,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence(this.occurrenceId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence(
+                            this.occurrenceId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -283,8 +295,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -292,65 +304,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue
index 3a939714..c136e2ec 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue
@@ -2,21 +2,25 @@
     <div id="speciesOccurrenceReportHistory">
         <modal
             transition="modal fade"
-            :title="'Occurrence Report OCR'+ occurrenceReportId +' - History'"
+            :title="'Occurrence Report OCR' + occurrenceReportId + ' - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
-                                <div v-if="occurrenceReportId" class="col-lg-12">
+                                <div
+                                    v-if="occurrenceReportId"
+                                    class="col-lg-12"
+                                >
                                     <datatable
                                         :id="datatable_id"
                                         ref="history_datatable"
@@ -24,14 +28,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'OCR'+occurrenceReportId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'OccurrenceReport'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'OCR' + occurrenceReportId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'OccurrenceReport'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -70,8 +76,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -110,16 +115,28 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.occurrencereport.fields.occurrence_report_number) {
-                        return full.data.occurrencereport.fields.occurrence_report_number+'-'+full.revision_sequence;
+                    if (
+                        full.data.occurrencereport.fields
+                            .occurrence_report_number
+                    ) {
+                        return (
+                            full.data.occurrencereport.fields
+                                .occurrence_report_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "OCR"+full.data.occurrencereport.pk+'-'+full.revision_sequence;
+                        return (
+                            'OCR' +
+                            full.data.occurrencereport.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -146,14 +163,14 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.occurrencereport.fields.occurrence_report_number;
+                    return full.data.occurrencereport.fields
+                        .occurrence_report_number;
                 },
                 name: 'occurrence_report_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -166,7 +183,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -179,7 +195,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -198,13 +213,16 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.taxonomy !== undefined && full.data.taxonomy.fields !== undefined) {
+                    if (
+                        full.data.taxonomy !== undefined &&
+                        full.data.taxonomy.fields !== undefined
+                    ) {
                         //return full.data.taxonomy.fields.scientific_name;
                         let value = full.data.taxonomy.fields.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'scientific_name', //_name',
@@ -291,7 +309,6 @@ export default {
         },*/
         column_occurrence: function () {
             return {
-
                 data: 'data.data.occurrencereport.fields.occurrence',
                 defaultContent: '',
                 orderable: true,
@@ -299,15 +316,16 @@ export default {
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.occurrencereport.fields.occurrence)
-                        return "OCC"+full.data.occurrencereport.fields.occurrence;
-                    return ""
+                        return (
+                            'OCC' + full.data.occurrencereport.fields.occurrence
+                        );
+                    return '';
                 },
                 name: 'occurrence',
             };
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.occurrencereport.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
@@ -325,11 +343,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -356,7 +374,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_occurrence_report(this.occurrenceReportId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_occurrence_report(
+                            this.occurrenceReportId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -366,8 +387,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -375,65 +396,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
index 4fc20d14..998de272 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
@@ -1,18 +1,39 @@
 <template lang="html">
     <div id="internal-proposal-amend">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" title="Amendment Request" large>
+        <modal
+            transition="modal fade"
+            title="Amendment Request"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="row">
                                 <div class="col-sm-offset-2 col-sm-8">
                                     <div class="form-group">
-                                        <label class="control-label pull-left" for="Name">Reason</label>
-                                        <select class="form-control" name="reason" ref="reason"
-                                            v-model="amendment.reason">
-                                            <option v-for="r in reason_choices" :value="r.key">{{ r.value }}</option>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Reason</label
+                                        >
+                                        <select
+                                            ref="reason"
+                                            v-model="amendment.reason"
+                                            class="form-control"
+                                            name="reason"
+                                        >
+                                            <option
+                                                v-for="r in reason_choices"
+                                                :value="r.key"
+                                            >
+                                                {{ r.value }}
+                                            </option>
                                         </select>
                                     </div>
                                 </div>
@@ -20,9 +41,17 @@
                             <div class="row">
                                 <div class="col-sm-offset-2 col-sm-8">
                                     <div class="form-group">
-                                        <label class="control-label pull-left" for="Name">Details</label>
-                                        <textarea class="form-control" name="name" v-model="amendment.text"
-                                            id="amendment_text"></textarea>
+                                        <label
+                                            class="control-label pull-left"
+                                            for="Name"
+                                            >Details</label
+                                        >
+                                        <textarea
+                                            id="amendment_text"
+                                            v-model="amendment.text"
+                                            class="form-control"
+                                            name="name"
+                                        ></textarea>
                                     </div>
                                 </div>
                             </div>
@@ -37,15 +66,15 @@
 <script>
 //import $ from 'jquery'
 
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'amendment-request',
+    name: 'AmendmentRequest',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         proposal_id: {
@@ -61,22 +90,31 @@ export default {
                 reason: '',
                 reason_id: null,
                 amendingProposal: false,
-                proposal: vm.proposal_id
+                proposal: vm.proposal_id,
             },
             reason_choices: {},
             errors: false,
             errorString: '',
             validation_form: null,
-        }
+        };
     },
     computed: {
         showError: function () {
             var vm = this;
             return vm.errors;
-        }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.amendForm;
+        vm.fetchAmendmentChoices();
+        vm.addFormValidations();
+        this.$nextTick(() => {
+            vm.eventListerners();
+        });
+        //console.log(validate);
     },
     methods: {
-
         ok: function () {
             let vm = this;
             if ($(vm.form).valid()) {
@@ -92,7 +130,7 @@ export default {
             this.amendment = {
                 reason: '',
                 reason_id: null,
-                proposal: this.proposal_id
+                proposal: this.proposal_id,
             };
             this.errors = false;
             $(this.$refs.reason).val(null).trigger('change');
@@ -102,12 +140,14 @@ export default {
         },
         fetchAmendmentChoices: function () {
             let vm = this;
-            fetch('/api/amendment_request_reason_choices.json').then(async (response) => {
-                vm.reason_choices = await response.json();
-
-            }, (error) => {
-                console.log(error);
-            });
+            fetch('/api/amendment_request_reason_choices.json').then(
+                async (response) => {
+                    vm.reason_choices = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         sendData: function () {
             let vm = this;
@@ -122,101 +162,110 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(amendment)
-            }).then((response) => {
-                //vm.$parent.loading.splice('processing contact',1);
-                swal(
-                    'Sent',
-                    'An email has been sent to proponent with the request to amend this Proposal',
-                    'success'
-                );
-                vm.amendingProposal = true;
-                vm.close();
-                //vm.$emit('refreshFromResponse',response);
-                fetch(`/api/proposal/${vm.proposal_id}/internal_proposal.json`).then((response) => {
-                    vm.$emit('refreshFromResponse', response, vm.documents);
-
-                }, (error) => {
+                body: JSON.stringify(amendment),
+            }).then(
+                (response) => {
+                    //vm.$parent.loading.splice('processing contact',1);
+                    swal(
+                        'Sent',
+                        'An email has been sent to proponent with the request to amend this Proposal',
+                        'success'
+                    );
+                    vm.amendingProposal = true;
+                    vm.close();
+                    //vm.$emit('refreshFromResponse',response);
+                    fetch(
+                        `/api/proposal/${vm.proposal_id}/internal_proposal.json`
+                    ).then(
+                        (response) => {
+                            vm.$emit(
+                                'refreshFromResponse',
+                                response,
+                                vm.documents
+                            );
+                        },
+                        (error) => {
+                            console.log(error);
+                        }
+                    );
+                    vm.$router.push({ path: '/internal' }); //Navigate to dashboard after creating Amendment request
+                },
+                (error) => {
                     console.log(error);
-                });
-                vm.$router.push({ path: '/internal' }); //Navigate to dashboard after creating Amendment request
-
-            }, (error) => {
-                console.log(error);
-                vm.errors = true;
-                vm.errorString = helpers.apiVueResourceError(error);
-                vm.amendingProposal = true;
-
-            });
-
-
+                    vm.errors = true;
+                    vm.errorString = helpers.apiVueResourceError(error);
+                    vm.amendingProposal = true;
+                }
+            );
         },
         formatText: function (text) {
-            let s = text.replace(/\n/g, '<br/>')
+            let s = text.replace(/\n/g, '<br/>');
             s = s.replace(/[\u2018|\u2019|\u201A]/g, "\'");
             // smart double quotes
-            s = s.replace(/[\u201C|\u201D|\u201E]/g, "\"");
+            s = s.replace(/[\u201C|\u201D|\u201E]/g, '"');
             // ellipsis
-            s = s.replace(/\u2026/g, "...");
+            s = s.replace(/\u2026/g, '...');
             // dashes
-            s = s.replace(/[\u2013|\u2014]/g, "-");
+            s = s.replace(/[\u2013|\u2014]/g, '-');
             // circumflex
-            s = s.replace(/\u02C6/g, "^");
+            s = s.replace(/\u02C6/g, '^');
             // open angle bracket
-            s = s.replace(/\u2039/g, "<");
+            s = s.replace(/\u2039/g, '<');
             // close angle bracket
-            s = s.replace(/\u203A/g, ">");
+            s = s.replace(/\u203A/g, '>');
             // spaces
-            s = s.replace(/[\u02DC|\u00A0]/g, " ");
+            s = s.replace(/[\u02DC|\u00A0]/g, ' ');
             return s;
         },
         addFormValidations: function () {
             let vm = this;
             vm.validation_form = $(vm.form).validate({
                 rules: {
-                    reason: "required"
-
-
+                    reason: 'required',
                 },
                 messages: {
-                    reason: "field is required",
-
+                    reason: 'field is required',
                 },
                 showErrors: function (errorMap, errorList) {
                     $.each(this.validElements(), function (index, element) {
                         var $element = $(element);
-                        $element.attr("data-original-title", "").parents('.form-group').removeClass('has-error');
+                        $element
+                            .attr('data-original-title', '')
+                            .parents('.form-group')
+                            .removeClass('has-error');
                     });
                     // destroy tooltips on valid elements
-                    $("." + this.settings.validClass).tooltip("destroy");
+                    $('.' + this.settings.validClass).tooltip('destroy');
                     // add or update tooltips
                     for (var i = 0; i < errorList.length; i++) {
                         var error = errorList[i];
                         $(error.element)
                             .tooltip({
-                                trigger: "focus"
+                                trigger: 'focus',
                             })
-                            .attr("data-original-title", error.message)
-                            .parents('.form-group').addClass('has-error');
+                            .attr('data-original-title', error.message)
+                            .parents('.form-group')
+                            .addClass('has-error');
                     }
-                }
+                },
             });
         },
         eventListerners: function () {
             let vm = this;
 
             // Intialise select2
-            $(vm.$refs.reason).select2({
-                "theme": "bootstrap",
-                allowClear: true,
-                placeholder: "Select Reason"
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.reason)
+                .select2({
+                    theme: 'bootstrap',
+                    allowClear: true,
+                    placeholder: 'Select Reason',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.amendment.reason = selected.val();
                     vm.amendment.reason_id = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.amendment.reason = selected.val();
                     vm.amendment.reason_id = selected.val();
@@ -252,19 +301,9 @@ export default {
             //       // insert text manually
             //       document.execCommand("insertHTML", false, s);
             //   });
-        }
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.amendForm;
-        vm.fetchAmendmentChoices();
-        vm.addFormValidations();
-        this.$nextTick(() => {
-            vm.eventListerners();
-        });
-        //console.log(validate);
-    }
-}
+};
 </script>
 
 <style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue
index 7b66fde6..3e19738f 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue
@@ -2,17 +2,24 @@
     <div id="communityDocumentHistory">
         <modal
             transition="modal fade"
-            :title="'Community C'+ communityId +' - Document D' + documentId + ' - History ' "
+            :title="
+                'Community C' +
+                communityId +
+                ' - Document D' +
+                documentId +
+                ' - History '
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +31,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'D'+documentId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'CommunityDocument'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'D' + documentId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'CommunityDocument'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -73,8 +82,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -112,16 +120,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.communitydocument.fields.document_number) {
-                        return full.data.communitydocument.fields.document_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.communitydocument.fields.document_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "D"+full.data.communitydocument.pk+'-'+full.revision_sequence;
+                        return (
+                            'D' +
+                            full.data.communitydocument.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -149,14 +165,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.communitydocument.fields.document_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.communitydocument.fields.document_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'document_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -169,7 +188,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -182,7 +200,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -202,10 +219,11 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.communitydocument.fields.document_category) {
-                        return full.data.communitydocument.fields.document_category.document_category_name;
+                    if (full.data.communitydocument.fields.document_category) {
+                        return full.data.communitydocument.fields
+                            .document_category.document_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_category', //_name',
@@ -213,17 +231,19 @@ export default {
         },
         column_sub_category: function () {
             return {
-
                 data: 'data.data.communitydocument.fields.document_sub_category',
                 defaultContent: '',
                 orderable: false,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.communitydocument.fields.document_sub_category) {
-                        return full.data.communitydocument.fields.document_sub_category.document_sub_category_name;
+                    if (
+                        full.data.communitydocument.fields.document_sub_category
+                    ) {
+                        return full.data.communitydocument.fields
+                            .document_sub_category.document_sub_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_sub_category',
@@ -238,15 +258,23 @@ export default {
                 searchable: true,
                 visible: true,
                 mRender: function (row, type, full) {
-                    let links='';
-                    if(full.data.communitydocument.fields.active){
+                    let links = '';
+                    if (full.data.communitydocument.fields.active) {
                         let value = full.data.communitydocument.fields.name;
                         let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                        links+='<span><a href="/private-media/'+ full.data.communitydocument.fields._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                    }else{
+                        links +=
+                            '<span><a href="/private-media/' +
+                            full.data.communitydocument.fields._file +
+                            '" target="_blank">' +
+                            result.text +
+                            '</a> ' +
+                            result.link +
+                            '</span>';
+                    } else {
                         let value = full.data.communitydocument.fields.name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        links += type == 'export' ? value : '<s>' + result + '</s>';
+                        links +=
+                            type == 'export' ? value : '<s>' + result + '</s>';
                     }
                     return links;
                 },
@@ -264,7 +292,7 @@ export default {
                 render: function (row, type, full) {
                     let value = full.data.communitydocument.fields.description;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'description',
             };
@@ -275,11 +303,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -306,7 +334,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_community_document(this.documentId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_community_document(
+                            this.documentId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -316,8 +347,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -325,84 +356,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue
index 446591b2..6aa931ad 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue
@@ -2,17 +2,18 @@
     <div id="communityHistory">
         <modal
             transition="modal fade"
-            :title="'Community C'+ communityId +' - History'"
+            :title="'Community C' + communityId + ' - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'C'+communityId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'Community'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'C' + communityId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'Community'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -51,7 +54,7 @@ import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
 
 export default {
-    name: 'communityHistory',
+    name: 'CommunityHistory',
     components: {
         modal,
         alert,
@@ -70,8 +73,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -109,16 +111,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.community.fields.community_number) {
-                        return full.data.community.fields.community_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.community.fields.community_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "C"+full.data.community.pk+'-'+full.revision_sequence;
+                        return (
+                            'C' +
+                            full.data.community.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -152,7 +162,6 @@ export default {
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -165,7 +174,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -178,7 +186,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -211,19 +218,26 @@ export default {
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.community.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.communitypublishingstatus !== undefined &&
-                        full.data.community.fields.processing_status === "active"
-                    )
-                    {
-                        let public_status = full.data.communitypublishingstatus.fields.community_public ? "public" : "private";
-                        return full.data.community.fields.processing_status + " - " + public_status;
+                    if (
+                        full.data.communitypublishingstatus !== undefined &&
+                        full.data.community.fields.processing_status ===
+                            'active'
+                    ) {
+                        let public_status = full.data.communitypublishingstatus
+                            .fields.community_public
+                            ? 'public'
+                            : 'private';
+                        return (
+                            full.data.community.fields.processing_status +
+                            ' - ' +
+                            public_status
+                        );
                     }
                     return full.data.community.fields.processing_status;
                 },
@@ -232,7 +246,6 @@ export default {
         },
         column_comment: function () {
             return {
-
                 data: 'data.data.community.fields.comment',
                 defaultContent: '',
                 orderable: false,
@@ -242,7 +255,7 @@ export default {
                     //return full.data.community.fields.comment;
                     let value = full.data.community.fields.comment;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'comment',
             };
@@ -253,11 +266,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -283,7 +296,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_community(this.communityId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_community(
+                            this.communityId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -293,8 +309,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -302,65 +318,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
index 4e4d9a4e..e877c339 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
@@ -1,139 +1,274 @@
 <template lang="html">
     <div id="rename-community">
-        <modal transition="modal fade" @ok="ok()" @cancel="close" :title="title" extraLarge id="rename-community-modal">
+        <modal
+            id="rename-community-modal"
+            transition="modal fade"
+            :title="title"
+            extra-large
+            @ok="ok()"
+            @cancel="close"
+        >
             <div class="container-fluid">
                 <div class="row">
-                    <alert type="primary" class="d-flex align-items-center py-1 mb-3">
-                        <div class="float-start pe-3"><span class="align-middle"><i
-                                    class="bi bi-info-circle-fill text-primary fs-4"></i></span></div>
+                    <alert
+                        type="primary"
+                        class="d-flex align-items-center py-1 mb-3"
+                    >
+                        <div class="float-start pe-3">
+                            <span class="align-middle"
+                                ><i
+                                    class="bi bi-info-circle-fill text-primary fs-4"
+                                ></i
+                            ></span>
+                        </div>
                         <ul class="list-group list-group-flush">
-                            <li class="list-group-item bg-transparent">All fields, document and threats will be
-                                copied from <span class="fw-bold">{{
-                                    species_community_original.community_number }} -
-                                    {{ species_community_original.taxonomy_details.community_name }}</span> to
-                                the new community record</li>
-                            <li class="list-group-item bg-transparent">Please modify the taxonomy details for
-                                the new community then click 'Finalise Rename Community' </li>
-                            <li class="list-group-item bg-transparent"><span class="fw-bold">{{
-                                species_community_original.community_number }} -
-                                    {{ species_community_original.taxonomy_details.community_name }}</span> will
-                                be made historical but may be reopened later if required</li>
+                            <li class="list-group-item bg-transparent">
+                                All fields, document and threats will be copied
+                                from
+                                <span class="fw-bold"
+                                    >{{
+                                        species_community_original.community_number
+                                    }}
+                                    -
+                                    {{
+                                        species_community_original
+                                            .taxonomy_details.community_name
+                                    }}</span
+                                >
+                                to the new community record
+                            </li>
+                            <li class="list-group-item bg-transparent">
+                                Please modify the taxonomy details for the new
+                                community then click 'Finalise Rename Community'
+                            </li>
+                            <li class="list-group-item bg-transparent">
+                                <span class="fw-bold"
+                                    >{{
+                                        species_community_original.community_number
+                                    }}
+                                    -
+                                    {{
+                                        species_community_original
+                                            .taxonomy_details.community_name
+                                    }}</span
+                                >
+                                will be made historical but may be reopened
+                                later if required
+                            </li>
                         </ul>
                     </alert>
                 </div>
                 <div class="row">
-                    <FormSection v-if="new_community" :formCollapse="false" label="New Community Taxonomy Information"
-                        Index="new-community">
-                        <form class="form-horizontal" name="rename-community-form">
-                            <alert v-if="errors" type="danger"><strong>{{ errors }}</strong></alert>
+                    <FormSection
+v-if="new_community" :form-collapse="false" label="New Community Taxonomy Information"
+                        Index="new-community"
+                    >
+                        <form
+                            class="form-horizontal"
+                            name="rename-community-form"
+                        >
+                            <alert v-if="errors" type="danger"
+                                ><strong>{{ errors }}</strong></alert
+                            >
                             <div class="row border-bottom mb-4 pb-3">
-                                <label for="" class="col-sm-3 control-label fw-bold"></label>
+                                <label
+                                    for=""
+                                    class="col-sm-3 control-label fw-bold"
+                                ></label>
                                 <div class="col-sm-6">
-                                    <button class="btn btn-primary float-end" @click.prevent="resetForm">
-                                        Reset form</button>
+                                    <button
+                                        class="btn btn-primary float-end"
+                                        @click.prevent="resetForm"
+                                    >
+                                        Reset form
+                                    </button>
                                 </div>
                                 <div class="col-sm-3">
-                                    <button class="btn btn-primary w-100"
-                                        @click.prevent="populateFromOriginalCommunity">
-                                        Populate all from {{ species_community_original.community_number }}</button>
+                                    <button
+                                        class="btn btn-primary w-100"
+                                        @click.prevent="
+                                            populateFromOriginalCommunity
+                                        "
+                                    >
+                                        Populate all from
+                                        {{
+                                            species_community_original.community_number
+                                        }}
+                                    </button>
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label fw-bold">Community Name: <span
-                                        class="text-danger">*</span></label>
+                                <label
+                                    for=""
+                                    class="col-sm-3 control-label fw-bold"
+                                    >Community Name:
+                                    <span class="text-danger">*</span></label
+                                >
                                 <div class="col-sm-6">
-                                    <textarea class="form-control" rows="1" id="community_name" ref="community_name"
-                                        placeholder="" v-model="new_community.taxonomy_details.community_name" />
+                                    <textarea
+id="community_name" ref="community_name" v-model="new_community.taxonomy_details.community_name" class="form-control"
+                                        rows="1" placeholder="" />
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label fw-bold">Community ID: <span
-                                        class="text-danger">*</span></label>
+                                <label
+                                    for=""
+                                    class="col-sm-3 control-label fw-bold"
+                                    >Community ID:
+                                    <span class="text-danger">*</span></label
+                                >
                                 <div class="col-sm-6">
-                                    <input type="text" class="form-control" id="community_migrated_id"
-                                        ref="community_migrated_id" placeholder=""
-                                        v-model="new_community.taxonomy_details.community_migrated_id" />
+                                    <input
+id="community_migrated_id" ref="community_migrated_id" v-model="new_community.taxonomy_details.community_migrated_id"
+                                        type="text"
+                                        class="form-control"
+                                        placeholder="" />
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label">Community Description:</label>
+                                <label for="" class="col-sm-3 control-label"
+                                    >Community Description:</label
+                                >
                                 <div class="col-sm-6">
-                                    <textarea class="form-control" rows="2" id="community_description" placeholder=""
-                                        v-model="new_community.taxonomy_details.community_description" />
+                                    <textarea
+id="community_description" v-model="new_community.taxonomy_details.community_description" class="form-control" rows="2"
+                                        placeholder="" />
                                 </div>
                                 <div class="col-sm-3">
-                                    <button v-if="species_community_original.taxonomy_details.community_description"
+                                    <button
+v-if="species_community_original.taxonomy_details.community_description"
                                         class="btn btn-primary w-100"
-                                        @click.prevent="new_community.taxonomy_details.community_description = species_community_original.taxonomy_details.community_description;">
-                                        Populate from {{ species_community_original.community_number }}</button>
+                                        @click.prevent="
+                                            new_community.taxonomy_details.community_description =
+                                                species_community_original.taxonomy_details.community_description
+                                        "
+                                    >
+                                        Populate from
+                                        {{
+                                            species_community_original.community_number
+                                        }}
+                                    </button>
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label">Previous Name:</label>
+                                <label for="" class="col-sm-3 control-label"
+                                    >Previous Name:</label
+                                >
                                 <div class="col-sm-6">
-                                    <textarea class="form-control" id="community_previous_name" placeholder=""
-                                        v-model="new_community.taxonomy_details.previous_name" />
+                                    <textarea
+id="community_previous_name" v-model="new_community.taxonomy_details.previous_name" class="form-control"
+                                        placeholder="" />
                                 </div>
                                 <div class="col-sm-3">
-                                    <button v-if="species_community_original.taxonomy_details.previous_name"
+                                    <button
+v-if="species_community_original.taxonomy_details.previous_name"
                                         class="btn btn-primary w-100"
-                                        @click.prevent="new_community.taxonomy_details.previous_name = species_community_original.taxonomy_details.previous_name;">
-                                        Populate from {{ species_community_original.community_number }}</button>
+                                        @click.prevent="
+                                            new_community.taxonomy_details.previous_name =
+                                                species_community_original.taxonomy_details.previous_name
+                                        "
+                                    >
+                                        Populate from
+                                        {{
+                                            species_community_original.community_number
+                                        }}
+                                    </button>
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label">Name Authority:</label>
+                                <label for="" class="col-sm-3 control-label"
+                                    >Name Authority:</label
+                                >
                                 <div class="col-sm-6">
-                                    <textarea rows="1" class="form-control" id="name_authority" placeholder=""
-                                        v-model="new_community.taxonomy_details.name_authority" />
+                                    <textarea
+id="name_authority" v-model="new_community.taxonomy_details.name_authority" rows="1" class="form-control"
+                                        placeholder="" />
                                 </div>
                                 <div class="col-sm-3">
-                                    <button v-if="species_community_original.taxonomy_details.name_authority"
+                                    <button
+v-if="species_community_original.taxonomy_details.name_authority"
                                         class="btn btn-primary w-100"
-                                        @click.prevent="new_community.taxonomy_details.name_authority = species_community_original.taxonomy_details.name_authority;">
-                                        Populate from {{ species_community_original.community_number }}</button>
+                                        @click.prevent="
+                                            new_community.taxonomy_details.name_authority =
+                                                species_community_original.taxonomy_details.name_authority
+                                        "
+                                    >
+                                        Populate from
+                                        {{
+                                            species_community_original.community_number
+                                        }}
+                                    </button>
                                 </div>
                             </div>
                             <div class="row mb-3">
-                                <label for="" class="col-sm-3 control-label">Name Comments:</label>
+                                <label for="" class="col-sm-3 control-label"
+                                    >Name Comments:</label
+                                >
                                 <div class="col-sm-6">
-                                    <textarea class="form-control" id="community_comment" placeholder=""
-                                        v-model="new_community.taxonomy_details.name_comments" />
+                                    <textarea
+id="community_comment" v-model="new_community.taxonomy_details.name_comments" class="form-control"
+                                        placeholder="" />
                                 </div>
                                 <div class="col-sm-3">
-                                    <button v-if="species_community_original.taxonomy_details.name_comments"
+                                    <button
+v-if="species_community_original.taxonomy_details.name_comments"
                                         class="btn btn-primary w-100"
-                                        @click.prevent="new_community.taxonomy_details.name_comments = species_community_original.taxonomy_details.name_comments;">
-                                        Populate from {{ species_community_original.community_number }}</button>
+                                        @click.prevent="
+                                            new_community.taxonomy_details.name_comments =
+                                                species_community_original.taxonomy_details.name_comments
+                                        "
+                                    >
+                                        Populate from
+                                        {{
+                                            species_community_original.community_number
+                                        }}
+                                    </button>
                                 </div>
                             </div>
                             <div class="row mb-2">
-                                <div class="col-sm-3">
-                                </div>
+                                <div class="col-sm-3"></div>
                                 <div class="col-sm-9">
-                                    <button class="btn btn-primary float-end mt-2"
-                                        @click.prevent="finaliseRenameCommunity"
-                                        :disabled="!new_community.taxonomy_details.community_name || !new_community.taxonomy_details.community_migrated_id"><i
-                                            class="bi bi-check2-circle"></i> Finalise
-                                        Rename Community<template v-if="finaliseCommunityLoading"> <span
-                                                class="spinner-border spinner-border-sm" role="status"
-                                                aria-hidden="true"></span>
-                                            <span class="visually-hidden">Loading...</span></template></button>
+                                    <button
+                                        class="btn btn-primary float-end mt-2"
+                                        :disabled="!new_community.taxonomy_details.community_name || !new_community.taxonomy_details.community_migrated_id"
+                                        @click.prevent="finaliseRenameCommunity"><i
+                                    >
+                                        <i class="bi bi-check2-circle"></i>
+                                        Finalise Rename Community<template
+                                            v-if="finaliseCommunityLoading"
+                                        >
+                                            <span
+                                                class="spinner-border spinner-border-sm"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            ></template
+                                        >
+                                    </button>
                                 </div>
                             </div>
                         </form>
-
                     </FormSection>
-                    <FormSection :formCollapse="false"
+                    <FormSection
+                        :form-collapse="false"
                         :label="`Original Community - ${species_community_original.community_number} - ${species_community_original.taxonomy_details.community_name}`"
-                        Index="original-community">
+                        Index="original-community"
+                    >
                         <div>
                             <div class="col-md-12">
-                                <FormSpeciesCommunities v-if="species_community_original" ref="rename_community"
-                                    :species_community_original="species_community_original"
-                                    :species_community="species_community_original" id="rename_community"
-                                    :is_internal="true" :is_readonly="true" :rename_species="true"> // rename=true
-                                    used to make only taxon
+                                <FormSpeciesCommunities
+v-if="species_community_original" id="rename_community"
+                                    ref="rename_community"
+                                    :species_community_original="
+                                        species_community_original
+                                    " :species_community="species_community_original"
+                                    :is_internal="true"
+                                    :is_readonly="true"
+                                    :rename_species="true"
+                                >
+                                    // rename=true used to make only taxon
                                     select editable on form
                                 </FormSpeciesCommunities>
                             </div>
@@ -141,20 +276,21 @@
                     </FormSection>
                 </div>
             </div>
-            <div slot="footer">
+            <template #footer>
+<div >
                 <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
             </div>
+</template>
         </modal>
     </div>
 </template>
 
 <script>
-
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import FormSpeciesCommunities from '@/components/form_species_communities.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-import { api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import FormSpeciesCommunities from '@/components/form_species_communities.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
+import { api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'CommunityRename',
@@ -167,11 +303,11 @@ export default {
     props: {
         species_community_original: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -180,7 +316,15 @@ export default {
             isModalOpen: false,
             finaliseCommunityLoading: false,
             errors: null,
-        }
+        };
+    },
+    computed: {
+        original_community_display: function () {
+            return `${this.species_community_original.community_number} - ${this.species_community_original.taxonomy_details.community_name}`;
+        },
+        title: function () {
+            return `Rename Community ${this.original_community_display}`;
+        },
     },
     watch: {
         isModalOpen: function (val) {
@@ -200,31 +344,30 @@ export default {
             }
         },
     },
-    computed: {
-        original_community_display: function () {
-            return `${this.species_community_original.community_number} - ${this.species_community_original.taxonomy_details.community_name}`;
-        },
-        title: function () {
-            return `Rename Community ${this.original_community_display}`;
-        },
-    },
     methods: {
         resetForm: function () {
             this.new_community.taxonomy_details.community_name = '';
             this.new_community.taxonomy_details.community_migrated_id = '';
             this.new_community.taxonomy_details.community_description = '';
-            this.new_community.taxonomy_details.previous_name = this.species_community_original.taxonomy_details.community_name;
+            this.new_community.taxonomy_details.previous_name =
+                this.species_community_original.taxonomy_details.community_name;
             this.new_community.taxonomy_details.name_authority = '';
             this.new_community.taxonomy_details.name_comments = '';
             this.$refs.community_name.focus();
         },
         populateFromOriginalCommunity: function () {
-            this.new_community.taxonomy_details.community_name = this.species_community_original.taxonomy_details.community_name;
-            this.new_community.taxonomy_details.community_migrated_id = this.species_community_original.taxonomy_details.community_migrated_id;
-            this.new_community.taxonomy_details.community_description = this.species_community_original.taxonomy_details.community_description;
-            this.new_community.taxonomy_details.previous_name = this.species_community_original.taxonomy_details.previous_name;
-            this.new_community.taxonomy_details.name_authority = this.species_community_original.taxonomy_details.name_authority;
-            this.new_community.taxonomy_details.name_comments = this.species_community_original.taxonomy_details.name_comments;
+            this.new_community.taxonomy_details.community_name =
+                this.species_community_original.taxonomy_details.community_name;
+            this.new_community.taxonomy_details.community_migrated_id =
+                this.species_community_original.taxonomy_details.community_migrated_id;
+            this.new_community.taxonomy_details.community_description =
+                this.species_community_original.taxonomy_details.community_description;
+            this.new_community.taxonomy_details.previous_name =
+                this.species_community_original.taxonomy_details.previous_name;
+            this.new_community.taxonomy_details.name_authority =
+                this.species_community_original.taxonomy_details.name_authority;
+            this.new_community.taxonomy_details.name_comments =
+                this.species_community_original.taxonomy_details.name_comments;
             this.$refs.community_name.focus();
         },
         close: function () {
@@ -232,10 +375,13 @@ export default {
         },
         finaliseRenameCommunity: function () {
             let vm = this;
-            if (this.new_community.taxonomy_details.community_name === this.species_community_original.taxonomy_details.community_name) {
+            if (
+                this.new_community.taxonomy_details.community_name ===
+                this.species_community_original.taxonomy_details.community_name
+            ) {
                 swal.fire({
                     title: `Community name must be different from the original community`,
-                    icon: "error",
+                    icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
@@ -245,10 +391,14 @@ export default {
                 });
                 return;
             }
-            if (this.new_community.taxonomy_details.community_migrated_id === this.species_community_original.taxonomy_details.community_migrated_id) {
+            if (
+                this.new_community.taxonomy_details.community_migrated_id ===
+                this.species_community_original.taxonomy_details
+                    .community_migrated_id
+            ) {
                 swal.fire({
                     title: `Community ID must be different from the original community`,
-                    icon: "error",
+                    icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
@@ -261,7 +411,7 @@ export default {
             swal.fire({
                 title: `Rename Community`,
                 text: `Are you sure you want to rename community ${this.species_community_original.taxonomy_details.community_name} to ${this.new_community.taxonomy_details.community_name}?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Rename Community',
                 reverseButtons: true,
@@ -269,42 +419,59 @@ export default {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
-            }).then((swalresult) => {
-                vm.finaliseCommunityLoading = true;
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.rename_community(vm.species_community_original.id), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(vm.new_community.taxonomy_details),
-                    })
-                        .then(async (response) => {
-                            console.log(response);
-                            if (response.status === 200) {
-                                return response.json();
-                            } else {
-                                throw new Error('Failed to rename community');
+            })
+                .then((swalresult) => {
+                    vm.finaliseCommunityLoading = true;
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.rename_community(
+                                vm.species_community_original.id
+                            ),
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify(
+                                    vm.new_community.taxonomy_details
+                                ),
                             }
-                        })
-                        .then(new_community_json => {
-                            console.log(new_community_json);
-                            vm.$router.push({
-                                name: 'internal-species-communities',
-                                params: { species_community_id: new_community_json.id },
-                                query: { group_type_name: new_community_json.group_type },
+                        )
+                            .then(async (response) => {
+                                console.log(response);
+                                if (response.status === 200) {
+                                    return response.json();
+                                } else {
+                                    throw new Error(
+                                        'Failed to rename community'
+                                    );
+                                }
+                            })
+                            .then((new_community_json) => {
+                                console.log(new_community_json);
+                                vm.$router.push({
+                                    name: 'internal-species-communities',
+                                    params: {
+                                        species_community_id:
+                                            new_community_json.id,
+                                    },
+                                    query: {
+                                        group_type_name:
+                                            new_community_json.group_type,
+                                    },
+                                });
+                                vm.$router.go();
+                                vm.isModalOpen = false;
+                            })
+                            .catch(async (response) => {
+                                this.errors = await response.json();
                             });
-                            vm.$router.go();
-                            vm.isModalOpen = false;
-                        })
-                        .catch(async (response) => {
-                            this.errors = await response.json();
-                        });
-                }
-            }).finally(() => {
-                vm.finaliseCommunityLoading = false;
-            });
+                    }
+                })
+                .finally(() => {
+                    vm.finaliseCommunityLoading = false;
+                });
         },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue
index 04fa46c3..d9f336ec 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue
@@ -2,17 +2,18 @@
     <div id="conservationThreatHistory">
         <modal
             transition="modal fade"
-            :title="'Conservation Threat T' + threatId + ' - History ' "
+            :title="'Conservation Threat T' + threatId + ' - History '"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'T'+threatId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'ConservationThreat'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'T' + threatId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'ConservationThreat'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -104,16 +107,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.conservationthreat.fields.threat_number) {
-                        return full.data.conservationthreat.fields.threat_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.conservationthreat.fields.threat_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "T"+full.data.conservationthreat.pk+'-'+full.revision_sequence;
+                        return (
+                            'T' +
+                            full.data.conservationthreat.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -141,14 +152,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.conservationthreat.fields.threat_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.conservationthreat.fields.threat_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'threat_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -161,7 +175,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -174,7 +187,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -193,10 +205,11 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.conservationthreat.fields.threat_category) {
-                        return full.data.conservationthreat.fields.threat_category.name;
+                    if (full.data.conservationthreat.fields.threat_category) {
+                        return full.data.conservationthreat.fields
+                            .threat_category.name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'threat_category', //_name',
@@ -213,7 +226,7 @@ export default {
                 render: function (row, type, full) {
                     let value = full.data.conservationthreat.fields.comment;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'comment',
             };
@@ -224,11 +237,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -253,7 +266,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_conservation_threat(this.threatId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_conservation_threat(
+                            this.threatId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -263,8 +279,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -272,84 +288,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue b/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
index d099d635..a223c08a 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
@@ -1,53 +1,122 @@
 <template>
-    <div class="container" id="internalDash">
-        <ul class="nav nav-pills" id="pills-tab" role="tablist">
+    <div id="internalDash" class="container">
+        <ul id="pills-tab" class="nav nav-pills" role="tablist">
             <li class="nav-item">
-                <a class="nav-link" id="pills-flora-tab" data-bs-toggle="pill" href="#pills-flora" role="tab"
-                    aria-controls="pills-flora" aria-selected="true" @click="set_active_tab('flora')">Flora</a>
+                <a
+                    id="pills-flora-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-flora"
+                    role="tab"
+                    aria-controls="pills-flora"
+                    aria-selected="true"
+                    @click="set_active_tab('flora')"
+                    >Flora</a
+                >
             </li>
             <li class="nav-item">
-                <a class="nav-link" id="pills-fauna-tab" data-bs-toggle="pill" href="#pills-fauna" role="tab"
-                    aria-controls="pills-fauna" aria-selected="false" @click="set_active_tab('fauna')">Fauna</a>
+                <a
+                    id="pills-fauna-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-fauna"
+                    role="tab"
+                    aria-controls="pills-fauna"
+                    aria-selected="false"
+                    @click="set_active_tab('fauna')"
+                    >Fauna</a
+                >
             </li>
             <li class="nav-item">
-                <a class="nav-link" id="pills-community-tab" data-bs-toggle="pill" href="#pills-community" role="tab"
-                    aria-controls="pills-community" aria-selected="false"
-                    @click="set_active_tab('community')">Communities</a>
+                <a
+                    id="pills-community-tab"
+                    class="nav-link"
+                    data-bs-toggle="pill"
+                    href="#pills-community"
+                    role="tab"
+                    aria-controls="pills-community"
+                    aria-selected="false"
+                    @click="set_active_tab('community')"
+                    >Communities</a
+                >
             </li>
         </ul>
-        <div class="tab-content" id="pills-tabContent">
-            <div class="tab-pane" id="pills-flora" role="tabpanel" aria-labelledby="pills-flora-tab">
-                <FormSection :formCollapse="false" label="Flora" Index="flora">
-                    <SpeciesFloraDashTable v-if="isFlora" ref="flora_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_url" :profile="profile" />
+        <div id="pills-tabContent" class="tab-content">
+            <div
+                id="pills-flora"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-flora-tab"
+            >
+                <FormSection :form-collapse="false" label="Flora" Index="flora">
+                    <SpeciesFloraDashTable
+                        v-if="isFlora"
+                        ref="flora_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_url"
+                        :profile="profile"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-fauna" role="tabpanel" aria-labelledby="pills-fauna-tab">
-                <FormSection :formCollapse="false" label="Fauna" Index="fauna">
-                    <SpeciesFaunaDashTable v-if="isFauna" ref="fauna_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="species_url" :profile="profile" />
+            <div
+                id="pills-fauna"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-fauna-tab"
+            >
+                <FormSection :form-collapse="false" label="Fauna" Index="fauna">
+                    <SpeciesFaunaDashTable
+                        v-if="isFauna"
+                        ref="fauna_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="species_url"
+                        :profile="profile"
+                    />
                 </FormSection>
             </div>
-            <div class="tab-pane" id="pills-community" role="tabpanel" aria-labelledby="pills-community-tab">
-                <FormSection :formCollapse="false" label="Community" Index="community">
-                    <CommunitiesDashTable v-if="isCommunity" ref="community_table" level="internal"
-                        :group_type_name="group_name" :group_type_id="getGroupId" :url="community_url" :profile="profile" />
+            <div
+                id="pills-community"
+                class="tab-pane"
+                role="tabpanel"
+                aria-labelledby="pills-community-tab"
+            >
+                <FormSection
+                    :form-collapse="false"
+                    label="Community"
+                    Index="community"
+                >
+                    <CommunitiesDashTable
+                        v-if="isCommunity"
+                        ref="community_table"
+                        level="internal"
+                        :group_type_name="group_name"
+                        :group_type_id="getGroupId"
+                        :url="community_url"
+                        :profile="profile"
+                    />
                 </FormSection>
             </div>
         </div>
     </div>
 </template>
 <script>
-import SpeciesFloraDashTable from '@common-utils/species_flora_dashboard.vue'
-import SpeciesFaunaDashTable from '@common-utils/species_fauna_dashboard.vue'
-import CommunitiesDashTable from '@common-utils/communities_dashboard.vue'
-import FormSection from '@/components/forms/section_toggle.vue'
-import {
-    api_endpoints,
-}
-    from '@/utils/hooks'
+import SpeciesFloraDashTable from '@common-utils/species_flora_dashboard.vue';
+import SpeciesFaunaDashTable from '@common-utils/species_fauna_dashboard.vue';
+import CommunitiesDashTable from '@common-utils/communities_dashboard.vue';
+import FormSection from '@/components/forms/section_toggle.vue';
+import { api_endpoints } from '@/utils/hooks';
 export default {
     name: 'InternalSpeciesCommunitiesDashboard',
+    components: {
+        SpeciesFloraDashTable,
+        SpeciesFaunaDashTable,
+        CommunitiesDashTable,
+        FormSection,
+    },
     data() {
         return {
             group_types: [],
@@ -55,13 +124,7 @@ export default {
             species_url: api_endpoints.species_paginated_internal,
             community_url: api_endpoints.communities_paginated_internal,
             profile: null,
-        }
-    },
-    components: {
-        SpeciesFloraDashTable,
-        SpeciesFaunaDashTable,
-        CommunitiesDashTable,
-        FormSection,
+        };
     },
     computed: {
         isFlora: function () {
@@ -79,52 +142,58 @@ export default {
                     return this.group_types[i].id;
                 }
             }
-        }
+        },
+    },
+    created: function () {
+        fetch(api_endpoints.group_types_dict).then(
+            async (response) => {
+                this.group_types = await response.json();
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+        this.fetchProfile();
+    },
+    mounted: function () {
+        chevron_toggle.init();
     },
     methods: {
         set_active_tab: function (group_name) {
             this.group_name = group_name;
-            if(!this.profile || !this.profile.area_of_interest){
+            if (!this.profile || !this.profile.area_of_interest) {
                 localStorage.setItem('speciesCommunitiesActiveTab', group_name);
             }
-            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]')
-            let tab = bootstrap.Tab.getInstance(elem)
-            if (!tab)
-                tab = new bootstrap.Tab(elem)
-            tab.show()
+            let elem = $('#pills-tab a[href="#pills-' + group_name + '"]');
+            let tab = bootstrap.Tab.getInstance(elem);
+            if (!tab) tab = new bootstrap.Tab(elem);
+            tab.show();
         },
         fetchProfile: function () {
             let vm = this;
-            fetch(api_endpoints.profile).then(async (response) => {
-
-                vm.profile = await response.json();
-                vm.$nextTick(() => {
-                    let speciesCommunitiesActiveTab = localStorage.getItem('speciesCommunitiesActiveTab')
-                    if (vm.profile && vm.profile.area_of_interest) {
-                        vm.set_active_tab(vm.profile.area_of_interest);
-                        return;
-                    }
-                    if(speciesCommunitiesActiveTab === null) {
-                        vm.set_active_tab('flora');
-                    } else {
-                        vm.set_active_tab(speciesCommunitiesActiveTab);
-                    }
-                })
-            }, (error) => {
-                console.log(error);
-            });
-        }
-    },
-    created: function () {
-        fetch(api_endpoints.group_types_dict).then(async (response) => {
-            this.group_types = await response.json();
-        }, (error) => {
-            console.log(error);
-        });
-        this.fetchProfile();
-    },
-    mounted: function () {
-        chevron_toggle.init();
+            fetch(api_endpoints.profile).then(
+                async (response) => {
+                    vm.profile = await response.json();
+                    vm.$nextTick(() => {
+                        let speciesCommunitiesActiveTab = localStorage.getItem(
+                            'speciesCommunitiesActiveTab'
+                        );
+                        if (vm.profile && vm.profile.area_of_interest) {
+                            vm.set_active_tab(vm.profile.area_of_interest);
+                            return;
+                        }
+                        if (speciesCommunitiesActiveTab === null) {
+                            vm.set_active_tab('flora');
+                        } else {
+                            vm.set_active_tab(speciesCommunitiesActiveTab);
+                        }
+                    });
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
+        },
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
index 92c21688..f20f17ec 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
@@ -1,35 +1,99 @@
 <template lang="html">
     <div id="makePublic">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large id="make-public-modal">
+        <modal
+            id="make-public-modal"
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="makePublicForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="row mb-3">
-                            <label for="distribution_publishing" class="col-sm-6 control-label">Distribution: </label>
+                            <label
+                                for="distribution_publishing"
+                                class="col-sm-6 control-label"
+                                >Distribution:
+                            </label>
                             <div class="col-sm-6">
-                                <label for="distribution_publishing" class="me-2">Private</label>
-                                <input :disabled="!isActive" type="radio" :value="false" class="form-check-input me-2"
+                                <label
+                                    for="distribution_publishing"
+                                    class="me-2"
+                                    >Private</label
+                                >
+                                <input
                                     id="distribution_publishing"
-                                    v-model="species_community.publishing_status.distribution_public">
-                                <label for="distribution_publishing" class="me-2">Public</label>
-                                <input :disabled="!isActive" type="radio" :value="true" class="form-check-input"
+                                    v-model="
+                                        species_community.publishing_status
+                                            .distribution_public
+                                    "
+                                    :disabled="!isActive"
+                                    type="radio"
+                                    :value="false"
+                                    class="form-check-input me-2"
+                                />
+                                <label
+                                    for="distribution_publishing"
+                                    class="me-2"
+                                    >Public</label
+                                >
+                                <input
                                     id="distribution_publishing"
-                                    v-model="species_community.publishing_status.distribution_public">
+                                    v-model="
+                                        species_community.publishing_status
+                                            .distribution_public
+                                    "
+                                    :disabled="!isActive"
+                                    type="radio"
+                                    :value="true"
+                                    class="form-check-input"
+                                />
                             </div>
                         </div>
                         <div class="row mb-3">
-                            <label for="conservation_status_publishing" class="col-sm-6 control-label">Conservation
-                                Status: </label>
+                            <label
+                                for="conservation_status_publishing"
+                                class="col-sm-6 control-label"
+                                >Conservation Status:
+                            </label>
                             <div class="col-sm-6">
-                                <label for="conservation_status_publishing" class="me-2">Private</label>
-                                <input :disabled="!isActive" type="radio" :value="false" class="form-check-input me-2"
+                                <label
+                                    for="conservation_status_publishing"
+                                    class="me-2"
+                                    >Private</label
+                                >
+                                <input
                                     id="conservation_status_publishing"
-                                    v-model="species_community.publishing_status.conservation_status_public">
-                                <label for="conservation_status_publishing" class="me-2">Public</label>
-                                <input :disabled="!isActive" type="radio" :value="true" class="form-check-input"
+                                    v-model="
+                                        species_community.publishing_status
+                                            .conservation_status_public
+                                    "
+                                    :disabled="!isActive"
+                                    type="radio"
+                                    :value="false"
+                                    class="form-check-input me-2"
+                                />
+                                <label
+                                    for="conservation_status_publishing"
+                                    class="me-2"
+                                    >Public</label
+                                >
+                                <input
                                     id="conservation_status_publishing"
-                                    v-model="species_community.publishing_status.conservation_status_public">
+                                    v-model="
+                                        species_community.publishing_status
+                                            .conservation_status_public
+                                    "
+                                    :disabled="!isActive"
+                                    type="radio"
+                                    :value="true"
+                                    class="form-check-input"
+                                />
                             </div>
                         </div>
                         <!-- <div class="row mb-3">
@@ -47,38 +111,86 @@
                             </div>
                         </div> -->
                         <div class="row mb-3">
-                            <label for="threats_publishing" class="col-sm-6 control-label">Threats: </label>
+                            <label
+                                for="threats_publishing"
+                                class="col-sm-6 control-label"
+                                >Threats:
+                            </label>
                             <div class="col-sm-6">
-                                <label for="threats_publishing" class="me-2">Private</label>
-                                <input :disabled="!isActive" type="radio" :value="false" class="form-check-input me-2"
+                                <label for="threats_publishing" class="me-2"
+                                    >Private</label
+                                >
+                                <input
                                     id="threats_publishing"
-                                    v-model="species_community.publishing_status.threats_public">
-                                <label for="threats_publishing" class="me-2">Public</label>
-                                <input :disabled="!isActive" type="radio" :value="true" class="form-check-input"
+                                    v-model="
+                                        species_community.publishing_status
+                                            .threats_public
+                                    "
+                                    :disabled="!isActive"
+                                    type="radio"
+                                    :value="false"
+                                    class="form-check-input me-2"
+                                />
+                                <label for="threats_publishing" class="me-2"
+                                    >Public</label
+                                >
+                                <input
                                     id="threats_publishing"
-                                    v-model="species_community.publishing_status.threats_public">
+                                    v-model="
+                                        species_community.publishing_status
+                                            .threats_public
+                                    "
+                                    :disabled="!isActive"
+                                    type="radio"
+                                    :value="true"
+                                    class="form-check-input"
+                                />
                             </div>
                         </div>
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <button v-if="updatingPublishing" class="btn btn-primary pull-right" style="margin-top:5px;"
-                    disabled>Submit <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    <span class="visually-hidden">Loading...</span></button>
-                <button v-else class="btn btn-primary" @click.prevent="ok()" :disabled="updatingPublishing">Make
-                    Public</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        v-if="updatingPublishing"
+                        class="btn btn-primary pull-right"
+                        style="margin-top: 5px"
+                        disabled
+                    >
+                        Submit
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
+                    <button
+                        v-else
+                        class="btn btn-primary"
+                        :disabled="updatingPublishing"
+                        @click.prevent="ok()"
+                    >
+                        Make Public
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
     name: 'MakePublic',
     components: {
@@ -88,15 +200,15 @@ export default {
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         species_community_original: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -107,11 +219,11 @@ export default {
             form: null,
             errors: false,
             errorString: '',
-        }
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         showError: function () {
             var vm = this;
@@ -121,63 +233,100 @@ export default {
             return 'Make Public';
         },
         distribution_public: function () {
-            return this.isPublic && this.species_community.publishing_status.distribution_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status.distribution_public
+            );
         },
         conservation_status_public: function () {
-            return this.isPublic && this.species_community.publishing_status.conservation_status_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status
+                    .conservation_status_public
+            );
         },
         conservation_attributes_public: function () {
-            return this.isPublic && this.species_community.publishing_status.conservation_attributes_public;
+            return (
+                this.isPublic &&
+                this.species_community.publishing_status
+                    .conservation_attributes_public
+            );
         },
         isActive: function () {
-            return this.species_community.processing_status === "Active" ? true : false;
+            return this.species_community.processing_status === 'Active'
+                ? true
+                : false;
         },
         isPublic: function () {
-            return this.isActive && this.species_community.publishing_status.species_public ? true : false;
+            return this.isActive &&
+                this.species_community.publishing_status.species_public
+                ? true
+                : false;
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.makePublicForm;
+    },
     methods: {
         updatePublishing(data) {
             let vm = this;
 
             let endpoint = api_endpoints.species;
-            if (this.species_community.group_type === "community") {
+            if (this.species_community.group_type === 'community') {
                 endpoint = api_endpoints.community;
             }
 
-            fetch(helpers.add_endpoint_json(endpoint, (vm.species_community.id + '/update_publishing_status')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: data,
-            }).then(async (response) => {
-                vm.updatingPublishing = false;
-                vm.species_community.publishing_status = await response.json();
-                vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Record has been made public',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            fetch(
+                helpers.add_endpoint_json(
+                    endpoint,
+                    vm.species_community.id + '/update_publishing_status'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                }).then((swalresult) => {
-                    vm.close()
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Publishing settings cannot be updated because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.species_community.publishing_status = helpers.copyObject(vm.species_community_original.publishing_status);
-                vm.updatingPublishing = false;
-            });
+                    body: data,
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingPublishing = false;
+                    vm.species_community.publishing_status =
+                        await response.json();
+                    vm.species_community_original.publishing_status =
+                        helpers.copyObject(
+                            vm.species_community.publishing_status
+                        );
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Record has been made public',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then((swalresult) => {
+                        vm.close();
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Publishing settings cannot be updated because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.species_community.publishing_status = helpers.copyObject(
+                        vm.species_community_original.publishing_status
+                    );
+                    vm.updatingPublishing = false;
+                }
+            );
         },
         ok: function () {
             let vm = this;
@@ -186,32 +335,40 @@ export default {
             //but only if it is active
             if (!vm.isPublic && vm.isActive) {
                 swal.fire({
-                    title: "Make Public",
-                    text: "Are you sure you want to make this record public?",
-                    icon: "question",
+                    title: 'Make Public',
+                    text: 'Are you sure you want to make this record public?',
+                    icon: 'question',
                     showCancelButton: true,
                     confirmButtonText: 'Make Public',
                     customClass: {
                         confirmButton: 'btn btn-primary',
-                        cancelButton: 'btn btn-secondary'
+                        cancelButton: 'btn btn-secondary',
                     },
                     reverseButtons: true,
-                }).then((swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        //send with make public set to true
-                        if (this.species_community.group_type === "community") {
-                            vm.species_community.publishing_status.community_public = true;
+                }).then(
+                    (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            //send with make public set to true
+                            if (
+                                this.species_community.group_type ===
+                                'community'
+                            ) {
+                                vm.species_community.publishing_status.community_public = true;
+                            } else {
+                                vm.species_community.publishing_status.species_public = true;
+                            }
+                            let data = JSON.stringify(
+                                vm.species_community.publishing_status
+                            );
+                            vm.updatePublishing(data);
                         } else {
-                            vm.species_community.publishing_status.species_public = true;
+                            vm.updatingPublishing = false;
                         }
-                        let data = JSON.stringify(vm.species_community.publishing_status)
-                        vm.updatePublishing(data);
-                    } else {
-                        vm.updatingPublishing = false;
+                    },
+                    (error) => {
+                        console.error('Error:', error);
                     }
-                }, (error) => {
-                    console.error('Error:', error);
-                });
+                );
             } else {
                 swal.fire({
                     title: 'Error',
@@ -225,7 +382,7 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             let vm = this;
@@ -233,11 +390,7 @@ export default {
             this.errors = false;
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.makePublicForm;
-    },
-}
+};
 </script>
 
 <style lang="css" scoped>
@@ -258,20 +411,20 @@ export default {
     margin-bottom: 2px;
 }
 
-.nav-item>li>a {
+.nav-item > li > a {
     background-color: yellow !important;
     color: #fff;
 }
 
-.nav-item>li.active>a,
-.nav-item>li.active>a:hover,
-.nav-item>li.active>a:focus {
+.nav-item > li.active > a,
+.nav-item > li.active > a:hover,
+.nav-item > li.active > a:focus {
     color: white;
     background-color: blue;
     border: 1px solid #888888;
 }
 
-.admin>div {
+.admin > div {
     display: inline-block;
     vertical-align: top;
     margin-right: 1em;
@@ -293,15 +446,15 @@ export default {
     background: gray;
 }
 
-.nav-pills>li {
+.nav-pills > li {
     position: relative;
 }
 
-.nav-pills>li>a {
+.nav-pills > li > a {
     display: inline-block;
 }
 
-.nav-pills>li>span {
+.nav-pills > li > span {
     display: none;
     cursor: pointer;
     position: absolute;
@@ -310,7 +463,7 @@ export default {
     color: red;
 }
 
-.nav-pills>li:hover>span {
+.nav-pills > li:hover > span {
     display: inline-block;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue b/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
index 5cd5bd33..cb4450ea 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
@@ -1,29 +1,66 @@
 <template lang="html">
     <div id="proposal-proposed-decline">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" large>
+        <modal
+            transition="modal fade"
+            :title="title"
+            large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="declineForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div class="col-sm-12">
                             <div class="form-group">
                                 <div class="row">
                                     <div class="col-sm-12">
-                                        <label v-if=check_status() class="control-label" for="Name">Details</label>
-                                        <label v-else class="control-label" for="Name">Provide Reason for the proposed
-                                            decline </label>
-                                        <textarea style="width: 70%;" class="form-control" name="reason"
-                                            v-model="decline.reason"></textarea>
+                                        <label
+                                            v-if="check_status()"
+                                            class="control-label"
+                                            for="Name"
+                                            >Details</label
+                                        >
+                                        <label
+                                            v-else
+                                            class="control-label"
+                                            for="Name"
+                                            >Provide Reason for the proposed
+                                            decline
+                                        </label>
+                                        <textarea
+                                            v-model="decline.reason"
+                                            style="width: 70%"
+                                            class="form-control"
+                                            name="reason"
+                                        ></textarea>
                                     </div>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <div class="row">
                                     <div class="col-sm-12">
-                                        <label v-if=check_status() class="control-label" for="Name">CC email</label>
-                                        <label v-else class="control-label" for="Name">Proposed CC email</label>
-                                        <input type="text" style="width: 70%;" class="form-control" name="cc_email"
-                                            v-model="decline.cc_email" />
+                                        <label
+                                            v-if="check_status()"
+                                            class="control-label"
+                                            for="Name"
+                                            >CC email</label
+                                        >
+                                        <label
+                                            v-else
+                                            class="control-label"
+                                            for="Name"
+                                            >Proposed CC email</label
+                                        >
+                                        <input
+                                            v-model="decline.cc_email"
+                                            type="text"
+                                            style="width: 70%"
+                                            class="form-control"
+                                            name="cc_email"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -31,35 +68,62 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <button type="button" v-if="decliningProposal" disabled class="btn btn-primary" @click="ok">Processing
-                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    <span class="visually-hidden">Loading...</span></button>
-                <button type="button" v-else class="btn btn-primary" @click="ok">Ok</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        v-if="decliningProposal"
+                        type="button"
+                        disabled
+                        class="btn btn-primary"
+                        @click="ok"
+                    >
+                        Processing
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
+                    <button
+                        v-else
+                        type="button"
+                        class="btn btn-primary"
+                        @click="ok"
+                    >
+                        Ok
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
-    name: 'Decline-Proposal',
+    name: 'DeclineProposal',
     components: {
         modal,
-        alert
+        alert,
     },
     props: {
         proposal_id: {
             type: Number,
-            required: true
+            required: true,
         },
         processing_status: {
             type: String,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -73,7 +137,7 @@ export default {
             errorString: '',
             successString: '',
             success: false,
-        }
+        };
     },
     computed: {
         showError: function () {
@@ -81,8 +145,15 @@ export default {
             return vm.errors;
         },
         title: function () {
-            return this.processing_status == 'With Approver' ? 'Decline' : 'Proposed Decline';
-        }
+            return this.processing_status == 'With Approver'
+                ? 'Decline'
+                : 'Proposed Decline';
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.declineForm;
+        vm.addFormValidations();
     },
     methods: {
         ok: function () {
@@ -103,11 +174,8 @@ export default {
         },
         check_status: function () {
             let vm = this;
-            if (vm.processing_status == 'With Approver')
-                return true;
-            else
-                return false;
-
+            if (vm.processing_status == 'With Approver') return true;
+            else return false;
         },
         sendData: function () {
             let vm = this;
@@ -115,84 +183,100 @@ export default {
             let decline = JSON.parse(JSON.stringify(vm.decline));
             vm.decliningProposal = true;
             if (vm.processing_status != 'With Approver') {
-                fetch(helpers.add_endpoint_json(api_endpoints.proposals, vm.proposal_id + '/proposed_decline'), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.proposals,
+                        vm.proposal_id + '/proposed_decline'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(decline),
+                    }
+                ).then(
+                    (response) => {
+                        vm.decliningProposal = false;
+                        vm.close();
+                        vm.$emit('refreshFromResponse', response);
+                        vm.$router.push({ path: '/internal' }); //Navigate to dashboard after propose decline.
                     },
-                    body: JSON.stringify(decline),
-                }).then((response) => {
-                    vm.decliningProposal = false;
-                    vm.close();
-                    vm.$emit('refreshFromResponse', response);
-                    vm.$router.push({ path: '/internal' }); //Navigate to dashboard after propose decline.
-                }, (error) => {
-                    vm.errors = true;
-                    vm.decliningProposal = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
-            }
-            else {
-                fetch(helpers.add_endpoint_json(api_endpoints.proposals, vm.proposal_id + '/final_decline'), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
+                    (error) => {
+                        vm.errors = true;
+                        vm.decliningProposal = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
+            } else {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.proposals,
+                        vm.proposal_id + '/final_decline'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(decline),
+                    }
+                ).then(
+                    (response) => {
+                        vm.decliningProposal = false;
+                        vm.close();
+                        vm.$emit('refreshFromResponse', response);
                     },
-                    body: JSON.stringify(decline),
-                }).then((response) => {
-                    vm.decliningProposal = false;
-                    vm.close();
-                    vm.$emit('refreshFromResponse', response);
-                }, (error) => {
-                    vm.errors = true;
-                    vm.decliningProposal = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                    (error) => {
+                        vm.errors = true;
+                        vm.decliningProposal = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
             }
         },
         addFormValidations: function () {
             let vm = this;
             vm.validation_form = $(vm.form).validate({
                 rules: {
-                    reason: "required",
+                    reason: 'required',
                 },
                 messages: {
-                    arrival: "field is required",
-                    departure: "field is required",
-                    campground: "field is required",
-                    campsite: "field is required"
+                    arrival: 'field is required',
+                    departure: 'field is required',
+                    campground: 'field is required',
+                    campsite: 'field is required',
                 },
                 showErrors: function (errorMap, errorList) {
                     $.each(this.validElements(), function (index, element) {
                         var $element = $(element);
-                        $element.attr("data-original-title", "").parents('.form-group').removeClass('has-error');
+                        $element
+                            .attr('data-original-title', '')
+                            .parents('.form-group')
+                            .removeClass('has-error');
                     });
                     // destroy tooltips on valid elements
-                    $("." + this.settings.validClass).tooltip("destroy");
+                    $('.' + this.settings.validClass).tooltip('destroy');
                     // add or update tooltips
                     for (var i = 0; i < errorList.length; i++) {
                         var error = errorList[i];
                         $(error.element)
                             .tooltip({
-                                trigger: "focus"
+                                trigger: 'focus',
                             })
-                            .attr("data-original-title", error.message)
-                            .parents('.form-group').addClass('has-error');
+                            .attr('data-original-title', error.message)
+                            .parents('.form-group')
+                            .addClass('has-error');
                     }
-                }
+                },
             });
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.declineForm;
-        vm.addFormValidations();
-    }
-}
+};
 </script>
 
 <style lang="css">
-input[type=text],
+input[type='text'],
 select {
     padding: 0.375rem 2.25rem 0.375rem 0.75rem;
 }
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
index eb829530..261ddfe2 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
@@ -1,107 +1,259 @@
 <template lang="html">
     <div id="combineSpecies">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" extraLarge
-            id="species-combine-modal">
+        <modal
+            id="species-combine-modal"
+            transition="modal fade"
+            :title="title"
+            extra-large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="combineSpeciesForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div>
                             <div class="col-md-12">
-                                <ul v-if="is_internal" class="nav nav-pills" id="combine-pills-tab" role="tablist">
+                                <ul
+                                    v-if="is_internal"
+                                    id="combine-pills-tab"
+                                    class="nav nav-pills"
+                                    role="tablist"
+                                >
                                     <li class="nav-item">
-                                        <a class="nav-link" id="pills-new-species-tab" data-bs-toggle="pill"
-                                            :data-bs-target="`#${newSpeciesBody}`" :href="'#' + newSpeciesBody"
-                                            role="tab" :aria-controls="newSpeciesBody" aria-selected="true">
-                                            New Species {{
-                                                this.new_combine_species ? this.new_combine_species.species_number : '' }}
+                                        <a
+                                            id="pills-new-species-tab"
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            :data-bs-target="`#${newSpeciesBody}`"
+                                            :href="'#' + newSpeciesBody"
+                                            role="tab"
+                                            :aria-controls="newSpeciesBody"
+                                            aria-selected="true"
+                                        >
+                                            New Species
+                                            {{
+                                                new_combine_species
+                                                    ? new_combine_species.species_number
+                                                    : ''
+                                            }}
                                         </a>
                                     </li>
-                                    <li class="nav-item" v-for="(species, index) in original_species_combine_list"
-                                        :key="'li' + species.id">
-                                        <a class="nav-link" :id="'pills-species-' + index + '-tab'"
-                                            data-bs-toggle="pill" :data-bs-target="'#species-body-' + index"
-                                            :href="'#species-body-' + index" role="tab"
-                                            :aria-controls="'species-body-' + index" aria-selected="false">
-                                            {{ species.species_number }}<span v-if="index > 0" class="ms-2"
-                                                @click.prevent="removeCombineSpecies(species)" :id=index><i
-                                                    class="bi bi-trash3-fill"></i></span>
+                                    <li
+                                        v-for="(
+                                            species, index
+                                        ) in original_species_combine_list"
+                                        :key="'li' + species.id"
+                                        class="nav-item"
+                                    >
+                                        <a
+                                            :id="
+                                                'pills-species-' +
+                                                index +
+                                                '-tab'
+                                            "
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            :data-bs-target="
+                                                '#species-body-' + index
+                                            "
+                                            :href="'#species-body-' + index"
+                                            role="tab"
+                                            :aria-controls="
+                                                'species-body-' + index
+                                            "
+                                            aria-selected="false"
+                                        >
+                                            {{ species.species_number
+                                            }}<span
+                                                v-if="index > 0"
+                                                :id="index"
+                                                class="ms-2"
+                                                @click.prevent="
+                                                    removeCombineSpecies(
+                                                        species
+                                                    )
+                                                "
+                                                ><i
+                                                    class="bi bi-trash3-fill"
+                                                ></i
+                                            ></span>
                                             <!-- can delete the original species except the current original species , so check index>0 -->
                                         </a>
                                     </li>
                                     <li class="nav-item">
-                                        <a class="nav-link" href="#" id="combineSpeciesBtnAdd"
-                                            @click.prevent="addSpeciesToCombine()"><i class="bi bi-window-plus"></i> Add
-                                            Another Species</a>
+                                        <a
+                                            id="combineSpeciesBtnAdd"
+                                            class="nav-link"
+                                            href="#"
+                                            @click.prevent="
+                                                addSpeciesToCombine()
+                                            "
+                                            ><i class="bi bi-window-plus"></i>
+                                            Add Another Species</a
+                                        >
                                     </li>
                                     <li class="nav-item">
-                                        <a class="nav-link" id="finalise-combine" data-bs-toggle="pill"
+                                        <a
+                                            id="finalise-combine"
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
                                             data-bs-target="#finalise-combine-tab-pane"
-                                            href="#finalise-combine-tab-pane" role="tab"
-                                            aria-controls="finalise-combine-tab-pane" aria-selected="false"><i
-                                                class="bi bi-check2-circle"></i>
-                                            Finalise Combine</a>
+                                            href="#finalise-combine-tab-pane"
+                                            role="tab"
+                                            aria-controls="finalise-combine-tab-pane"
+                                            aria-selected="false"
+                                            ><i class="bi bi-check2-circle"></i>
+                                            Finalise Combine</a
+                                        >
                                     </li>
                                 </ul>
-                                <div class="tab-content border p-3" id="combine-pills-tabContent">
-                                    <div class="tab-pane" :id="newSpeciesBody" role="tabpanel"
-                                        aria-labelledby="pills-new-species-tab">
-                                        <SpeciesCombineForm v-if="new_combine_species && new_combine_species.id"
-                                            ref="species_communities_new" :species_community="new_combine_species"
-                                            :original_species_combine_list="original_species_combine_list"
-                                            id="new_combine_species" :is_internal="true" :key="speciesCombineFormKey">
+                                <div
+                                    id="combine-pills-tabContent"
+                                    class="tab-content border p-3"
+                                >
+                                    <div
+                                        :id="newSpeciesBody"
+                                        class="tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="pills-new-species-tab"
+                                    >
+                                        <SpeciesCombineForm
+                                            v-if="
+                                                new_combine_species &&
+                                                new_combine_species.id
+                                            "
+                                            id="new_combine_species"
+                                            ref="species_communities_new"
+                                            :key="speciesCombineFormKey"
+                                            :species_community="
+                                                new_combine_species
+                                            "
+                                            :original_species_combine_list="
+                                                original_species_combine_list
+                                            "
+                                            :is_internal="true"
+                                        >
                                         </SpeciesCombineForm>
                                     </div>
-                                    <div v-for="(species, index) in original_species_combine_list"
-                                        :key="'div' + species.id" class="tab-pane fade" :id="'species-body-' + index"
-                                        role="tabpanel" :aria-labelledby="'pills-species' + index + '-tab'">
-                                        <SpeciesCommunitiesComponent :ref="'species_communities_species' + index"
-                                            :species_community_original="species" :species_community="species"
-                                            :id="'species-' + index" :is_internal="true" :is_readonly="true">
+                                    <div
+                                        v-for="(
+                                            species, index
+                                        ) in original_species_combine_list"
+                                        :id="'species-body-' + index"
+                                        :key="'div' + species.id"
+                                        class="tab-pane fade"
+                                        role="tabpanel"
+                                        :aria-labelledby="
+                                            'pills-species' + index + '-tab'
+                                        "
+                                    >
+                                        <SpeciesCommunitiesComponent
+                                            :id="'species-' + index"
+                                            :ref="
+                                                'species_communities_species' +
+                                                index
+                                            "
+                                            :species_community_original="
+                                                species
+                                            "
+                                            :species_community="species"
+                                            :is_internal="true"
+                                            :is_readonly="true"
+                                        >
                                         </SpeciesCommunitiesComponent>
                                     </div>
-                                    <div v-if="new_combine_species && original_species_combine_list && original_species_combine_list.length > 0"
-                                        class="tab-pane" id="finalise-combine-tab-pane" role="tabpanel"
-                                        aria-labelledby="finalise-combine">
+                                    <div
+                                        v-if="
+                                            new_combine_species &&
+                                            original_species_combine_list &&
+                                            original_species_combine_list.length >
+                                                0
+                                        "
+                                        id="finalise-combine-tab-pane"
+                                        class="tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="finalise-combine"
+                                    >
                                         <p class="border-bottom mb-3">
-                                            <HelpText section_id="species_combine_finalise" />
+                                            <HelpText
+                                                section_id="species_combine_finalise"
+                                            />
                                         </p>
 
                                         <p>
-                                            You are about to combine the following species:
+                                            You are about to combine the
+                                            following species:
                                         </p>
 
                                         <div class="mb-3">
-                                            <li v-for="(species, index) in original_species_combine_list"
-                                                :key="species.id" class="text-secondary mb-3">
+                                            <li
+                                                v-for="(
+                                                    species, index
+                                                ) in original_species_combine_list"
+                                                :key="species.id"
+                                                class="text-secondary mb-3"
+                                            >
                                                 <span
-                                                    class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-2">{{
-                                                        species.species_number }} - {{
-                                                        species.taxonomy_details.scientific_name
-                                                    }}</span>
+                                                    class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-2"
+                                                    >{{
+                                                        species.species_number
+                                                    }}
+                                                    -
+                                                    {{
+                                                        species.taxonomy_details
+                                                            .scientific_name
+                                                    }}</span
+                                                >
                                             </li>
                                         </div>
 
-                                        <p>
-                                            Into the new species:
-                                        </p>
+                                        <p>Into the new species:</p>
 
                                         <div class="border-bottom mb-3 pb-3">
-                                            <span class="badge bg-light text-primary text-capitalize border p-2 fs-6">{{
-                                                new_combine_species.species_number }} <template
-                                                    v-if="new_combine_species.taxonomy_details && new_combine_species.taxonomy_details.scientific_name">-
+                                            <span
+                                                class="badge bg-light text-primary text-capitalize border p-2 fs-6"
+                                                >{{
+                                                    new_combine_species.species_number
+                                                }}
+                                                <template
+                                                    v-if="
+                                                        new_combine_species.taxonomy_details &&
+                                                        new_combine_species
+                                                            .taxonomy_details
+                                                            .scientific_name
+                                                    "
+                                                    >-
                                                     {{
-                                                        new_combine_species.taxonomy_details.scientific_name
-                                                    }}</template></span>
+                                                        new_combine_species
+                                                            .taxonomy_details
+                                                            .scientific_name
+                                                    }}</template
+                                                ></span
+                                            >
                                         </div>
 
-                                        <button class="button btn btn-primary" @click.prevent="ok()"
-                                            :disabled="finalise_combine_loading"><i class="bi bi-check2-circle"></i>
-                                            Finalise
-                                            Combine <template v-if="finalise_combine_loading"><span
-                                                    class="spinner-border spinner-border-sm" role="status"
-                                                    aria-hidden="true"></span>
-                                                <span class="visually-hidden">Loading...</span></template></button>
+                                        <button
+                                            class="button btn btn-primary"
+                                            :disabled="finalise_combine_loading"
+                                            @click.prevent="ok()"
+                                        >
+                                            <i class="bi bi-check2-circle"></i>
+                                            Finalise Combine
+                                            <template
+                                                v-if="finalise_combine_loading"
+                                                ><span
+                                                    class="spinner-border spinner-border-sm"
+                                                    role="status"
+                                                    aria-hidden="true"
+                                                ></span>
+                                                <span class="visually-hidden"
+                                                    >Loading...</span
+                                                ></template
+                                            >
+                                        </button>
                                     </div>
                                 </div>
                             </div>
@@ -110,9 +262,17 @@
                 </div>
             </div>
 
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </template>
         </modal>
 
         <AddCombineSpecies ref="addCombineSpecies"></AddCombineSpecies>
@@ -120,15 +280,15 @@
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import FileField2 from '@/components/forms/filefield.vue'
-import SpeciesCommunitiesComponent from '@/components/form_species_communities.vue'
-import SpeciesCombineForm from '@/components/form_species_combine.vue'
-import AddCombineSpecies from '@/components/common/species_communities/species_combine/add_combine_species.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import FileField2 from '@/components/forms/filefield.vue';
+import SpeciesCommunitiesComponent from '@/components/form_species_communities.vue';
+import SpeciesCombineForm from '@/components/form_species_combine.vue';
+import AddCombineSpecies from '@/components/common/species_communities/species_combine/add_combine_species.vue';
 import HelpText from '@/components/common/help_text.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 
 export default {
     name: 'SpeciesCombine',
@@ -144,11 +304,11 @@ export default {
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -166,23 +326,11 @@ export default {
             form: null,
             errors: false,
             errorString: '',
-        }
-    },
-    watch: {
-        isModalOpen: function (val) {
-            if (val) {
-                this.$nextTick(() => {
-                    // was added to set the first species Tab active but the updated() method overrides it
-                    var firstTabEl = document.querySelector('#combine-pills-tab li:nth-child(1) a')
-                    var firstTab = bootstrap.Tab.getOrCreateInstance(firstTabEl)
-                    firstTab.show()
-                });
-            }
-        },
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         showError: function () {
             var vm = this;
@@ -190,16 +338,39 @@ export default {
         },
         title: function () {
             //return this.processing_status == 'With Approver' ? 'Approve Conservation Status' : 'Propose to approve Conservation Status';
-            return this.new_combine_species != null ? 'Combine Species ' : 'Combine Species';
+            return this.new_combine_species != null
+                ? 'Combine Species '
+                : 'Combine Species';
         },
         species_split_form_url: function () {
             var vm = this;
             return `/api/species/${vm.new_combine_species.id}/species_split_save.json`;
         },
         combine_into_species_scientific_name: function () {
-            return this.new_combine_species.scientific_name ? vm.new_combine_species.scientific_name : '';
+            return this.new_combine_species.scientific_name
+                ? vm.new_combine_species.scientific_name
+                : '';
         },
     },
+    watch: {
+        isModalOpen: function (val) {
+            if (val) {
+                this.$nextTick(() => {
+                    // was added to set the first species Tab active but the updated() method overrides it
+                    var firstTabEl = document.querySelector(
+                        '#combine-pills-tab li:nth-child(1) a'
+                    );
+                    var firstTab =
+                        bootstrap.Tab.getOrCreateInstance(firstTabEl);
+                    firstTab.show();
+                });
+            }
+        },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.combineSpeciesForm;
+    },
     methods: {
         ok: function () {
             let vm = this;
@@ -208,14 +379,16 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             let vm = this;
             vm.removeSpecies(vm.new_combine_species.id);
             vm.new_combine_species = null;
             vm.original_species_combine_list = [];
-            $(this.$refs.occurrence_name_lookup_propose_approve).empty().trigger('change');
+            $(this.$refs.occurrence_name_lookup_propose_approve)
+                .empty()
+                .trigger('change');
             this.isModalOpen = false;
             vm.speciesCombineFormKey += 1;
             this.errors = false;
@@ -226,49 +399,72 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, new_species);
-            const result = await fetch(`/api/species/${new_species.id}/species_split_save.json`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(payload),
-            }).then(async (response) => {
-                return true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            const result = await fetch(
+                `/api/species/${new_species.id}/species_split_save.json`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.submitSpeciesCombine = false;
-                vm.saveError = true;
-                return false;
-            });
+                    body: JSON.stringify(payload),
+                }
+            ).then(
+                async (response) => {
+                    return true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitSpeciesCombine = false;
+                    vm.saveError = true;
+                    return false;
+                }
+            );
             return result;
         },
         can_submit: function () {
             let vm = this;
-            let blank_fields = []
-            if (vm.new_combine_species.taxonomy_id == null || vm.new_combine_species.taxonomy_id == '') {
-                blank_fields.push(' Species ' + vm.new_combine_species.species_number + ' Scientific Name is missing')
+            let blank_fields = [];
+            if (
+                vm.new_combine_species.taxonomy_id == null ||
+                vm.new_combine_species.taxonomy_id == ''
+            ) {
+                blank_fields.push(
+                    ' Species ' +
+                        vm.new_combine_species.species_number +
+                        ' Scientific Name is missing'
+                );
             }
-            if (vm.new_combine_species.distribution.distribution == null || vm.new_combine_species.distribution.distribution == '') {
-                blank_fields.push(' Distribution is missing')
+            if (
+                vm.new_combine_species.distribution.distribution == null ||
+                vm.new_combine_species.distribution.distribution == ''
+            ) {
+                blank_fields.push(' Distribution is missing');
             }
-            if (vm.new_combine_species.regions == null || vm.new_combine_species.regions == '' || vm.new_combine_species.regions.length == 0) {
-                blank_fields.push(' Region is missing')
+            if (
+                vm.new_combine_species.regions == null ||
+                vm.new_combine_species.regions == '' ||
+                vm.new_combine_species.regions.length == 0
+            ) {
+                blank_fields.push(' Region is missing');
             }
-            if (vm.new_combine_species.districts == null || vm.new_combine_species.districts == '' || vm.new_combine_species.districts.length == 0) {
-                blank_fields.push(' District is missing')
+            if (
+                vm.new_combine_species.districts == null ||
+                vm.new_combine_species.districts == '' ||
+                vm.new_combine_species.districts.length == 0
+            ) {
+                blank_fields.push(' District is missing');
             }
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
@@ -277,77 +473,95 @@ export default {
             var missing_data = vm.can_submit();
             if (missing_data != true) {
                 await swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 // was added to set the first species Tab active but the updated() method overrides it
-                var firstTabEl = document.querySelector('#combine-pills-tab li:nth-child(1) a')
-                var firstTab = bootstrap.Tab.getOrCreateInstance(firstTabEl)
-                firstTab.show()
+                var firstTabEl = document.querySelector(
+                    '#combine-pills-tab li:nth-child(1) a'
+                );
+                var firstTab = bootstrap.Tab.getOrCreateInstance(firstTabEl);
+                firstTab.show();
                 return false;
             }
 
             vm.submitSpeciesCombine = true;
             swal.fire({
-                title: "Combine Species",
-                text: "Are you sure you want to combine those species?",
-                icon: "question",
+                title: 'Combine Species',
+                text: 'Are you sure you want to combine those species?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Combine Species",
+                confirmButtonText: 'Combine Species',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    //---save and submit the new combine species
-                    let new_species = vm.new_combine_species;
-                    //-- save new species before submit
-                    let result = await vm.save_before_submit(new_species);
-                    if (!vm.saveError) {
-                        vm.finalise_combine_loading = true;
+            })
+                .then(
+                    async (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            //---save and submit the new combine species
+                            let new_species = vm.new_combine_species;
+                            //-- save new species before submit
+                            let result =
+                                await vm.save_before_submit(new_species);
+                            if (!vm.saveError) {
+                                vm.finalise_combine_loading = true;
 
-                        // add the parent species array to the new species object
-                        new_species.parent_species = vm.original_species_combine_list;
-                        let payload = new Object();
-                        Object.assign(payload, new_species);
-                        let submit_url = helpers.add_endpoint_json(api_endpoints.species, new_species.id + '/combine_new_species_submit')
-                        fetch(submit_url, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload),
-                        }).then(async (response) => {
-                            vm.new_species = await response.json();
-                            vm.$router.push({
-                                name: 'internal-species-communities-dash'
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                            vm.saveError = true;
-                            vm.finalise_combine_loading = false;
-                        });
+                                // add the parent species array to the new species object
+                                new_species.parent_species =
+                                    vm.original_species_combine_list;
+                                let payload = new Object();
+                                Object.assign(payload, new_species);
+                                let submit_url = helpers.add_endpoint_json(
+                                    api_endpoints.species,
+                                    new_species.id +
+                                        '/combine_new_species_submit'
+                                );
+                                fetch(submit_url, {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }).then(
+                                    async (response) => {
+                                        vm.new_species = await response.json();
+                                        vm.$router.push({
+                                            name: 'internal-species-communities-dash',
+                                        });
+                                    },
+                                    (err) => {
+                                        swal.fire({
+                                            title: 'Submit Error',
+                                            text: helpers.apiVueResourceError(
+                                                err
+                                            ),
+                                            icon: 'error',
+                                            customClass: {
+                                                confirmButton:
+                                                    'btn btn-primary',
+                                            },
+                                        });
+                                        vm.saveError = true;
+                                        vm.finalise_combine_loading = false;
+                                    }
+                                );
+                            }
+                        }
+                    },
+                    (error) => {
+                        console.log(error);
                     }
-                }
-            }, (error) => {
-                console.log(error);
-            }).finally(() => {
-                vm.finalise_combine_loading = false;
-            });
-
+                )
+                .finally(() => {
+                    vm.finalise_combine_loading = false;
+                });
         },
         removeSpecies: function (species_id) {
             let vm = this;
@@ -357,10 +571,9 @@ export default {
                     method: 'DELETE',
                     headers: {
                         'Content-Type': 'application/json',
-                    }
+                    },
                 });
-            }
-            catch (err) {
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
@@ -370,11 +583,11 @@ export default {
         removeCombineSpecies: function (species) {
             let vm = this;
             swal.fire({
-                title: "Remove Species",
+                title: 'Remove Species',
                 text: `Are you sure you want to remove species ${species.species_number} from this combine?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Remove Species",
+                confirmButtonText: 'Remove Species',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
@@ -382,13 +595,17 @@ export default {
                 reverseButtons: true,
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let species_index = vm.original_species_combine_list.indexOf(species);
+                    let species_index =
+                        vm.original_species_combine_list.indexOf(species);
                     vm.original_species_combine_list.splice(species_index, 1);
                     this.$nextTick(() => {
                         // was added to set the first species Tab active but the updated() method overrides it
-                        var firstTabEl = document.querySelector('#combine-pills-tab li:nth-child(1) a')
-                        var firstTab = bootstrap.Tab.getOrCreateInstance(firstTabEl)
-                        firstTab.show()
+                        var firstTabEl = document.querySelector(
+                            '#combine-pills-tab li:nth-child(1) a'
+                        );
+                        var firstTab =
+                            bootstrap.Tab.getOrCreateInstance(firstTabEl);
+                        firstTab.show();
                     });
                 }
             });
@@ -397,11 +614,7 @@ export default {
             this.$refs.addCombineSpecies.isModalOpen = true;
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.combineSpeciesForm;
-    },
-}
+};
 </script>
 
 <style scoped>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index 9070e447..f26812bb 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -1,70 +1,160 @@
 <template lang="html">
-    <div v-if="species_community" class="container" id="internalSpeciesCommunity">
-        <div class="row" style="padding-bottom: 50px;">
-            <h3>{{ display_group_type }} {{ display_number }} - {{ display_name }}</h3>
+    <div
+        v-if="species_community"
+        id="internalSpeciesCommunity"
+        class="container"
+    >
+        <div class="row" style="padding-bottom: 50px">
+            <h3>
+                {{ display_group_type }} {{ display_number }} -
+                {{ display_name }}
+            </h3>
             <div v-if="!comparing" class="col-md-3">
                 <div class="">
                     <div class="card card-default mb-3">
-                        <div class="card-header">
-                            Image
-                        </div>
+                        <div class="card-header">Image</div>
                         <div class="card-body">
                             <div class="row mb-2 pb-2">
-                                <div v-if="!uploadingImage && speciesCommunitiesImage" class="col">
-                                    <div class="rounded"
-                                        :class="downloadingImage ? 'animated-background bg-secondary' : ''"
-                                        style="width:258px;" :style="downloadingImage ? 'height:258px;' : ''">
-                                        <img v-show="!downloadingImage" @load="onImageLoad"
-                                            :src="speciesCommunitiesImage" width="258"
-                                            class="img-thumbnail img-fluid rounded" />
+                                <div
+                                    v-if="
+                                        !uploadingImage &&
+                                        speciesCommunitiesImage
+                                    "
+                                    class="col"
+                                >
+                                    <div
+                                        class="rounded"
+                                        :class="
+                                            downloadingImage
+                                                ? 'animated-background bg-secondary'
+                                                : ''
+                                        "
+                                        style="width: 258px"
+                                        :style="
+                                            downloadingImage
+                                                ? 'height:258px;'
+                                                : ''
+                                        "
+                                    >
+                                        <img
+                                            v-show="!downloadingImage"
+                                            :src="speciesCommunitiesImage"
+                                            width="258"
+                                            class="img-thumbnail img-fluid rounded"
+                                            @load="onImageLoad"
+                                        />
                                     </div>
                                 </div>
-                                <div v-else
+                                <div
+                                    v-else
                                     class="col d-flex bg-light bg-gradient justify-content-center align-content-middle mx-2"
-                                    style="height:258px;">
-                                    <div class="align-self-center text-muted">No Image Uploaded</div>
+                                    style="height: 258px"
+                                >
+                                    <div class="align-self-center text-muted">
+                                        No Image Uploaded
+                                    </div>
                                 </div>
                             </div>
-                            <div v-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
-                                class="row border-top pt-3 mb-2">
+                            <div
+                                v-if="
+                                    hasUserEditMode &&
+                                    species_community.processing_status !=
+                                        'Discarded'
+                                "
+                                class="row border-top pt-3 mb-2"
+                            >
                                 <div class="col">
                                     <div class="d-flex justify-content-center">
-                                        <div class="text-muted">Image Actions</div>
+                                        <div class="text-muted">
+                                            Image Actions
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                            <div v-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
-                                class="row">
+                            <div
+                                v-if="
+                                    hasUserEditMode &&
+                                    species_community.processing_status !=
+                                        'Discarded'
+                                "
+                                class="row"
+                            >
                                 <div class="col">
-                                    <div class="d-flex align-items-center flex-column">
-                                        <label v-if="!speciesCommunitiesImage" for="image-upload" role="button"
-                                            class="btn btn-primary btn-sm w-50 mb-2 text-start"><i
-                                                class="bi bi-upload me-3"></i>
-                                            Upload</label>
-                                        <input id="image-upload" class="d-none" type="file" accept="image/*"
-                                            ref="speciesCommunitiesImage" @change="uploadImage">
-                                        <button class="btn btn-secondary btn-sm w-50 mb-2 text-start"
-                                            @click="showReinstateImageModal"><i class="bi bi-clock-history me-3"></i>
-                                            Reinstate</button>
-                                        <template v-if="!uploadingImage && speciesCommunitiesImage">
-                                            <label for="image-upload" role="button"
-                                                class="btn btn-primary btn-sm w-50 mb-2 text-start"><i
-                                                    class="bi bi-pencil-fill me-3"></i>
-                                                Replace</label>
-                                            <input id="image-upload" class="d-none" type="file" accept="image/*"
-                                                ref="speciesCommunitiesImage" @change="uploadImage">
+                                    <div
+                                        class="d-flex align-items-center flex-column"
+                                    >
+                                        <label
+                                            v-if="!speciesCommunitiesImage"
+                                            for="image-upload"
+                                            role="button"
+                                            class="btn btn-primary btn-sm w-50 mb-2 text-start"
+                                            ><i class="bi bi-upload me-3"></i>
+                                            Upload</label
+                                        >
+                                        <input
+                                            id="image-upload"
+                                            ref="speciesCommunitiesImage"
+                                            class="d-none"
+                                            type="file"
+                                            accept="image/*"
+                                            @change="uploadImage"
+                                        />
+                                        <button
+                                            class="btn btn-secondary btn-sm w-50 mb-2 text-start"
+                                            @click="showReinstateImageModal"
+                                        >
+                                            <i
+                                                class="bi bi-clock-history me-3"
+                                            ></i>
+                                            Reinstate
+                                        </button>
+                                        <template
+                                            v-if="
+                                                !uploadingImage &&
+                                                speciesCommunitiesImage
+                                            "
+                                        >
+                                            <label
+                                                for="image-upload"
+                                                role="button"
+                                                class="btn btn-primary btn-sm w-50 mb-2 text-start"
+                                                ><i
+                                                    class="bi bi-pencil-fill me-3"
+                                                ></i>
+                                                Replace</label
+                                            >
+                                            <input
+                                                id="image-upload"
+                                                ref="speciesCommunitiesImage"
+                                                class="d-none"
+                                                type="file"
+                                                accept="image/*"
+                                                @change="uploadImage"
+                                            />
 
-                                            <button @click="confirmDiscardImage"
-                                                class="btn btn-danger btn-sm w-50 mb-2 text-start"><i
-                                                    class="bi bi-trash3-fill me-3"></i>
-                                                Discard</button>
+                                            <button
+                                                class="btn btn-danger btn-sm w-50 mb-2 text-start"
+                                                @click="confirmDiscardImage"
+                                            >
+                                                <i
+                                                    class="bi bi-trash3-fill me-3"
+                                                ></i>
+                                                Discard
+                                            </button>
                                         </template>
-                                        <button v-if="uploadingImage"
-                                            class="btn btn-primary btn-sm w-50 mb-2 text-start">
-                                            <span class="spinner-border spinner-border-sm me-3" role="status"
-                                                aria-hidden="true"></span>
+                                        <button
+                                            v-if="uploadingImage"
+                                            class="btn btn-primary btn-sm w-50 mb-2 text-start"
+                                        >
+                                            <span
+                                                class="spinner-border spinner-border-sm me-3"
+                                                role="status"
+                                                aria-hidden="true"
+                                            ></span>
                                             Uploading
-                                            <span class="visually-hidden">Loading...</span>
+                                            <span class="visually-hidden"
+                                                >Loading...</span
+                                            >
                                         </button>
                                     </div>
                                 </div>
@@ -73,27 +163,40 @@
                     </div>
                 </div>
 
-                <CommsLogs :comms_url="comms_url" :logs_url="logs_url" :comms_add_url="comms_add_url"
-                    :disable_add_entry="!species_community.can_add_log" class="mb-3" />
+                <CommsLogs
+                    :comms_url="comms_url"
+                    :logs_url="logs_url"
+                    :comms_add_url="comms_add_url"
+                    :disable_add_entry="!species_community.can_add_log"
+                    class="mb-3"
+                />
 
-                <Submission v-if="canSeeSubmission" :submitter_first_name="submitter_first_name"
-                    :submitter_last_name="submitter_last_name" :lodgement_date="species_community.lodgement_date"
-                    class="mb-3" />
+                <Submission
+                    v-if="canSeeSubmission"
+                    :submitter_first_name="submitter_first_name"
+                    :submitter_last_name="submitter_last_name"
+                    :lodgement_date="species_community.lodgement_date"
+                    class="mb-3"
+                />
 
                 <div class="card card-default sticky-top">
-                    <div class="card-header">
-                        Workflow
-                    </div>
+                    <div class="card-header">Workflow</div>
                     <div class="card-body">
                         <div class="row">
                             <div class="col-sm-12">
                                 <strong>Status</strong><br />
-                                {{ species_community.processing_status }} <span v-if="isActive"> -
-                                    {{ species_community.publishing_status.public_status }}</span>
+                                {{ species_community.processing_status }}
+                                <span v-if="isActive">
+                                    -
+                                    {{
+                                        species_community.publishing_status
+                                            .public_status
+                                    }}</span
+                                >
                             </div>
                         </div>
                     </div>
-                    <div v-if='hasUserEditMode' class="card-body border-top">
+                    <div v-if="hasUserEditMode" class="card-body border-top">
                         <div class="row">
                             <div class="col-sm-12">
                                 <div class="row mb-2">
@@ -101,47 +204,79 @@
                                         <strong>Action</strong><br />
                                     </div>
                                 </div>
-                                <div class="row" v-if="isActive">
+                                <div v-if="isActive" class="row">
                                     <template v-if="!isCommunity">
                                         <div class="row mb-2">
                                             <div class="col-sm-12">
-                                                <button class="btn btn-primary w-100"
-                                                    @click.prevent="splitSpecies()">Split</button><br />
+                                                <button
+                                                    class="btn btn-primary w-100"
+                                                    @click.prevent="
+                                                        splitSpecies()
+                                                    "
+                                                >
+                                                    Split</button
+                                                ><br />
                                             </div>
                                         </div>
                                         <div class="row mb-2">
                                             <div class="col-sm-12">
-                                                <button class="btn btn-primary w-100"
-                                                    @click.prevent="combineSpecies()">Combine</button><br />
+                                                <button
+                                                    class="btn btn-primary w-100"
+                                                    @click.prevent="
+                                                        combineSpecies()
+                                                    "
+                                                >
+                                                    Combine</button
+                                                ><br />
                                             </div>
                                         </div>
                                         <div class="row mb-2">
                                             <div class="col-sm-12">
-                                                <button class="btn btn-primary w-100"
-                                                    @click.prevent="renameSpecies()">Rename</button><br />
+                                                <button
+                                                    class="btn btn-primary w-100"
+                                                    @click.prevent="
+                                                        renameSpecies()
+                                                    "
+                                                >
+                                                    Rename</button
+                                                ><br />
                                             </div>
                                         </div>
                                     </template>
                                     <template v-else>
                                         <div class="row mb-2">
                                             <div class="col-sm-12">
-                                                <button class="btn btn-primary"
-                                                    @click.prevent="renameCommunity()">Rename</button><br />
+                                                <button
+                                                    class="btn btn-primary"
+                                                    @click.prevent="
+                                                        renameCommunity()
+                                                    "
+                                                >
+                                                    Rename</button
+                                                ><br />
                                             </div>
                                         </div>
                                     </template>
                                 </div>
-                                <div class="row" v-if="isActive">
+                                <div v-if="isActive" class="row">
                                     <div v-if="!isPublic" class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button class="btn btn-primary w-100" @click.prevent="makePublic()">Make
-                                                Public</button><br />
+                                            <button
+                                                class="btn btn-primary w-100"
+                                                @click.prevent="makePublic()"
+                                            >
+                                                Make Public</button
+                                            ><br />
                                         </div>
                                     </div>
                                     <div v-else class="row mb-2">
                                         <div class="col-sm-12">
-                                            <button class="btn btn-primary w-100" @click.prevent="makePrivate()">Make
-                                                Private</button><br />
+                                            <button
+                                                class="btn btn-primary w-100"
+                                                @click.prevent="makePrivate()"
+                                            >
+                                                Make Private</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </div>
@@ -153,15 +288,21 @@
                                     </div>
                                     <div class="row">
                                         <div class="col-sm-12">
-                                            <button class="btn btn-primary w-100"
-                                                @click.prevent="discardSpeciesProposal()">Discard</button><br />
+                                            <button
+                                                class="btn btn-primary w-100"
+                                                @click.prevent="
+                                                    discardSpeciesProposal()
+                                                "
+                                            >
+                                                Discard</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div v-else-if='canReopen' class="card-body border-top">
+                    <div v-else-if="canReopen" class="card-body border-top">
                         <div class="row">
                             <div class="col-sm-12">
                                 <div class="col-sm-12">
@@ -172,8 +313,12 @@
                                     </div>
                                     <div class="row">
                                         <div class="col-sm-12">
-                                            <button class="btn btn-primary"
-                                                @click.prevent="reopen()">Reopen</button><br />
+                                            <button
+                                                class="btn btn-primary"
+                                                @click.prevent="reopen()"
+                                            >
+                                                Reopen</button
+                                            ><br />
                                         </div>
                                     </div>
                                 </div>
@@ -186,67 +331,193 @@
                 <div class="row">
                     <div class="">
                         <div class="row">
-                            <form :action="species_community_form_url" method="post" name="new_species"
-                                enctype="multipart/form-data">
-                                <ProposalSpeciesCommunities ref="species_communities"
+                            <form
+                                :action="species_community_form_url"
+                                method="post"
+                                name="new_species"
+                                enctype="multipart/form-data"
+                            >
+                                <ProposalSpeciesCommunities
+                                    id="speciesCommunityStart"
+                                    ref="species_communities"
                                     :species_community="species_community"
-                                    :species_community_original="species_community_original" id="speciesCommunityStart"
+                                    :species_community_original="
+                                        species_community_original
+                                    "
                                     :is_internal="true"
-                                    :is_readonly="species_community.readonly || species_community.processing_status == 'Discarded'">
+                                    :is_readonly="
+                                        species_community.readonly ||
+                                        species_community.processing_status ==
+                                            'Discarded'
+                                    "
+                                >
                                 </ProposalSpeciesCommunities>
-                                <input type="hidden" name="csrfmiddlewaretoken" :value="csrf_token" />
-                                <input type='hidden' name="species_community_id" :value="1" />
+                                <input
+                                    type="hidden"
+                                    name="csrfmiddlewaretoken"
+                                    :value="csrf_token"
+                                />
+                                <input
+                                    type="hidden"
+                                    name="species_community_id"
+                                    :value="1"
+                                />
                                 <div class="row" style="margin-bottom: 50px">
-                                    <div class="navbar fixed-bottom" style="background-color: #f5f5f5;">
+                                    <div
+                                        class="navbar fixed-bottom"
+                                        style="background-color: #f5f5f5"
+                                    >
                                         <div class="container">
                                             <div class="col-md-6">
-                                                <button class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
-                                                    @click.prevent="returnToDashboard">
-                                                    Return to Dashboard</button>
+                                                <button
+                                                    class="btn btn-primary me-2 pull-left"
+                                                    style="margin-top: 5px"
+                                                    @click.prevent="
+                                                        returnToDashboard
+                                                    "
+                                                >
+                                                    Return to Dashboard
+                                                </button>
                                             </div>
-                                            <div v-if="species_community.can_user_edit && species_community.processing_status != 'Discarded'"
-                                                class="col-md-6 text-end">
-                                                <button v-if="savingSpeciesCommunity"
-                                                    class="btn btn-primary me-2 pull-right" style="margin-top:5px;"
-                                                    disabled>Save and Continue <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary me-2 ull-right"
-                                                    style="margin-top:5px;" @click.prevent="save()"
-                                                    :disabled="saveExitSpeciesCommunity || submitSpeciesCommunity">Save
-                                                    and Continue</button>
+                                            <div
+                                                v-if="
+                                                    species_community.can_user_edit &&
+                                                    species_community.processing_status !=
+                                                        'Discarded'
+                                                "
+                                                class="col-md-6 text-end"
+                                            >
+                                                <button
+                                                    v-if="
+                                                        savingSpeciesCommunity
+                                                    "
+                                                    class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save and Continue
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary me-2 ull-right"
+                                                    style="margin-top: 5px"
+                                                    :disabled="
+                                                        saveExitSpeciesCommunity ||
+                                                        submitSpeciesCommunity
+                                                    "
+                                                    @click.prevent="save()"
+                                                >
+                                                    Save and Continue
+                                                </button>
 
-                                                <button v-if="saveExitSpeciesCommunity"
-                                                    class="btn btn-primary me-2 pull-right" style="margin-top:5px;"
-                                                    disabled>Save and Exit <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary me-2 pull-right"
-                                                    style="margin-top:5px;" @click.prevent="save_exit()"
-                                                    :disabled="savingSpeciesCommunity || submitSpeciesCommunity">Save
-                                                    and Exit</button>
+                                                <button
+                                                    v-if="
+                                                        saveExitSpeciesCommunity
+                                                    "
+                                                    class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save and Exit
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary me-2 pull-right"
+                                                    style="margin-top: 5px"
+                                                    :disabled="
+                                                        savingSpeciesCommunity ||
+                                                        submitSpeciesCommunity
+                                                    "
+                                                    @click.prevent="save_exit()"
+                                                >
+                                                    Save and Exit
+                                                </button>
 
-                                                <button v-if="submitSpeciesCommunity" class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" disabled>Submit <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" @click.prevent="submit()"
-                                                    :disabled="saveExitSpeciesCommunity || savingSpeciesCommunity">Submit</button>
+                                                <button
+                                                    v-if="
+                                                        submitSpeciesCommunity
+                                                    "
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Submit
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    :disabled="
+                                                        saveExitSpeciesCommunity ||
+                                                        savingSpeciesCommunity
+                                                    "
+                                                    @click.prevent="submit()"
+                                                >
+                                                    Submit
+                                                </button>
                                             </div>
-                                            <div v-else-if="hasUserEditMode && species_community.processing_status != 'Discarded'"
-                                                class="col-md-6 text-end">
-                                                <button v-if="savingSpeciesCommunity" class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" disabled>Save Changes <span
-                                                        class="spinner-border spinner-border-sm" role="status"
-                                                        aria-hidden="true"></span>
-                                                    <span class="visually-hidden">Loading...</span></button>
-                                                <button v-else class="btn btn-primary pull-right"
-                                                    style="margin-top:5px;" @click.prevent="save()">Save
-                                                    Changes</button>
+                                            <div
+                                                v-else-if="
+                                                    hasUserEditMode &&
+                                                    species_community.processing_status !=
+                                                        'Discarded'
+                                                "
+                                                class="col-md-6 text-end"
+                                            >
+                                                <button
+                                                    v-if="
+                                                        savingSpeciesCommunity
+                                                    "
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    disabled
+                                                >
+                                                    Save Changes
+                                                    <span
+                                                        class="spinner-border spinner-border-sm"
+                                                        role="status"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span
+                                                        class="visually-hidden"
+                                                        >Loading...</span
+                                                    >
+                                                </button>
+                                                <button
+                                                    v-else
+                                                    class="btn btn-primary pull-right"
+                                                    style="margin-top: 5px"
+                                                    @click.prevent="save()"
+                                                >
+                                                    Save Changes
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
@@ -258,62 +529,65 @@
             </div>
         </div>
 
-        <SpeciesSplit v-if="species_community && !isCommunity" ref="species_split"
-            :species_community="species_community" :is_internal="true" @refreshFromResponse="refreshFromResponse" />
-        <SpeciesCombine v-if="species_community && !isCommunity" ref="species_combine"
-            :species_community="species_community" :is_internal="true" @refreshFromResponse="refreshFromResponse" />
-        <SpeciesRename v-if="species_community && !isCommunity" ref="species_rename"
-            :species_community_original="species_community" :is_internal="true"
-            @refreshFromResponse="refreshFromResponse" />
-        <CommunityRename v-if="species_community && isCommunity" ref="community_rename"
-            :species_community_original="species_community" :is_internal="true"
-            @refreshFromResponse="refreshFromResponse" />
+        <SpeciesSplit
+            v-if="species_community && !isCommunity"
+            ref="species_split"
+            :species_community="species_community"
+            :is_internal="true"
+            @refresh-from-response="refreshFromResponse"
+        />
+        <SpeciesCombine
+            v-if="species_community && !isCommunity"
+            ref="species_combine"
+            :species_community="species_community"
+            :is_internal="true"
+            @refresh-from-response="refreshFromResponse"
+        />
+        <SpeciesRename
+            v-if="species_community && !isCommunity"
+            ref="species_rename"
+            :species_community_original="species_community"
+            :is_internal="true"
+            @refresh-from-response="refreshFromResponse"
+        />
+        <CommunityRename
+            v-if="species_community && isCommunity"
+            ref="community_rename"
+            :species_community_original="species_community"
+            :is_internal="true"
+            @refresh-from-response="refreshFromResponse"
+        />
 
-        <MakePublic ref="make_public" :species_community="species_community"
-            :species_community_original="species_community_original" :is_internal="true"
-            @refreshFromResponse="refreshFromResponse" />
-        <ReinstateImage ref="reinstateImage" :title="reinstate_image_title" :imageHistoryUrl="image_history_url"
-            @reinstateImage="reinstateImage" />
+        <MakePublic
+            ref="make_public"
+            :species_community="species_community"
+            :species_community_original="species_community_original"
+            :is_internal="true"
+            @refresh-from-response="refreshFromResponse"
+        />
+        <ReinstateImage
+            ref="reinstateImage"
+            :title="reinstate_image_title"
+            :image-history-url="image_history_url"
+            @reinstate-image="reinstateImage"
+        />
     </div>
 </template>
 <script>
+import CommsLogs from '@common-utils/comms_logs.vue';
+import Submission from '@common-utils/submission.vue';
+import ProposalSpeciesCommunities from '@/components/form_species_communities.vue';
+import SpeciesSplit from './species_split.vue';
+import SpeciesCombine from './species_combine.vue';
+import CommunityRename from './community_rename.vue';
+import SpeciesRename from './species_rename.vue';
+import MakePublic from './make_public.vue';
+import ReinstateImage from '@common-utils/reinstate_image.vue';
 
-import datatable from '@vue-utils/datatable.vue'
-import CommsLogs from '@common-utils/comms_logs.vue'
-import Submission from '@common-utils/submission.vue'
-import ProposalSpeciesCommunities from '@/components/form_species_communities.vue'
-import SpeciesSplit from './species_split.vue'
-import SpeciesCombine from './species_combine.vue'
-import CommunityRename from './community_rename.vue'
-import SpeciesRename from './species_rename.vue'
-import MakePublic from './make_public.vue'
-import ReinstateImage from '@common-utils/reinstate_image.vue'
-
-import {
-    api_endpoints,
-    helpers
-}
-    from '@/utils/hooks'
+import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     name: 'InternalSpeciesCommunity',
-    data: function () {
-        return {
-            "species_community": null,
-            "species_community_original": null,
-            form: null,
-            savingSpeciesCommunity: false,
-            saveExitSpeciesCommunity: false,
-            submitSpeciesCommunity: false,
-            speciesCommunitiesImage: null,
-            uploadingImage: false,
-            isSaved: false,
-            DATE_TIME_FORMAT: 'DD/MM/YYYY HH:mm:ss',
-            comparing: false,
-            downloadingImage: true,
-        }
-    },
     components: {
-        datatable,
         CommsLogs,
         Submission,
         ProposalSpeciesCommunities,
@@ -327,102 +601,218 @@ export default {
     filters: {
         formatDate: function (data) {
             return data ? moment(data).format('DD/MM/YYYY HH:mm:ss') : '';
+        },
+    },
+    beforeRouteEnter: function (to, from, next) {
+        let end_point_type = 'species';
+        if (to.query.group_type_name === 'community') {
+            end_point_type = 'community';
         }
+        fetch(
+            `/api/${end_point_type}/${to.params.species_community_id}/internal_${end_point_type}.json`
+        ).then(
+            async (response) => {
+                next(async (vm) => {
+                    const data = await response.json();
+                    vm.species_community = data[`${end_point_type}_obj`]; //--temp community_obj
+                    vm.species_community_original = helpers.copyObject(
+                        vm.species_community
+                    );
+                    vm.speciesCommunitiesImage = vm.species_community.image_doc;
+                });
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+    },
+    data: function () {
+        return {
+            species_community: null,
+            species_community_original: null,
+            form: null,
+            savingSpeciesCommunity: false,
+            saveExitSpeciesCommunity: false,
+            submitSpeciesCommunity: false,
+            speciesCommunitiesImage: null,
+            uploadingImage: false,
+            isSaved: false,
+            DATE_TIME_FORMAT: 'DD/MM/YYYY HH:mm:ss',
+            comparing: false,
+            downloadingImage: true,
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         isCommunity: function () {
-            return this.species_community.group_type === "community"
+            return this.species_community.group_type === 'community';
         },
         species_community_form_url: function () {
-            return (this.species_community.group_type === "community") ?
-                `/api/community/${this.species_community.id}/community_save.json` :
-                `/api/species/${this.species_community.id}/species_save.json`;
+            return this.species_community.group_type === 'community'
+                ? `/api/community/${this.species_community.id}/community_save.json`
+                : `/api/species/${this.species_community.id}/species_save.json`;
         },
         species_community_submit_url: function () {
-            return (this.species_community.group_type === "community") ?
-                `community` :
-                `species`;
+            return this.species_community.group_type === 'community'
+                ? `community`
+                : `species`;
         },
         display_group_type: function () {
-            let group_type_string = this.species_community.group_type
+            let group_type_string = this.species_community.group_type;
             // to Capitalize only first character
-            return group_type_string.charAt(0).toUpperCase() + group_type_string.slice(1);
+            return (
+                group_type_string.charAt(0).toUpperCase() +
+                group_type_string.slice(1)
+            );
         },
         display_number: function () {
-            return (this.species_community.group_type === "community") ?
-                this.species_community.community_number :
-                this.species_community.species_number;
+            return this.species_community.group_type === 'community'
+                ? this.species_community.community_number
+                : this.species_community.species_number;
         },
         display_name: function () {
-            return (this.species_community.group_type === "community") ?
-                (this.species_community.taxonomy_details != null) ? this.species_community.taxonomy_details.community_migrated_id : '' :
-                (this.species_community.taxonomy_details != null) ? this.species_community.taxonomy_details.scientific_name + " (" + this.species_community.taxonomy_details.taxon_name_id + ")" : '';
+            return this.species_community.group_type === 'community'
+                ? this.species_community.taxonomy_details != null
+                    ? this.species_community.taxonomy_details
+                          .community_migrated_id
+                    : ''
+                : this.species_community.taxonomy_details != null
+                  ? this.species_community.taxonomy_details.scientific_name +
+                    ' (' +
+                    this.species_community.taxonomy_details.taxon_name_id +
+                    ')'
+                  : '';
         },
         class_ncols: function () {
             return this.comparing ? 'col-md-12' : 'col-md-8';
         },
         submitter_first_name: function () {
             if (this.species_community && this.species_community.submitter) {
-                return this.species_community.submitter.first_name
+                return this.species_community.submitter.first_name;
             } else {
-                return ''
+                return '';
             }
         },
         submitter_last_name: function () {
             if (this.species_community && this.species_community.submitter) {
-                return this.species_community.submitter.last_name
+                return this.species_community.submitter.last_name;
             } else {
-                return ''
+                return '';
             }
         },
         canSeeSubmission: function () {
             //return this.proposal && (this.proposal.processing_status != 'With Assessor (Requirements)' && this.proposal.processing_status != 'With Approver' && !this.isFinalised)
             //return this.proposal && (this.proposal.processing_status != 'With Assessor (Requirements)')
-            return true
+            return true;
         },
         hasUserEditMode: function () {
-            return this.species_community && this.species_community.user_edit_mode ? true : false;
+            return this.species_community &&
+                this.species_community.user_edit_mode
+                ? true
+                : false;
         },
         canReopen: function () {
-            return (this.species_community && this.species_community.can_user_reopen) ? true : false;
+            return this.species_community &&
+                this.species_community.can_user_reopen
+                ? true
+                : false;
         },
         isPublic: function () {
-            return (this.species_community.group_type === "community") ?
-                this.species_community.publishing_status.community_public ? true : false :
-                this.species_community.publishing_status.species_public ? true : false;
+            return this.species_community.group_type === 'community'
+                ? this.species_community.publishing_status.community_public
+                    ? true
+                    : false
+                : this.species_community.publishing_status.species_public
+                  ? true
+                  : false;
         },
         isActive: function () {
-            return this.species_community.processing_status === "Active" ? true : false;
+            return this.species_community.processing_status === 'Active'
+                ? true
+                : false;
         },
         canDiscard: function () {
-            return this.species_community && this.species_community.processing_status === "Draft" ? true : false;
+            return this.species_community &&
+                this.species_community.processing_status === 'Draft'
+                ? true
+                : false;
         },
         comms_url: function () {
-            return (this.species_community.group_type === "community") ?
-                helpers.add_endpoint_json(api_endpoints.community, this.$route.params.species_community_id + '/comms_log') :
-                helpers.add_endpoint_json(api_endpoints.species, this.$route.params.species_community_id + '/comms_log');
+            return this.species_community.group_type === 'community'
+                ? helpers.add_endpoint_json(
+                      api_endpoints.community,
+                      this.$route.params.species_community_id + '/comms_log'
+                  )
+                : helpers.add_endpoint_json(
+                      api_endpoints.species,
+                      this.$route.params.species_community_id + '/comms_log'
+                  );
         },
         comms_add_url: function () {
-            return (this.species_community.group_type === "community") ?
-                helpers.add_endpoint_json(api_endpoints.community, this.$route.params.species_community_id + '/add_comms_log') :
-                helpers.add_endpoint_json(api_endpoints.species, this.$route.params.species_community_id + '/add_comms_log');
+            return this.species_community.group_type === 'community'
+                ? helpers.add_endpoint_json(
+                      api_endpoints.community,
+                      this.$route.params.species_community_id + '/add_comms_log'
+                  )
+                : helpers.add_endpoint_json(
+                      api_endpoints.species,
+                      this.$route.params.species_community_id + '/add_comms_log'
+                  );
         },
         logs_url: function () {
-            return (this.species_community.group_type === "community") ?
-                helpers.add_endpoint_json(api_endpoints.community, this.$route.params.species_community_id + '/action_log') :
-                helpers.add_endpoint_json(api_endpoints.species, this.$route.params.species_community_id + '/action_log');
+            return this.species_community.group_type === 'community'
+                ? helpers.add_endpoint_json(
+                      api_endpoints.community,
+                      this.$route.params.species_community_id + '/action_log'
+                  )
+                : helpers.add_endpoint_json(
+                      api_endpoints.species,
+                      this.$route.params.species_community_id + '/action_log'
+                  );
         },
         image_history_url: function () {
-            return (this.species_community.group_type == 'community') ? `/api/community/${this.species_community.id}/image_history/` :
-                `/api/species/${this.species_community.id}/image_history/`;
+            return this.species_community.group_type == 'community'
+                ? `/api/community/${this.species_community.id}/image_history/`
+                : `/api/species/${this.species_community.id}/image_history/`;
         },
         reinstate_image_title: function () {
-            return this.species_community ? `Reinstate Image for ${this.display_name}` : '';
+            return this.species_community
+                ? `Reinstate Image for ${this.display_name}`
+                : '';
+        },
+    },
+    created: function () {
+        if (!this.species_community) {
+            let end_point_type = 'species';
+            if (this.$route.query.group_type_name === 'community') {
+                end_point_type = 'community';
+            }
+            fetch(
+                `/api/${end_point_type}/${this.$route.params.species_community_id}/internal_${end_point_type}.json`
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    this.species_community = data[`${end_point_type}_obj`]; //--temp community_obj
+                    this.species_community_original = helpers.copyObject(
+                        this.species_community
+                    );
+                    this.speciesCommunitiesImage =
+                        this.species_community.image_doc;
+                },
+                (err) => {
+                    console.log(err);
+                }
+            );
         }
     },
+    updated: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.form = document.forms.new_species;
+        });
+    },
     methods: {
         commaToNewline(s) {
             return s.replace(/[,;]/g, '\n');
@@ -430,7 +820,7 @@ export default {
         returnToDashboard: function () {
             let vm = this;
             vm.$router.push({
-                name: 'internal-species-communities-dash'
+                name: 'internal-species-communities-dash',
             });
         },
         uploadImage: function (event) {
@@ -454,39 +844,50 @@ export default {
 
                 if (this.species_community.group_type == 'community') {
                     var api_url = api_endpoints.community;
-                }
-                else {
+                } else {
                     var api_url = api_endpoints.species;
                 }
-                fetch(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/upload_image')), {
-                    method: 'POST',
-                    body: data,
-                    headers: {
-                        'Content-Type': 'application/json',
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_url,
+                        this.$route.params.species_community_id +
+                            '/upload_image'
+                    ),
+                    {
+                        method: 'POST',
+                        body: data,
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }
+                ).then(
+                    async (response) => {
+                        const data = await response.json();
+                        vm.uploadingImage = false;
+                        vm.speciesCommunitiesImage = null;
+                        vm.speciesCommunitiesImage = data.image_doc;
+                        vm.species_community.image_doc = data.image_doc;
                     },
-                }).then(async (response) => {
-                    const data = await response.json();
-                    vm.uploadingImage = false;
-                    vm.speciesCommunitiesImage = null;
-                    vm.speciesCommunitiesImage = data.image_doc;
-                    vm.species_community.image_doc = data.image_doc;
-                }, (error) => {
-                    console.log(error);
-                    vm.uploadingImage = false;
-                    vm.speciesCommunitiesImage = null;
-                    let error_msg = '<br/>';
-                    for (var key in error.body) {
-                        error_msg += key + ': ' + error.body[key] + '<br/>';
+                    (error) => {
+                        console.log(error);
+                        vm.uploadingImage = false;
+                        vm.speciesCommunitiesImage = null;
+                        let error_msg = '<br/>';
+                        for (var key in error.body) {
+                            error_msg += key + ': ' + error.body[key] + '<br/>';
+                        }
+                        swal.fire({
+                            title: 'Upload ID',
+                            html:
+                                'There was an error uploading your ID.<br/>' +
+                                error_msg,
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
                     }
-                    swal.fire({
-                        title: 'Upload ID',
-                        html: 'There was an error uploading your ID.<br/>' + error_msg,
-                        icon: 'error',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
-                        },
-                    });
-                });
+                );
             }
         },
         showReinstateImageModal: function () {
@@ -495,51 +896,56 @@ export default {
         reopen: async function () {
             let vm = this;
             swal.fire({
-                title: "Reopen",
-                text: "Are you sure you want to reopen this record?",
-                icon: "question",
+                title: 'Reopen',
+                text: 'Are you sure you want to reopen this record?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Reopen",
+                confirmButtonText: 'Reopen',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
             }).then(async (swalresult) => {
-
                 let endpoint = api_endpoints.species;
-                if (this.species_community.group_type === "community") {
+                if (this.species_community.group_type === 'community') {
                     endpoint = api_endpoints.community;
                 }
 
                 if (swalresult.isConfirmed) {
-                    await fetch(`${endpoint}/${this.species_community.id}/reopen_species_community.json`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    }).then(async (response) => {
-                        swal.fire({
-                            title: "Reopened",
-                            text: "Record has been reopened",
-                            icon: "success",
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        }).then(async (swalresult) => {
-                            this.$router.go(this.$router.currentRoute);
-                        });
-                    }, err => {
-                        var errorText = helpers.apiVueResourceError(err);
-                        swal.fire({
-                            title: 'Reopen Error',
-                            text: errorText,
-                            icon: 'error',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
+                    await fetch(
+                        `${endpoint}/${this.species_community.id}/reopen_species_community.json`,
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
                             },
-                        });
-                    });
+                        }
+                    ).then(
+                        async (response) => {
+                            swal.fire({
+                                title: 'Reopened',
+                                text: 'Record has been reopened',
+                                icon: 'success',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            }).then(async (swalresult) => {
+                                this.$router.go(this.$router.currentRoute);
+                            });
+                        },
+                        (err) => {
+                            var errorText = helpers.apiVueResourceError(err);
+                            swal.fire({
+                                title: 'Reopen Error',
+                                text: errorText,
+                                icon: 'error',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            });
+                        }
+                    );
                 }
             });
         },
@@ -547,31 +953,40 @@ export default {
             let vm = this;
             if (this.species_community.group_type == 'community') {
                 var api_url = api_endpoints.community;
-            }
-            else {
+            } else {
                 var api_url = api_endpoints.species;
             }
-            fetch(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/reinstate_image'), {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }), {
-                pk: image.id
-            }).then(() => {
-                this.speciesCommunitiesImage = image.url;
-                this.species_community.image_doc = image.url;
-            }).catch((error) => {
-                swal.fire({
-                    title: 'Reinstate Image',
-                    text: 'There was an error reinstating the image',
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
+            fetch(
+                helpers.add_endpoint_json(
+                    api_url,
+                    this.$route.params.species_community_id +
+                        '/reinstate_image',
+                    {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    }
+                ),
+                {
+                    pk: image.id,
+                }
+            )
+                .then(() => {
+                    this.speciesCommunitiesImage = image.url;
+                    this.species_community.image_doc = image.url;
+                })
+                .catch((error) => {
+                    swal.fire({
+                        title: 'Reinstate Image',
+                        text: 'There was an error reinstating the image',
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    console.log(error);
                 });
-                console.log(error)
-            })
         },
         confirmDiscardImage: function () {
             swal.fire({
@@ -582,9 +997,9 @@ export default {
                 confirmButtonText: 'Discard',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
+                reverseButtons: true,
             }).then((swalresult) => {
                 if (swalresult.isConfirmed) {
                     this.discardImage();
@@ -595,8 +1010,7 @@ export default {
             let vm = this;
             if (this.species_community.group_type == 'community') {
                 var api_url = api_endpoints.community;
-            }
-            else {
+            } else {
                 var api_url = api_endpoints.species;
             }
 
@@ -611,101 +1025,124 @@ export default {
                 });
             } else {
                 if (vm.species_community.image_doc) {
-                    fetch(helpers.add_endpoint_json(api_url, (this.$route.params.species_community_id + '/delete_image')), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
+                    fetch(
+                        helpers.add_endpoint_json(
+                            api_url,
+                            this.$route.params.species_community_id +
+                                '/delete_image'
+                        ),
+                        {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        }
+                    ).then(
+                        async (response) => {
+                            const data = await response.json();
+                            vm.uploadingImage = false;
+                            vm.speciesCommunitiesImage = null;
+                            vm.speciesCommunitiesImage = data.image_doc;
+                            vm.species_community.image_doc = data.image_doc;
                         },
-                    }).then(async (response) => {
-                        const data = await response.json();
-                        vm.uploadingImage = false;
-                        vm.speciesCommunitiesImage = null;
-                        vm.speciesCommunitiesImage = data.image_doc;
-                        vm.species_community.image_doc = data.image_doc;
-                    }, (error) => {
-                        console.log(error);
-                        vm.uploadingImage = false;
-                        vm.speciesCommunitiesImage = null;
-                        let error_msg = '<br/>';
-                        for (var key in error.body) {
-                            error_msg += key + ': ' + error.body[key] + '<br/>';
+                        (error) => {
+                            console.log(error);
+                            vm.uploadingImage = false;
+                            vm.speciesCommunitiesImage = null;
+                            let error_msg = '<br/>';
+                            for (var key in error.body) {
+                                error_msg +=
+                                    key + ': ' + error.body[key] + '<br/>';
+                            }
+                            swal.fire({
+                                title: 'Delete Image',
+                                html:
+                                    'There was an error deleting your image.<br/>' +
+                                    error_msg,
+                                icon: 'error',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            });
                         }
-                        swal.fire({
-                            title: 'Delete Image',
-                            html: 'There was an error deleting your image.<br/>' + error_msg,
-                            icon: 'error',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        });
-                    });
+                    );
                 }
-
             }
         },
         discardSpeciesProposal: function () {
             let vm = this;
             swal.fire({
-                title: "Discard Proposal",
-                text: "Are you sure you want to discard this proposal?",
-                icon: "question",
+                title: 'Discard Proposal',
+                text: 'Are you sure you want to discard this proposal?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Proposal',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary'
+                    cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_species_proposal(vm.species_community.id), {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'The proposal has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+                reverseButtons: true,
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_species_proposal(
+                                vm.species_community.id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                            vm.$router.push({
-                                name: 'internal-species-communities-dash'
-                            });
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                            }
+                        ).then(
+                            (response) => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'The proposal has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$router.push({
+                                    name: 'internal-species-communities-dash',
+                                });
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         save: async function () {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             vm.isSaved = false;
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.savingSpeciesCommunity = true;
             let payload = new Object();
             Object.assign(payload, vm.species_community);
 
-            let was_public = "";
-            if (vm.species_community.publishing_status.public_status === "Public") {
-                was_public = " - record is now private"
+            let was_public = '';
+            if (
+                vm.species_community.publishing_status.public_status ===
+                'Public'
+            ) {
+                was_public = ' - record is now private';
             }
 
             await fetch(vm.species_community_form_url, {
@@ -714,45 +1151,50 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(async (response) => {
-                vm.species_community = await response.json();
-                vm.species_community_original = helpers.copyObject(vm.species_community); //update original after save
-                swal.fire({
-                    title: "Saved",
-                    text: "Your changes have been saved" + was_public,
-                    icon: "success",
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingSpeciesCommunity = false;
-                vm.isSaved = true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Save Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingSpeciesCommunity = false;
-                vm.isSaved = false;
-            });
+            }).then(
+                async (response) => {
+                    vm.species_community = await response.json();
+                    vm.species_community_original = helpers.copyObject(
+                        vm.species_community
+                    ); //update original after save
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Your changes have been saved' + was_public,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingSpeciesCommunity = false;
+                    vm.isSaved = true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Save Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingSpeciesCommunity = false;
+                    vm.isSaved = false;
+                }
+            );
         },
         save_exit: async function (e) {
             let vm = this;
-            var missing_data = vm.can_submit("");
+            var missing_data = vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 //vm.paySubmitting=false;
                 return false;
             }
@@ -760,10 +1202,9 @@ export default {
             await vm.save().then(() => {
                 if (vm.isSaved === true) {
                     vm.$router.push({
-                        name: 'internal-species-communities-dash'
+                        name: 'internal-species-communities-dash',
                     });
-                }
-                else {
+                } else {
                     vm.saveExitSpeciesCommunity = false;
                 }
             });
@@ -774,7 +1215,7 @@ export default {
             vm.saveError = false;
 
             //only save if something has changed
-            if (vm.can_submit("") != true) {
+            if (vm.can_submit('') != true) {
                 return false;
             }
 
@@ -786,23 +1227,26 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(async (response) => {
-                //return true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    //helpers.apiVueResourceError(err),
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                })
-                vm.submitSpeciesCommunity = false;
-                vm.saveError = true;
-                //return false;
-            });
+            }).then(
+                async (response) => {
+                    //return true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        //helpers.apiVueResourceError(err),
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitSpeciesCommunity = false;
+                    vm.saveError = true;
+                    //return false;
+                }
+            );
             return result;
         },
         can_submit: function (check_action) {
@@ -811,115 +1255,166 @@ export default {
             if (check_action != 'submit') {
                 //remove publishing status for check as it is handled separately
                 let sc_no_ps = helpers.copyObject(vm.species_community);
-                let sco_no_ps = helpers.copyObject(vm.species_community_original);
+                let sco_no_ps = helpers.copyObject(
+                    vm.species_community_original
+                );
 
                 sc_no_ps.publishing_status = undefined;
                 sco_no_ps.publishing_status = undefined;
 
                 if (helpers.checkForChange(sco_no_ps, sc_no_ps)) {
-                    return ["No changes made"]
+                    return ['No changes made'];
                 }
             }
 
-            let blank_fields = []
-            if (vm.species_community.group_type == 'flora' || vm.species_community.group_type == 'fauna') {
-                if (vm.species_community.taxonomy_id == null || vm.species_community.taxonomy_id == '') {
-                    blank_fields.push(' Scientific Name is required')
+            let blank_fields = [];
+            if (
+                vm.species_community.group_type == 'flora' ||
+                vm.species_community.group_type == 'fauna'
+            ) {
+                if (
+                    vm.species_community.taxonomy_id == null ||
+                    vm.species_community.taxonomy_id == ''
+                ) {
+                    blank_fields.push(' Scientific Name is required');
                 }
-            }
-            else {
-                if (vm.species_community.taxonomy_details.community_name == null || vm.species_community.taxonomy_details.community_name == '') {
-                    blank_fields.push(' Community Name is required')
+            } else {
+                if (
+                    vm.species_community.taxonomy_details.community_name ==
+                        null ||
+                    vm.species_community.taxonomy_details.community_name == ''
+                ) {
+                    blank_fields.push(' Community Name is required');
                 }
-                if (vm.species_community.taxonomy_details.community_migrated_id == null || vm.species_community.taxonomy_details.community_migrated_id == '') {
-                    blank_fields.push(' Community ID is required')
+                if (
+                    vm.species_community.taxonomy_details
+                        .community_migrated_id == null ||
+                    vm.species_community.taxonomy_details
+                        .community_migrated_id == ''
+                ) {
+                    blank_fields.push(' Community ID is required');
                 }
             }
             if (check_action == 'submit') {
-                if (vm.species_community.distribution.distribution == null || vm.species_community.distribution.distribution == '') {
-                    blank_fields.push(' Distribution is required')
+                if (
+                    vm.species_community.distribution.distribution == null ||
+                    vm.species_community.distribution.distribution == ''
+                ) {
+                    blank_fields.push(' Distribution is required');
                 }
-                if (vm.species_community.regions == null || vm.species_community.regions.length == 0 || vm.species_community.regions == '') {
-                    blank_fields.push(' Region is required')
+                if (
+                    vm.species_community.regions == null ||
+                    vm.species_community.regions.length == 0 ||
+                    vm.species_community.regions == ''
+                ) {
+                    blank_fields.push(' Region is required');
                 }
-                if (vm.species_community.districts == null || vm.species_community.districts == '' || vm.species_community.districts.length == 0) {
-                    blank_fields.push(' District is required')
+                if (
+                    vm.species_community.districts == null ||
+                    vm.species_community.districts == '' ||
+                    vm.species_community.districts.length == 0
+                ) {
+                    blank_fields.push(' District is required');
                 }
             }
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
         submit: async function () {
             let vm = this;
 
-            var missing_data = vm.can_submit("submit");
+            var missing_data = vm.can_submit('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 //vm.paySubmitting=false;
                 return false;
             }
 
             vm.submitSpeciesCommunity = true;
             swal.fire({
-                title: "Submit",
-                text: "Are you sure you want to submit this application?",
-                icon: "question",
+                title: 'Submit',
+                text: 'Are you sure you want to submit this application?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "submit",
+                confirmButtonText: 'submit',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
-                reverseButtons: true
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.species_community);
-                        let submit_url = this.species_community.group_type === "community" ?
-                            helpers.add_endpoint_json(api_endpoints.community, vm.species_community.id + '/submit') :
-                            helpers.add_endpoint_json(api_endpoints.species, vm.species_community.id + '/submit')
-                        fetch(submit_url, {
-                            method: 'POST',
-                            body: JSON.stringify(payload),
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                        }).then(async (response) => {
-                            vm.species_community = await response.json();
-                            vm.species_community_original = helpers.copyObject(vm.species_community);
-                            vm.$router.push({
-                                name: 'internal-species-communities-dash'
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                        });
+                reverseButtons: true,
+            })
+                .then(
+                    async (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            let result = await vm.save_before_submit();
+                            if (!vm.saveError) {
+                                let payload = new Object();
+                                Object.assign(payload, vm.species_community);
+                                let submit_url =
+                                    this.species_community.group_type ===
+                                    'community'
+                                        ? helpers.add_endpoint_json(
+                                              api_endpoints.community,
+                                              vm.species_community.id +
+                                                  '/submit'
+                                          )
+                                        : helpers.add_endpoint_json(
+                                              api_endpoints.species,
+                                              vm.species_community.id +
+                                                  '/submit'
+                                          );
+                                fetch(submit_url, {
+                                    method: 'POST',
+                                    body: JSON.stringify(payload),
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                }).then(
+                                    async (response) => {
+                                        vm.species_community =
+                                            await response.json();
+                                        vm.species_community_original =
+                                            helpers.copyObject(
+                                                vm.species_community
+                                            );
+                                        vm.$router.push({
+                                            name: 'internal-species-communities-dash',
+                                        });
+                                    },
+                                    (err) => {
+                                        swal.fire({
+                                            title: 'Submit Error',
+                                            text: helpers.apiVueResourceError(
+                                                err
+                                            ),
+                                            icon: 'error',
+                                            customClass: {
+                                                confirmButton:
+                                                    'btn btn-primary',
+                                            },
+                                        });
+                                    }
+                                );
+                            }
+                        }
+                    },
+                    (error) => {
+                        console.log(error);
                     }
-                }
-            }, (error) => {
-                console.log(error);
-            }).finally(() => {
-                vm.submitSpeciesCommunity = false;
-            });
+                )
+                .finally(() => {
+                    vm.submitSpeciesCommunity = false;
+                });
         },
         save_wo: function () {
             let vm = this;
@@ -930,9 +1425,10 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(async (response) => {
-            }, err => {
-            });
+            }).then(
+                async (response) => {},
+                (err) => {}
+            );
         },
         refreshFromResponse: async function (response) {
             let vm = this;
@@ -942,35 +1438,51 @@ export default {
         },
         refreshSpeciesCommunity: function () {
             let vm = this;
-            if (vm.species_community.group_type === 'flora' || vm.species_community.group_type === "fauna") {
-                fetch(`/api/species/${vm.species_community.id}/internal_species.json`)
-                    .then(async (response) => {
+            if (
+                vm.species_community.group_type === 'flora' ||
+                vm.species_community.group_type === 'fauna'
+            ) {
+                fetch(
+                    `/api/species/${vm.species_community.id}/internal_species.json`
+                ).then(
+                    async (response) => {
                         const data = await response.json();
                         vm.species_community = data.species_obj;
-                        vm.species_community_original = helpers.copyObject(vm.species_community);
-                        vm.speciesCommunitiesImage = vm.species_community.image_doc;
+                        vm.species_community_original = helpers.copyObject(
+                            vm.species_community
+                        );
+                        vm.speciesCommunitiesImage =
+                            vm.species_community.image_doc;
                     },
-                        err => {
-                            console.log(err);
-                        });
+                    (err) => {
+                        console.log(err);
+                    }
+                );
             } else {
-                fetch(`/api/community/${vm.species_community.id}/internal_community.json`)
-                    .then(async (response) => {
+                fetch(
+                    `/api/community/${vm.species_community.id}/internal_community.json`
+                ).then(
+                    async (response) => {
                         const data = await response.json();
                         vm.species_community = data.community_obj;
-                        vm.species_community_original = helpers.copyObject(vm.species_community);
-                        vm.speciesCommunitiesImage = vm.species_community.image_doc;
+                        vm.species_community_original = helpers.copyObject(
+                            vm.species_community
+                        );
+                        vm.speciesCommunitiesImage =
+                            vm.species_community.image_doc;
                     },
-                        err => {
-                            console.log(err);
-                        });
+                    (err) => {
+                        console.log(err);
+                    }
+                );
             }
         },
         splitSpecies: async function () {
-            this.$refs.species_split.species_community_original = this.species_community;
-            let newSpeciesId1 = null
+            this.$refs.species_split.species_community_original =
+                this.species_community;
+            let newSpeciesId1 = null;
             try {
-                const createUrl = api_endpoints.species + "/";
+                const createUrl = api_endpoints.species + '/';
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id;
                 let savedSpecies = await fetch(createUrl, {
@@ -982,31 +1494,36 @@ export default {
                 });
                 if (savedSpecies) {
                     newSpeciesId1 = savedSpecies.body.id;
-                    fetch(`/api/species/${newSpeciesId1}/internal_species.json`).then(async (response) => {
-                        const data = await response.json();
-                        let species_obj = data.species_obj;
-                        //--- to add empty documents array
-                        species_obj.documents = []
-                        //---empty threats array added to store the select threat ids in from the child component
-                        species_obj.threats = []
-                        this.$refs.species_split.new_species_list.push(species_obj); //--temp species_obj
-                    },
-                        err => {
+                    fetch(
+                        `/api/species/${newSpeciesId1}/internal_species.json`
+                    ).then(
+                        async (response) => {
+                            const data = await response.json();
+                            let species_obj = data.species_obj;
+                            //--- to add empty documents array
+                            species_obj.documents = [];
+                            //---empty threats array added to store the select threat ids in from the child component
+                            species_obj.threats = [];
+                            this.$refs.species_split.new_species_list.push(
+                                species_obj
+                            ); //--temp species_obj
+                        },
+                        (err) => {
                             console.log(err);
-                        });
+                        }
+                    );
                 }
-            }
-            catch (err) {
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
                 }
             }
-            let newSpeciesId2 = null
+            let newSpeciesId2 = null;
             try {
-                const createUrl = api_endpoints.species + "/";
+                const createUrl = api_endpoints.species + '/';
                 let payload = new Object();
-                payload.group_type_id = this.species_community.group_type_id
+                payload.group_type_id = this.species_community.group_type_id;
                 let savedSpecies = await fetch(createUrl, {
                     method: 'POST',
                     headers: {
@@ -1016,21 +1533,26 @@ export default {
                 });
                 if (savedSpecies) {
                     newSpeciesId2 = savedSpecies.body.id;
-                    fetch(`/api/species/${newSpeciesId2}/internal_species.json`).then(async (response) => {
-                        const data = await response.json();
-                        let species_obj = data.species_obj;
-                        // to add documents id array from original species
-                        species_obj.documents = []
-                        //---empty threats array added to store the select threat ids in from the child component
-                        species_obj.threats = []
-                        this.$refs.species_split.new_species_list.push(species_obj); //--temp species_obj
-                    },
-                        err => {
+                    fetch(
+                        `/api/species/${newSpeciesId2}/internal_species.json`
+                    ).then(
+                        async (response) => {
+                            const data = await response.json();
+                            let species_obj = data.species_obj;
+                            // to add documents id array from original species
+                            species_obj.documents = [];
+                            //---empty threats array added to store the select threat ids in from the child component
+                            species_obj.threats = [];
+                            this.$refs.species_split.new_species_list.push(
+                                species_obj
+                            ); //--temp species_obj
+                        },
+                        (err) => {
                             console.log(err);
-                        });
+                        }
+                    );
                 }
-            }
-            catch (err) {
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
@@ -1039,10 +1561,12 @@ export default {
             this.$refs.species_split.isModalOpen = true;
         },
         combineSpecies: async function () {
-            this.$refs.species_combine.original_species_combine_list.push(this.species_community); //--push current original into the array
-            let newSpeciesId = null
+            this.$refs.species_combine.original_species_combine_list.push(
+                this.species_community
+            ); //--push current original into the array
+            let newSpeciesId = null;
             try {
-                const createUrl = api_endpoints.species + "/";
+                const createUrl = api_endpoints.species + '/';
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id;
                 let savedSpecies = await fetch(createUrl, {
@@ -1054,22 +1578,25 @@ export default {
                 });
                 if (savedSpecies) {
                     newSpeciesId = savedSpecies.body.id;
-                    fetch(`/api/species/${newSpeciesId}/internal_species.json`).then(async (response) => {
-                        const data = await response.json();
-                        let species_obj = data.species_obj;
-                        //--- to add empty documents array
-                        species_obj.documents = []
-                        //---empty threats array added to store the selected threat ids in from the child component
-                        species_obj.threats = []
-                        this.$refs.species_combine.new_combine_species = species_obj; //---assign the new created species to the modal obj
-                    },
-                        err => {
+                    fetch(
+                        `/api/species/${newSpeciesId}/internal_species.json`
+                    ).then(
+                        async (response) => {
+                            const data = await response.json();
+                            let species_obj = data.species_obj;
+                            //--- to add empty documents array
+                            species_obj.documents = [];
+                            //---empty threats array added to store the selected threat ids in from the child component
+                            species_obj.threats = [];
+                            this.$refs.species_combine.new_combine_species =
+                                species_obj; //---assign the new created species to the modal obj
+                        },
+                        (err) => {
                             console.log(err);
-                        });
+                        }
+                    );
                 }
-
-            }
-            catch (err) {
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
@@ -1079,10 +1606,13 @@ export default {
         },
         renameSpecies: async function () {
             let rename_species_obj = null;
-            let newRenameSpecies = await fetch(`/api/species/${this.species_community.id}/rename_deep_copy.json`)
+            let newRenameSpecies = await fetch(
+                `/api/species/${this.species_community.id}/rename_deep_copy.json`
+            );
             if (newRenameSpecies) {
                 rename_species_obj = newRenameSpecies.body.species_obj;
-                this.$refs.species_rename.new_rename_species = rename_species_obj;
+                this.$refs.species_rename.new_rename_species =
+                    rename_species_obj;
                 this.$refs.species_rename.isModalOpen = true;
             }
         },
@@ -1095,98 +1625,73 @@ export default {
         makePrivate: function () {
             let vm = this;
             let endpoint = api_endpoints.species;
-            if (this.species_community.group_type === "community") {
+            if (this.species_community.group_type === 'community') {
                 vm.species_community.publishing_status.community_public = false;
                 endpoint = api_endpoints.community;
             } else {
                 vm.species_community.publishing_status.species_public = false;
             }
-            let data = JSON.stringify(vm.species_community.publishing_status)
-            fetch(helpers.add_endpoint_json(endpoint, (vm.species_community.id + '/update_publishing_status')),  {
-                method: 'POST',
-                body: data,
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                vm.updatingPublishing = false;
-                vm.species_community.publishing_status = await response.json();
-                vm.species_community_original.publishing_status = helpers.copyObject(vm.species_community.publishing_status);
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Record has been made private',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Publishing settings cannot be updated because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            let data = JSON.stringify(vm.species_community.publishing_status);
+            fetch(
+                helpers.add_endpoint_json(
+                    endpoint,
+                    vm.species_community.id + '/update_publishing_status'
+                ),
+                {
+                    method: 'POST',
+                    body: data,
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingPublishing = false;
-            });
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingPublishing = false;
+                    vm.species_community.publishing_status =
+                        await response.json();
+                    vm.species_community_original.publishing_status =
+                        helpers.copyObject(
+                            vm.species_community.publishing_status
+                        );
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Record has been made private',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Publishing settings cannot be updated because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingPublishing = false;
+                }
+            );
         },
         onImageLoad: function (e) {
             this.downloadingImage = false;
-        }
-    },
-    created: function () {
-        if (!this.species_community) {
-            let end_point_type = 'species';
-            if (this.$route.query.group_type_name === 'community') {
-                end_point_type = 'community';
-            }
-            fetch(`/api/${end_point_type}/${this.$route.params.species_community_id}/internal_${end_point_type}.json`).then(async (response) => {
-                const data = await response.json();
-                this.species_community = data[`${end_point_type}_obj`]; //--temp community_obj
-                this.species_community_original = helpers.copyObject(this.species_community);
-                this.speciesCommunitiesImage = this.species_community.image_doc;
-            },
-                err => {
-                    console.log(err);
-                });
-        }
-    },
-    updated: function () {
-        let vm = this;
-        this.$nextTick(() => {
-            vm.form = document.forms.new_species;
-        });
-    },
-    beforeRouteEnter: function (to, from, next) {
-        let end_point_type = 'species';
-        if (to.query.group_type_name === 'community') {
-            end_point_type = 'community';
-        }
-        fetch(`/api/${end_point_type}/${to.params.species_community_id}/internal_${end_point_type}.json`).then(async (response) => {
-            next(async vm => {
-                const data = await response.json();
-                vm.species_community = data[`${end_point_type}_obj`]; //--temp community_obj
-                vm.species_community_original = helpers.copyObject(vm.species_community);
-                vm.speciesCommunitiesImage = vm.species_community.image_doc;
-            });
         },
-            err => {
-                console.log(err);
-            });
     },
-}
+};
 </script>
 <style scoped>
 @keyframes placeHolderShimmer {
     0% {
-        background-position: -468px 0
+        background-position: -468px 0;
     }
 
     100% {
-        background-position: 468px 0
+        background-position: 468px 0;
     }
 }
 
@@ -1197,7 +1702,12 @@ export default {
     animation-name: placeHolderShimmer;
     animation-timing-function: linear;
     background: darkgray;
-    background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
+    background: linear-gradient(
+        to right,
+        #eeeeee 10%,
+        #dddddd 18%,
+        #eeeeee 33%
+    );
     background-size: 800px 104px;
     height: 100px;
     position: relative;
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue
index bd626cbd..ad45abfd 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue
@@ -2,17 +2,24 @@
     <div id="speciesDocumentHistory">
         <modal
             transition="modal fade"
-            :title="'Species S'+ speciesId +' - Document D' + documentId + ' - History ' "
+            :title="
+                'Species S' +
+                speciesId +
+                ' - Document D' +
+                documentId +
+                ' - History '
+            "
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +31,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'D'+documentId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'SpeciesDocument'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'D' + documentId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'SpeciesDocument'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -73,8 +82,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -112,16 +120,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.speciesdocument.fields.document_number) {
-                        return full.data.speciesdocument.fields.document_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.speciesdocument.fields.document_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "D"+full.data.speciesdocument.pk+'-'+full.revision_sequence;
+                        return (
+                            'D' +
+                            full.data.speciesdocument.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -149,14 +165,17 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    return full.data.speciesdocument.fields.document_number+'-'+full.revision_sequence;
+                    return (
+                        full.data.speciesdocument.fields.document_number +
+                        '-' +
+                        full.revision_sequence
+                    );
                 },
                 name: 'document_number',
             };
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -169,7 +188,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -182,7 +200,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -202,10 +219,11 @@ export default {
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.speciesdocument.fields.document_category) {
-                        return full.data.speciesdocument.fields.document_category.document_category_name;
+                    if (full.data.speciesdocument.fields.document_category) {
+                        return full.data.speciesdocument.fields
+                            .document_category.document_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_category', //_name',
@@ -213,17 +231,19 @@ export default {
         },
         column_sub_category: function () {
             return {
-
                 data: 'data.data.speciesdocument.fields.document_sub_category',
                 defaultContent: '',
                 orderable: false,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if(full.data.speciesdocument.fields.document_sub_category) {
-                        return full.data.speciesdocument.fields.document_sub_category.document_sub_category_name;
+                    if (
+                        full.data.speciesdocument.fields.document_sub_category
+                    ) {
+                        return full.data.speciesdocument.fields
+                            .document_sub_category.document_sub_category_name;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'document_sub_category',
@@ -238,15 +258,23 @@ export default {
                 searchable: true,
                 visible: true,
                 mRender: function (row, type, full) {
-                    let links='';
-                    if(full.data.speciesdocument.fields.active){
+                    let links = '';
+                    if (full.data.speciesdocument.fields.active) {
                         let value = full.data.speciesdocument.fields.name;
                         let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                        links+='<span><a href="/private-media/'+ full.data.speciesdocument.fields._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                    }else{
+                        links +=
+                            '<span><a href="/private-media/' +
+                            full.data.speciesdocument.fields._file +
+                            '" target="_blank">' +
+                            result.text +
+                            '</a> ' +
+                            result.link +
+                            '</span>';
+                    } else {
                         let value = full.data.speciesdocument.fields.name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        links += type == 'export' ? value : '<s>' + result + '</s>';
+                        links +=
+                            type == 'export' ? value : '<s>' + result + '</s>';
                     }
                     return links;
                 },
@@ -264,7 +292,7 @@ export default {
                 render: function (row, type, full) {
                     let value = full.data.speciesdocument.fields.description;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'description',
             };
@@ -275,11 +303,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -306,7 +334,10 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_species_document(this.documentId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_species_document(
+                            this.documentId
+                        ) + '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -316,8 +347,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -325,84 +356,92 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
 
 <style lang="css" scoped>
-    /*ul, li {
+/*ul, li {
         zoom:1;
         display: inline;
     }*/
-    fieldset.scheduler-border {
+fieldset.scheduler-border {
     border: 1px groove #ddd !important;
     padding: 0 1.4em 1.4em 1.4em !important;
     margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow:  0px 0px 0px 0px #000;
-            box-shadow:  0px 0px 0px 0px #000;
-    }
-    legend.scheduler-border {
-    width:inherit; /* Or auto */
-    padding:0 10px; /* To give a bit of padding on the left and right */
-    border-bottom:none;
-    }
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
+    box-shadow: 0px 0px 0px 0px #000;
+}
+legend.scheduler-border {
+    width: inherit; /* Or auto */
+    padding: 0 10px; /* To give a bit of padding on the left and right */
+    border-bottom: none;
+}
 </style>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue
index 06d06001..58d3c358 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue
@@ -2,17 +2,18 @@
     <div id="speciesHistory">
         <modal
             transition="modal fade"
-            :title="'Species S'+ speciesId +' - History'"
+            :title="'Species S' + speciesId + ' - History'"
             :large="true"
             :full="true"
-            :showOK="false"
+            :show-o-k="false"
             cancel-text="Close"
             @cancel="close()"
         >
             <div class="container-fluid">
                 <div class="row">
                     <alert v-if="errorString" type="danger"
-                        ><strong>{{ errorString }}</strong></alert>
+                        ><strong>{{ errorString }}</strong></alert
+                    >
                     <div class="col-sm-12">
                         <div class="form-group">
                             <div class="row">
@@ -24,14 +25,16 @@
                                         :dt-headers="datatable_headers"
                                     />
                                     <div v-if="historyId">
-                                    <DisplayHistory
-                                        ref="display_history"
-                                        :key="historyId"
-                                        :primary_model_number="'S'+speciesId"
-                                        :revision_id="historyId"
-                                        :revision_sequence="historySequence"
-                                        :primary_model="'Species'"
-                                    />
+                                        <DisplayHistory
+                                            ref="display_history"
+                                            :key="historyId"
+                                            :primary_model_number="
+                                                'S' + speciesId
+                                            "
+                                            :revision_id="historyId"
+                                            :revision_sequence="historySequence"
+                                            :primary_model="'Species'"
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -51,7 +54,7 @@ import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
 
 export default {
-    name: 'speciesHistory',
+    name: 'SpeciesHistory',
     components: {
         modal,
         alert,
@@ -70,8 +73,7 @@ export default {
             historyId: null,
             historySequence: null,
             datatable_id: 'history-datatable-' + uuid(),
-            documentDetails: {
-            },
+            documentDetails: {},
             isModalOpen: false,
             errorString: '',
             successString: '',
@@ -110,16 +112,24 @@ export default {
         },
         column_sequence: function () {
             return {
-
                 data: 'revision_sequence',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
                     if (full.data.species.fields.species_number) {
-                        return full.data.species.fields.species_number+'-'+full.revision_sequence;
+                        return (
+                            full.data.species.fields.species_number +
+                            '-' +
+                            full.revision_sequence
+                        );
                     } else {
-                        return "S"+full.data.species.pk+'-'+full.revision_sequence;
+                        return (
+                            'S' +
+                            full.data.species.pk +
+                            '-' +
+                            full.revision_sequence
+                        );
                     }
                 },
                 name: 'revision_sequence',
@@ -153,7 +163,6 @@ export default {
         },
         column_revision_id: function () {
             return {
-
                 data: 'revision_id',
                 orderable: true,
                 searchable: true,
@@ -166,7 +175,6 @@ export default {
         },
         column_revision_date: function () {
             return {
-
                 data: 'date_created',
                 orderable: true,
                 searchable: true,
@@ -179,7 +187,6 @@ export default {
         },
         column_revision_user: function () {
             return {
-
                 data: 'revision_user',
                 orderable: false,
                 searchable: false,
@@ -198,13 +205,16 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.taxonomy !== undefined && full.data.taxonomy.fields !== undefined) {
+                    if (
+                        full.data.taxonomy !== undefined &&
+                        full.data.taxonomy.fields !== undefined
+                    ) {
                         //return full.data.taxonomy.fields.scientific_name;
                         let value = full.data.taxonomy.fields.scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'scientific_name', //_name',
@@ -218,20 +228,27 @@ export default {
                 searchable: true,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.taxonpreviousname !== undefined && full.data.taxonpreviousname.fields !== undefined) {
-                        let value = full.data.taxonpreviousname.fields.previous_scientific_name;
+                    if (
+                        full.data.taxonpreviousname !== undefined &&
+                        full.data.taxonpreviousname.fields !== undefined
+                    ) {
+                        let value =
+                            full.data.taxonpreviousname.fields
+                                .previous_scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
-                    }
-                    else if (full.data.taxonpreviousname !== undefined &&
+                        return type == 'export' ? value : result;
+                    } else if (
+                        full.data.taxonpreviousname !== undefined &&
                         full.data.taxonpreviousname.fields === undefined &&
-                        full.data.taxonpreviousname.length > 0) {
-                        let value = full.data.taxonpreviousname[0].fields.previous_scientific_name;
+                        full.data.taxonpreviousname.length > 0
+                    ) {
+                        let value =
+                            full.data.taxonpreviousname[0].fields
+                                .previous_scientific_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
-                    }
-                    else {
-                        return ''
+                        return type == 'export' ? value : result;
+                    } else {
+                        return '';
                     }
                 },
                 name: 'previous_scientific_name', //_name',
@@ -248,25 +265,35 @@ export default {
                     if (full.data.taxonvernacular !== undefined) {
                         //list not dict
                         if (full.data.taxonvernacular.fields === undefined) {
-                            var combined_name = ""
-                            for (var i = 0; i < full.data.taxonvernacular.length; i++) {
-                                if (i==0) {
-                                    combined_name = full.data.taxonvernacular[i].fields.vernacular_name;
+                            var combined_name = '';
+                            for (
+                                var i = 0;
+                                i < full.data.taxonvernacular.length;
+                                i++
+                            ) {
+                                if (i == 0) {
+                                    combined_name =
+                                        full.data.taxonvernacular[i].fields
+                                            .vernacular_name;
                                 } else {
-                                    combined_name += ","+full.data.taxonvernacular[i].fields.vernacular_name
+                                    combined_name +=
+                                        ',' +
+                                        full.data.taxonvernacular[i].fields
+                                            .vernacular_name;
                                 }
                             }
                             //return combined_name;
                             let value = combined_name;
                             let result = helpers.dtPopover(value, 30, 'hover');
-                            return type=='export' ? value : result;
+                            return type == 'export' ? value : result;
                         }
                         //return full.data.taxonvernacular.fields.vernacular_name;
-                        let value = full.data.taxonvernacular.fields.vernacular_name;
+                        let value =
+                            full.data.taxonvernacular.fields.vernacular_name;
                         let result = helpers.dtPopover(value, 30, 'hover');
-                        return type=='export' ? value : result;
+                        return type == 'export' ? value : result;
                     } else {
-                        return ''
+                        return '';
                     }
                 },
                 name: 'vernacular_name', //_name',
@@ -274,19 +301,25 @@ export default {
         },
         column_processing_status: function () {
             return {
-
                 data: 'data.data.species.fields.processing_status',
                 defaultContent: '',
                 orderable: true,
                 searchable: false,
                 visible: true,
                 render: function (row, type, full) {
-                    if (full.data.speciespublishingstatus !== undefined &&
-                        full.data.species.fields.processing_status === "active"
-                    )
-                    {
-                        let public_status = full.data.speciespublishingstatus.fields.species_public ? "public" : "private";
-                        return full.data.species.fields.processing_status + " - " + public_status;
+                    if (
+                        full.data.speciespublishingstatus !== undefined &&
+                        full.data.species.fields.processing_status === 'active'
+                    ) {
+                        let public_status = full.data.speciespublishingstatus
+                            .fields.species_public
+                            ? 'public'
+                            : 'private';
+                        return (
+                            full.data.species.fields.processing_status +
+                            ' - ' +
+                            public_status
+                        );
                     }
                     return full.data.species.fields.processing_status;
                 },
@@ -295,7 +328,6 @@ export default {
         },
         column_comment: function () {
             return {
-
                 data: 'data.data.species.fields.comment',
                 defaultContent: '',
                 orderable: false,
@@ -305,7 +337,7 @@ export default {
                     //return full.data.species.fields.comment;
                     let value = full.data.species.fields.comment;
                     let result = helpers.dtPopover(value, 30, 'hover');
-                    return type=='export' ? value : result;
+                    return type == 'export' ? value : result;
                 },
                 name: 'comment',
             };
@@ -316,11 +348,11 @@ export default {
                 orderable: false,
                 searchable: false,
                 visible: true,
-                mRender: function(data, type, full){
-                    let links = "";
+                mRender: function (data, type, full) {
+                    let links = '';
                     links += `<a href='#' data-view-history='${full.revision_id}' data-view-history-seq='${full.revision_sequence}'>View</a><br>`;
                     return links;
-                }
+                },
             };
         },
         datatable_options: function () {
@@ -347,7 +379,9 @@ export default {
                 order: [[0, 'desc']],
                 serverSide: true,
                 ajax: {
-                    url: api_endpoints.lookup_history_species(this.speciesId)+"?format=datatables",
+                    url:
+                        api_endpoints.lookup_history_species(this.speciesId) +
+                        '?format=datatables',
                     dataSrc: 'data',
                 },
                 buttons: [
@@ -357,8 +391,8 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> Excel',
                         className: 'btn btn-primary me-2 rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                     {
                         extend: 'csv',
@@ -366,65 +400,73 @@ export default {
                         text: '<i class="fa-solid fa-download"></i> CSV',
                         className: 'btn btn-primary rounded',
                         exportOptions: {
-                            orthogonal: 'export'
-                        }
+                            orthogonal: 'export',
+                        },
                     },
                 ],
-                dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
                 columns: columns,
                 processing: true,
-                drawCallback: function() {
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
+                initComplete: function () {
                     helpers.enablePopovers();
                 },
             };
         },
     },
-    methods: {
-        close: function () {
-            this.errorString = '';
-            this.isModalOpen = false;
-            $('.has-error').removeClass('has-error');
+    watch: {
+        isModalOpen() {
+            let vm = this;
+            if (this.isModalOpen) {
+                vm.$refs.history_datatable.vmDataTable.ajax.reload();
+            }
         },
-        viewHistory: function(id,seq){
-                console.log("viewHistory");
-                this.historyId = parseInt(id);
-                this.historySequence = parseInt(seq);
-                this.uuid++;
-                this.$nextTick(() => {
-                    this.$refs.display_history.isModalOpen = true;
-                });
-            },
-        addEventListeners:function (){
-            let vm=this;
-            vm.$refs.history_datatable.vmDataTable.on('click', 'a[data-view-history]', function(e) {
-                e.preventDefault();
-                var id = $(this).attr('data-view-history');
-                var seq = $(this).attr('data-view-history-seq');
-                vm.viewHistory(id,seq);
-            });
-            vm.$refs.history_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
-                helpers.enablePopovers();
-            });
-        }
     },
-    mounted: function(){
+    mounted: function () {
         let vm = this;
         this.$nextTick(() => {
             vm.addEventListeners();
         });
     },
-    watch: {
-        isModalOpen() {
+    methods: {
+        close: function () {
+            this.errorString = '';
+            this.isModalOpen = false;
+            $('.has-error').removeClass('has-error');
+        },
+        viewHistory: function (id, seq) {
+            console.log('viewHistory');
+            this.historyId = parseInt(id);
+            this.historySequence = parseInt(seq);
+            this.uuid++;
+            this.$nextTick(() => {
+                this.$refs.display_history.isModalOpen = true;
+            });
+        },
+        addEventListeners: function () {
             let vm = this;
-            if (this.isModalOpen) {
-                vm.$refs.history_datatable.vmDataTable.ajax.reload();
-            }
-        }
+            vm.$refs.history_datatable.vmDataTable.on(
+                'click',
+                'a[data-view-history]',
+                function (e) {
+                    e.preventDefault();
+                    var id = $(this).attr('data-view-history');
+                    var seq = $(this).attr('data-view-history-seq');
+                    vm.viewHistory(id, seq);
+                }
+            );
+            vm.$refs.history_datatable.vmDataTable.on(
+                'childRow.dt',
+                function (e, settings) {
+                    helpers.enablePopovers();
+                }
+            );
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
index 662940c3..3b13b5a7 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
@@ -1,17 +1,34 @@
 <template lang="html">
     <div id="renameSpecies">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" extraLarge
-            id="species-rename-modal">
+        <modal
+            id="species-rename-modal"
+            transition="modal fade"
+            :title="title"
+            extra-large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="renameSpeciesForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div>
                             <div class="col-md-12">
-                                <SpeciesCommunitiesComponent v-if="new_rename_species != null" ref="rename_species"
-                                    :species_community_original="new_rename_species"
-                                    :species_community="new_rename_species" id="rename_species" :is_internal="true"
-                                    :is_readonly="true" :rename_species="true"> // rename=true used to make only taxon
+                                <SpeciesCommunitiesComponent
+                                    v-if="new_rename_species != null"
+                                    id="rename_species"
+                                    ref="rename_species"
+                                    :species_community_original="
+                                        new_rename_species
+                                    "
+                                    :species_community="new_rename_species"
+                                    :is_internal="true"
+                                    :is_readonly="true"
+                                    :rename_species="true"
+                                >
+                                    // rename=true used to make only taxon
                                     select editable on form
                                 </SpeciesCommunitiesComponent>
                             </div>
@@ -19,25 +36,49 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-                <button v-if="submitSpeciesRename" class="btn btn-primary pull-right" style="margin-top:5px;"
-                    disabled>Submit <span class="spinner-border spinner-border-sm" role="status"
-                        aria-hidden="true"></span>
-                    <span class="visually-hidden">Loading...</span></button>
-                <button v-else class="btn btn-primary" @click.prevent="ok()" :disabled="submitSpeciesRename">Rename
-                    Species</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        v-if="submitSpeciesRename"
+                        class="btn btn-primary pull-right"
+                        style="margin-top: 5px"
+                        disabled
+                    >
+                        Submit
+                        <span
+                            class="spinner-border spinner-border-sm"
+                            role="status"
+                            aria-hidden="true"
+                        ></span>
+                        <span class="visually-hidden">Loading...</span>
+                    </button>
+                    <button
+                        v-else
+                        class="btn btn-primary"
+                        :disabled="submitSpeciesRename"
+                        @click.prevent="ok()"
+                    >
+                        Rename Species
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import FileField2 from '@/components/forms/filefield.vue'
-import SpeciesCommunitiesComponent from '@/components/form_species_communities.vue'
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import FileField2 from '@/components/forms/filefield.vue';
+import SpeciesCommunitiesComponent from '@/components/form_species_communities.vue';
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
     name: 'SpeciesRename',
     components: {
@@ -49,11 +90,11 @@ export default {
     props: {
         species_community_original: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -67,20 +108,29 @@ export default {
             form: null,
             errors: false,
             errorString: '',
-        }
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         showError: function () {
             var vm = this;
             return vm.errors;
         },
         title: function () {
-            return this.new_rename_species != null ? 'Rename Species ' + this.species_community_original.species_number + ' to ' + this.new_rename_species.species_number : '';
+            return this.new_rename_species != null
+                ? 'Rename Species ' +
+                      this.species_community_original.species_number +
+                      ' to ' +
+                      this.new_rename_species.species_number
+                : '';
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.renameSpeciesForm;
+    },
     methods: {
         ok: function () {
             let vm = this;
@@ -89,7 +139,7 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             let vm = this;
@@ -105,10 +155,9 @@ export default {
                     method: 'DELETE',
                     headers: {
                         'Content-Type': 'application/json',
-                    }
+                    },
                 });
-            }
-            catch (err) {
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
@@ -120,113 +169,133 @@ export default {
             vm.saveError = false;
             let payload = new Object();
             Object.assign(payload, new_species);
-            const result = await fetch(`/api/species/${new_species.id}/species_save.json`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(payload)
-            }).then(async (response) => {
-                return true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            const result = await fetch(
+                `/api/species/${new_species.id}/species_save.json`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.submitSpeciesRename = false;
-                vm.saveError = true;
-                return false;
-            });
+                    body: JSON.stringify(payload),
+                }
+            ).then(
+                async (response) => {
+                    return true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitSpeciesRename = false;
+                    vm.saveError = true;
+                    return false;
+                }
+            );
             return result;
         },
         sendData: async function () {
             let vm = this;
             if (!vm.new_rename_species.taxonomy_id) {
                 swal.fire({
-                    title: "Please fix following errors",
-                    text: "Please select a species by searching for the scientific name",
+                    title: 'Please fix following errors',
+                    text: 'Please select a species by searching for the scientific name',
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
 
-            if (vm.new_rename_species.taxonomy_id && vm.new_rename_species.taxonomy_id == vm.species_community_original.taxonomy_id) {
+            if (
+                vm.new_rename_species.taxonomy_id &&
+                vm.new_rename_species.taxonomy_id ==
+                    vm.species_community_original.taxonomy_id
+            ) {
                 swal.fire({
-                    title: "Please fix following errors",
-                    text: "Species To Rename already exists",
+                    title: 'Please fix following errors',
+                    text: 'Species To Rename already exists',
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
-            }
-            else {
+                });
+            } else {
                 vm.submitSpeciesRename = true;
                 swal.fire({
-                    title: "Rename Species",
-                    text: "Are you sure you want to rename this species?",
-                    icon: "question",
+                    title: 'Rename Species',
+                    text: 'Are you sure you want to rename this species?',
+                    icon: 'question',
                     showCancelButton: true,
-                    confirmButtonText: "Rename Species",
+                    confirmButtonText: 'Rename Species',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                         cancelButton: 'btn btn-secondary',
                     },
                     reverseButtons: true,
-                }).then(async (swalresult) => {
-                    if (swalresult.isConfirmed) {
-                        //---save and submit the new rename species
-                        let new_species = vm.new_rename_species;
-                        //-- save new species before submit
-                        let result = await vm.save_before_submit(new_species);
-                        if (!vm.saveError) {
-                            // add the parent species to the new species object
-                            new_species.parent_species = vm.species_community_original;
-                            let payload = new Object();
-                            Object.assign(payload, new_species);
-                            let submit_url = helpers.add_endpoint_json(api_endpoints.species, new_species.id + '/rename_new_species_submit')
-                            fetch(submit_url, {
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': 'application/json',
-                                },
-                                body: JSON.stringify(payload)
-                            }).then(async (response) => {
-                                vm.new_species = await response.json();
-                                vm.$router.push({
-                                    name: 'internal-species-communities-dash'
-                                });
-                            }, err => {
-                                swal.fire({
-                                    title: 'Submit Error',
-                                    text: helpers.apiVueResourceError(err),
-                                    icon: 'error',
-                                    customClass: {
-                                        confirmButton: 'btn btn-primary',
+                }).then(
+                    async (swalresult) => {
+                        if (swalresult.isConfirmed) {
+                            //---save and submit the new rename species
+                            let new_species = vm.new_rename_species;
+                            //-- save new species before submit
+                            let result =
+                                await vm.save_before_submit(new_species);
+                            if (!vm.saveError) {
+                                // add the parent species to the new species object
+                                new_species.parent_species =
+                                    vm.species_community_original;
+                                let payload = new Object();
+                                Object.assign(payload, new_species);
+                                let submit_url = helpers.add_endpoint_json(
+                                    api_endpoints.species,
+                                    new_species.id +
+                                        '/rename_new_species_submit'
+                                );
+                                fetch(submit_url, {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }).then(
+                                    async (response) => {
+                                        vm.new_species = await response.json();
+                                        vm.$router.push({
+                                            name: 'internal-species-communities-dash',
+                                        });
                                     },
-                                });
-                                vm.saveError = true;
-                            });
+                                    (err) => {
+                                        swal.fire({
+                                            title: 'Submit Error',
+                                            text: helpers.apiVueResourceError(
+                                                err
+                                            ),
+                                            icon: 'error',
+                                            customClass: {
+                                                confirmButton:
+                                                    'btn btn-primary',
+                                            },
+                                        });
+                                        vm.saveError = true;
+                                    }
+                                );
+                            }
                         }
+                        vm.submitSpeciesRename = false;
+                    },
+                    (error) => {
+                        vm.submitSpeciesRename = false;
                     }
-                    vm.submitSpeciesRename = false;
-                }, (error) => {
-                    vm.submitSpeciesRename = false;
-                });
+                );
             }
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.renameSpeciesForm;
-    },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
index 423f75ef..db821a0d 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
@@ -1,111 +1,254 @@
 <template lang="html">
     <div id="splitSpecies">
-        <modal transition="modal fade" @ok="ok()" @cancel="cancel()" :title="title" extraLarge id="species-split-modal">
+        <modal
+            id="species-split-modal"
+            transition="modal fade"
+            :title="title"
+            extra-large
+            @ok="ok()"
+            @cancel="cancel()"
+        >
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="splitSpeciesForm">
-                        <alert v-if="showError" type="danger"><strong>{{ errorString }}</strong></alert>
+                        <alert v-if="showError" type="danger"
+                            ><strong>{{ errorString }}</strong></alert
+                        >
                         <div>
                             <div class="col-md-12">
-                                <ul v-if="is_internal" class="nav nav-pills" id="split-pills-tab" role="tablist">
+                                <ul
+                                    v-if="is_internal"
+                                    id="split-pills-tab"
+                                    class="nav nav-pills"
+                                    role="tablist"
+                                >
                                     <li class="nav-item">
-                                        <a class="nav-link" id="pills-original-tab" data-bs-toggle="pill"
-                                            :href="'#' + originalBody" role="tab" :aria-controls="originalBody"
-                                            aria-selected="true">
-                                            Original {{
-                                                this.species_community_original ?
-                                                    this.species_community_original.species_number : ''
+                                        <a
+                                            id="pills-original-tab"
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            :href="'#' + originalBody"
+                                            role="tab"
+                                            :aria-controls="originalBody"
+                                            aria-selected="true"
+                                        >
+                                            Original
+                                            {{
+                                                species_community_original
+                                                    ? species_community_original.species_number
+                                                    : ''
                                             }}
                                         </a>
                                     </li>
-                                    <li class="nav-item" v-for="(species, index) in new_species_list"
-                                        :key="'li' + species.id">
-                                        <a class="nav-link" :id="'pills-species-' + index + '-tab'"
-                                            data-bs-toggle="pill" :href="'#species-body-' + index" role="tab"
-                                            :aria-controls="'species-body-' + index" aria-selected="false">
-                                            {{ species.species_number }} <span class="ms-2" :id=index><i
-                                                    class="bi bi-trash3-fill"></i></span>
+                                    <li
+                                        v-for="(
+                                            species, index
+                                        ) in new_species_list"
+                                        :key="'li' + species.id"
+                                        class="nav-item"
+                                    >
+                                        <a
+                                            :id="
+                                                'pills-species-' +
+                                                index +
+                                                '-tab'
+                                            "
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            :href="'#species-body-' + index"
+                                            role="tab"
+                                            :aria-controls="
+                                                'species-body-' + index
+                                            "
+                                            aria-selected="false"
+                                        >
+                                            {{ species.species_number }}
+                                            <span :id="index" class="ms-2"
+                                                ><i
+                                                    class="bi bi-trash3-fill"
+                                                ></i
+                                            ></span>
                                         </a>
                                     </li>
                                     <li class="nav-item">
-                                        <a href="#" role="button" class="nav-link" id="btnAdd"
-                                            @click.prevent="addSpecies"><i class="bi bi-window-plus"></i> Add Another
-                                            Species</a>
+                                        <a
+                                            id="btnAdd"
+                                            href="#"
+                                            role="button"
+                                            class="nav-link"
+                                            @click.prevent="addSpecies"
+                                            ><i class="bi bi-window-plus"></i>
+                                            Add Another Species</a
+                                        >
                                     </li>
                                     <li class="nav-item">
-                                        <a class="nav-link" id="finalise-split" data-bs-toggle="pill"
-                                            href="#finalise-split-tab-pane" role="tab"
-                                            aria-controls="finalise-split-tab-pane" aria-selected="false"><i
-                                                class="bi bi-check2-circle"></i>
-                                            Finalise Split</a>
+                                        <a
+                                            id="finalise-split"
+                                            class="nav-link"
+                                            data-bs-toggle="pill"
+                                            href="#finalise-split-tab-pane"
+                                            role="tab"
+                                            aria-controls="finalise-split-tab-pane"
+                                            aria-selected="false"
+                                            ><i class="bi bi-check2-circle"></i>
+                                            Finalise Split</a
+                                        >
                                     </li>
                                 </ul>
-                                <div class="tab-content border p-3" id="split-pills-tabContent">
+                                <div
+                                    id="split-pills-tabContent"
+                                    class="tab-content border p-3"
+                                >
                                     <!-- the fade show active was creating the problem of rendering two thing on tab -->
-                                    <div class="tab-pane" :id="originalBody" role="tabpanel"
-                                        aria-labelledby="pills-original-tab">
-                                        <SpeciesCommunitiesComponent v-if="species_community_original != null"
+                                    <div
+                                        :id="originalBody"
+                                        class="tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="pills-original-tab"
+                                    >
+                                        <SpeciesCommunitiesComponent
+                                            v-if="
+                                                species_community_original !=
+                                                null
+                                            "
+                                            id="species_original"
                                             ref="species_communities_original"
-                                            :species_community_original="species_community_original"
-                                            :species_community="species_community_original" id="species_original"
-                                            :is_internal="true" :is_readonly="true">
+                                            :species_community_original="
+                                                species_community_original
+                                            "
+                                            :species_community="
+                                                species_community_original
+                                            "
+                                            :is_internal="true"
+                                            :is_readonly="true"
+                                        >
                                             <!-- this prop is only send from split species form to make the original species readonly -->
                                         </SpeciesCommunitiesComponent>
                                     </div>
-                                    <div v-for="(species, index) in new_species_list" :key="'div' + species.id"
-                                        class="tab-pane fade" :id="'species-body-' + index" role="tabpanel"
-                                        :aria-labelledby="'pills-species-' + index + '-tab'">
-                                        <SpeciesSplitForm :ref="'species_communities_species' + index"
-                                            :species_community="species" :species_original="species_community_original"
-                                            :id="'species-' + index" :is_internal="true">
+                                    <div
+                                        v-for="(
+                                            species, index
+                                        ) in new_species_list"
+                                        :id="'species-body-' + index"
+                                        :key="'div' + species.id"
+                                        class="tab-pane fade"
+                                        role="tabpanel"
+                                        :aria-labelledby="
+                                            'pills-species-' + index + '-tab'
+                                        "
+                                    >
+                                        <SpeciesSplitForm
+                                            :id="'species-' + index"
+                                            :ref="
+                                                'species_communities_species' +
+                                                index
+                                            "
+                                            :species_community="species"
+                                            :species_original="
+                                                species_community_original
+                                            "
+                                            :is_internal="true"
+                                        >
                                         </SpeciesSplitForm>
                                     </div>
-                                    <div v-if="species_community_original && new_species_list && new_species_list.length > 0"
-                                        class="tab-pane" id="finalise-split-tab-pane" role="tabpanel"
-                                        aria-labelledby="finalise-split">
+                                    <div
+                                        v-if="
+                                            species_community_original &&
+                                            new_species_list &&
+                                            new_species_list.length > 0
+                                        "
+                                        id="finalise-split-tab-pane"
+                                        class="tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="finalise-split"
+                                    >
                                         <p class="border-bottom mb-3">
-                                            <HelpText section_id="species_split_finalise" />
+                                            <HelpText
+                                                section_id="species_split_finalise"
+                                            />
                                         </p>
 
                                         <p>
-                                            You are about to split the following species:
+                                            You are about to split the following
+                                            species:
                                         </p>
 
                                         <div class="border-bottom mb-3 pb-3">
-                                            <span class="badge bg-light text-primary text-capitalize border p-2 fs-6">{{
-                                                species_community_original.species_number }} <template
-                                                    v-if="species_community_original.taxonomy_details.scientific_name">-
+                                            <span
+                                                class="badge bg-light text-primary text-capitalize border p-2 fs-6"
+                                                >{{
+                                                    species_community_original.species_number
+                                                }}
+                                                <template
+                                                    v-if="
+                                                        species_community_original
+                                                            .taxonomy_details
+                                                            .scientific_name
+                                                    "
+                                                    >-
                                                     {{
-                                                        species_community_original.taxonomy_details.scientific_name
-                                                    }}</template></span>
+                                                        species_community_original
+                                                            .taxonomy_details
+                                                            .scientific_name
+                                                    }}</template
+                                                ></span
+                                            >
                                         </div>
 
-                                        <p>
-                                            Into the new species:
-                                        </p>
+                                        <p>Into the new species:</p>
 
                                         <div class="border-bottom mb-3 pb-3">
                                             <ul class="mb-3">
-                                                <li v-for="(species, index) in new_species_list" :key="species.id"
-                                                    class="text-secondary mb-3">
+                                                <li
+                                                    v-for="(
+                                                        species, index
+                                                    ) in new_species_list"
+                                                    :key="species.id"
+                                                    class="text-secondary mb-3"
+                                                >
                                                     <span
-                                                        class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-2">{{
-                                                            species.species_number }} <template
-                                                            v-if="species.taxonomy_details && species.taxonomy_details.scientific_name">-
+                                                        class="badge bg-light text-primary text-capitalize border p-2 fs-6 me-2"
+                                                        >{{
+                                                            species.species_number
+                                                        }}
+                                                        <template
+                                                            v-if="
+                                                                species.taxonomy_details &&
+                                                                species
+                                                                    .taxonomy_details
+                                                                    .scientific_name
+                                                            "
+                                                            >-
                                                             {{
-                                                                species.taxonomy_details.scientific_name }}</template>
+                                                                species
+                                                                    .taxonomy_details
+                                                                    .scientific_name
+                                                            }}</template
+                                                        >
                                                     </span>
                                                 </li>
                                             </ul>
                                         </div>
 
-                                        <button class="button btn btn-primary" @click.prevent="ok()"
-                                            :disabled="finalise_split_loading"><i class="bi bi-check2-circle"></i>
-                                            Finalise
-                                            Split <template v-if="finalise_split_loading"><span
-                                                    class="spinner-border spinner-border-sm" role="status"
-                                                    aria-hidden="true"></span>
-                                                <span class="visually-hidden">Loading...</span></template></button>
+                                        <button
+                                            class="button btn btn-primary"
+                                            :disabled="finalise_split_loading"
+                                            @click.prevent="ok()"
+                                        >
+                                            <i class="bi bi-check2-circle"></i>
+                                            Finalise Split
+                                            <template
+                                                v-if="finalise_split_loading"
+                                                ><span
+                                                    class="spinner-border spinner-border-sm"
+                                                    role="status"
+                                                    aria-hidden="true"
+                                                ></span>
+                                                <span class="visually-hidden"
+                                                    >Loading...</span
+                                                ></template
+                                            >
+                                        </button>
                                     </div>
                                 </div>
                             </div>
@@ -113,23 +256,30 @@
                     </form>
                 </div>
             </div>
-            <div slot="footer">
-                <button type="button" class="btn btn-secondary me-2" @click="cancel">Cancel</button>
-            </div>
+            <template #footer>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary me-2"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
 
 <script>
-
-import modal from '@vue-utils/bootstrap-modal.vue'
-import alert from '@vue-utils/alert.vue'
-import FileField2 from '@/components/forms/filefield.vue'
-import SpeciesCommunitiesComponent from '@/components/form_species_communities.vue'
-import SpeciesSplitForm from '@/components/form_species_split.vue'
+import modal from '@vue-utils/bootstrap-modal.vue';
+import alert from '@vue-utils/alert.vue';
+import FileField2 from '@/components/forms/filefield.vue';
+import SpeciesCommunitiesComponent from '@/components/form_species_communities.vue';
+import SpeciesSplitForm from '@/components/form_species_split.vue';
 import HelpText from '@/components/common/help_text.vue';
 
-import { helpers, api_endpoints } from "@/utils/hooks.js"
+import { helpers, api_endpoints } from '@/utils/hooks.js';
 export default {
     name: 'SpeciesSplit',
     components: {
@@ -143,11 +293,11 @@ export default {
     props: {
         species_community: {
             type: Object,
-            required: true
+            required: true,
         },
         is_internal: {
             type: Boolean,
-            required: true
+            required: true,
         },
     },
     data: function () {
@@ -163,27 +313,46 @@ export default {
             form: null,
             errors: false,
             errorString: '',
-        }
+        };
     },
     computed: {
         csrf_token: function () {
-            return helpers.getCookie('csrftoken')
+            return helpers.getCookie('csrftoken');
         },
         showError: function () {
             var vm = this;
             return vm.errors;
         },
         title: function () {
-            return this.species_community_original != null ? 'Split Species ' + this.species_community_original.species_number : 'Split Species';
+            return this.species_community_original != null
+                ? 'Split Species ' +
+                      this.species_community_original.species_number
+                : 'Split Species';
         },
         species_split_form_url: function () {
             var vm = this;
             return `/api/species/${vm.species_community_original.id}/species_split_save.json`;
         },
     },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.splitSpeciesForm;
+        this.$nextTick(() => {
+            vm.eventListeners();
+        });
+    },
+    updated: function () {
+        if (!this.finalise_split_loading) {
+            //  to show the the added species active i.e the last Tab
+            var lastTabEl = document.querySelector(
+                '#split-pills-tab li:nth-last-child(3) a'
+            );
+            var lastTab = new bootstrap.Tab(lastTabEl);
+            lastTab.show();
+        }
+    },
     methods: {
-        tabClicked: function () {
-        },
+        tabClicked: function () {},
         ok: function () {
             let vm = this;
             if ($(vm.form).valid()) {
@@ -191,13 +360,17 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             let vm = this;
             if (vm.new_species_list.length > 0) {
-                for (var index = 0; index < vm.new_species_list.length; index++) {
-                    vm.removeSpecies((vm.new_species_list[index]).id);
+                for (
+                    var index = 0;
+                    index < vm.new_species_list.length;
+                    index++
+                ) {
+                    vm.removeSpecies(vm.new_species_list[index].id);
                 }
             }
             vm.new_species_list = [];
@@ -210,51 +383,87 @@ export default {
 
             let payload = new Object();
             Object.assign(payload, new_species);
-            const result = await fetch(`/api/species/${new_species.id}/species_split_save.json`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(payload),
-            }).then(async (response) => {
-                return true;
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            const result = await fetch(
+                `/api/species/${new_species.id}/species_split_save.json`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.submitSpeciesSplit = false;
-                vm.saveError = true;
-                return false;
-            });
+                    body: JSON.stringify(payload),
+                }
+            ).then(
+                async (response) => {
+                    return true;
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitSpeciesSplit = false;
+                    vm.saveError = true;
+                    return false;
+                }
+            );
             return result;
         },
         can_submit: function () {
             let vm = this;
-            let blank_fields = []
+            let blank_fields = [];
             for (let index = 0; index < vm.new_species_list.length; index++) {
-                if (vm.new_species_list[index].taxonomy_id == null || vm.new_species_list[index].taxonomy_id == '') {
-                    blank_fields.push(' Species ' + vm.new_species_list[index].species_number + ' Scientific Name is missing')
+                if (
+                    vm.new_species_list[index].taxonomy_id == null ||
+                    vm.new_species_list[index].taxonomy_id == ''
+                ) {
+                    blank_fields.push(
+                        ' Species ' +
+                            vm.new_species_list[index].species_number +
+                            ' Scientific Name is missing'
+                    );
                 }
-                if (vm.new_species_list[index].distribution.distribution == null || vm.new_species_list[index].distribution.distribution == '') {
-                    blank_fields.push(' Species ' + vm.new_species_list[index].species_number + ' Distribution is missing')
+                if (
+                    vm.new_species_list[index].distribution.distribution ==
+                        null ||
+                    vm.new_species_list[index].distribution.distribution == ''
+                ) {
+                    blank_fields.push(
+                        ' Species ' +
+                            vm.new_species_list[index].species_number +
+                            ' Distribution is missing'
+                    );
                 }
-                if (vm.new_species_list[index].regions == null || vm.new_species_list[index].regions == '' || vm.new_species_list[index].regions.length == 0) {
-                    blank_fields.push(' Species ' + vm.new_species_list[index].species_number + ' Region is missing')
+                if (
+                    vm.new_species_list[index].regions == null ||
+                    vm.new_species_list[index].regions == '' ||
+                    vm.new_species_list[index].regions.length == 0
+                ) {
+                    blank_fields.push(
+                        ' Species ' +
+                            vm.new_species_list[index].species_number +
+                            ' Region is missing'
+                    );
                 }
-                if (vm.new_species_list[index].districts == null || vm.new_species_list[index].districts == '' || vm.new_species_list[index].districts.length == 0) {
-                    blank_fields.push(' Species ' + vm.new_species_list[index].species_number + ' District is missing')
+                if (
+                    vm.new_species_list[index].districts == null ||
+                    vm.new_species_list[index].districts == '' ||
+                    vm.new_species_list[index].districts.length == 0
+                ) {
+                    blank_fields.push(
+                        ' Species ' +
+                            vm.new_species_list[index].species_number +
+                            ' District is missing'
+                    );
                 }
             }
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
@@ -264,99 +473,126 @@ export default {
             var missing_data = vm.can_submit();
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
 
             vm.submitSpeciesSplit = true;
             swal.fire({
-                title: "Split Species",
-                text: "Are you sure you want to split this species?",
-                icon: "question",
+                title: 'Split Species',
+                text: 'Are you sure you want to split this species?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Split Species",
+                confirmButtonText: 'Split Species',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
                 },
                 reverseButtons: true,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    vm.finalise_split_loading = true;
-                    for (let index = 0; index < vm.new_species_list.length; index++) {
-                        let new_species = vm.new_species_list[index]
-                        //-- save new species before submit
-                        let result = await vm.save_before_submit(new_species);
-                        if (result) {
-                            // add the parent species to the new species object
-                            new_species.parent_species = vm.species_community_original;
-                            let payload = new Object();
-                            Object.assign(payload, new_species);
-                            let submit_url = helpers.add_endpoint_json(api_endpoints.species, new_species.id + '/split_new_species_submit')
-                            fetch(submit_url, {
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': 'application/json',
-                                },
-                                body: JSON.stringify(payload),
-                            }).then(async (response) => {
-                                vm.new_species = await response.json();
-                                //-- to change status of original species only after all new split species are submitted
-                                if (index == vm.new_species_list.length - 1) {
-                                    vm.submit_original_species();
-                                }
-                            }, err => {
-                                swal.fire({
-                                    title: 'Submit Error',
-                                    text: helpers.apiVueResourceError(err),
-                                    icon: 'error',
-                                    customClass: {
-                                        confirmButton: 'btn btn-primary',
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        vm.finalise_split_loading = true;
+                        for (
+                            let index = 0;
+                            index < vm.new_species_list.length;
+                            index++
+                        ) {
+                            let new_species = vm.new_species_list[index];
+                            //-- save new species before submit
+                            let result =
+                                await vm.save_before_submit(new_species);
+                            if (result) {
+                                // add the parent species to the new species object
+                                new_species.parent_species =
+                                    vm.species_community_original;
+                                let payload = new Object();
+                                Object.assign(payload, new_species);
+                                let submit_url = helpers.add_endpoint_json(
+                                    api_endpoints.species,
+                                    new_species.id + '/split_new_species_submit'
+                                );
+                                fetch(submit_url, {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }).then(
+                                    async (response) => {
+                                        vm.new_species = await response.json();
+                                        //-- to change status of original species only after all new split species are submitted
+                                        if (
+                                            index ==
+                                            vm.new_species_list.length - 1
+                                        ) {
+                                            vm.submit_original_species();
+                                        }
                                     },
-                                });
-                                vm.saveError = true;
-                            });
+                                    (err) => {
+                                        swal.fire({
+                                            title: 'Submit Error',
+                                            text: helpers.apiVueResourceError(
+                                                err
+                                            ),
+                                            icon: 'error',
+                                            customClass: {
+                                                confirmButton:
+                                                    'btn btn-primary',
+                                            },
+                                        });
+                                        vm.saveError = true;
+                                    }
+                                );
+                            }
                         }
+                    } else {
+                        vm.submitSpeciesSplit = false;
                     }
-                } else {
+                },
+                (error) => {
                     vm.submitSpeciesSplit = false;
                 }
-            }, (error) => {
-                vm.submitSpeciesSplit = false;
-            });
+            );
         },
         submit_original_species: function () {
             let vm = this;
             let payload = new Object();
             Object.assign(payload, vm.species_community_original);
-            let submit_url = helpers.add_endpoint_json(api_endpoints.species, vm.species_community_original.id + '/change_status_historical')
+            let submit_url = helpers.add_endpoint_json(
+                api_endpoints.species,
+                vm.species_community_original.id + '/change_status_historical'
+            );
             fetch(submit_url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                vm.species_community_original = await response.json();
-                vm.$router.push({
-                    name: 'internal-species-communities-dash'
-                });
-            }, err => {
-                swal.fire({
-                    title: 'Submit Error',
-                    text: helpers.apiVueResourceError(err),
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            });
+            }).then(
+                async (response) => {
+                    vm.species_community_original = await response.json();
+                    vm.$router.push({
+                        name: 'internal-species-communities-dash',
+                    });
+                },
+                (err) => {
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: helpers.apiVueResourceError(err),
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                }
+            );
         },
         removeSpecies: function (species_id) {
             let vm = this;
@@ -369,8 +605,7 @@ export default {
                         'Content-Type': 'application/json',
                     },
                 });
-            }
-            catch (err) {
+            } catch (err) {
                 console.log(err);
                 if (this.is_internal) {
                     return err;
@@ -381,8 +616,8 @@ export default {
             let vm = this;
             swal.fire({
                 title: 'Add Another Species',
-                text: "Are you sure you want to add another species to the split?",
-                icon: "question",
+                text: 'Are you sure you want to add another species to the split?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Add Another Species',
                 reverseButtons: true,
@@ -392,38 +627,46 @@ export default {
                 },
             }).then(async (swalresult) => {
                 if (swalresult.isConfirmed) {
-                    let newSpeciesId = null
+                    let newSpeciesId = null;
                     try {
-                        const createUrl = api_endpoints.species + "/";
+                        const createUrl = api_endpoints.species + '/';
                         let payload = new Object();
-                        payload.group_type_id = vm.species_community_original.group_type_id;
-                        payload.parent_species_id = vm.species_community_original.id;
+                        payload.group_type_id =
+                            vm.species_community_original.group_type_id;
+                        payload.parent_species_id =
+                            vm.species_community_original.id;
                         fetch(createUrl, {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',
                             },
                             body: JSON.stringify(payload),
-                        }).then(async (response) => {
-                            const data = await response.json();
-                            newSpeciesId = data.id;
-                            fetch(`/api/species/${newSpeciesId}/internal_species.json`).then(async (response) => {
+                        }).then(
+                            async (response) => {
                                 const data = await response.json();
-                                let species_obj = data.species_obj;
-                                //---documents array added to store the select document ids in from the child component
-                                species_obj.documents = []
-                                //---threats array added to store the select threat ids in from the child component
-                                species_obj.threats = []
-                                vm.new_species_list.push(species_obj); //--temp species_obj
+                                newSpeciesId = data.id;
+                                fetch(
+                                    `/api/species/${newSpeciesId}/internal_species.json`
+                                ).then(
+                                    async (response) => {
+                                        const data = await response.json();
+                                        let species_obj = data.species_obj;
+                                        //---documents array added to store the select document ids in from the child component
+                                        species_obj.documents = [];
+                                        //---threats array added to store the select threat ids in from the child component
+                                        species_obj.threats = [];
+                                        vm.new_species_list.push(species_obj); //--temp species_obj
+                                    },
+                                    (err) => {
+                                        console.log(err);
+                                    }
+                                );
                             },
-                                err => {
-                                    console.log(err);
-                                });
-                        }, (error) => {
-                            console.log(error);
-                        });
-                    }
-                    catch (err) {
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    } catch (err) {
                         console.log(err);
                         if (this.is_internal) {
                             return err;
@@ -434,12 +677,12 @@ export default {
         },
         eventListeners: function () {
             let vm = this;
-            $("#splitSpecies .nav-pills").on("click", "span", function () {
+            $('#splitSpecies .nav-pills').on('click', 'span', function () {
                 let species_obj = vm.new_species_list[$(this).attr('id')];
                 swal.fire({
                     title: 'Remove Species',
                     text: `Are you sure you want to remove species ${species_obj.species_number} from the split?`,
-                    icon: "question",
+                    icon: 'question',
                     showCancelButton: true,
                     confirmButtonText: 'Remove Species',
                     reverseButtons: true,
@@ -456,22 +699,7 @@ export default {
             });
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.splitSpeciesForm;
-        this.$nextTick(() => {
-            vm.eventListeners();
-        });
-    },
-    updated: function () {
-        if (!this.finalise_split_loading) {
-            //  to show the the added species active i.e the last Tab
-            var lastTabEl = document.querySelector('#split-pills-tab li:nth-last-child(3) a')
-            var lastTab = new bootstrap.Tab(lastTabEl)
-            lastTab.show();
-        }
-    },
-}
+};
 </script>
 
 <style scoped>
diff --git a/boranga/frontend/boranga/src/components/internal/users/manage.vue b/boranga/frontend/boranga/src/components/internal/users/manage.vue
index e032fd40..3e38228c 100644
--- a/boranga/frontend/boranga/src/components/internal/users/manage.vue
+++ b/boranga/frontend/boranga/src/components/internal/users/manage.vue
@@ -1,16 +1,28 @@
 <template>
-    <div class="container-fluid" id="internalUserInfo">
+    <div id="internalUserInfo" class="container-fluid">
         <div class="row">
             <div class="col-md-10 col-md-offset-1">
                 <div class="row">
-                    <h3>{{ user.first_name }} {{ user.last_name }} - {{ user.dob }} ({{ user.email }})</h3>
+                    <h3>
+                        {{ user.first_name }} {{ user.last_name }} -
+                        {{ user.dob }} ({{ user.email }})
+                    </h3>
                     <div class="col-md-3">
-                        <CommsLogs :comms_url="comms_url" :logs_url="logs_url" :comms_add_url="comms_add_url"
-                            :is_user_log="true" :disable_add_entry="false" />
+                        <CommsLogs
+                            :comms_url="comms_url"
+                            :logs_url="logs_url"
+                            :comms_add_url="comms_add_url"
+                            :is_user_log="true"
+                            :disable_add_entry="false"
+                        />
                     </div>
                     <div class="col-md-9">
                         <ul class="nav nav-tabs">
-                            <li class="active"><a data-toggle="tab" :href="'#' + dTab">Details</a></li>
+                            <li class="active">
+                                <a data-toggle="tab" :href="'#' + dTab"
+                                    >Details</a
+                                >
+                            </li>
                         </ul>
                         <div class="tab-content">
                             <div :id="dTab" class="tab-pane fade in active">
@@ -18,40 +30,97 @@
                                     <div class="col-sm-12">
                                         <div class="panel panel-default">
                                             <div class="panel-heading">
-                                                <h3 class="panel-title">Personal Details
-                                                    <a class="panelClicker" :href="'#' + pdBody" data-toggle="collapse"
-                                                        data-parent="#userInfo" expanded="true" :aria-controls="pdBody">
-                                                        <span class="glyphicon glyphicon-chevron-up pull-right "></span>
+                                                <h3 class="panel-title">
+                                                    Personal Details
+                                                    <a
+                                                        class="panelClicker"
+                                                        :href="'#' + pdBody"
+                                                        data-toggle="collapse"
+                                                        data-parent="#userInfo"
+                                                        expanded="true"
+                                                        :aria-controls="pdBody"
+                                                    >
+                                                        <span
+                                                            class="glyphicon glyphicon-chevron-up pull-right"
+                                                        ></span>
                                                     </a>
                                                 </h3>
                                             </div>
-                                            <div class="panel-body collapse in" :id="pdBody">
-                                                <form class="form-horizontal" name="personal_form" method="post">
+                                            <div
+                                                :id="pdBody"
+                                                class="panel-body collapse in"
+                                            >
+                                                <form
+                                                    class="form-horizontal"
+                                                    name="personal_form"
+                                                    method="post"
+                                                >
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Given
-                                                            Name(s)</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Given
+                                                            Name(s)</label
+                                                        >
                                                         <div class="col-sm-6">
-                                                            <input type="text" class="form-control" name="first_name"
-                                                                placeholder="" v-model="user.first_name">
+                                                            <input
+                                                                v-model="
+                                                                    user.first_name
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="first_name"
+                                                                placeholder=""
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Last Name</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Last Name</label
+                                                        >
                                                         <div class="col-sm-6">
-                                                            <input type="text" class="form-control" name="last_name"
-                                                                placeholder="" v-model="user.last_name">
+                                                            <input
+                                                                v-model="
+                                                                    user.last_name
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="last_name"
+                                                                placeholder=""
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
                                                         <div class="col-sm-12">
-                                                            <button v-if="!updatingPersonal"
+                                                            <button
+                                                                v-if="
+                                                                    !updatingPersonal
+                                                                "
+                                                                class="pull-right btn btn-primary"
+                                                                @click.prevent="
+                                                                    updatePersonal()
+                                                                "
+                                                            >
+                                                                Update
+                                                            </button>
+                                                            <button
+                                                                v-else
+                                                                disabled
                                                                 class="pull-right btn btn-primary"
-                                                                @click.prevent="updatePersonal()">Update</button>
-                                                            <button v-else disabled
-                                                                class="pull-right btn btn-primary">Updating <span
+                                                            >
+                                                                Updating
+                                                                <span
                                                                     class="spinner-border spinner-border-sm"
-                                                                    role="status" aria-hidden="true"></span>
-                                                                <span class="visually-hidden">Loading...</span></button>
+                                                                    role="status"
+                                                                    aria-hidden="true"
+                                                                ></span>
+                                                                <span
+                                                                    class="visually-hidden"
+                                                                    >Loading...</span
+                                                                >
+                                                            </button>
                                                         </div>
                                                     </div>
                                                 </form>
@@ -63,64 +132,166 @@
                                     <div class="col-sm-12">
                                         <div class="panel panel-default">
                                             <div class="panel-heading">
-                                                <h3 class="panel-title">Address Details
-                                                    <a class="panelClicker" :href="'#' + adBody" data-toggle="collapse"
-                                                        expanded="false" data-parent="#userInfo"
-                                                        :aria-controls="adBody">
-                                                        <span class="glyphicon glyphicon-chevron-up pull-right "></span>
+                                                <h3 class="panel-title">
+                                                    Address Details
+                                                    <a
+                                                        class="panelClicker"
+                                                        :href="'#' + adBody"
+                                                        data-toggle="collapse"
+                                                        expanded="false"
+                                                        data-parent="#userInfo"
+                                                        :aria-controls="adBody"
+                                                    >
+                                                        <span
+                                                            class="glyphicon glyphicon-chevron-up pull-right"
+                                                        ></span>
                                                     </a>
                                                 </h3>
                                             </div>
-                                            <div v-if="loading.length == 0" class="panel-body collapse in" :id="adBody">
-                                                <form class="form-horizontal" action="index.html" method="post">
+                                            <div
+                                                v-if="loading.length == 0"
+                                                :id="adBody"
+                                                class="panel-body collapse in"
+                                            >
+                                                <form
+                                                    class="form-horizontal"
+                                                    action="index.html"
+                                                    method="post"
+                                                >
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Street</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Street</label
+                                                        >
                                                         <div class="col-sm-6">
-                                                            <input type="text" class="form-control" name="street"
-                                                                placeholder="" v-model="user.residential_address.line1">
+                                                            <input
+                                                                v-model="
+                                                                    user
+                                                                        .residential_address
+                                                                        .line1
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="street"
+                                                                placeholder=""
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Town/Suburb</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Town/Suburb</label
+                                                        >
                                                         <div class="col-sm-6">
-                                                            <input type="text" class="form-control" name="surburb"
+                                                            <input
+                                                                v-model="
+                                                                    user
+                                                                        .residential_address
+                                                                        .locality
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="surburb"
                                                                 placeholder=""
-                                                                v-model="user.residential_address.locality">
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">State</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >State</label
+                                                        >
                                                         <div class="col-sm-2">
-                                                            <input type="text" class="form-control" name="country"
-                                                                placeholder="" v-model="user.residential_address.state">
+                                                            <input
+                                                                v-model="
+                                                                    user
+                                                                        .residential_address
+                                                                        .state
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="country"
+                                                                placeholder=""
+                                                            />
                                                         </div>
-                                                        <label for="" class="col-sm-2 control-label">Postcode</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-2 control-label"
+                                                            >Postcode</label
+                                                        >
                                                         <div class="col-sm-2">
-                                                            <input type="text" class="form-control" name="postcode"
+                                                            <input
+                                                                v-model="
+                                                                    user
+                                                                        .residential_address
+                                                                        .postcode
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="postcode"
                                                                 placeholder=""
-                                                                v-model="user.residential_address.postcode">
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Country</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Country</label
+                                                        >
                                                         <div class="col-sm-4">
-                                                            <select class="form-control" name="country"
-                                                                v-model="user.residential_address.country">
-                                                                <option v-for="c in countries" :value="c.code">{{ c.name
-                                                                    }}</option>
+                                                            <select
+                                                                v-model="
+                                                                    user
+                                                                        .residential_address
+                                                                        .country
+                                                                "
+                                                                class="form-control"
+                                                                name="country"
+                                                            >
+                                                                <option
+                                                                    v-for="c in countries"
+                                                                    :value="
+                                                                        c.code
+                                                                    "
+                                                                >
+                                                                    {{ c.name }}
+                                                                </option>
                                                             </select>
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
                                                         <div class="col-sm-12">
-                                                            <button v-if="!updatingAddress"
+                                                            <button
+                                                                v-if="
+                                                                    !updatingAddress
+                                                                "
                                                                 class="pull-right btn btn-primary"
-                                                                @click.prevent="updateAddress()">Update</button>
-                                                            <button v-else disabled
-                                                                class="pull-right btn btn-primary">Updating <span
+                                                                @click.prevent="
+                                                                    updateAddress()
+                                                                "
+                                                            >
+                                                                Update
+                                                            </button>
+                                                            <button
+                                                                v-else
+                                                                disabled
+                                                                class="pull-right btn btn-primary"
+                                                            >
+                                                                Updating
+                                                                <span
                                                                     class="spinner-border spinner-border-sm"
-                                                                    role="status" aria-hidden="true"></span>
-                                                                <span class="visually-hidden">Loading...</span></button>
+                                                                    role="status"
+                                                                    aria-hidden="true"
+                                                                ></span>
+                                                                <span
+                                                                    class="visually-hidden"
+                                                                    >Loading...</span
+                                                                >
+                                                            </button>
                                                         </div>
                                                     </div>
                                                 </form>
@@ -132,48 +303,116 @@
                                     <div class="col-sm-12">
                                         <div class="panel panel-default">
                                             <div class="panel-heading">
-                                                <h3 class="panel-title">Contact Details <small></small>
-                                                    <a class="panelClicker" :href="'#' + cdBody" data-toggle="collapse"
-                                                        data-parent="#userInfo" expanded="false"
-                                                        :aria-controls="cdBody">
-                                                        <span class="glyphicon glyphicon-chevron-up pull-right "></span>
+                                                <h3 class="panel-title">
+                                                    Contact Details
+                                                    <small></small>
+                                                    <a
+                                                        class="panelClicker"
+                                                        :href="'#' + cdBody"
+                                                        data-toggle="collapse"
+                                                        data-parent="#userInfo"
+                                                        expanded="false"
+                                                        :aria-controls="cdBody"
+                                                    >
+                                                        <span
+                                                            class="glyphicon glyphicon-chevron-up pull-right"
+                                                        ></span>
                                                     </a>
                                                 </h3>
                                             </div>
-                                            <div class="panel-body collapse in" :id="cdBody">
-                                                <form class="form-horizontal" action="index.html" method="post">
+                                            <div
+                                                :id="cdBody"
+                                                class="panel-body collapse in"
+                                            >
+                                                <form
+                                                    class="form-horizontal"
+                                                    action="index.html"
+                                                    method="post"
+                                                >
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Phone
-                                                            (work)</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Phone (work)</label
+                                                        >
                                                         <div class="col-sm-6">
-                                                            <input type="text" class="form-control" name="phone"
-                                                                placeholder="" v-model="user.phone_number">
+                                                            <input
+                                                                v-model="
+                                                                    user.phone_number
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="phone"
+                                                                placeholder=""
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Mobile</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Mobile</label
+                                                        >
                                                         <div class="col-sm-6">
-                                                            <input type="text" class="form-control" name="mobile"
-                                                                placeholder="" v-model="user.mobile_number">
+                                                            <input
+                                                                v-model="
+                                                                    user.mobile_number
+                                                                "
+                                                                type="text"
+                                                                class="form-control"
+                                                                name="mobile"
+                                                                placeholder=""
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
-                                                        <label for="" class="col-sm-3 control-label">Email</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-3 control-label"
+                                                            >Email</label
+                                                        >
                                                         <div class="col-sm-6">
-                                                            <input type="email" class="form-control" disabled="disabled"
-                                                                name="email" placeholder="" v-model="user.email">
+                                                            <input
+                                                                v-model="
+                                                                    user.email
+                                                                "
+                                                                type="email"
+                                                                class="form-control"
+                                                                disabled="disabled"
+                                                                name="email"
+                                                                placeholder=""
+                                                            />
                                                         </div>
                                                     </div>
                                                     <div class="form-group">
                                                         <div class="col-sm-12">
-                                                            <button v-if="!updatingContact"
+                                                            <button
+                                                                v-if="
+                                                                    !updatingContact
+                                                                "
+                                                                class="pull-right btn btn-primary"
+                                                                @click.prevent="
+                                                                    updateContact()
+                                                                "
+                                                            >
+                                                                Update
+                                                            </button>
+                                                            <button
+                                                                v-else
+                                                                disabled
                                                                 class="pull-right btn btn-primary"
-                                                                @click.prevent="updateContact()">Update</button>
-                                                            <button v-else disabled
-                                                                class="pull-right btn btn-primary">Updating <span
+                                                            >
+                                                                Updating
+                                                                <span
                                                                     class="spinner-border spinner-border-sm"
-                                                                    role="status" aria-hidden="true"></span>
-                                                                <span class="visually-hidden">Loading...</span></button>
+                                                                    role="status"
+                                                                    aria-hidden="true"
+                                                                ></span>
+                                                                <span
+                                                                    class="visually-hidden"
+                                                                    >Loading...</span
+                                                                >
+                                                            </button>
                                                         </div>
                                                     </div>
                                                 </form>
@@ -185,48 +424,124 @@
                                     <div class="col-sm-12">
                                         <div class="panel panel-default">
                                             <div class="panel-heading">
-                                                <h3 class="panel-title">Organisations <small></small>
-                                                    <a class="panelClicker" :href="'#' + odBody" data-toggle="collapse"
-                                                        data-parent="#userInfo" expanded="false"
-                                                        :aria-controls="odBody">
-                                                        <span class="glyphicon glyphicon-chevron-up pull-right "></span>
+                                                <h3 class="panel-title">
+                                                    Organisations
+                                                    <small></small>
+                                                    <a
+                                                        class="panelClicker"
+                                                        :href="'#' + odBody"
+                                                        data-toggle="collapse"
+                                                        data-parent="#userInfo"
+                                                        expanded="false"
+                                                        :aria-controls="odBody"
+                                                    >
+                                                        <span
+                                                            class="glyphicon glyphicon-chevron-up pull-right"
+                                                        ></span>
                                                     </a>
                                                 </h3>
                                             </div>
-                                            <div class="panel-body collapse in" :id="odBody">
-                                                <div v-for="org in user.boranga_organisations">
+                                            <div
+                                                :id="odBody"
+                                                class="panel-body collapse in"
+                                            >
+                                                <div
+                                                    v-for="org in user.boranga_organisations"
+                                                >
                                                     <div class="form-group">
-                                                        <label for=""
-                                                            class="col-sm-2 control-label">Organisation</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-2 control-label"
+                                                            >Organisation</label
+                                                        >
                                                         <div class="col-sm-3">
-                                                            <input type="text" disabled class="form-control"
-                                                                name="organisation" v-model="org.name" placeholder="">
+                                                            <input
+                                                                v-model="
+                                                                    org.name
+                                                                "
+                                                                type="text"
+                                                                disabled
+                                                                class="form-control"
+                                                                name="organisation"
+                                                                placeholder=""
+                                                            />
                                                         </div>
-                                                        <label for="" class="col-sm-2 control-label">ABN/ACN</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-2 control-label"
+                                                            >ABN/ACN</label
+                                                        >
                                                         <div class="col-sm-3">
-                                                            <input type="text" disabled class="form-control"
-                                                                name="organisation" v-model="org.abn" placeholder="">
+                                                            <input
+                                                                v-model="
+                                                                    org.abn
+                                                                "
+                                                                type="text"
+                                                                disabled
+                                                                class="form-control"
+                                                                name="organisation"
+                                                                placeholder=""
+                                                            />
                                                         </div>
-                                                        <a style="cursor:pointer;text-decoration:none;"
-                                                            @click.prevent="unlinkUser(org)"><i
-                                                                class="fa fa-chain-broken fa-2x"></i>&nbsp;Unlink</a>
+                                                        <a
+                                                            style="
+                                                                cursor: pointer;
+                                                                text-decoration: none;
+                                                            "
+                                                            @click.prevent="
+                                                                unlinkUser(org)
+                                                            "
+                                                            ><i
+                                                                class="fa fa-chain-broken fa-2x"
+                                                            ></i
+                                                            >&nbsp;Unlink</a
+                                                        >
                                                     </div>
                                                 </div>
-                                                <div v-for="orgReq in orgRequest_pending">
+                                                <div
+                                                    v-for="orgReq in orgRequest_pending"
+                                                >
                                                     <div class="form-group">
-                                                        <label for=""
-                                                            class="col-sm-2 control-label">Organisation</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-2 control-label"
+                                                            >Organisation</label
+                                                        >
                                                         <div class="col-sm-3">
-                                                            <input type="text" disabled class="form-control"
-                                                                name="organisation" v-model="orgReq.name"
-                                                                placeholder="">
+                                                            <input
+                                                                v-model="
+                                                                    orgReq.name
+                                                                "
+                                                                type="text"
+                                                                disabled
+                                                                class="form-control"
+                                                                name="organisation"
+                                                                placeholder=""
+                                                            />
                                                         </div>
-                                                        <label for="" class="col-sm-2 control-label">ABN/ACN</label>
+                                                        <label
+                                                            for=""
+                                                            class="col-sm-2 control-label"
+                                                            >ABN/ACN</label
+                                                        >
                                                         <div class="col-sm-3">
-                                                            <input type="text" disabled class="form-control"
-                                                                name="organisation" v-model="orgReq.abn" placeholder="">
+                                                            <input
+                                                                v-model="
+                                                                    orgReq.abn
+                                                                "
+                                                                type="text"
+                                                                disabled
+                                                                class="form-control"
+                                                                name="organisation"
+                                                                placeholder=""
+                                                            />
                                                         </div>
-                                                        <label>Pending for Approval (#{{ orgReq.id }})</label>
+                                                        <label
+                                                            >Pending for
+                                                            Approval (#{{
+                                                                orgReq.id
+                                                            }})</label
+                                                        >
                                                     </div>
                                                 </div>
                                             </div>
@@ -243,14 +558,47 @@
 </template>
 
 <script>
-
-import { api_endpoints, helpers } from '@/utils/hooks'
-import datatable from '@vue-utils/datatable.vue'
-import CommsLogs from '@common-utils/comms_logs.vue'
-import utils from '../utils'
+import { api_endpoints, helpers } from '@/utils/hooks';
+import datatable from '@vue-utils/datatable.vue';
+import CommsLogs from '@common-utils/comms_logs.vue';
+import utils from '../utils';
 
 export default {
     name: 'User',
+    components: {
+        datatable,
+        CommsLogs,
+    },
+    beforeRouteEnter: function (to, from, next) {
+        let initialisers = [
+            utils.fetchCountries(),
+            utils.fetchUser(to.params.user_id),
+            utils.fetchOrgRequestPending(to.params.user_id),
+        ];
+        Promise.all(initialisers).then((data) => {
+            next((vm) => {
+                vm.countries = data[0];
+                vm.user = data[1];
+                vm.user.residential_address =
+                    vm.user.residential_address != null
+                        ? vm.user.residential_address
+                        : {};
+                vm.orgRequest_pending = data[2];
+            });
+        });
+    },
+    beforeRouteUpdate: function (to, from, next) {
+        let initialisers = [utils.fetchUser(to.params.user_id)];
+        Promise.all(initialisers).then((data) => {
+            next((vm) => {
+                vm.user = data[0];
+                vm.user.residential_address =
+                    vm.user.residential_address != null
+                        ? vm.user.residential_address
+                        : {};
+            });
+        });
+    },
     data() {
         let vm = this;
         return {
@@ -262,7 +610,7 @@ export default {
             dTab: 'dTab' + vm._uid,
             user: {
                 residential_address: {},
-                borangacompliance_organisations: []
+                borangacompliance_organisations: [],
             },
             loading: [],
             countries: [],
@@ -275,18 +623,32 @@ export default {
             logsTable: null,
             DATE_TIME_FORMAT: 'DD/MM/YYYY HH:mm:ss',
             activate_tables: false,
-            comms_url: helpers.add_endpoint_json(api_endpoints.users, vm.$route.params.user_id + '/comms_log'),
-            logs_url: helpers.add_endpoint_json(api_endpoints.users, vm.$route.params.user_id + '/action_log'),
-            comms_add_url: helpers.add_endpoint_json(api_endpoints.users, vm.$route.params.user_id + '/add_comms_log'),
-            proposals_url: api_endpoints.proposals_paginated_external + '&submitter_id=' + vm.$route.params.user_id,
-            approvals_url: api_endpoints.approvals_paginated_external + '&submitter_id=' + vm.$route.params.user_id,
-            compliance_url: api_endpoints.compliances_paginated_external + '&submitter_id=' + vm.$route.params.user_id,
+            comms_url: helpers.add_endpoint_json(
+                api_endpoints.users,
+                vm.$route.params.user_id + '/comms_log'
+            ),
+            logs_url: helpers.add_endpoint_json(
+                api_endpoints.users,
+                vm.$route.params.user_id + '/action_log'
+            ),
+            comms_add_url: helpers.add_endpoint_json(
+                api_endpoints.users,
+                vm.$route.params.user_id + '/add_comms_log'
+            ),
+            proposals_url:
+                api_endpoints.proposals_paginated_external +
+                '&submitter_id=' +
+                vm.$route.params.user_id,
+            approvals_url:
+                api_endpoints.approvals_paginated_external +
+                '&submitter_id=' +
+                vm.$route.params.user_id,
+            compliance_url:
+                api_endpoints.compliances_paginated_external +
+                '&submitter_id=' +
+                vm.$route.params.user_id,
             orgRequest_pending: [],
-        }
-    },
-    components: {
-        datatable,
-        CommsLogs
+        };
     },
     computed: {
         isLoading: function () {
@@ -296,37 +658,17 @@ export default {
             return this.uploadedID != null ? this.uploadedID.name : '';
         },
     },
-    beforeRouteEnter: function (to, from, next) {
-        let initialisers = [
-            utils.fetchCountries(),
-            utils.fetchUser(to.params.user_id),
-            utils.fetchOrgRequestPending(to.params.user_id)
-        ]
-        Promise.all(initialisers).then(data => {
-            next(vm => {
-                vm.countries = data[0];
-                vm.user = data[1];
-                vm.user.residential_address = vm.user.residential_address != null ? vm.user.residential_address : {};
-                vm.orgRequest_pending = data[2];
-            });
-        });
-    },
-    beforeRouteUpdate: function (to, from, next) {
-        let initialisers = [
-            utils.fetchUser(to.params.user_id)
-        ]
-        Promise.all(initialisers).then(data => {
-            next(vm => {
-                vm.user = data[0];
-                vm.user.residential_address = vm.user.residential_address != null ? vm.user.residential_address : {};
-            });
-        });
+    mounted: function () {
+        let vm = this;
+        this.personal_form = document.forms.personal_form;
     },
     methods: {
         updatePersonal: function () {
             let vm = this;
             vm.updatingPersonal = true;
-            if (vm.user.residential_address == null) { vm.user.residential_address = {}; }
+            if (vm.user.residential_address == null) {
+                vm.user.residential_address = {};
+            }
             let params = '?';
             params += '&first_name=' + vm.user.first_name;
             params += '&last_name=' + vm.user.last_name;
@@ -335,147 +677,221 @@ export default {
                 let error_msg = 'Please ensure all fields are filled in.';
                 swal({
                     title: 'Update Personal Details',
-                    html: 'There was an error updating the user personal details.<br/>' + error_msg,
-                    type: 'error'
+                    html:
+                        'There was an error updating the user personal details.<br/>' +
+                        error_msg,
+                    type: 'error',
                 }).then(() => {
                     vm.updatingPersonal = false;
                 });
                 return;
             }
-            fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_personal')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.users,
+                    vm.user.id + '/update_personal'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(vm.user),
+                }
+            ).then(
+                (response) => {
+                    swal({
+                        title: 'Update Personal Details',
+                        html: 'User personal details has been successfully updated.',
+                        type: 'success',
+                    }).then(() => {
+                        vm.updatingPersonal = false;
+                    });
                 },
-                body: JSON.stringify(vm.user)
-            }).then((response) => {
-                swal({
-                    title: 'Update Personal Details',
-                    html: 'User personal details has been successfully updated.',
-                    type: 'success',
-                }).then(() => {
+                (error) => {
                     vm.updatingPersonal = false;
-                });
-            }, (error) => {
-                vm.updatingPersonal = false;
-                let error_msg = '<br/>';
-                for (var key in error.body) {
-                    if (key === 'dob') {
-                        error_msg += 'dob: Please enter a valid date.<br/>';
-                    } else {
-                        error_msg += key + ': ' + error.body[key] + '<br/>';
+                    let error_msg = '<br/>';
+                    for (var key in error.body) {
+                        if (key === 'dob') {
+                            error_msg += 'dob: Please enter a valid date.<br/>';
+                        } else {
+                            error_msg += key + ': ' + error.body[key] + '<br/>';
+                        }
                     }
+                    swal({
+                        title: 'Update Personal Details',
+                        html:
+                            'There was an error updating the user personal details.<br/>' +
+                            error_msg,
+                        type: 'error',
+                    });
                 }
-                swal({
-                    title: 'Update Personal Details',
-                    html: 'There was an error updating the user personal details.<br/>' + error_msg,
-                    type: 'error'
-                })
-            });
+            );
         },
         updateContact: function () {
             let vm = this;
             vm.updatingContact = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_contact')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.users,
+                    vm.user.id + '/update_contact'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(vm.user),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingContact = false;
+                    vm.user = await response.json();
+                    if (vm.user.residential_address == null) {
+                        vm.user.residential_address = {};
+                    }
+                    swal({
+                        title: 'Update Contact Details',
+                        html: 'User contact details has been successfully updated.',
+                        type: 'success',
+                    });
                 },
-                body: JSON.stringify(vm.user)
-            }).then(async (response) => {
-                vm.updatingContact = false;
-                vm.user = await response.json();
-                if (vm.user.residential_address == null) { vm.user.residential_address = {}; }
-                swal({
-                    title: 'Update Contact Details',
-                    html: 'User contact details has been successfully updated.',
-                    type: 'success',
-                })
-            }, (error) => {
-                vm.updatingContact = false;
-                let error_msg = '<br/>';
-                for (var key in error.body) {
-                    error_msg += key + ': ' + error.body[key] + '<br/>';
+                (error) => {
+                    vm.updatingContact = false;
+                    let error_msg = '<br/>';
+                    for (var key in error.body) {
+                        error_msg += key + ': ' + error.body[key] + '<br/>';
+                    }
+                    swal({
+                        title: 'Update Contact Details',
+                        html:
+                            'There was an error updating the user contact details.<br/>' +
+                            error_msg,
+                        type: 'error',
+                    });
                 }
-                swal({
-                    title: 'Update Contact Details',
-                    html: 'There was an error updating the user contact details.<br/>' + error_msg,
-                    type: 'error'
-                })
-            });
+            );
         },
         updateAddress: function () {
             let vm = this;
             vm.updatingAddress = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/update_address')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.users,
+                    vm.user.id + '/update_address'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(vm.user),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingAddress = false;
+                    vm.user = await response.json();
+                    if (vm.user.residential_address == null) {
+                        vm.user.residential_address = {};
+                    }
+                    swal({
+                        title: 'Update Address Details',
+                        html: 'User address details has been successfully updated.',
+                        type: 'success',
+                    });
                 },
-                body: JSON.stringify(vm.user)
-            }).then(async (response) => {
-                vm.updatingAddress = false;
-                vm.user = await response.json();
-                if (vm.user.residential_address == null) { vm.user.residential_address = {}; }
-                swal({
-                    title: 'Update Address Details',
-                    html: 'User address details has been successfully updated.',
-                    type: 'success',
-                })
-            }, (error) => {
-                vm.updatingAddress = false;
-                let error_msg = '<br/>';
-                for (var key in error.body) {
-                    error_msg += key + ': ' + error.body[key] + '<br/>';
+                (error) => {
+                    vm.updatingAddress = false;
+                    let error_msg = '<br/>';
+                    for (var key in error.body) {
+                        error_msg += key + ': ' + error.body[key] + '<br/>';
+                    }
+                    swal({
+                        title: 'Update Address Details',
+                        html:
+                            'There was an error updating the user address details.<br/>' +
+                            error_msg,
+                        type: 'error',
+                    });
                 }
-                swal({
-                    title: 'Update Address Details',
-                    html: 'There was an error updating the user address details.<br/>' + error_msg,
-                    type: 'error'
-                })
-            });
+            );
         },
         unlinkUser: function (org) {
             let vm = this;
             let org_name = org.name;
             swal({
-                title: "Unlink From Organisation",
-                text: "Are you sure you want to unlink this user from " + org.name + " ?",
-                type: "question",
+                title: 'Unlink From Organisation',
+                text:
+                    'Are you sure you want to unlink this user from ' +
+                    org.name +
+                    ' ?',
+                type: 'question',
                 showCancelButton: true,
-                confirmButtonText: 'Accept'
-            }).then((result) => {
-                if (result.value) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.organisations, org.id + '/unlink_user'), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ user_id: vm.user.id })
-                    }).then((response) => {
-                        fetch(helpers.add_endpoint_json(api_endpoints.users, vm.user.id)).then(async (response) => {
-                            vm.user = await response.json();
-                            if (vm.user.residential_address == null) { vm.user.residential_address = {}; }
-                            if (vm.user.borangacompliance_organisations && vm.user.borangacompliance_organisations.length > 0) {
-                                vm.managesOrg = 'Yes'
+                confirmButtonText: 'Accept',
+            }).then(
+                (result) => {
+                    if (result.value) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.organisations,
+                                org.id + '/unlink_user'
+                            ),
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify({ user_id: vm.user.id }),
                             }
-                            swal(
-                                'Unlink',
-                                'The user has been successfully unlinked from ' + org_name + '.',
-                                'success'
-                            )
-                        }, (error) => {
-                        })
-                    }, (error) => {
-                        swal(
-                            'Unlink',
-                            'There was an error unlinking the user from ' + org_name + '.',
-                            'error'
-                        )
-                    });
-                }
-            }, (error) => {
-            });
+                        ).then(
+                            (response) => {
+                                fetch(
+                                    helpers.add_endpoint_json(
+                                        api_endpoints.users,
+                                        vm.user.id
+                                    )
+                                ).then(
+                                    async (response) => {
+                                        vm.user = await response.json();
+                                        if (
+                                            vm.user.residential_address == null
+                                        ) {
+                                            vm.user.residential_address = {};
+                                        }
+                                        if (
+                                            vm.user
+                                                .borangacompliance_organisations &&
+                                            vm.user
+                                                .borangacompliance_organisations
+                                                .length > 0
+                                        ) {
+                                            vm.managesOrg = 'Yes';
+                                        }
+                                        swal(
+                                            'Unlink',
+                                            'The user has been successfully unlinked from ' +
+                                                org_name +
+                                                '.',
+                                            'success'
+                                        );
+                                    },
+                                    (error) => {}
+                                );
+                            },
+                            (error) => {
+                                swal(
+                                    'Unlink',
+                                    'There was an error unlinking the user from ' +
+                                        org_name +
+                                        '.',
+                                    'error'
+                                );
+                            }
+                        );
+                    }
+                },
+                (error) => {}
+            );
         },
         readFileID: function () {
             let vm = this;
@@ -503,45 +919,51 @@ export default {
                 swal({
                     title: 'Upload ID',
                     html: 'Please select a file to upload.',
-                    type: 'error'
+                    type: 'error',
                 });
             } else {
-                fetch(helpers.add_endpoint_json(api_endpoints.users, (vm.user.id + '/upload_id')), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.users,
+                        vm.user.id + '/upload_id'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: data,
+                    }
+                ).then(
+                    (response) => {
+                        vm.uploadingID = false;
+                        vm.uploadedID = null;
+                        swal({
+                            title: 'Upload ID',
+                            html: 'The user ID has been successfully uploaded.',
+                            type: 'success',
+                        }).then(() => {
+                            window.location.reload(true);
+                        });
                     },
-                    body: data
-                }).then((response) => {
-                    vm.uploadingID = false;
-                    vm.uploadedID = null;
-                    swal({
-                        title: 'Upload ID',
-                        html: 'The user ID has been successfully uploaded.',
-                        type: 'success',
-                    }).then(() => {
-                        window.location.reload(true);
-                    });
-                }, (error) => {
-                    console.log(error);
-                    vm.uploadingID = false;
-                    let error_msg = '<br/>';
-                    for (var key in error.body) {
-                        error_msg += key + ': ' + error.body[key] + '<br/>';
+                    (error) => {
+                        console.log(error);
+                        vm.uploadingID = false;
+                        let error_msg = '<br/>';
+                        for (var key in error.body) {
+                            error_msg += key + ': ' + error.body[key] + '<br/>';
+                        }
+                        swal({
+                            title: 'Upload ID',
+                            html:
+                                'There was an error uploading the user ID.<br/>' +
+                                error_msg,
+                            type: 'error',
+                        });
                     }
-                    swal({
-                        title: 'Upload ID',
-                        html: 'There was an error uploading the user ID.<br/>' + error_msg,
-                        type: 'error'
-                    });
-                });
+                );
             }
         },
-
-    },
-    mounted: function () {
-        let vm = this;
-        this.personal_form = document.forms.personal_form;
     },
-}
+};
 </script>
diff --git a/boranga/frontend/boranga/src/components/user/profile.vue b/boranga/frontend/boranga/src/components/user/profile.vue
index c4384af0..329048d4 100755
--- a/boranga/frontend/boranga/src/components/user/profile.vue
+++ b/boranga/frontend/boranga/src/components/user/profile.vue
@@ -9,11 +9,9 @@
 <script>
 export default {
     setup() {
-
-
-        return {}
-    }
-}
+        return {};
+    },
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js b/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js
index 7fc2b0b9..ad9b56f6 100755
--- a/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js
+++ b/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js
@@ -20,7 +20,7 @@
  */
 
 'use strict';
- import $ from 'jquery'
+import $ from 'jquery';
 
 /**
  * Constructor for responsive datables helper.
@@ -76,12 +76,15 @@ function ResponsiveDatatablesHelper(tableSelector, breakpoints, options) {
     this.lastColumnsHiddenIndexes = [];
 
     // Save state
-    var fileName = window.location.pathname.split("/").pop();
+    var fileName = window.location.pathname.split('/').pop();
     var context = this.api.settings().context[0];
 
     this.tableId = context.sTableId;
     this.saveState = context.oInit.bStateSave;
-    this.cookieName = 'DataTablesResponsiveHelper_' + this.tableId + (fileName ? '_' + fileName : '');
+    this.cookieName =
+        'DataTablesResponsiveHelper_' +
+        this.tableId +
+        (fileName ? '_' + fileName : '');
     this.lastStateExists = false;
 
     // Index of the th in the header tr that stores where the attribute
@@ -116,15 +119,17 @@ function ResponsiveDatatablesHelper(tableSelector, breakpoints, options) {
         hideEmptyColumnsInRowDetail: false,
         clickOn: 'icon',
         showDetail: null,
-        hideDetail: null
+        hideDetail: null,
     };
 
     // Expand icon template
     this.expandIconTemplate = '<span class="responsiveExpander"></span>';
 
     // Row template
-    this.rowTemplate = '<tr class="row-detail"><td><ul><!--column item--></ul></td></tr>';
-    this.rowLiTemplate = '<li><span class="columnTitle"><!--column title--></span>: <span class="columnValue"><!--column value--></span></li>';
+    this.rowTemplate =
+        '<tr class="row-detail"><td><ul><!--column item--></ul></td></tr>';
+    this.rowLiTemplate =
+        '<li><span class="columnTitle"><!--column title--></span>: <span class="columnValue"><!--column value--></span></li>';
 
     // Responsive behavior on/off flag
     this.disabled = true;
@@ -172,7 +177,7 @@ ResponsiveDatatablesHelper.prototype.initBreakpoints = function () {
             breakpointsSorted.push({
                 name: prop,
                 upperLimit: this.origBreakpointsDefs[prop],
-                columnsToHide: []
+                columnsToHide: [],
             });
         }
 
@@ -189,10 +194,10 @@ ResponsiveDatatablesHelper.prototype.initBreakpoints = function () {
 
         // Add the default breakpoint which shows all (has no upper limit).
         breakpointsSorted.push({
-            name         : 'always',
-            lowerLimit   : lowerLimit,
-            upperLimit   : Infinity,
-            columnsToHide: []
+            name: 'always',
+            lowerLimit: lowerLimit,
+            upperLimit: Infinity,
+            columnsToHide: [],
         });
 
         // Copy the sorted breakpoint array into the breakpoints object using the
@@ -242,12 +247,16 @@ ResponsiveDatatablesHelper.prototype.initBreakpoints = function () {
                         // default breakpoint.
                         for (var prop in this.breakpoints) {
                             if (this.breakpoints[prop].name !== 'default') {
-                                this.breakpoints[prop].columnsToHide.push(this.columnIndexes[index]);
+                                this.breakpoints[prop].columnsToHide.push(
+                                    this.columnIndexes[index]
+                                );
                             }
                         }
                     } else if (this.breakpoints[bp] !== undefined) {
                         // Translate visible column index to internal column index.
-                        this.breakpoints[bp].columnsToHide.push(this.columnIndexes[index]);
+                        this.breakpoints[bp].columnsToHide.push(
+                            this.columnIndexes[index]
+                        );
                     }
                 }
             }
@@ -260,18 +269,20 @@ ResponsiveDatatablesHelper.prototype.initBreakpoints = function () {
  *
  * @param {Boolean} bindFlag
  */
-ResponsiveDatatablesHelper.prototype.setWindowsResizeHandler = function(bindFlag) {
+ResponsiveDatatablesHelper.prototype.setWindowsResizeHandler = function (
+    bindFlag
+) {
     if (bindFlag === undefined) {
         bindFlag = true;
     }
 
     if (bindFlag) {
         var that = this;
-        $(window).bind("resize", function () {
+        $(window).bind('resize', function () {
             that.respond();
         });
     } else {
-        $(window).unbind("resize");
+        $(window).unbind('resize');
     }
 };
 
@@ -292,7 +303,10 @@ ResponsiveDatatablesHelper.prototype.respond = function () {
 
     for (var prop in this.breakpoints) {
         var element = this.breakpoints[prop];
-        if ((!element.lowerLimit || newWindowWidth > element.lowerLimit) && (!element.upperLimit || newWindowWidth <= element.upperLimit)) {
+        if (
+            (!element.lowerLimit || newWindowWidth > element.lowerLimit) &&
+            (!element.upperLimit || newWindowWidth <= element.upperLimit)
+        ) {
             this.currentBreakpoint = element.name;
             newColumnsToHide = element.columnsToHide;
         }
@@ -310,13 +324,21 @@ ResponsiveDatatablesHelper.prototype.respond = function () {
         } else if (this.lastBreakpoint != this.currentBreakpoint) {
             // Different breakpoints
             columnShowHide = true;
-        } else if (this.columnsHiddenIndexes.length !== newColumnsToHide.length) {
+        } else if (
+            this.columnsHiddenIndexes.length !== newColumnsToHide.length
+        ) {
             // Difference in number of hidden columns
             columnShowHide = true;
         } else {
             // Possible same number of columns but check for difference in columns
-            var d1 = this.difference(this.columnsHiddenIndexes, newColumnsToHide).length;
-            var d2 = this.difference(newColumnsToHide, this.columnsHiddenIndexes).length;
+            var d1 = this.difference(
+                this.columnsHiddenIndexes,
+                newColumnsToHide
+            ).length;
+            var d2 = this.difference(
+                newColumnsToHide,
+                this.columnsHiddenIndexes
+            ).length;
             columnShowHide = d1 + d2 > 0;
         }
     }
@@ -327,14 +349,16 @@ ResponsiveDatatablesHelper.prototype.respond = function () {
         // caused by the next windows width change.
         this.skipNextWindowsWidthChange = true;
         this.columnsHiddenIndexes = newColumnsToHide;
-        this.columnsShownIndexes = this.difference(this.columnIndexes, this.columnsHiddenIndexes);
+        this.columnsShownIndexes = this.difference(
+            this.columnIndexes,
+            this.columnsHiddenIndexes
+        );
         this.showHideColumns();
         this.lastBreakpoint = this.currentBreakpoint;
         this.setState();
         this.skipNextWindowsWidthChange = false;
     }
 
-
     // We don't skip this part.
     // If one or more columns have been hidden, add the has-columns-hidden class to table.
     // This class will show what state the table is in.
@@ -351,7 +375,10 @@ ResponsiveDatatablesHelper.prototype.respond = function () {
     } else {
         this.tableElement.removeClass('has-columns-hidden');
         $('tr.row-detail', this.tableElement).each(function (event) {
-            ResponsiveDatatablesHelper.prototype.hideRowDetail(that, $(this).prev());
+            ResponsiveDatatablesHelper.prototype.hideRowDetail(
+                that,
+                $(this).prev()
+            );
         });
     }
 };
@@ -374,11 +401,17 @@ ResponsiveDatatablesHelper.prototype.showHideColumns = function () {
     // Rebuild details to reflect shown/hidden column changes.
     var that = this;
     $('tr.row-detail', this.tableElement).each(function () {
-        ResponsiveDatatablesHelper.prototype.hideRowDetail(that, $(this).prev());
+        ResponsiveDatatablesHelper.prototype.hideRowDetail(
+            that,
+            $(this).prev()
+        );
     });
     if (this.tableElement.hasClass('has-columns-hidden')) {
         $('tr.detail-show', this.tableElement).each(function (index, element) {
-            ResponsiveDatatablesHelper.prototype.showRowDetail(that, $(element));
+            ResponsiveDatatablesHelper.prototype.showRowDetail(
+                that,
+                $(element)
+            );
         });
     }
 };
@@ -411,13 +444,26 @@ ResponsiveDatatablesHelper.prototype.createExpandIcon = function (tr) {
                 // Respond to click event on expander icon.
                 switch (this.options.clickOn) {
                     case 'cell':
-                        td.on('click', {responsiveDatatablesHelperInstance: this}, this.showRowDetailEventHandler);
+                        td.on(
+                            'click',
+                            { responsiveDatatablesHelperInstance: this },
+                            this.showRowDetailEventHandler
+                        );
                         break;
                     case 'row':
-                        $(tr).on('click', {responsiveDatatablesHelperInstance: this}, this.showRowDetailEventHandler);
+                        $(tr).on(
+                            'click',
+                            { responsiveDatatablesHelperInstance: this },
+                            this.showRowDetailEventHandler
+                        );
                         break;
                     default:
-                        td.on('click', 'span.responsiveExpander', {responsiveDatatablesHelperInstance: this}, this.showRowDetailEventHandler);
+                        td.on(
+                            'click',
+                            'span.responsiveExpander',
+                            { responsiveDatatablesHelperInstance: this },
+                            this.showRowDetailEventHandler
+                        );
                         break;
                 }
             }
@@ -434,8 +480,11 @@ ResponsiveDatatablesHelper.prototype.createExpandIcon = function (tr) {
  *
  * @param {Object} event jQuery event object
  */
-ResponsiveDatatablesHelper.prototype.showRowDetailEventHandler = function (event) {
-    var responsiveDatatablesHelperInstance = event.data.responsiveDatatablesHelperInstance;
+ResponsiveDatatablesHelper.prototype.showRowDetailEventHandler = function (
+    event
+) {
+    var responsiveDatatablesHelperInstance =
+        event.data.responsiveDatatablesHelperInstance;
     if (responsiveDatatablesHelperInstance.disabled) {
         return;
     }
@@ -452,9 +501,15 @@ ResponsiveDatatablesHelper.prototype.showRowDetailEventHandler = function (event
 
     // Show/hide row details
     if (tr.hasClass('detail-show')) {
-        ResponsiveDatatablesHelper.prototype.hideRowDetail(responsiveDatatablesHelperInstance, tr);
+        ResponsiveDatatablesHelper.prototype.hideRowDetail(
+            responsiveDatatablesHelperInstance,
+            tr
+        );
     } else {
-        ResponsiveDatatablesHelper.prototype.showRowDetail(responsiveDatatablesHelperInstance, tr);
+        ResponsiveDatatablesHelper.prototype.showRowDetail(
+            responsiveDatatablesHelperInstance,
+            tr
+        );
     }
 
     tr.toggleClass('detail-show');
@@ -469,7 +524,10 @@ ResponsiveDatatablesHelper.prototype.showRowDetailEventHandler = function (event
  * @param {ResponsiveDatatablesHelper} responsiveDatatablesHelperInstance instance of ResponsiveDatatablesHelper
  * @param {Object}                     tr                                 jQuery wrapped set
  */
-ResponsiveDatatablesHelper.prototype.showRowDetail = function (responsiveDatatablesHelperInstance, tr) {
+ResponsiveDatatablesHelper.prototype.showRowDetail = function (
+    responsiveDatatablesHelperInstance,
+    tr
+) {
     // Get column because we need their titles.
     var api = responsiveDatatablesHelperInstance.api;
     var columns = api.columns().header();
@@ -481,7 +539,11 @@ ResponsiveDatatablesHelper.prototype.showRowDetail = function (responsiveDatatab
     var ul = $('ul', newTr);
 
     // Loop through hidden columns and create an li for each of them.
-    for (var i = 0; i < responsiveDatatablesHelperInstance.columnsHiddenIndexes.length; i++) {
+    for (
+        var i = 0;
+        i < responsiveDatatablesHelperInstance.columnsHiddenIndexes.length;
+        i++
+    ) {
         var index = responsiveDatatablesHelperInstance.columnsHiddenIndexes[i];
 
         // Get row td
@@ -489,31 +551,48 @@ ResponsiveDatatablesHelper.prototype.showRowDetail = function (responsiveDatatab
         var td = api.cell(rowIndex, index).node();
 
         // Don't create li if contents are empty (depends on hideEmptyColumnsInRowDetail option).
-        if (!responsiveDatatablesHelperInstance.options.hideEmptyColumnsInRowDetail || td.innerHTML.trim().length) {
+        if (
+            !responsiveDatatablesHelperInstance.options
+                .hideEmptyColumnsInRowDetail ||
+            td.innerHTML.trim().length
+        ) {
             var li = $(responsiveDatatablesHelperInstance.rowLiTemplate);
             var hiddenColumnName = $(columns[index]).attr('data-name');
-            $('.columnTitle', li).html(hiddenColumnName !== undefined ? hiddenColumnName : columns[index].innerHTML);
+            $('.columnTitle', li).html(
+                hiddenColumnName !== undefined
+                    ? hiddenColumnName
+                    : columns[index].innerHTML
+            );
             var contents = $(td).contents();
             var clonedContents = contents.clone();
 
             // Select elements' selectedIndex are not cloned.  Do it manually.
             for (var n = 0, m = contents.length; n < m; n++) {
                 var node = contents[n];
-                if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SELECT') {
-                    clonedContents[n].selectedIndex = node.selectedIndex
+                if (
+                    node.nodeType === Node.ELEMENT_NODE &&
+                    node.tagName === 'SELECT'
+                ) {
+                    clonedContents[n].selectedIndex = node.selectedIndex;
                 }
             }
 
             // Set the column contents and save the original td source.
-            $('.columnValue', li).append(clonedContents).data('originalTdSource', td);
+            $('.columnValue', li)
+                .append(clonedContents)
+                .data('originalTdSource', td);
 
             // Copy index to data attribute, so we'll know where to put the value when the tr.row-detail is removed.
             li.attr('data-column', index);
 
             // Copy td class to new li.
             var tdClass = $(td).attr('class');
-            if (tdClass !== 'undefined' && tdClass !== false && tdClass !== '') {
-                      li.addClass(tdClass)
+            if (
+                tdClass !== 'undefined' &&
+                tdClass !== false &&
+                tdClass !== ''
+            ) {
+                li.addClass(tdClass);
             }
 
             ul.append(li);
@@ -521,14 +600,16 @@ ResponsiveDatatablesHelper.prototype.showRowDetail = function (responsiveDatatab
     }
 
     // Create tr colspan attribute.
-    var colspan = responsiveDatatablesHelperInstance.columnIndexes.length - responsiveDatatablesHelperInstance.columnsHiddenIndexes.length;
+    var colspan =
+        responsiveDatatablesHelperInstance.columnIndexes.length -
+        responsiveDatatablesHelperInstance.columnsHiddenIndexes.length;
     newTr.find('> td').attr('colspan', colspan);
 
     // Append the new tr after the current tr.
     tr.after(newTr);
 
     // call the showDetail function if needbe
-    if (responsiveDatatablesHelperInstance.options.showDetail){
+    if (responsiveDatatablesHelperInstance.options.showDetail) {
         responsiveDatatablesHelperInstance.options.showDetail(newTr);
     }
 };
@@ -539,11 +620,14 @@ ResponsiveDatatablesHelper.prototype.showRowDetail = function (responsiveDatatab
  * @param {ResponsiveDatatablesHelper} responsiveDatatablesHelperInstance instance of ResponsiveDatatablesHelper
  * @param {Object}                     tr                                 jQuery wrapped set
  */
-ResponsiveDatatablesHelper.prototype.hideRowDetail = function (responsiveDatatablesHelperInstance, tr) {
+ResponsiveDatatablesHelper.prototype.hideRowDetail = function (
+    responsiveDatatablesHelperInstance,
+    tr
+) {
     // If the value of an input has changed while in row detail, we need to copy its state back
     // to the DataTables object so that value will persist when the tr.row-detail is removed.
     var rowDetail = tr.next('.row-detail');
-    if (responsiveDatatablesHelperInstance.options.hideDetail){
+    if (responsiveDatatablesHelperInstance.options.hideDetail) {
         responsiveDatatablesHelperInstance.options.hideDetail(rowDetail);
     }
     rowDetail.find('li').each(function () {
@@ -561,7 +645,7 @@ ResponsiveDatatablesHelper.prototype.hideRowDetail = function (responsiveDatatab
  * @param {Boolean} disable, default is true
  */
 ResponsiveDatatablesHelper.prototype.disable = function (disable) {
-    this.disabled = (disable === undefined) || disable;
+    this.disabled = disable === undefined || disable;
 
     if (this.disabled) {
         // Remove windows resize handler.
@@ -581,7 +665,11 @@ ResponsiveDatatablesHelper.prototype.disable = function (disable) {
         this.showHideColumns();
         this.tableElement.removeClass('has-columns-hidden');
 
-        this.tableElement.off('click', 'span.responsiveExpander', this.showRowDetailEventHandler);
+        this.tableElement.off(
+            'click',
+            'span.responsiveExpander',
+            this.showRowDetailEventHandler
+        );
     } else {
         // Add windows resize handler.
         this.setWindowsResizeHandler();
@@ -592,7 +680,7 @@ ResponsiveDatatablesHelper.prototype.disable = function (disable) {
  * Get state from cookie.
  */
 ResponsiveDatatablesHelper.prototype.getState = function () {
-    if (typeof(Storage)!='undefined') {
+    if (typeof Storage != 'undefined') {
         // Use local storage
         var value = JSON.parse(localStorage.getItem(this.cookieName));
         if (value) {
@@ -611,19 +699,25 @@ ResponsiveDatatablesHelper.prototype.getState = function () {
  * Saves state to cookie.
  */
 ResponsiveDatatablesHelper.prototype.setState = function () {
-    if (typeof(Storage)!='undefined') {
+    if (typeof Storage != 'undefined') {
         // Use local storage
-        var d1 = this.difference(this.lastColumnsHiddenIndexes, this.columnsHiddenIndexes).length;
-        var d2 = this.difference(this.columnsHiddenIndexes, this.lastColumnsHiddenIndexes).length;
+        var d1 = this.difference(
+            this.lastColumnsHiddenIndexes,
+            this.columnsHiddenIndexes
+        ).length;
+        var d2 = this.difference(
+            this.columnsHiddenIndexes,
+            this.lastColumnsHiddenIndexes
+        ).length;
 
         if (d1 + d2 > 0) {
             var tt;
             var value = {
-                columnIndexes: this.columnIndexes,               // array
+                columnIndexes: this.columnIndexes, // array
                 columnsHiddenIndexes: this.columnsHiddenIndexes, // array
-                breakpoints: this.breakpoints,                   // object
-                expandColumn: this.expandColumn,                 // int|undefined
-                lastBreakpoint: this.lastBreakpoint              // string
+                breakpoints: this.breakpoints, // object
+                expandColumn: this.expandColumn, // int|undefined
+                lastBreakpoint: this.lastBreakpoint, // string
             };
 
             localStorage.setItem(this.cookieName, JSON.stringify(value));
@@ -638,7 +732,9 @@ ResponsiveDatatablesHelper.prototype.setState = function () {
  * Get Difference.
  */
 ResponsiveDatatablesHelper.prototype.difference = function (a, b) {
-    var arr = [], i, hash = {};
+    var arr = [],
+        i,
+        hash = {};
     for (i = b.length - 1; i >= 0; i--) {
         hash[b[i]] = true;
     }
diff --git a/boranga/frontend/boranga/src/utils/vue/alert.vue b/boranga/frontend/boranga/src/utils/vue/alert.vue
index dc8ea4fd..c4638ba2 100755
--- a/boranga/frontend/boranga/src/utils/vue/alert.vue
+++ b/boranga/frontend/boranga/src/utils/vue/alert.vue
@@ -1,84 +1,91 @@
 <template>
-  <div
-    v-show="show"
-    v-bind:class="{
-      'alert':      true,
-      'alert-success':(type == 'success'),
-      'alert-warning':(type == 'warning'),
-      'alert-primary': (type == 'primary'),
-      'alert-info': (type == 'info'),
-      'alert-danger':   (type == 'danger'),
-      'top':            (placement === 'top'),
-      'top-right':  (placement === 'top-right')
-    }"
-    transition="fade"
-    v-bind:style="{width:width}"
-    role="alert">
-    <button v-show="dismissable" type="button" class="close"
-      @click="show = false">
-      <span>&times;</span>
-    </button>
-    <slot></slot>
-  </div>
+    <div
+        v-show="show"
+        :class="{
+            alert: true,
+            'alert-success': type == 'success',
+            'alert-warning': type == 'warning',
+            'alert-primary': type == 'primary',
+            'alert-info': type == 'info',
+            'alert-danger': type == 'danger',
+            top: placement === 'top',
+            'top-right': placement === 'top-right',
+        }"
+        transition="fade"
+        :style="{ width: width }"
+        role="alert"
+    >
+        <button
+            v-show="dismissable"
+            type="button"
+            class="close"
+            @click="show = false"
+        >
+            <span>&times;</span>
+        </button>
+        <slot></slot>
+    </div>
 </template>
 
 <script>
 export default {
-  props: {
-    type: {
-      type: String
+    props: {
+        type: {
+            type: String,
+        },
+        dismissable: {
+            type: Boolean,
+            default: false,
+        },
+        show: {
+            type: Boolean,
+            default: true,
+        },
+        duration: {
+            type: Number,
+            default: 0,
+        },
+        width: {
+            type: String,
+        },
+        placement: {
+            type: String,
+        },
     },
-    dismissable: {
-      type: Boolean,
-      default: false
+    watch: {
+        show(val) {
+            if (this._timeout) clearTimeout(this._timeout);
+            if (val && Boolean(this.duration)) {
+                this._timeout = setTimeout(() => {
+                    this.show = false;
+                }, this.duration);
+            }
+        },
     },
-    show: {
-      type: Boolean,
-      default: true,
-    },
-    duration: {
-      type: Number,
-      default: 0
-    },
-    width: {
-      type: String
-    },
-    placement: {
-      type: String
-    }
-  },
-  watch: {
-    show (val) {
-      if (this._timeout) clearTimeout(this._timeout)
-      if (val && Boolean(this.duration)) {
-        this._timeout = setTimeout(() => { this.show = false }, this.duration)
-      }
-    }
-  }
-}
+};
 </script>
 
 <style>
 .fade-transition {
-  transition: opacity .3s ease;
+    transition: opacity 0.3s ease;
 }
 .fade-enter,
 .fade-leave {
-  height: 0;
-  opacity: 0;
+    height: 0;
+    opacity: 0;
 }
 .alert.top {
-  position: fixed;
-  top: 30px;
-  margin: 0 auto;
-  left: 0;
-  right: 0;
-  z-index: 1050;
+    position: fixed;
+    top: 30px;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    z-index: 1050;
 }
 .alert.top-right {
-  position: fixed;
-  top: 30px;
-  right: 50px;
-  z-index: 1050;
+    position: fixed;
+    top: 30px;
+    right: 50px;
+    z-index: 1050;
 }
 </style>
diff --git a/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue b/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
index b9f8d800..a27a5597 100755
--- a/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
+++ b/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
@@ -11,8 +11,13 @@
                                     {{ title }}
                                 </slot>
                             </h4>
-                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"
-                                @click="cancel"></button>
+                            <button
+                                type="button"
+                                class="btn-close btn-close-white"
+                                data-bs-dismiss="modal"
+                                aria-label="Close"
+                                @click="cancel"
+                            ></button>
                         </div>
                     </slot>
                     <!--Container-->
@@ -22,10 +27,23 @@
                     <!--Footer-->
                     <div class="modal-footer">
                         <slot name="footer">
-                            <button v-if="showCancel" type="button" :class="cancelClass"
-                                @click="cancel">{{ cancelText }}</button>
-                            <button v-if="showOK" id="okBtn" type="button" :class="okClass"
-                                @click="ok">{{ okText }}</button>
+                            <button
+                                v-if="showCancel"
+                                type="button"
+                                :class="cancelClass"
+                                @click="cancel"
+                            >
+                                {{ cancelText }}
+                            </button>
+                            <button
+                                v-if="showOK"
+                                id="okBtn"
+                                type="button"
+                                :class="okClass"
+                                @click="ok"
+                            >
+                                {{ okText }}
+                            </button>
                         </slot>
                     </div>
                 </div>
@@ -44,64 +62,64 @@ export default {
     props: {
         title: {
             type: String,
-            default: 'Modal'
+            default: 'Modal',
         },
         small: {
             type: Boolean,
-            default: false
+            default: false,
         },
         large: {
             type: Boolean,
-            default: false
+            default: false,
         },
         extraLarge: {
             type: Boolean,
-            default: false
+            default: false,
         },
         full: {
             type: Boolean,
-            default: false
+            default: false,
         },
         force: {
             type: Boolean,
-            default: false
+            default: false,
         },
         transition: {
             type: String,
-            default: 'modal'
+            default: 'modal',
         },
         showOK: {
             type: Boolean,
-            default: true
+            default: true,
         },
         showCancel: {
             type: Boolean,
-            default: true
+            default: true,
         },
         okText: {
             type: String,
-            default: 'Confirm'
+            default: 'Confirm',
         },
         cancelText: {
             type: String,
-            default: 'Cancel'
+            default: 'Cancel',
         },
         okClass: {
             type: String,
-            default: 'btn btn-primary'
+            default: 'btn btn-primary',
         },
         cancelClass: {
             type: String,
-            default: 'btn btn-secondary'
+            default: 'btn btn-secondary',
         },
         closeWhenOK: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
     data() {
         return {
-            duration: null
+            duration: null,
         };
     },
     computed: {
@@ -110,33 +128,38 @@ export default {
                 'modal-xl': this.extraLarge,
                 'modal-lg': this.large,
                 'modal-sm': this.small,
-                'modal-full': this.full
-            }
+                'modal-full': this.full,
+            };
         },
         show: function () {
             return this.$parent.isModalOpen;
-        }
-    },
-    created() {
-        if (this.show) {
-            document.body.className += ' modal-open';
-        }
-    },
-    beforeUnmount() {
-        document.body.className = document.body.className.replace(/\s?modal-open/, '');
+        },
     },
     watch: {
         show(value) {
             if (value) {
                 document.body.className += ' modal-open';
-            }
-            else {
+            } else {
                 window.setTimeout(() => {
-                    document.body.className = document.body.className.replace(/\s?modal-open/, '');
+                    document.body.className = document.body.className.replace(
+                        /\s?modal-open/,
+                        ''
+                    );
                 }, this.duration || 0);
             }
+        },
+    },
+    created() {
+        if (this.show) {
+            document.body.className += ' modal-open';
         }
     },
+    beforeUnmount() {
+        document.body.className = document.body.className.replace(
+            /\s?modal-open/,
+            ''
+        );
+    },
     methods: {
         ok() {
             this.$emit('ok');
@@ -152,8 +175,8 @@ export default {
             if (!this.force) {
                 this.cancel();
             }
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/boranga/frontend/boranga/src/utils/vue/datatable.vue b/boranga/frontend/boranga/src/utils/vue/datatable.vue
index aa46a10c..695add05 100755
--- a/boranga/frontend/boranga/src/utils/vue/datatable.vue
+++ b/boranga/frontend/boranga/src/utils/vue/datatable.vue
@@ -1,42 +1,54 @@
 <template lang="html">
     <div id="DataTable">
-        <table class="hover table border table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"
-            :id="id">
+        <table
+            :id="id"
+            class="hover table border table-striped table-bordered dt-responsive nowrap"
+            cellspacing="0"
+            width="100%"
+        >
             <thead>
                 <tr>
-                    <th :data-class="(i == 0) ? 'expand' : null" v-for="(header, i) in dtHeaders"> {{ header }}</th>
+                    <th
+                        v-for="(header, i) in dtHeaders"
+                        :data-class="i == 0 ? 'expand' : null"
+                    >
+                        {{ header }}
+                    </th>
                 </tr>
             </thead>
-            <tbody>
-            </tbody>
+            <tbody></tbody>
         </table>
     </div>
 </template>
 <script>
-
 export default {
     name: 'DataTable',
     props: {
         dtHeaders: {
             type: Array,
-            required: true
+            required: true,
         },
         dtOptions: {
             type: Object,
-            required: true
+            required: true,
         },
         id: {
-            required: true
-        }
+            required: true,
+        },
     },
     data: function () {
         return {
             table: null,
             vmDataTable: null,
-        }
+        };
     },
-    computed: {
-
+    computed: {},
+    mounted: function () {
+        let vm = this;
+        vm.table = $('#' + vm.id);
+        //$.fn.dataTable.ext.errMode = 'throw';
+        //$.fn.dataTable.ext.classes.sPageButton = 'page-link page-item';
+        vm.initEvents();
     },
     methods: {
         initEvents: function () {
@@ -45,22 +57,15 @@ export default {
             var breakpointDefinition = {
                 //bootstrap grid values
                 tablet: 992,
-                phone: 768
+                phone: 768,
             };
-            var options = Object.assign(vm.dtOptions)
+            var options = Object.assign(vm.dtOptions);
             vm.vmDataTable = $(vm.table).DataTable(options);
             $(vm.table).resize(function (e) {
                 vm.vmDataTable.draw(true);
             });
-        }
+        },
     },
-    mounted: function () {
-        let vm = this;
-        vm.table = $('#' + vm.id);
-        //$.fn.dataTable.ext.errMode = 'throw';
-        //$.fn.dataTable.ext.classes.sPageButton = 'page-link page-item';
-        vm.initEvents();
-    }
 };
 </script>
 
@@ -69,7 +74,7 @@ div.dataTables_processing div {
     display: none;
 }
 
-td>a {
+td > a {
     border: none;
     border-radius: 2px;
     position: relative;
@@ -78,9 +83,18 @@ td>a {
     font-weight: 500;
     letter-spacing: 0;
     will-change: box-shadow, transform;
-    -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    -webkit-transition:
+        -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
+        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    -o-transition:
+        box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
+        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition:
+        box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
+        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     outline: 0;
     cursor: pointer;
     text-decoration: none;
@@ -120,41 +134,43 @@ table.dataTable thead .sorting_asc {
     cursor: pointer;
 }
 
-table.collapsed>tbody>tr>td>span.responsiveExpander,
-table.has-columns-hidden>tbody>tr>td>span.responsiveExpander {
-    background: url("https://raw.githubusercontent.com/Comanche/datatables-responsive/master/files/1.10/img/plus.png") no-repeat 5px center;
+table.collapsed > tbody > tr > td > span.responsiveExpander,
+table.has-columns-hidden > tbody > tr > td > span.responsiveExpander {
+    background: url('https://raw.githubusercontent.com/Comanche/datatables-responsive/master/files/1.10/img/plus.png')
+        no-repeat 5px center;
     padding-left: 32px;
     cursor: pointer;
 }
 
-table.collapsed>tbody>tr.parent>td span.responsiveExpander,
-table.has-columns-hidden>tbody>tr.detail-show>td span.responsiveExpander {
-    background: url("https://raw.githubusercontent.com/Comanche/datatables-responsive/master/files/1.10/img/minus.png") no-repeat 5px center;
+table.collapsed > tbody > tr.parent > td span.responsiveExpander,
+table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander {
+    background: url('https://raw.githubusercontent.com/Comanche/datatables-responsive/master/files/1.10/img/minus.png')
+        no-repeat 5px center;
 }
 
-table.collapsed>tbody>tr>td.child,
-table.has-columns-hidden>tbody>tr>td.child {
+table.collapsed > tbody > tr > td.child,
+table.has-columns-hidden > tbody > tr > td.child {
     background: #eee;
 }
 
-table.collapsed>tbody>tr>td>ul,
-table.has-columns-hidden>tbody>tr>td>ul {
+table.collapsed > tbody > tr > td > ul,
+table.has-columns-hidden > tbody > tr > td > ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
-table.collapsed>tbody>tr>td>ul>li>span.dtr-title,
-table.has-columns-hidden>tbody>tr>td>ul>li>span.columnTitle {
+table.collapsed > tbody > tr > td > ul > li > span.dtr-title,
+table.has-columns-hidden > tbody > tr > td > ul > li > span.columnTitle {
     font-weight: bold;
 }
 
-.table>tbody>tr>td,
-.table>tbody>tr>th,
-.table>tfoot>tr>td,
-.table>tfoot>tr>th,
-.table>thead>tr>td,
-.table>thead>tr>th {
+.table > tbody > tr > td,
+.table > tbody > tr > th,
+.table > tfoot > tr > td,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > thead > tr > th {
     vertical-align: middle;
 }
 
@@ -174,7 +190,6 @@ div.dataTables_length select {
 }
 
 @media screen and (max-width: 767px) {
-
     div.dataTables_length,
     div.dataTables_info {
         float: left;
diff --git a/boranga/frontend/boranga/vite.config.js b/boranga/frontend/boranga/vite.config.js
index e7a4b707..47027cca 100644
--- a/boranga/frontend/boranga/vite.config.js
+++ b/boranga/frontend/boranga/vite.config.js
@@ -1,9 +1,9 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
 import eslint from 'vite-plugin-eslint';
-import { viteStaticCopy } from 'vite-plugin-static-copy'
-import svgLoader from 'vite-svg-loader'
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import svgLoader from 'vite-svg-loader';
 
 const port = process.env.PORT ? parseInt(process.env.PORT) : 5173;
 const host = process.env.HOST || '0.0.0.0';
@@ -17,7 +17,8 @@ export default defineConfig({
         open: false,
         headers: {
             'Access-Control-Allow-Origin': '*',
-            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
+            'Access-Control-Allow-Headers':
+                'Origin, X-Requested-With, Content-Type, Accept',
         },
         hmr: {
             protocol: 'ws',
@@ -34,8 +35,11 @@ export default defineConfig({
             // Probably a better way but I couldn't figure it out
             targets: [
                 { src: 'src/assets', dest: 'src' },
-                { src: 'node_modules/@fortawesome/fontawesome-free/webfonts', dest: 'node_modules/@fortawesome/fontawesome-free/' },
-            ]
+                {
+                    src: 'node_modules/@fortawesome/fontawesome-free/webfonts',
+                    dest: 'node_modules/@fortawesome/fontawesome-free/',
+                },
+            ],
         }),
     ],
     resolve: {
@@ -43,11 +47,11 @@ export default defineConfig({
             '@': path.resolve(__dirname, './src'),
             '@vue-utils': path.resolve(__dirname, 'src/utils/vue'),
             '@common-utils': path.resolve(__dirname, 'src/components/common/'),
-            '@static-root': path.resolve(__dirname, '../../../staticfiles/')
+            '@static-root': path.resolve(__dirname, '../../../staticfiles/'),
         },
     },
     build: {
-        manifest: "manifest.json",
+        manifest: 'manifest.json',
         filenameHashing: false,
         commonjsOptions: { transformMixedEsModules: true },
         root: path.resolve(__dirname, './src'),
@@ -63,4 +67,4 @@ export default defineConfig({
         },
         emptyOutDir: true,
     },
-})
+});

From 7ed7cfa9946ebf2ad984c1a7ae3e24f4c9d122e6 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 14:25:23 +0800
Subject: [PATCH 047/138] Remove unused config.

---
 boranga/frontend/boranga/vue.config.js | 91 --------------------------
 1 file changed, 91 deletions(-)
 delete mode 100644 boranga/frontend/boranga/vue.config.js

diff --git a/boranga/frontend/boranga/vue.config.js b/boranga/frontend/boranga/vue.config.js
deleted file mode 100644
index 620af746..00000000
--- a/boranga/frontend/boranga/vue.config.js
+++ /dev/null
@@ -1,91 +0,0 @@
-// vue.config.js
-const { defineConfig } = require('@vue/cli-service');
-const path = require('path');
-const webpack = require('webpack');
-const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
-const port = process.env.PORT ? parseInt(process.env.PORT) : 9002;
-
-module.exports = defineConfig({
-    runtimeCompiler: true,
-    outputDir: path.resolve(__dirname, '../../static/boranga_vue'),
-    publicPath: '/static/boranga_vue/',
-    filenameHashing: false,
-    chainWebpack: (config) => {
-        config.resolve.alias.set(
-            '@vue-utils',
-            path.resolve(__dirname, 'src/utils/vue')
-        );
-        config.resolve.alias.set(
-            '@common-utils',
-            path.resolve(__dirname, 'src/components/common/')
-        );
-        config.resolve.alias.set(
-            '@static-root',
-            path.resolve(__dirname, '../../../staticfiles/')
-        );
-    },
-    configureWebpack: {
-        devtool: 'source-map',
-        resolve: {
-            fallback: {
-                buffer: require.resolve('buffer/'),
-            },
-        },
-        plugins: [
-            new webpack.DefinePlugin({
-                // Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
-                // https://github.com/vuejs/vue-cli/pull/7443
-                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
-            }),
-            new webpack.ProvidePlugin({
-                $: 'jquery',
-                moment: 'moment',
-                swal: 'sweetalert2',
-                _: 'lodash',
-            }),
-            new MomentLocalesPlugin(),
-            new webpack.ProvidePlugin({
-                Buffer: ['buffer', 'Buffer'],
-            }),
-        ],
-        devServer: {
-            host: '0.0.0.0',
-            allowedHosts: 'all',
-            devMiddleware: {
-                //index: true,
-                writeToDisk: true,
-            },
-            headers: {
-                'Access-Control-Allow-Origin': '*',
-                'Access-Control-Allow-Headers':
-                    'Origin, X-Requested-With, Content-Type, Accept',
-            },
-            client: {
-                webSocketURL: 'ws://0.0.0.0:' + port + '/ws',
-            },
-        },
-        module: {
-            rules: [
-                /* config.module.rule('images') */
-                {
-                    test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
-                    type: 'asset/resource',
-                    generator: {
-                        filename: 'img/[name][ext]',
-                    },
-                },
-                /* config.module.rule('fonts') */
-                {
-                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
-                    type: 'asset/resource',
-                    generator: {
-                        filename: 'fonts/[name][ext]',
-                    },
-                },
-            ],
-        },
-        performance: {
-            hints: false,
-        },
-    },
-});

From d0b554876c4e8dc09097ce75fd6f776200b20108 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 14:37:12 +0800
Subject: [PATCH 048/138] Remove 3rd party component that is no longer
 supported.

---
 .../vue-treeselect/dict/vue-treeselect.css    |  831 ----
 .../vue-treeselect/dict/vue-treeselect.js     | 3866 -----------------
 .../dict/vue-treeselect.min.css               |    5 -
 .../vue-treeselect/dict/vue-treeselect.min.js |    6 -
 4 files changed, 4708 deletions(-)
 delete mode 100644 boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.css
 delete mode 100644 boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.js
 delete mode 100644 boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.css
 delete mode 100644 boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.js

diff --git a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.css b/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.css
deleted file mode 100644
index 0b9ace8f..00000000
--- a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.css
+++ /dev/null
@@ -1,831 +0,0 @@
-/*!
- * vue-treeselect v0.1.0 | (c) 2017-2019 Riophae Lee
- * Released under the MIT License.
- * https://vue-treeselect.js.org/
- */
-/**
- * Dependencies
- */
-/**
- * Variables
- */
-/**
- * Mixins
- */
-/**
- * Helpers
- */
-.vue-treeselect-helper-hide {
-  display: none;
-}
-.vue-treeselect-helper-zoom-effect-off {
-  -ms-transform: none !important;
-      transform: none !important;
-}
-/**
- * Animations
- */
-@keyframes vue-treeselect-animation-fade-in {
-  0% {
-    opacity: 0;
-  }
-}
-@keyframes vue-treeselect-animation-bounce {
-  0%,
-  100% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1);
-  }
-}
-@keyframes vue-treeselect-animation-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-/**
- * Transitions
- */
-.vue-treeselect__multi-value-item--transition-enter-active,
-.vue-treeselect__multi-value-item--transition-leave-active {
-  transition-duration: 200ms;
-  transition-property: transform, opacity;
-}
-.vue-treeselect__multi-value-item--transition-enter-active {
-  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-.vue-treeselect__multi-value-item--transition-leave-active {
-  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  position: absolute;
-}
-.vue-treeselect__multi-value-item--transition-enter,
-.vue-treeselect__multi-value-item--transition-leave-to {
-  -ms-transform: scale(0.7);
-      transform: scale(0.7);
-  opacity: 0;
-}
-.vue-treeselect__multi-value-item--transition-move {
-  transition: 200ms transform cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-/**
- * Namespace
- */
-.vue-treeselect {
-  position: relative;
-  text-align: left;
-}
-.vue-treeselect div,
-.vue-treeselect span {
-  box-sizing: border-box;
-}
-.vue-treeselect svg {
-  fill: currentColor;
-}
-/**
- * Control
- */
-.vue-treeselect__control {
-  padding-left: 5px;
-  padding-right: 5px;
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  height: 36px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  background: #fff;
-  transition-duration: 200ms;
-  transition-property: border-color, box-shadow, width, height, background-color, opacity;
-  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
-  border-color: #cfcfcf;
-}
-.vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control {
-  border-color: #039be5;
-  box-shadow: 0 0 0 3px rgba(3, 155, 229, 0.1);
-}
-.vue-treeselect--disabled .vue-treeselect__control {
-  background-color: #f9f9f9;
-}
-.vue-treeselect--open .vue-treeselect__control {
-  border-color: #cfcfcf;
-}
-.vue-treeselect--open.vue-treeselect--open-below .vue-treeselect__control {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.vue-treeselect--open.vue-treeselect--open-above .vue-treeselect__control {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-.vue-treeselect__value-container,
-.vue-treeselect__multi-value {
-  width: 100%;
-  vertical-align: middle;
-}
-.vue-treeselect__value-container {
-  display: table-cell;
-  position: relative;
-}
-.vue-treeselect--searchable:not(.vue-treeselect--disabled) .vue-treeselect__value-container {
-  cursor: text;
-}
-.vue-treeselect__multi-value {
-  display: inline-block;
-}
-.vue-treeselect--has-value .vue-treeselect__multi-value {
-  margin-bottom: 5px;
-}
-.vue-treeselect__placeholder,
-.vue-treeselect__single-value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-left: 5px;
-  padding-right: 5px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  line-height: 34px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  pointer-events: none;
-}
-.vue-treeselect__placeholder {
-  color: #bdbdbd;
-}
-.vue-treeselect__single-value {
-  color: #333;
-}
-.vue-treeselect--focused.vue-treeselect--searchable .vue-treeselect__single-value {
-  color: #bdbdbd;
-}
-.vue-treeselect__multi-value-item-container {
-  display: inline-block;
-  padding-top: 5px;
-  padding-right: 5px;
-  vertical-align: top;
-}
-.vue-treeselect__multi-value-item {
-  cursor: pointer;
-  display: inline-table;
-  background: #e3f2fd;
-  padding: 2px 0;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  color: #039be5;
-  font-size: 12px;
-  vertical-align: top;
-}
-.vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-disabled):hover .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new):hover {
-  cursor: pointer;
-  background: #e3f2fd;
-  color: #039be5;
-}
-.vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-disabled {
-  cursor: default;
-  background: #f5f5f5;
-  color: #757575;
-}
-.vue-treeselect--disabled .vue-treeselect__multi-value-item {
-  cursor: default;
-  background: #fff;
-  border-color: #e5e5e5;
-  color: #555;
-}
-.vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new {
-  background: #e8f5e9;
-}
-.vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new:hover {
-  background: #e8f5e9;
-}
-.vue-treeselect__value-remove,
-.vue-treeselect__multi-value-label {
-  display: table-cell;
-  padding: 0 5px;
-  vertical-align: middle;
-}
-.vue-treeselect__value-remove {
-  color: #039be5;
-  padding-left: 5px;
-  border-left: 1px solid #fff;
-  line-height: 0;
-}
-.vue-treeselect__multi-value-item:hover .vue-treeselect__value-remove {
-  color: #e53935;
-}
-.vue-treeselect--disabled .vue-treeselect__value-remove,
-.vue-treeselect__multi-value-item-disabled .vue-treeselect__value-remove {
-  display: none;
-}
-.vue-treeselect__value-remove > svg {
-  width: 6px;
-  height: 6px;
-}
-.vue-treeselect__multi-value-label {
-  padding-right: 5px;
-  white-space: pre-line;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.vue-treeselect__limit-tip {
-  display: inline-block;
-  padding-top: 5px;
-  padding-right: 5px;
-  vertical-align: top;
-}
-.vue-treeselect__limit-tip-text {
-  cursor: default;
-  display: block;
-  margin: 2px 0;
-  padding: 1px 0;
-  color: #bdbdbd;
-  font-size: 12px;
-  font-weight: 600;
-}
-.vue-treeselect__input-container {
-  display: block;
-  max-width: 100%;
-  outline: none;
-}
-.vue-treeselect--single .vue-treeselect__input-container {
-  font-size: inherit;
-  height: 100%;
-}
-.vue-treeselect--multi .vue-treeselect__input-container {
-  display: inline-block;
-  font-size: 12px;
-  vertical-align: top;
-}
-.vue-treeselect--searchable .vue-treeselect__input-container {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-.vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
-  padding-top: 5px;
-  padding-left: 0;
-}
-.vue-treeselect--disabled .vue-treeselect__input-container {
-  display: none;
-}
-.vue-treeselect__input,
-.vue-treeselect__sizer {
-  margin: 0;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-}
-.vue-treeselect__input {
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: none;
-  box-sizing: content-box;
-  box-shadow: none;
-  background: none transparent;
-  line-height: 1;
-  vertical-align: middle;
-}
-.vue-treeselect__input::-ms-clear {
-  display: none;
-}
-.vue-treeselect--single .vue-treeselect__input {
-  width: 100%;
-  height: 100%;
-}
-.vue-treeselect--multi .vue-treeselect__input {
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.vue-treeselect--has-value .vue-treeselect__input {
-  line-height: inherit;
-  vertical-align: top;
-}
-.vue-treeselect__sizer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  height: 0;
-  overflow: scroll;
-  white-space: pre;
-}
-.vue-treeselect__x-container {
-  display: table-cell;
-  vertical-align: middle;
-  width: 20px;
-  text-align: center;
-  line-height: 0;
-  cursor: pointer;
-  color: #ccc;
-  animation: 200ms vue-treeselect-animation-fade-in cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-.vue-treeselect__x-container:hover {
-  color: #e53935;
-}
-.vue-treeselect__x {
-  width: 8px;
-  height: 8px;
-}
-.vue-treeselect__control-arrow-container {
-  display: table-cell;
-  vertical-align: middle;
-  width: 20px;
-  text-align: center;
-  line-height: 0;
-  cursor: pointer;
-}
-.vue-treeselect--disabled .vue-treeselect__control-arrow-container {
-  cursor: default;
-}
-.vue-treeselect__control-arrow {
-  width: 9px;
-  height: 9px;
-  color: #ccc;
-}
-.vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__control-arrow-container:hover .vue-treeselect__control-arrow {
-  color: #616161;
-}
-.vue-treeselect--disabled .vue-treeselect__control-arrow {
-  opacity: 0.35;
-}
-.vue-treeselect__control-arrow--rotated {
-  -ms-transform: rotate(180deg);
-      transform: rotateZ(180deg);
-}
-/**
- * Menu
- */
-.vue-treeselect__menu-container {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  overflow: visible;
-  transition: 0s;
-}
-.vue-treeselect--open-below:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container {
-  top: 100%;
-}
-.vue-treeselect--open-above:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container {
-  bottom: 100%;
-}
-.vue-treeselect__menu {
-  cursor: default;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  display: block;
-  position: absolute;
-  overflow-x: hidden;
-  overflow-y: auto;
-  width: auto;
-  border: 1px solid #cfcfcf;
-  background: #fff;
-  line-height: 180%;
-  -webkit-overflow-scrolling: touch;
-}
-.vue-treeselect--open-below .vue-treeselect__menu {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  top: 0;
-  margin-top: -1px;
-  border-top-color: #f2f2f2;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
-}
-.vue-treeselect--open-above .vue-treeselect__menu {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  bottom: 0;
-  margin-bottom: -1px;
-  border-bottom-color: #f2f2f2;
-}
-.vue-treeselect__indent-level-0 .vue-treeselect__option {
-  padding-left: 5px;
-}
-.vue-treeselect__indent-level-0 .vue-treeselect__tip {
-  padding-left: 25px;
-}
-.vue-treeselect__indent-level-1 .vue-treeselect__option {
-  padding-left: 25px;
-}
-.vue-treeselect__indent-level-1 .vue-treeselect__tip {
-  padding-left: 45px;
-}
-.vue-treeselect__indent-level-2 .vue-treeselect__option {
-  padding-left: 45px;
-}
-.vue-treeselect__indent-level-2 .vue-treeselect__tip {
-  padding-left: 65px;
-}
-.vue-treeselect__indent-level-3 .vue-treeselect__option {
-  padding-left: 65px;
-}
-.vue-treeselect__indent-level-3 .vue-treeselect__tip {
-  padding-left: 85px;
-}
-.vue-treeselect__indent-level-4 .vue-treeselect__option {
-  padding-left: 85px;
-}
-.vue-treeselect__indent-level-4 .vue-treeselect__tip {
-  padding-left: 105px;
-}
-.vue-treeselect__indent-level-5 .vue-treeselect__option {
-  padding-left: 105px;
-}
-.vue-treeselect__indent-level-5 .vue-treeselect__tip {
-  padding-left: 125px;
-}
-.vue-treeselect__indent-level-6 .vue-treeselect__option {
-  padding-left: 125px;
-}
-.vue-treeselect__indent-level-6 .vue-treeselect__tip {
-  padding-left: 145px;
-}
-.vue-treeselect__indent-level-7 .vue-treeselect__option {
-  padding-left: 145px;
-}
-.vue-treeselect__indent-level-7 .vue-treeselect__tip {
-  padding-left: 165px;
-}
-.vue-treeselect__indent-level-8 .vue-treeselect__option {
-  padding-left: 165px;
-}
-.vue-treeselect__indent-level-8 .vue-treeselect__tip {
-  padding-left: 185px;
-}
-.vue-treeselect__option {
-  padding-left: 5px;
-  padding-right: 5px;
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-}
-.vue-treeselect__option--highlight {
-  background: #f5f5f5;
-}
-.vue-treeselect--single .vue-treeselect__option--selected {
-  background: #e3f2fd;
-  font-weight: 600;
-}
-.vue-treeselect--single .vue-treeselect__option--selected:hover {
-  background: #e3f2fd;
-}
-.vue-treeselect__option--hide {
-  display: none;
-}
-.vue-treeselect__option-arrow-container,
-.vue-treeselect__option-arrow-placeholder {
-  display: table-cell;
-  vertical-align: middle;
-  width: 20px;
-  text-align: center;
-  line-height: 0;
-}
-.vue-treeselect__option-arrow-container {
-  cursor: pointer;
-}
-.vue-treeselect__option-arrow {
-  display: inline-block;
-  width: 9px;
-  height: 9px;
-  color: #ccc;
-  vertical-align: middle;
-  transition: 200ms transform cubic-bezier(0.19, 1, 0.22, 1);
-  -ms-transform: rotate(-90deg);
-      transform: rotateZ(-90deg);
-}
-.vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow,
-.vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow {
-  color: #616161;
-}
-.vue-treeselect__option-arrow--rotated {
-  -ms-transform: rotate(0);
-      transform: rotateZ(0);
-}
-.vue-treeselect__option-arrow--rotated.vue-treeselect__option-arrow--prepare-enter {
-  -ms-transform: rotate(-90deg) !important;
-      transform: rotateZ(-90deg) !important;
-}
-.vue-treeselect__label-container {
-  display: table-cell;
-  vertical-align: middle;
-  cursor: pointer;
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  color: inherit;
-}
-.vue-treeselect__option--disabled .vue-treeselect__label-container {
-  cursor: not-allowed;
-  color: rgba(0, 0, 0, 0.25);
-}
-.vue-treeselect__checkbox-container {
-  display: table-cell;
-  width: 20px;
-  min-width: 20px;
-  height: 100%;
-  text-align: center;
-  vertical-align: middle;
-}
-.vue-treeselect__checkbox {
-  display: block;
-  margin: auto;
-  width: 12px;
-  height: 12px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 2px;
-  position: relative;
-  transition: 200ms all cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-.vue-treeselect__check-mark,
-.vue-treeselect__minus-mark {
-  display: block;
-  position: absolute;
-  left: 1px;
-  top: 1px;
-  background-repeat: no-repeat;
-  opacity: 0;
-  transition: 200ms all ease;
-}
-.vue-treeselect__minus-mark {
-  width: 8px;
-  height: 8px;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=);
-  background-size: 8px 8px;
-}
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
-  .vue-treeselect__minus-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .vue-treeselect__minus-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
-  .vue-treeselect__minus-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==);
-  }
-}
-.vue-treeselect__checkbox--indeterminate > .vue-treeselect__minus-mark {
-  opacity: 1;
-}
-.vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAADi4uLh4eHOxeSRAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=);
-}
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
-  .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
-  .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAADh4eHg4ODNzc3h4eEYfw2wAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==);
-  }
-}
-.vue-treeselect__check-mark {
-  width: 8px;
-  height: 8px;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAQlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////8IX9KGAAAAFXRSTlMA8u24NxILB+Tawb6jiH1zRz0xIQIIP3GUAAAAMklEQVQI1y3FtQEAMQDDQD+EGbz/qkEVOpyEOP6PudKjZNSXn4Jm2CKRdBKzSLsFWl8fMG0Bl6Jk1rMAAAAASUVORK5CYII=);
-  background-size: 8px 8px;
-  -ms-transform: scaleY(0.125);
-      transform: scaleY(0.125);
-}
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
-  .vue-treeselect__check-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .vue-treeselect__check-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
-  .vue-treeselect__check-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHXRSTlMA/PiJhGNI9XlEHJB/b2ldV08+Oibk49vPp6QhAYgGBuwAAACCSURBVCjPrdHdDoIwDAXgTWAqCigo/+f9X5OwnoUwtis4V92XNWladUl+rzQPeQJAN2EHxoOnsPn7/oYk8fxBv08Rr/deOH/aZ2Nm8ZJ+s573QGfWKnNuZGzWm3+lv2V3pcU1XQ385/yjmBoM3Z+dXvlbYLLD3ujhTaOM3KaIXvNkFkuSEvYy1LqOAAAAAElFTkSuQmCC);
-  }
-}
-.vue-treeselect__checkbox--checked > .vue-treeselect__check-mark {
-  opacity: 1;
-  -ms-transform: scaleY(1);
-      transform: scaleY(1);
-}
-.vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAP1BMVEUAAADj4+Pf39/h4eHh4eHh4eHk5OTh4eHg4ODi4uLh4eHh4eHg4ODh4eHh4eHg4ODh4eHh4eHp6en////h4eFqcyvUAAAAFHRSTlMAOQfy7bgS5NrBvqOIfXNHMSELAgQ/iFsAAAA2SURBVAjXY4AANjYIzcjMAaVFuBkY+RkEWERYmRjYRXjANAOfiIgIFxNIAa8IpxBEi6AwiAQAK2MBd7xY8csAAAAASUVORK5CYII=);
-}
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
-  .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==);
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
-  .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAUVBMVEUAAADh4eHh4eHh4eHh4eHi4uLi4uLh4eHh4eHh4eHf39/j4+Ph4eHh4eHh4eHg4ODi4uLh4eHh4eHi4uLh4eHh4eHh4eHh4eHh4eH////h4eF3FMFTAAAAGnRSTlMA+/eJhGhfSHE9JBzz5KaQf3pXT0Xbz0I5AYDw8F0AAAB+SURBVCjPrdHbDoMgEEVRKAii1dZe9fz/hxplTiKIT7qfYCWTEEZdUvOwbckNAD2WHeh3brHW5f5EzGQ+iN+b1Gt6KPvtv16Dn6JX9M9ya3/A1yfu5dlyduL6Hec7mXY6ddXLPP2lpABGZ8PWXfYLTJxZekVhhl7eTX24zZPNKXoRC7zQLjUAAAAASUVORK5CYII=);
-  }
-}
-.vue-treeselect__checkbox--unchecked {
-  border-color: #e0e0e0;
-  background: #fff;
-}
-.vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked {
-  border-color: #039be5;
-  background: #fff;
-}
-.vue-treeselect__checkbox--indeterminate {
-  border-color: #039be5;
-  background: #039be5;
-}
-.vue-treeselect__label-container:hover .vue-treeselect__checkbox--indeterminate {
-  border-color: #039be5;
-  background: #039be5;
-}
-.vue-treeselect__checkbox--checked {
-  border-color: #039be5;
-  background: #039be5;
-}
-.vue-treeselect__label-container:hover .vue-treeselect__checkbox--checked {
-  border-color: #039be5;
-  background: #039be5;
-}
-.vue-treeselect__checkbox--disabled {
-  border-color: #e0e0e0;
-  background-color: #f7f7f7;
-}
-.vue-treeselect__label-container:hover .vue-treeselect__checkbox--disabled {
-  border-color: #e0e0e0;
-  background-color: #f7f7f7;
-}
-.vue-treeselect__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: table-cell;
-  padding-left: 5px;
-  max-width: 100%;
-  vertical-align: middle;
-  cursor: inherit;
-}
-.vue-treeselect__count {
-  margin-left: 5px;
-  font-weight: 400;
-  opacity: 0.6;
-}
-.vue-treeselect__tip {
-  padding-left: 5px;
-  padding-right: 5px;
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  color: #757575;
-}
-.vue-treeselect__tip-text {
-  display: table-cell;
-  vertical-align: middle;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  padding-left: 5px;
-  font-size: 12px;
-}
-.vue-treeselect__error-tip .vue-treeselect__retry {
-  cursor: pointer;
-  margin-left: 5px;
-  font-style: normal;
-  font-weight: 600;
-  text-decoration: none;
-  color: #039be5;
-}
-.vue-treeselect__icon-container {
-  display: table-cell;
-  vertical-align: middle;
-  width: 20px;
-  text-align: center;
-  line-height: 0;
-}
-.vue-treeselect--single .vue-treeselect__icon-container {
-  padding-left: 5px;
-}
-.vue-treeselect__icon-warning {
-  display: block;
-  margin: auto;
-  border-radius: 50%;
-  position: relative;
-  width: 12px;
-  height: 12px;
-  background: #fb8c00;
-}
-.vue-treeselect__icon-warning::after {
-  display: block;
-  position: absolute;
-  content: "";
-  left: 5px;
-  top: 2.5px;
-  width: 2px;
-  height: 1px;
-  border: 0 solid #fff;
-  border-top-width: 5px;
-  border-bottom-width: 1px;
-}
-.vue-treeselect__icon-error {
-  display: block;
-  margin: auto;
-  border-radius: 50%;
-  position: relative;
-  width: 12px;
-  height: 12px;
-  background: #e53935;
-}
-.vue-treeselect__icon-error::before,
-.vue-treeselect__icon-error::after {
-  display: block;
-  position: absolute;
-  content: "";
-  background: #fff;
-  -ms-transform: rotate(45deg);
-      transform: rotate(45deg);
-}
-.vue-treeselect__icon-error::before {
-  width: 6px;
-  height: 2px;
-  left: 3px;
-  top: 5px;
-}
-.vue-treeselect__icon-error::after {
-  width: 2px;
-  height: 6px;
-  left: 5px;
-  top: 3px;
-}
-.vue-treeselect__icon-loader {
-  display: block;
-  margin: auto;
-  position: relative;
-  width: 12px;
-  height: 12px;
-  text-align: center;
-  animation: 1.6s vue-treeselect-animation-rotate linear infinite;
-}
-.vue-treeselect__icon-loader::before,
-.vue-treeselect__icon-loader::after {
-  border-radius: 50%;
-  position: absolute;
-  content: "";
-  left: 0;
-  top: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  opacity: 0.6;
-  animation: 1.6s vue-treeselect-animation-bounce ease-in-out infinite;
-}
-.vue-treeselect__icon-loader::before {
-  background: #039be5;
-}
-.vue-treeselect__icon-loader::after {
-  background: #b3e5fc;
-  animation-delay: -0.8s;
-}
-/**
- * Menu Portal
- */
-.vue-treeselect__menu-placeholder {
-  display: none;
-}
-.vue-treeselect__portal-target {
-  position: absolute;
-  display: block;
-  left: 0;
-  top: 0;
-  height: 0;
-  width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  overflow: visible;
-  box-sizing: border-box;
-}
-
-
-/*# sourceMappingURL=vue-treeselect.css.map*/
diff --git a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.js b/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.js
deleted file mode 100644
index ce4e8355..00000000
--- a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.js
+++ /dev/null
@@ -1,3866 +0,0 @@
-/*!
- * vue-treeselect v0.1.0 | (c) 2017-2019 Riophae Lee
- * Released under the MIT License.
- * https://vue-treeselect.js.org/
- */
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "/";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 16);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/slicedToArray");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("fuzzysearch");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/noop");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/debounce");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("watch-size");
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("is-promise");
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/once");
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/identity");
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/constant");
-
-/***/ }),
-/* 11 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/typeof");
-
-/***/ }),
-/* 12 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/last");
-
-/***/ }),
-/* 13 */
-/***/ (function(module, exports) {
-
-module.exports = require("babel-helper-vue-jsx-merge-props");
-
-/***/ }),
-/* 14 */
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-/* 15 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-/* 16 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-
-// EXTERNAL MODULE: external "@babel/runtime/helpers/slicedToArray"
-var slicedToArray_ = __webpack_require__(0);
-var slicedToArray_default = /*#__PURE__*/__webpack_require__.n(slicedToArray_);
-
-// EXTERNAL MODULE: external "@babel/runtime/helpers/toConsumableArray"
-var toConsumableArray_ = __webpack_require__(1);
-var toConsumableArray_default = /*#__PURE__*/__webpack_require__.n(toConsumableArray_);
-
-// EXTERNAL MODULE: external "@babel/runtime/helpers/defineProperty"
-var defineProperty_ = __webpack_require__(2);
-var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
-
-// EXTERNAL MODULE: external "fuzzysearch"
-var external_fuzzysearch_ = __webpack_require__(3);
-var external_fuzzysearch_default = /*#__PURE__*/__webpack_require__.n(external_fuzzysearch_);
-
-// EXTERNAL MODULE: external "lodash/noop"
-var noop_ = __webpack_require__(4);
-var noop_default = /*#__PURE__*/__webpack_require__.n(noop_);
-
-// CONCATENATED MODULE: ./src/utils/noop.js
-
-// CONCATENATED MODULE: ./src/utils/warning.js
-
-
-var warning_warning = process.env.NODE_ENV === 'production' ? noop_default.a : function warning(checker, complainer) {
-  if (!checker()) {
-    var _console;
-
-    var message = ['[Vue-Treeselect Warning]'].concat(complainer());
-
-    (_console = console).error.apply(_console, toConsumableArray_default()(message));
-  }
-};
-// CONCATENATED MODULE: ./src/utils/onLeftClick.js
-function onLeftClick(mouseDownHandler) {
-  return function onMouseDown(evt) {
-    if (evt.type === 'mousedown' && evt.button === 0) {
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
-
-      mouseDownHandler.call.apply(mouseDownHandler, [this, evt].concat(args));
-    }
-  };
-}
-// CONCATENATED MODULE: ./src/utils/scrollIntoView.js
-function scrollIntoView($scrollingEl, $focusedEl) {
-  var scrollingReact = $scrollingEl.getBoundingClientRect();
-  var focusedRect = $focusedEl.getBoundingClientRect();
-  var overScroll = $focusedEl.offsetHeight / 3;
-
-  if (focusedRect.bottom + overScroll > scrollingReact.bottom) {
-    $scrollingEl.scrollTop = Math.min($focusedEl.offsetTop + $focusedEl.clientHeight - $scrollingEl.offsetHeight + overScroll, $scrollingEl.scrollHeight);
-  } else if (focusedRect.top - overScroll < scrollingReact.top) {
-    $scrollingEl.scrollTop = Math.max($focusedEl.offsetTop - overScroll, 0);
-  }
-}
-// EXTERNAL MODULE: external "lodash/debounce"
-var debounce_ = __webpack_require__(5);
-var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
-
-// CONCATENATED MODULE: ./src/utils/debounce.js
-
-// EXTERNAL MODULE: external "watch-size"
-var external_watch_size_ = __webpack_require__(6);
-var external_watch_size_default = /*#__PURE__*/__webpack_require__.n(external_watch_size_);
-
-// CONCATENATED MODULE: ./src/utils/removeFromArray.js
-function removeFromArray(arr, elem) {
-  var idx = arr.indexOf(elem);
-  if (idx !== -1) arr.splice(idx, 1);
-}
-// CONCATENATED MODULE: ./src/utils/watchSize.js
-
-
-var intervalId;
-var registered = [];
-var INTERVAL_DURATION = 100;
-
-function run() {
-  intervalId = setInterval(function () {
-    registered.forEach(test);
-  }, INTERVAL_DURATION);
-}
-
-function stop() {
-  clearInterval(intervalId);
-  intervalId = null;
-}
-
-function test(item) {
-  var $el = item.$el,
-      listener = item.listener,
-      lastWidth = item.lastWidth,
-      lastHeight = item.lastHeight;
-  var width = $el.offsetWidth;
-  var height = $el.offsetHeight;
-
-  if (lastWidth !== width || lastHeight !== height) {
-    item.lastWidth = width;
-    item.lastHeight = height;
-    listener({
-      width: width,
-      height: height
-    });
-  }
-}
-
-function watchSizeForIE9($el, listener) {
-  var item = {
-    $el: $el,
-    listener: listener,
-    lastWidth: null,
-    lastHeight: null
-  };
-
-  var unwatch = function unwatch() {
-    removeFromArray(registered, item);
-    if (!registered.length) stop();
-  };
-
-  registered.push(item);
-  test(item);
-  run();
-  return unwatch;
-}
-
-function watchSize($el, listener) {
-  var isIE9 = document.documentMode === 9;
-  var locked = true;
-
-  var wrappedListener = function wrappedListener() {
-    return locked || listener.apply(void 0, arguments);
-  };
-
-  var implementation = isIE9 ? watchSizeForIE9 : external_watch_size_default.a;
-  var removeSizeWatcher = implementation($el, wrappedListener);
-  locked = false;
-  return removeSizeWatcher;
-}
-// CONCATENATED MODULE: ./src/utils/setupResizeAndScrollEventListeners.js
-function findScrollParents($el) {
-  var $scrollParents = [];
-  var $parent = $el.parentNode;
-
-  while ($parent && $parent.nodeName !== 'BODY' && $parent.nodeType === document.ELEMENT_NODE) {
-    if (isScrollElment($parent)) $scrollParents.push($parent);
-    $parent = $parent.parentNode;
-  }
-
-  $scrollParents.push(window);
-  return $scrollParents;
-}
-
-function isScrollElment($el) {
-  var _getComputedStyle = getComputedStyle($el),
-      overflow = _getComputedStyle.overflow,
-      overflowX = _getComputedStyle.overflowX,
-      overflowY = _getComputedStyle.overflowY;
-
-  return /(auto|scroll|overlay)/.test(overflow + overflowY + overflowX);
-}
-
-function setupResizeAndScrollEventListeners($el, listener) {
-  var $scrollParents = findScrollParents($el);
-  window.addEventListener('resize', listener, {
-    passive: true
-  });
-  $scrollParents.forEach(function (scrollParent) {
-    scrollParent.addEventListener('scroll', listener, {
-      passive: true
-    });
-  });
-  return function removeEventListeners() {
-    window.removeEventListener('resize', listener, {
-      passive: true
-    });
-    $scrollParents.forEach(function ($scrollParent) {
-      $scrollParent.removeEventListener('scroll', listener, {
-        passive: true
-      });
-    });
-  };
-}
-// CONCATENATED MODULE: ./src/utils/isNaN.js
-function isNaN_isNaN(x) {
-  return x !== x;
-}
-// EXTERNAL MODULE: external "is-promise"
-var external_is_promise_ = __webpack_require__(7);
-var external_is_promise_default = /*#__PURE__*/__webpack_require__.n(external_is_promise_);
-
-// CONCATENATED MODULE: ./src/utils/isPromise.js
-
-// EXTERNAL MODULE: external "lodash/once"
-var once_ = __webpack_require__(8);
-var once_default = /*#__PURE__*/__webpack_require__.n(once_);
-
-// CONCATENATED MODULE: ./src/utils/once.js
-
-// EXTERNAL MODULE: external "lodash/identity"
-var identity_ = __webpack_require__(9);
-var identity_default = /*#__PURE__*/__webpack_require__.n(identity_);
-
-// CONCATENATED MODULE: ./src/utils/identity.js
-
-// EXTERNAL MODULE: external "lodash/constant"
-var constant_ = __webpack_require__(10);
-var constant_default = /*#__PURE__*/__webpack_require__.n(constant_);
-
-// CONCATENATED MODULE: ./src/utils/constant.js
-
-// CONCATENATED MODULE: ./src/utils/createMap.js
-var createMap = function createMap() {
-  return Object.create(null);
-};
-// EXTERNAL MODULE: external "@babel/runtime/helpers/typeof"
-var typeof_ = __webpack_require__(11);
-var typeof_default = /*#__PURE__*/__webpack_require__.n(typeof_);
-
-// CONCATENATED MODULE: ./src/utils/deepExtend.js
-
-
-function isPlainObject(value) {
-  if (value == null || typeof_default()(value) !== 'object') return false;
-  return Object.getPrototypeOf(value) === Object.prototype;
-}
-
-function copy(obj, key, value) {
-  if (isPlainObject(value)) {
-    obj[key] || (obj[key] = {});
-    deepExtend(obj[key], value);
-  } else {
-    obj[key] = value;
-  }
-}
-
-function deepExtend(target, source) {
-  if (isPlainObject(source)) {
-    var keys = Object.keys(source);
-
-    for (var i = 0, len = keys.length; i < len; i++) {
-      copy(target, keys[i], source[keys[i]]);
-    }
-  }
-
-  return target;
-}
-// EXTERNAL MODULE: external "lodash/last"
-var last_ = __webpack_require__(12);
-var last_default = /*#__PURE__*/__webpack_require__.n(last_);
-
-// CONCATENATED MODULE: ./src/utils/last.js
-
-// CONCATENATED MODULE: ./src/utils/includes.js
-function includes(arrOrStr, elem) {
-  return arrOrStr.indexOf(elem) !== -1;
-}
-// CONCATENATED MODULE: ./src/utils/find.js
-function find(arr, predicate, ctx) {
-  for (var i = 0, len = arr.length; i < len; i++) {
-    if (predicate.call(ctx, arr[i], i, arr)) return arr[i];
-  }
-
-  return undefined;
-}
-// CONCATENATED MODULE: ./src/utils/quickDiff.js
-function quickDiff(arrA, arrB) {
-  if (arrA.length !== arrB.length) return true;
-
-  for (var i = 0; i < arrA.length; i++) {
-    if (arrA[i] !== arrB[i]) return true;
-  }
-
-  return false;
-}
-// CONCATENATED MODULE: ./src/utils/index.js
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// CONCATENATED MODULE: ./src/constants.js
-var NO_PARENT_NODE = null;
-var UNCHECKED = 0;
-var INDETERMINATE = 1;
-var CHECKED = 2;
-var ALL_CHILDREN = 'ALL_CHILDREN';
-var ALL_DESCENDANTS = 'ALL_DESCENDANTS';
-var LEAF_CHILDREN = 'LEAF_CHILDREN';
-var LEAF_DESCENDANTS = 'LEAF_DESCENDANTS';
-var LOAD_ROOT_OPTIONS = 'LOAD_ROOT_OPTIONS';
-var LOAD_CHILDREN_OPTIONS = 'LOAD_CHILDREN_OPTIONS';
-var ASYNC_SEARCH = 'ASYNC_SEARCH';
-var ALL = 'ALL';
-var BRANCH_PRIORITY = 'BRANCH_PRIORITY';
-var LEAF_PRIORITY = 'LEAF_PRIORITY';
-var ALL_WITH_INDETERMINATE = 'ALL_WITH_INDETERMINATE';
-var ORDER_SELECTED = 'ORDER_SELECTED';
-var LEVEL = 'LEVEL';
-var INDEX = 'INDEX';
-var KEY_CODES = {
-  BACKSPACE: 8,
-  ENTER: 13,
-  ESCAPE: 27,
-  END: 35,
-  HOME: 36,
-  ARROW_LEFT: 37,
-  ARROW_UP: 38,
-  ARROW_RIGHT: 39,
-  ARROW_DOWN: 40,
-  DELETE: 46
-};
-var INPUT_DEBOUNCE_DELAY = process.env.NODE_ENV === 'testing' ? 10 : 200;
-var MIN_INPUT_WIDTH = 5;
-var MENU_BUFFER = 40;
-// CONCATENATED MODULE: ./src/mixins/treeselectMixin.js
-
-
-
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { defineProperty_default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-
-
-
-
-function sortValueByIndex(a, b) {
-  var i = 0;
-
-  do {
-    if (a.level < i) return -1;
-    if (b.level < i) return 1;
-    if (a.index[i] !== b.index[i]) return a.index[i] - b.index[i];
-    i++;
-  } while (true);
-}
-
-function sortValueByLevel(a, b) {
-  return a.level === b.level ? sortValueByIndex(a, b) : a.level - b.level;
-}
-
-function createAsyncOptionsStates() {
-  return {
-    isLoaded: false,
-    isLoading: false,
-    loadingError: ''
-  };
-}
-
-function stringifyOptionPropValue(value) {
-  if (typeof value === 'string') return value;
-  if (typeof value === 'number' && !isNaN_isNaN(value)) return value + '';
-  return '';
-}
-
-function match(enableFuzzyMatch, needle, haystack) {
-  return enableFuzzyMatch ? external_fuzzysearch_default()(needle, haystack) : includes(haystack, needle);
-}
-
-function getErrorMessage(err) {
-  return err.message || String(err);
-}
-
-var instanceId = 0;
-/* harmony default export */ var treeselectMixin = ({
-  provide: function provide() {
-    return {
-      instance: this
-    };
-  },
-  props: {
-    allowClearingDisabled: {
-      type: Boolean,
-      default: false
-    },
-    allowSelectingDisabledDescendants: {
-      type: Boolean,
-      default: false
-    },
-    alwaysOpen: {
-      type: Boolean,
-      default: false
-    },
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-    async: {
-      type: Boolean,
-      default: false
-    },
-    autoFocus: {
-      type: Boolean,
-      default: false
-    },
-    autoLoadRootOptions: {
-      type: Boolean,
-      default: true
-    },
-    autoDeselectAncestors: {
-      type: Boolean,
-      default: false
-    },
-    autoDeselectDescendants: {
-      type: Boolean,
-      default: false
-    },
-    autoSelectAncestors: {
-      type: Boolean,
-      default: false
-    },
-    autoSelectDescendants: {
-      type: Boolean,
-      default: false
-    },
-    backspaceRemoves: {
-      type: Boolean,
-      default: true
-    },
-    beforeClearAll: {
-      type: Function,
-      default: constant_default()(true)
-    },
-    branchNodesFirst: {
-      type: Boolean,
-      default: false
-    },
-    cacheOptions: {
-      type: Boolean,
-      default: true
-    },
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    clearAllText: {
-      type: String,
-      default: 'Clear all'
-    },
-    clearOnSelect: {
-      type: Boolean,
-      default: false
-    },
-    clearValueText: {
-      type: String,
-      default: 'Clear value'
-    },
-    closeOnSelect: {
-      type: Boolean,
-      default: true
-    },
-    defaultExpandLevel: {
-      type: Number,
-      default: 0
-    },
-    defaultOptions: {
-      default: false
-    },
-    deleteRemoves: {
-      type: Boolean,
-      default: true
-    },
-    delimiter: {
-      type: String,
-      default: ','
-    },
-    flattenSearchResults: {
-      type: Boolean,
-      default: false
-    },
-    disableBranchNodes: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    disableFuzzyMatching: {
-      type: Boolean,
-      default: false
-    },
-    flat: {
-      type: Boolean,
-      default: false
-    },
-    instanceId: {
-      default: function _default() {
-        return "".concat(instanceId++, "$$");
-      },
-      type: [String, Number]
-    },
-    joinValues: {
-      type: Boolean,
-      default: false
-    },
-    limit: {
-      type: Number,
-      default: Infinity
-    },
-    limitText: {
-      type: Function,
-      default: function limitTextDefault(count) {
-        return "and ".concat(count, " more");
-      }
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    loadingText: {
-      type: String,
-      default: 'Loading...'
-    },
-    loadOptions: {
-      type: Function
-    },
-    matchKeys: {
-      type: Array,
-      default: constant_default()(['label'])
-    },
-    maxHeight: {
-      type: Number,
-      default: 300
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    name: {
-      type: String
-    },
-    noChildrenText: {
-      type: String,
-      default: 'No sub-options.'
-    },
-    noOptionsText: {
-      type: String,
-      default: 'No options available.'
-    },
-    noResultsText: {
-      type: String,
-      default: 'No results found...'
-    },
-    normalizer: {
-      type: Function,
-      default: identity_default.a
-    },
-    openDirection: {
-      type: String,
-      default: 'auto',
-      validator: function validator(value) {
-        var acceptableValues = ['auto', 'top', 'bottom', 'above', 'below'];
-        return includes(acceptableValues, value);
-      }
-    },
-    openOnClick: {
-      type: Boolean,
-      default: true
-    },
-    openOnFocus: {
-      type: Boolean,
-      default: false
-    },
-    options: {
-      type: Array
-    },
-    placeholder: {
-      type: String,
-      default: 'Select...'
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    retryText: {
-      type: String,
-      default: 'Retry?'
-    },
-    retryTitle: {
-      type: String,
-      default: 'Click to retry'
-    },
-    searchable: {
-      type: Boolean,
-      default: true
-    },
-    searchNested: {
-      type: Boolean,
-      default: false
-    },
-    searchPromptText: {
-      type: String,
-      default: 'Type to search...'
-    },
-    showCount: {
-      type: Boolean,
-      default: false
-    },
-    showCountOf: {
-      type: String,
-      default: ALL_CHILDREN,
-      validator: function validator(value) {
-        var acceptableValues = [ALL_CHILDREN, ALL_DESCENDANTS, LEAF_CHILDREN, LEAF_DESCENDANTS];
-        return includes(acceptableValues, value);
-      }
-    },
-    showCountOnSearch: null,
-    sortValueBy: {
-      type: String,
-      default: ORDER_SELECTED,
-      validator: function validator(value) {
-        var acceptableValues = [ORDER_SELECTED, LEVEL, INDEX];
-        return includes(acceptableValues, value);
-      }
-    },
-    tabIndex: {
-      type: Number,
-      default: 0
-    },
-    value: null,
-    valueConsistsOf: {
-      type: String,
-      default: BRANCH_PRIORITY,
-      validator: function validator(value) {
-        var acceptableValues = [ALL, BRANCH_PRIORITY, LEAF_PRIORITY, ALL_WITH_INDETERMINATE];
-        return includes(acceptableValues, value);
-      }
-    },
-    valueFormat: {
-      type: String,
-      default: 'id'
-    },
-    zIndex: {
-      type: [Number, String],
-      default: 999
-    }
-  },
-  data: function data() {
-    return {
-      trigger: {
-        isFocused: false,
-        searchQuery: ''
-      },
-      menu: {
-        isOpen: false,
-        current: null,
-        lastScrollPosition: 0,
-        placement: 'bottom'
-      },
-      forest: {
-        normalizedOptions: [],
-        nodeMap: createMap(),
-        checkedStateMap: createMap(),
-        selectedNodeIds: this.extractCheckedNodeIdsFromValue(),
-        selectedNodeMap: createMap()
-      },
-      rootOptionsStates: createAsyncOptionsStates(),
-      localSearch: {
-        active: false,
-        noResults: true,
-        countMap: createMap()
-      },
-      remoteSearch: createMap()
-    };
-  },
-  computed: {
-    selectedNodes: function selectedNodes() {
-      return this.forest.selectedNodeIds.map(this.getNode);
-    },
-    internalValue: function internalValue() {
-      var _this = this;
-
-      var internalValue;
-
-      if (this.single || this.flat || this.disableBranchNodes || this.valueConsistsOf === ALL) {
-        internalValue = this.forest.selectedNodeIds.slice();
-      } else if (this.valueConsistsOf === BRANCH_PRIORITY) {
-        internalValue = this.forest.selectedNodeIds.filter(function (id) {
-          var node = _this.getNode(id);
-
-          if (node.isRootNode) return true;
-          return !_this.isSelected(node.parentNode);
-        });
-      } else if (this.valueConsistsOf === LEAF_PRIORITY) {
-        internalValue = this.forest.selectedNodeIds.filter(function (id) {
-          var node = _this.getNode(id);
-
-          if (node.isLeaf) return true;
-          return node.children.length === 0;
-        });
-      } else if (this.valueConsistsOf === ALL_WITH_INDETERMINATE) {
-        var _internalValue;
-
-        var indeterminateNodeIds = [];
-        internalValue = this.forest.selectedNodeIds.slice();
-        this.selectedNodes.forEach(function (selectedNode) {
-          selectedNode.ancestors.forEach(function (ancestor) {
-            if (includes(indeterminateNodeIds, ancestor.id)) return;
-            if (includes(internalValue, ancestor.id)) return;
-            indeterminateNodeIds.push(ancestor.id);
-          });
-        });
-
-        (_internalValue = internalValue).push.apply(_internalValue, indeterminateNodeIds);
-      }
-
-      if (this.sortValueBy === LEVEL) {
-        internalValue.sort(function (a, b) {
-          return sortValueByLevel(_this.getNode(a), _this.getNode(b));
-        });
-      } else if (this.sortValueBy === INDEX) {
-        internalValue.sort(function (a, b) {
-          return sortValueByIndex(_this.getNode(a), _this.getNode(b));
-        });
-      }
-
-      return internalValue;
-    },
-    hasValue: function hasValue() {
-      return this.internalValue.length > 0;
-    },
-    single: function single() {
-      return !this.multiple;
-    },
-    visibleOptionIds: function visibleOptionIds() {
-      var _this2 = this;
-
-      var visibleOptionIds = [];
-      this.traverseAllNodesByIndex(function (node) {
-        if (!_this2.localSearch.active || _this2.shouldOptionBeIncludedInSearchResult(node)) {
-          visibleOptionIds.push(node.id);
-        }
-
-        if (node.isBranch && !_this2.shouldExpand(node)) {
-          return false;
-        }
-      });
-      return visibleOptionIds;
-    },
-    hasVisibleOptions: function hasVisibleOptions() {
-      return this.visibleOptionIds.length !== 0;
-    },
-    showCountOnSearchComputed: function showCountOnSearchComputed() {
-      return typeof this.showCountOnSearch === 'boolean' ? this.showCountOnSearch : this.showCount;
-    },
-    hasBranchNodes: function hasBranchNodes() {
-      return this.forest.normalizedOptions.some(function (rootNode) {
-        return rootNode.isBranch;
-      });
-    },
-    shouldFlattenOptions: function shouldFlattenOptions() {
-      return this.localSearch.active && this.flattenSearchResults;
-    }
-  },
-  watch: {
-    alwaysOpen: function alwaysOpen(newValue) {
-      if (newValue) this.openMenu();else this.closeMenu();
-    },
-    branchNodesFirst: function branchNodesFirst() {
-      this.initialize();
-    },
-    disabled: function disabled(newValue) {
-      if (newValue && this.menu.isOpen) this.closeMenu();else if (!newValue && !this.menu.isOpen && this.alwaysOpen) this.openMenu();
-    },
-    flat: function flat() {
-      this.initialize();
-    },
-    internalValue: function internalValue(newValue, oldValue) {
-      var hasChanged = quickDiff(newValue, oldValue);
-      if (hasChanged) this.$emit('input', this.getValue(), this.getInstanceId());
-    },
-    matchKeys: function matchKeys() {
-      this.initialize();
-    },
-    multiple: function multiple(newValue) {
-      if (newValue) this.buildForestState();
-    },
-    options: {
-      handler: function handler() {
-        if (this.async) return;
-        this.initialize();
-        this.rootOptionsStates.isLoaded = Array.isArray(this.options);
-      },
-      deep: true,
-      immediate: true
-    },
-    'trigger.searchQuery': function triggerSearchQuery() {
-      if (this.async) {
-        this.handleRemoteSearch();
-      } else {
-        this.handleLocalSearch();
-      }
-
-      this.$emit('search-change', this.trigger.searchQuery, this.getInstanceId());
-    },
-    value: function value() {
-      var nodeIdsFromValue = this.extractCheckedNodeIdsFromValue();
-      var hasChanged = quickDiff(nodeIdsFromValue, this.internalValue);
-      if (hasChanged) this.fixSelectedNodeIds(nodeIdsFromValue);
-    }
-  },
-  methods: {
-    verifyProps: function verifyProps() {
-      var _this3 = this;
-
-      warning_warning(function () {
-        return _this3.async ? _this3.searchable : true;
-      }, function () {
-        return 'For async search mode, the value of "searchable" prop must be true.';
-      });
-
-      if (this.options == null && !this.loadOptions) {
-        warning_warning(function () {
-          return false;
-        }, function () {
-          return 'Are you meant to dynamically load options? You need to use "loadOptions" prop.';
-        });
-      }
-
-      if (this.flat) {
-        warning_warning(function () {
-          return _this3.multiple;
-        }, function () {
-          return 'You are using flat mode. But you forgot to add "multiple=true"?';
-        });
-      }
-
-      if (!this.flat) {
-        var propNames = ['autoSelectAncestors', 'autoSelectDescendants', 'autoDeselectAncestors', 'autoDeselectDescendants'];
-        propNames.forEach(function (propName) {
-          warning_warning(function () {
-            return !_this3[propName];
-          }, function () {
-            return "\"".concat(propName, "\" only applies to flat mode.");
-          });
-        });
-      }
-    },
-    resetFlags: function resetFlags() {
-      this._blurOnSelect = false;
-    },
-    initialize: function initialize() {
-      var options = this.async ? this.getRemoteSearchEntry().options : this.options;
-
-      if (Array.isArray(options)) {
-        var prevNodeMap = this.forest.nodeMap;
-        this.forest.nodeMap = createMap();
-        this.keepDataOfSelectedNodes(prevNodeMap);
-        this.forest.normalizedOptions = this.normalize(NO_PARENT_NODE, options, prevNodeMap);
-        this.fixSelectedNodeIds(this.internalValue);
-      } else {
-        this.forest.normalizedOptions = [];
-      }
-    },
-    getInstanceId: function getInstanceId() {
-      return this.instanceId == null ? this.id : this.instanceId;
-    },
-    getValue: function getValue() {
-      var _this4 = this;
-
-      if (this.valueFormat === 'id') {
-        return this.multiple ? this.internalValue.slice() : this.internalValue[0];
-      }
-
-      var rawNodes = this.internalValue.map(function (id) {
-        return _this4.getNode(id).raw;
-      });
-      return this.multiple ? rawNodes : rawNodes[0];
-    },
-    getNode: function getNode(nodeId) {
-      warning_warning(function () {
-        return nodeId != null;
-      }, function () {
-        return "Invalid node id: ".concat(nodeId);
-      });
-      if (nodeId == null) return null;
-      return nodeId in this.forest.nodeMap ? this.forest.nodeMap[nodeId] : this.createFallbackNode(nodeId);
-    },
-    createFallbackNode: function createFallbackNode(id) {
-      var raw = this.extractNodeFromValue(id);
-      var label = this.enhancedNormalizer(raw).label || "".concat(id, " (unknown)");
-      var fallbackNode = {
-        id: id,
-        label: label,
-        ancestors: [],
-        parentNode: NO_PARENT_NODE,
-        isFallbackNode: true,
-        isRootNode: true,
-        isLeaf: true,
-        isBranch: false,
-        isDisabled: false,
-        isNew: false,
-        index: [-1],
-        level: 0,
-        raw: raw
-      };
-      return this.$set(this.forest.nodeMap, id, fallbackNode);
-    },
-    extractCheckedNodeIdsFromValue: function extractCheckedNodeIdsFromValue() {
-      var _this5 = this;
-
-      if (this.value == null) return [];
-
-      if (this.valueFormat === 'id') {
-        return this.multiple ? this.value.slice() : [this.value];
-      }
-
-      return (this.multiple ? this.value : [this.value]).map(function (node) {
-        return _this5.enhancedNormalizer(node);
-      }).map(function (node) {
-        return node.id;
-      });
-    },
-    extractNodeFromValue: function extractNodeFromValue(id) {
-      var _this6 = this;
-
-      var defaultNode = {
-        id: id
-      };
-
-      if (this.valueFormat === 'id') {
-        return defaultNode;
-      }
-
-      var valueArray = this.multiple ? Array.isArray(this.value) ? this.value : [] : this.value ? [this.value] : [];
-      var matched = find(valueArray, function (node) {
-        return node && _this6.enhancedNormalizer(node).id === id;
-      });
-      return matched || defaultNode;
-    },
-    fixSelectedNodeIds: function fixSelectedNodeIds(nodeIdListOfPrevValue) {
-      var _this7 = this;
-
-      var nextSelectedNodeIds = [];
-
-      if (this.single || this.flat || this.disableBranchNodes || this.valueConsistsOf === ALL) {
-        nextSelectedNodeIds = nodeIdListOfPrevValue;
-      } else if (this.valueConsistsOf === BRANCH_PRIORITY) {
-        nodeIdListOfPrevValue.forEach(function (nodeId) {
-          nextSelectedNodeIds.push(nodeId);
-
-          var node = _this7.getNode(nodeId);
-
-          if (node.isBranch) _this7.traverseDescendantsBFS(node, function (descendant) {
-            nextSelectedNodeIds.push(descendant.id);
-          });
-        });
-      } else if (this.valueConsistsOf === LEAF_PRIORITY) {
-        var map = createMap();
-        var queue = nodeIdListOfPrevValue.slice();
-
-        while (queue.length) {
-          var nodeId = queue.shift();
-          var node = this.getNode(nodeId);
-          nextSelectedNodeIds.push(nodeId);
-          if (node.isRootNode) continue;
-          if (!(node.parentNode.id in map)) map[node.parentNode.id] = node.parentNode.children.length;
-          if (--map[node.parentNode.id] === 0) queue.push(node.parentNode.id);
-        }
-      } else if (this.valueConsistsOf === ALL_WITH_INDETERMINATE) {
-        var _map = createMap();
-
-        var _queue = nodeIdListOfPrevValue.filter(function (nodeId) {
-          var node = _this7.getNode(nodeId);
-
-          return node.isLeaf || node.children.length === 0;
-        });
-
-        while (_queue.length) {
-          var _nodeId = _queue.shift();
-
-          var _node = this.getNode(_nodeId);
-
-          nextSelectedNodeIds.push(_nodeId);
-          if (_node.isRootNode) continue;
-          if (!(_node.parentNode.id in _map)) _map[_node.parentNode.id] = _node.parentNode.children.length;
-          if (--_map[_node.parentNode.id] === 0) _queue.push(_node.parentNode.id);
-        }
-      }
-
-      var hasChanged = quickDiff(this.forest.selectedNodeIds, nextSelectedNodeIds);
-      if (hasChanged) this.forest.selectedNodeIds = nextSelectedNodeIds;
-      this.buildForestState();
-    },
-    keepDataOfSelectedNodes: function keepDataOfSelectedNodes(prevNodeMap) {
-      var _this8 = this;
-
-      this.forest.selectedNodeIds.forEach(function (id) {
-        if (!prevNodeMap[id]) return;
-
-        var node = _objectSpread({}, prevNodeMap[id], {
-          isFallbackNode: true
-        });
-
-        _this8.$set(_this8.forest.nodeMap, id, node);
-      });
-    },
-    isSelected: function isSelected(node) {
-      return this.forest.selectedNodeMap[node.id] === true;
-    },
-    traverseDescendantsBFS: function traverseDescendantsBFS(parentNode, callback) {
-      if (!parentNode.isBranch) return;
-      var queue = parentNode.children.slice();
-
-      while (queue.length) {
-        var currNode = queue[0];
-        if (currNode.isBranch) queue.push.apply(queue, toConsumableArray_default()(currNode.children));
-        callback(currNode);
-        queue.shift();
-      }
-    },
-    traverseDescendantsDFS: function traverseDescendantsDFS(parentNode, callback) {
-      var _this9 = this;
-
-      if (!parentNode.isBranch) return;
-      parentNode.children.forEach(function (child) {
-        _this9.traverseDescendantsDFS(child, callback);
-
-        callback(child);
-      });
-    },
-    traverseAllNodesDFS: function traverseAllNodesDFS(callback) {
-      var _this10 = this;
-
-      this.forest.normalizedOptions.forEach(function (rootNode) {
-        _this10.traverseDescendantsDFS(rootNode, callback);
-
-        callback(rootNode);
-      });
-    },
-    traverseAllNodesByIndex: function traverseAllNodesByIndex(callback) {
-      var walk = function walk(parentNode) {
-        parentNode.children.forEach(function (child) {
-          if (callback(child) !== false && child.isBranch) {
-            walk(child);
-          }
-        });
-      };
-
-      walk({
-        children: this.forest.normalizedOptions
-      });
-    },
-    toggleClickOutsideEvent: function toggleClickOutsideEvent(enabled) {
-      if (enabled) {
-        document.addEventListener('mousedown', this.handleClickOutside, false);
-      } else {
-        document.removeEventListener('mousedown', this.handleClickOutside, false);
-      }
-    },
-    getValueContainer: function getValueContainer() {
-      return this.$refs.control.$refs['value-container'];
-    },
-    getInput: function getInput() {
-      return this.getValueContainer().$refs.input;
-    },
-    focusInput: function focusInput() {
-      this.getInput().focus();
-    },
-    blurInput: function blurInput() {
-      this.getInput().blur();
-    },
-    handleMouseDown: onLeftClick(function handleMouseDown(evt) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      if (this.disabled) return;
-      var isClickedOnValueContainer = this.getValueContainer().$el.contains(evt.target);
-
-      if (isClickedOnValueContainer && !this.menu.isOpen && (this.openOnClick || this.trigger.isFocused)) {
-        this.openMenu();
-      }
-
-      if (this._blurOnSelect) {
-        this.blurInput();
-      } else {
-        this.focusInput();
-      }
-
-      this.resetFlags();
-    }),
-    handleClickOutside: function handleClickOutside(evt) {
-      if (this.$refs.wrapper && !this.$refs.wrapper.contains(evt.target)) {
-        this.blurInput();
-        this.closeMenu();
-      }
-    },
-    handleLocalSearch: function handleLocalSearch() {
-      var _this11 = this;
-
-      var searchQuery = this.trigger.searchQuery;
-
-      var done = function done() {
-        return _this11.resetHighlightedOptionWhenNecessary(true);
-      };
-
-      if (!searchQuery) {
-        this.localSearch.active = false;
-        return done();
-      }
-
-      this.localSearch.active = true;
-      this.localSearch.noResults = true;
-      this.traverseAllNodesDFS(function (node) {
-        if (node.isBranch) {
-          var _this11$$set;
-
-          node.isExpandedOnSearch = false;
-          node.showAllChildrenOnSearch = false;
-          node.isMatched = false;
-          node.hasMatchedDescendants = false;
-
-          _this11.$set(_this11.localSearch.countMap, node.id, (_this11$$set = {}, defineProperty_default()(_this11$$set, ALL_CHILDREN, 0), defineProperty_default()(_this11$$set, ALL_DESCENDANTS, 0), defineProperty_default()(_this11$$set, LEAF_CHILDREN, 0), defineProperty_default()(_this11$$set, LEAF_DESCENDANTS, 0), _this11$$set));
-        }
-      });
-      var lowerCasedSearchQuery = searchQuery.trim().toLocaleLowerCase();
-      var splitSearchQuery = lowerCasedSearchQuery.replace(/\s+/g, ' ').split(' ');
-      this.traverseAllNodesDFS(function (node) {
-        if (_this11.searchNested && splitSearchQuery.length > 1) {
-          node.isMatched = splitSearchQuery.every(function (filterValue) {
-            return match(false, filterValue, node.nestedSearchLabel);
-          });
-        } else {
-          node.isMatched = _this11.matchKeys.some(function (matchKey) {
-            return match(!_this11.disableFuzzyMatching, lowerCasedSearchQuery, node.lowerCased[matchKey]);
-          });
-        }
-
-        if (node.isMatched) {
-          _this11.localSearch.noResults = false;
-          node.ancestors.forEach(function (ancestor) {
-            return _this11.localSearch.countMap[ancestor.id][ALL_DESCENDANTS]++;
-          });
-          if (node.isLeaf) node.ancestors.forEach(function (ancestor) {
-            return _this11.localSearch.countMap[ancestor.id][LEAF_DESCENDANTS]++;
-          });
-
-          if (node.parentNode !== NO_PARENT_NODE) {
-            _this11.localSearch.countMap[node.parentNode.id][ALL_CHILDREN] += 1;
-            if (node.isLeaf) _this11.localSearch.countMap[node.parentNode.id][LEAF_CHILDREN] += 1;
-          }
-        }
-
-        if ((node.isMatched || node.isBranch && node.isExpandedOnSearch) && node.parentNode !== NO_PARENT_NODE) {
-          node.parentNode.isExpandedOnSearch = true;
-          node.parentNode.hasMatchedDescendants = true;
-        }
-      });
-      done();
-    },
-    handleRemoteSearch: function handleRemoteSearch() {
-      var _this12 = this;
-
-      var searchQuery = this.trigger.searchQuery;
-      var entry = this.getRemoteSearchEntry();
-
-      var done = function done() {
-        _this12.initialize();
-
-        _this12.resetHighlightedOptionWhenNecessary(true);
-      };
-
-      if ((searchQuery === '' || this.cacheOptions) && entry.isLoaded) {
-        return done();
-      }
-
-      this.callLoadOptionsProp({
-        action: ASYNC_SEARCH,
-        args: {
-          searchQuery: searchQuery
-        },
-        isPending: function isPending() {
-          return entry.isLoading;
-        },
-        start: function start() {
-          entry.isLoading = true;
-          entry.isLoaded = false;
-          entry.loadingError = '';
-        },
-        succeed: function succeed(options) {
-          entry.isLoaded = true;
-          entry.options = options;
-          if (_this12.trigger.searchQuery === searchQuery) done();
-        },
-        fail: function fail(err) {
-          entry.loadingError = getErrorMessage(err);
-        },
-        end: function end() {
-          entry.isLoading = false;
-        }
-      });
-    },
-    getRemoteSearchEntry: function getRemoteSearchEntry() {
-      var _this13 = this;
-
-      var searchQuery = this.trigger.searchQuery;
-
-      var entry = this.remoteSearch[searchQuery] || _objectSpread({}, createAsyncOptionsStates(), {
-        options: []
-      });
-
-      this.$watch(function () {
-        return entry.options;
-      }, function () {
-        if (_this13.trigger.searchQuery === searchQuery) _this13.initialize();
-      }, {
-        deep: true
-      });
-
-      if (searchQuery === '') {
-        if (Array.isArray(this.defaultOptions)) {
-          entry.options = this.defaultOptions;
-          entry.isLoaded = true;
-          return entry;
-        } else if (this.defaultOptions !== true) {
-          entry.isLoaded = true;
-          return entry;
-        }
-      }
-
-      if (!this.remoteSearch[searchQuery]) {
-        this.$set(this.remoteSearch, searchQuery, entry);
-      }
-
-      return entry;
-    },
-    shouldExpand: function shouldExpand(node) {
-      return this.localSearch.active ? node.isExpandedOnSearch : node.isExpanded;
-    },
-    shouldOptionBeIncludedInSearchResult: function shouldOptionBeIncludedInSearchResult(node) {
-      if (node.isMatched) return true;
-      if (node.isBranch && node.hasMatchedDescendants && !this.flattenSearchResults) return true;
-      if (!node.isRootNode && node.parentNode.showAllChildrenOnSearch) return true;
-      return false;
-    },
-    shouldShowOptionInMenu: function shouldShowOptionInMenu(node) {
-      if (this.localSearch.active && !this.shouldOptionBeIncludedInSearchResult(node)) {
-        return false;
-      }
-
-      return true;
-    },
-    getControl: function getControl() {
-      return this.$refs.control.$el;
-    },
-    getMenu: function getMenu() {
-      var ref = this.appendToBody ? this.$refs.portal.portalTarget : this;
-      var $menu = ref.$refs.menu.$refs.menu;
-      return $menu && $menu.nodeName !== '#comment' ? $menu : null;
-    },
-    setCurrentHighlightedOption: function setCurrentHighlightedOption(node) {
-      var _this14 = this;
-
-      var scroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var prev = this.menu.current;
-
-      if (prev != null && prev in this.forest.nodeMap) {
-        this.forest.nodeMap[prev].isHighlighted = false;
-      }
-
-      this.menu.current = node.id;
-      node.isHighlighted = true;
-
-      if (this.menu.isOpen && scroll) {
-        var scrollToOption = function scrollToOption() {
-          var $menu = _this14.getMenu();
-
-          var $option = $menu.querySelector(".vue-treeselect__option[data-id=\"".concat(node.id, "\"]"));
-          if ($option) scrollIntoView($menu, $option);
-        };
-
-        if (this.getMenu()) {
-          scrollToOption();
-        } else {
-          this.$nextTick(scrollToOption);
-        }
-      }
-    },
-    resetHighlightedOptionWhenNecessary: function resetHighlightedOptionWhenNecessary() {
-      var forceReset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var current = this.menu.current;
-
-      if (forceReset || current == null || !(current in this.forest.nodeMap) || !this.shouldShowOptionInMenu(this.getNode(current))) {
-        this.highlightFirstOption();
-      }
-    },
-    highlightFirstOption: function highlightFirstOption() {
-      if (!this.hasVisibleOptions) return;
-      var first = this.visibleOptionIds[0];
-      this.setCurrentHighlightedOption(this.getNode(first));
-    },
-    highlightPrevOption: function highlightPrevOption() {
-      if (!this.hasVisibleOptions) return;
-      var prev = this.visibleOptionIds.indexOf(this.menu.current) - 1;
-      if (prev === -1) return this.highlightLastOption();
-      this.setCurrentHighlightedOption(this.getNode(this.visibleOptionIds[prev]));
-    },
-    highlightNextOption: function highlightNextOption() {
-      if (!this.hasVisibleOptions) return;
-      var next = this.visibleOptionIds.indexOf(this.menu.current) + 1;
-      if (next === this.visibleOptionIds.length) return this.highlightFirstOption();
-      this.setCurrentHighlightedOption(this.getNode(this.visibleOptionIds[next]));
-    },
-    highlightLastOption: function highlightLastOption() {
-      if (!this.hasVisibleOptions) return;
-      var last = last_default()(this.visibleOptionIds);
-      this.setCurrentHighlightedOption(this.getNode(last));
-    },
-    resetSearchQuery: function resetSearchQuery() {
-      this.trigger.searchQuery = '';
-    },
-    closeMenu: function closeMenu() {
-      if (!this.menu.isOpen || !this.disabled && this.alwaysOpen) return;
-      this.saveMenuScrollPosition();
-      this.menu.isOpen = false;
-      this.toggleClickOutsideEvent(false);
-      this.resetSearchQuery();
-      this.$emit('close', this.getValue(), this.getInstanceId());
-    },
-    openMenu: function openMenu() {
-      if (this.disabled || this.menu.isOpen) return;
-      this.menu.isOpen = true;
-      this.$nextTick(this.resetHighlightedOptionWhenNecessary);
-      this.$nextTick(this.restoreMenuScrollPosition);
-      if (!this.options && !this.async) this.loadRootOptions();
-      this.toggleClickOutsideEvent(true);
-      this.$emit('open', this.getInstanceId());
-    },
-    toggleMenu: function toggleMenu() {
-      if (this.menu.isOpen) {
-        this.closeMenu();
-      } else {
-        this.openMenu();
-      }
-    },
-    toggleExpanded: function toggleExpanded(node) {
-      var nextState;
-
-      if (this.localSearch.active) {
-        nextState = node.isExpandedOnSearch = !node.isExpandedOnSearch;
-        if (nextState) node.showAllChildrenOnSearch = true;
-      } else {
-        nextState = node.isExpanded = !node.isExpanded;
-      }
-
-      if (nextState && !node.childrenStates.isLoaded) {
-        this.loadChildrenOptions(node);
-      }
-    },
-    buildForestState: function buildForestState() {
-      var _this15 = this;
-
-      var selectedNodeMap = createMap();
-      this.forest.selectedNodeIds.forEach(function (selectedNodeId) {
-        selectedNodeMap[selectedNodeId] = true;
-      });
-      this.forest.selectedNodeMap = selectedNodeMap;
-      var checkedStateMap = createMap();
-
-      if (this.multiple) {
-        this.traverseAllNodesByIndex(function (node) {
-          checkedStateMap[node.id] = UNCHECKED;
-        });
-        this.selectedNodes.forEach(function (selectedNode) {
-          checkedStateMap[selectedNode.id] = CHECKED;
-
-          if (!_this15.flat && !_this15.disableBranchNodes) {
-            selectedNode.ancestors.forEach(function (ancestorNode) {
-              if (!_this15.isSelected(ancestorNode)) {
-                checkedStateMap[ancestorNode.id] = INDETERMINATE;
-              }
-            });
-          }
-        });
-      }
-
-      this.forest.checkedStateMap = checkedStateMap;
-    },
-    enhancedNormalizer: function enhancedNormalizer(raw) {
-      return _objectSpread({}, raw, {}, this.normalizer(raw, this.getInstanceId()));
-    },
-    normalize: function normalize(parentNode, nodes, prevNodeMap) {
-      var _this16 = this;
-
-      var normalizedOptions = nodes.map(function (node) {
-        return [_this16.enhancedNormalizer(node), node];
-      }).map(function (_ref, index) {
-        var _ref2 = slicedToArray_default()(_ref, 2),
-            node = _ref2[0],
-            raw = _ref2[1];
-
-        _this16.checkDuplication(node);
-
-        _this16.verifyNodeShape(node);
-
-        var id = node.id,
-            label = node.label,
-            children = node.children,
-            isDefaultExpanded = node.isDefaultExpanded;
-        var isRootNode = parentNode === NO_PARENT_NODE;
-        var level = isRootNode ? 0 : parentNode.level + 1;
-        var isBranch = Array.isArray(children) || children === null;
-        var isLeaf = !isBranch;
-        var isDisabled = !!node.isDisabled || !_this16.flat && !isRootNode && parentNode.isDisabled;
-        var isNew = !!node.isNew;
-
-        var lowerCased = _this16.matchKeys.reduce(function (prev, key) {
-          return _objectSpread({}, prev, defineProperty_default()({}, key, stringifyOptionPropValue(node[key]).toLocaleLowerCase()));
-        }, {});
-
-        var nestedSearchLabel = isRootNode ? lowerCased.label : parentNode.nestedSearchLabel + ' ' + lowerCased.label;
-
-        var normalized = _this16.$set(_this16.forest.nodeMap, id, createMap());
-
-        _this16.$set(normalized, 'id', id);
-
-        _this16.$set(normalized, 'label', label);
-
-        _this16.$set(normalized, 'level', level);
-
-        _this16.$set(normalized, 'ancestors', isRootNode ? [] : [parentNode].concat(parentNode.ancestors));
-
-        _this16.$set(normalized, 'index', (isRootNode ? [] : parentNode.index).concat(index));
-
-        _this16.$set(normalized, 'parentNode', parentNode);
-
-        _this16.$set(normalized, 'lowerCased', lowerCased);
-
-        _this16.$set(normalized, 'nestedSearchLabel', nestedSearchLabel);
-
-        _this16.$set(normalized, 'isDisabled', isDisabled);
-
-        _this16.$set(normalized, 'isNew', isNew);
-
-        _this16.$set(normalized, 'isMatched', false);
-
-        _this16.$set(normalized, 'isHighlighted', false);
-
-        _this16.$set(normalized, 'isBranch', isBranch);
-
-        _this16.$set(normalized, 'isLeaf', isLeaf);
-
-        _this16.$set(normalized, 'isRootNode', isRootNode);
-
-        _this16.$set(normalized, 'raw', raw);
-
-        if (isBranch) {
-          var _this16$$set;
-
-          var isLoaded = Array.isArray(children);
-
-          _this16.$set(normalized, 'childrenStates', _objectSpread({}, createAsyncOptionsStates(), {
-            isLoaded: isLoaded
-          }));
-
-          _this16.$set(normalized, 'isExpanded', typeof isDefaultExpanded === 'boolean' ? isDefaultExpanded : level < _this16.defaultExpandLevel);
-
-          _this16.$set(normalized, 'hasMatchedDescendants', false);
-
-          _this16.$set(normalized, 'hasDisabledDescendants', false);
-
-          _this16.$set(normalized, 'isExpandedOnSearch', false);
-
-          _this16.$set(normalized, 'showAllChildrenOnSearch', false);
-
-          _this16.$set(normalized, 'count', (_this16$$set = {}, defineProperty_default()(_this16$$set, ALL_CHILDREN, 0), defineProperty_default()(_this16$$set, ALL_DESCENDANTS, 0), defineProperty_default()(_this16$$set, LEAF_CHILDREN, 0), defineProperty_default()(_this16$$set, LEAF_DESCENDANTS, 0), _this16$$set));
-
-          _this16.$set(normalized, 'children', isLoaded ? _this16.normalize(normalized, children, prevNodeMap) : []);
-
-          if (isDefaultExpanded === true) normalized.ancestors.forEach(function (ancestor) {
-            ancestor.isExpanded = true;
-          });
-
-          if (!isLoaded && typeof _this16.loadOptions !== 'function') {
-            warning_warning(function () {
-              return false;
-            }, function () {
-              return 'Unloaded branch node detected. "loadOptions" prop is required to load its children.';
-            });
-          } else if (!isLoaded && normalized.isExpanded) {
-            _this16.loadChildrenOptions(normalized);
-          }
-        }
-
-        normalized.ancestors.forEach(function (ancestor) {
-          return ancestor.count[ALL_DESCENDANTS]++;
-        });
-        if (isLeaf) normalized.ancestors.forEach(function (ancestor) {
-          return ancestor.count[LEAF_DESCENDANTS]++;
-        });
-
-        if (!isRootNode) {
-          parentNode.count[ALL_CHILDREN] += 1;
-          if (isLeaf) parentNode.count[LEAF_CHILDREN] += 1;
-          if (isDisabled) parentNode.hasDisabledDescendants = true;
-        }
-
-        if (prevNodeMap && prevNodeMap[id]) {
-          var prev = prevNodeMap[id];
-          normalized.isMatched = prev.isMatched;
-          normalized.showAllChildrenOnSearch = prev.showAllChildrenOnSearch;
-          normalized.isHighlighted = prev.isHighlighted;
-
-          if (prev.isBranch && normalized.isBranch) {
-            normalized.isExpanded = prev.isExpanded;
-            normalized.isExpandedOnSearch = prev.isExpandedOnSearch;
-
-            if (prev.childrenStates.isLoaded && !normalized.childrenStates.isLoaded) {
-              normalized.isExpanded = false;
-            } else {
-              normalized.childrenStates = _objectSpread({}, prev.childrenStates);
-            }
-          }
-        }
-
-        return normalized;
-      });
-
-      if (this.branchNodesFirst) {
-        var branchNodes = normalizedOptions.filter(function (option) {
-          return option.isBranch;
-        });
-        var leafNodes = normalizedOptions.filter(function (option) {
-          return option.isLeaf;
-        });
-        normalizedOptions = branchNodes.concat(leafNodes);
-      }
-
-      return normalizedOptions;
-    },
-    loadRootOptions: function loadRootOptions() {
-      var _this17 = this;
-
-      this.callLoadOptionsProp({
-        action: LOAD_ROOT_OPTIONS,
-        isPending: function isPending() {
-          return _this17.rootOptionsStates.isLoading;
-        },
-        start: function start() {
-          _this17.rootOptionsStates.isLoading = true;
-          _this17.rootOptionsStates.loadingError = '';
-        },
-        succeed: function succeed() {
-          _this17.rootOptionsStates.isLoaded = true;
-
-          _this17.$nextTick(function () {
-            _this17.resetHighlightedOptionWhenNecessary(true);
-          });
-        },
-        fail: function fail(err) {
-          _this17.rootOptionsStates.loadingError = getErrorMessage(err);
-        },
-        end: function end() {
-          _this17.rootOptionsStates.isLoading = false;
-        }
-      });
-    },
-    loadChildrenOptions: function loadChildrenOptions(parentNode) {
-      var _this18 = this;
-
-      var id = parentNode.id,
-          raw = parentNode.raw;
-      this.callLoadOptionsProp({
-        action: LOAD_CHILDREN_OPTIONS,
-        args: {
-          parentNode: raw
-        },
-        isPending: function isPending() {
-          return _this18.getNode(id).childrenStates.isLoading;
-        },
-        start: function start() {
-          _this18.getNode(id).childrenStates.isLoading = true;
-          _this18.getNode(id).childrenStates.loadingError = '';
-        },
-        succeed: function succeed() {
-          _this18.getNode(id).childrenStates.isLoaded = true;
-        },
-        fail: function fail(err) {
-          _this18.getNode(id).childrenStates.loadingError = getErrorMessage(err);
-        },
-        end: function end() {
-          _this18.getNode(id).childrenStates.isLoading = false;
-        }
-      });
-    },
-    callLoadOptionsProp: function callLoadOptionsProp(_ref3) {
-      var action = _ref3.action,
-          args = _ref3.args,
-          isPending = _ref3.isPending,
-          start = _ref3.start,
-          succeed = _ref3.succeed,
-          fail = _ref3.fail,
-          end = _ref3.end;
-
-      if (!this.loadOptions || isPending()) {
-        return;
-      }
-
-      start();
-      var callback = once_default()(function (err, result) {
-        if (err) {
-          fail(err);
-        } else {
-          succeed(result);
-        }
-
-        end();
-      });
-      var result = this.loadOptions(_objectSpread({
-        id: this.getInstanceId(),
-        instanceId: this.getInstanceId(),
-        action: action
-      }, args, {
-        callback: callback
-      }));
-
-      if (external_is_promise_default()(result)) {
-        result.then(function () {
-          callback();
-        }, function (err) {
-          callback(err);
-        }).catch(function (err) {
-          console.error(err);
-        });
-      }
-    },
-    checkDuplication: function checkDuplication(node) {
-      var _this19 = this;
-
-      warning_warning(function () {
-        return !(node.id in _this19.forest.nodeMap && !_this19.forest.nodeMap[node.id].isFallbackNode);
-      }, function () {
-        return "Detected duplicate presence of node id ".concat(JSON.stringify(node.id), ". ") + "Their labels are \"".concat(_this19.forest.nodeMap[node.id].label, "\" and \"").concat(node.label, "\" respectively.");
-      });
-    },
-    verifyNodeShape: function verifyNodeShape(node) {
-      warning_warning(function () {
-        return !(node.children === undefined && node.isBranch === true);
-      }, function () {
-        return 'Are you meant to declare an unloaded branch node? ' + '`isBranch: true` is no longer supported, please use `children: null` instead.';
-      });
-    },
-    select: function select(node) {
-      if (this.disabled || node.isDisabled) {
-        return;
-      }
-
-      if (this.single) {
-        this.clear();
-      }
-
-      var nextState = this.multiple && !this.flat ? this.forest.checkedStateMap[node.id] === UNCHECKED : !this.isSelected(node);
-
-      if (nextState) {
-        this._selectNode(node);
-      } else {
-        this._deselectNode(node);
-      }
-
-      this.buildForestState();
-
-      if (nextState) {
-        this.$emit('select', node.raw, this.getInstanceId());
-      } else {
-        this.$emit('deselect', node.raw, this.getInstanceId());
-      }
-
-      if (this.localSearch.active && nextState && (this.single || this.clearOnSelect)) {
-        this.resetSearchQuery();
-      }
-
-      if (this.single && this.closeOnSelect) {
-        this.closeMenu();
-
-        if (this.searchable) {
-          this._blurOnSelect = true;
-        }
-      }
-    },
-    clear: function clear() {
-      var _this20 = this;
-
-      if (this.hasValue) {
-        if (this.single || this.allowClearingDisabled) {
-          this.forest.selectedNodeIds = [];
-        } else {
-            this.forest.selectedNodeIds = this.forest.selectedNodeIds.filter(function (nodeId) {
-              return _this20.getNode(nodeId).isDisabled;
-            });
-          }
-
-        this.buildForestState();
-      }
-    },
-    _selectNode: function _selectNode(node) {
-      var _this21 = this;
-
-      if (this.single || this.disableBranchNodes) {
-        return this.addValue(node);
-      }
-
-      if (this.flat) {
-        this.addValue(node);
-
-        if (this.autoSelectAncestors) {
-          node.ancestors.forEach(function (ancestor) {
-            if (!_this21.isSelected(ancestor) && !ancestor.isDisabled) _this21.addValue(ancestor);
-          });
-        } else if (this.autoSelectDescendants) {
-          this.traverseDescendantsBFS(node, function (descendant) {
-            if (!_this21.isSelected(descendant) && !descendant.isDisabled) _this21.addValue(descendant);
-          });
-        }
-
-        return;
-      }
-
-      var isFullyChecked = node.isLeaf || !node.hasDisabledDescendants || this.allowSelectingDisabledDescendants;
-
-      if (isFullyChecked) {
-        this.addValue(node);
-      }
-
-      if (node.isBranch) {
-        this.traverseDescendantsBFS(node, function (descendant) {
-          if (!descendant.isDisabled || _this21.allowSelectingDisabledDescendants) {
-            _this21.addValue(descendant);
-          }
-        });
-      }
-
-      if (isFullyChecked) {
-        var curr = node;
-
-        while ((curr = curr.parentNode) !== NO_PARENT_NODE) {
-          if (curr.children.every(this.isSelected)) this.addValue(curr);else break;
-        }
-      }
-    },
-    _deselectNode: function _deselectNode(node) {
-      var _this22 = this;
-
-      if (this.disableBranchNodes) {
-        return this.removeValue(node);
-      }
-
-      if (this.flat) {
-        this.removeValue(node);
-
-        if (this.autoDeselectAncestors) {
-          node.ancestors.forEach(function (ancestor) {
-            if (_this22.isSelected(ancestor) && !ancestor.isDisabled) _this22.removeValue(ancestor);
-          });
-        } else if (this.autoDeselectDescendants) {
-          this.traverseDescendantsBFS(node, function (descendant) {
-            if (_this22.isSelected(descendant) && !descendant.isDisabled) _this22.removeValue(descendant);
-          });
-        }
-
-        return;
-      }
-
-      var hasUncheckedSomeDescendants = false;
-
-      if (node.isBranch) {
-        this.traverseDescendantsDFS(node, function (descendant) {
-          if (!descendant.isDisabled || _this22.allowSelectingDisabledDescendants) {
-            _this22.removeValue(descendant);
-
-            hasUncheckedSomeDescendants = true;
-          }
-        });
-      }
-
-      if (node.isLeaf || hasUncheckedSomeDescendants || node.children.length === 0) {
-        this.removeValue(node);
-        var curr = node;
-
-        while ((curr = curr.parentNode) !== NO_PARENT_NODE) {
-          if (this.isSelected(curr)) this.removeValue(curr);else break;
-        }
-      }
-    },
-    addValue: function addValue(node) {
-      this.forest.selectedNodeIds.push(node.id);
-      this.forest.selectedNodeMap[node.id] = true;
-    },
-    removeValue: function removeValue(node) {
-      removeFromArray(this.forest.selectedNodeIds, node.id);
-      delete this.forest.selectedNodeMap[node.id];
-    },
-    removeLastValue: function removeLastValue() {
-      if (!this.hasValue) return;
-      if (this.single) return this.clear();
-      var lastValue = last_default()(this.internalValue);
-      var lastSelectedNode = this.getNode(lastValue);
-      this.select(lastSelectedNode);
-    },
-    saveMenuScrollPosition: function saveMenuScrollPosition() {
-      var $menu = this.getMenu();
-      if ($menu) this.menu.lastScrollPosition = $menu.scrollTop;
-    },
-    restoreMenuScrollPosition: function restoreMenuScrollPosition() {
-      var $menu = this.getMenu();
-      if ($menu) $menu.scrollTop = this.menu.lastScrollPosition;
-    }
-  },
-  created: function created() {
-    this.verifyProps();
-    this.resetFlags();
-  },
-  mounted: function mounted() {
-    if (this.autoFocus || this.autofocus) this.focusInput();
-    if (!this.options && !this.async && this.autoLoadRootOptions) this.loadRootOptions();
-    if (this.alwaysOpen) this.openMenu();
-    if (this.async && this.defaultOptions) this.handleRemoteSearch();
-  },
-  destroyed: function destroyed() {
-    this.toggleClickOutsideEvent(false);
-  }
-});
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HiddenFields.vue?vue&type=script&lang=js&
-
-
-function stringifyValue(value) {
-  if (typeof value === 'string') return value;
-  if (value != null && !isNaN_isNaN(value)) return JSON.stringify(value);
-  return '';
-}
-
-/* harmony default export */ var HiddenFieldsvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--hidden-fields',
-  inject: ['instance'],
-  functional: true,
-  render: function render(_, context) {
-    var h = arguments[0];
-    var instance = context.injections.instance;
-    if (!instance.name || instance.disabled || !instance.hasValue) return null;
-    var stringifiedValues = instance.internalValue.map(stringifyValue);
-    if (instance.multiple && instance.joinValues) stringifiedValues = [stringifiedValues.join(instance.delimiter)];
-    return stringifiedValues.map(function (stringifiedValue, i) {
-      return h("input", {
-        attrs: {
-          type: "hidden",
-          name: instance.name
-        },
-        domProps: {
-          "value": stringifiedValue
-        },
-        key: 'hidden-field-' + i
-      });
-    });
-  }
-});
-// CONCATENATED MODULE: ./src/components/HiddenFields.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_HiddenFieldsvue_type_script_lang_js_ = (HiddenFieldsvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
-/* globals __VUE_SSR_CONTEXT__ */
-
-// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
-// This module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle.
-
-function normalizeComponent (
-  scriptExports,
-  render,
-  staticRenderFns,
-  functionalTemplate,
-  injectStyles,
-  scopeId,
-  moduleIdentifier, /* server only */
-  shadowMode /* vue-cli only */
-) {
-  // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
-
-  // render functions
-  if (render) {
-    options.render = render
-    options.staticRenderFns = staticRenderFns
-    options._compiled = true
-  }
-
-  // functional template
-  if (functionalTemplate) {
-    options.functional = true
-  }
-
-  // scopedId
-  if (scopeId) {
-    options._scopeId = 'data-v-' + scopeId
-  }
-
-  var hook
-  if (moduleIdentifier) { // server build
-    hook = function (context) {
-      // 2.3 injection
-      context =
-        context || // cached call
-        (this.$vnode && this.$vnode.ssrContext) || // stateful
-        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
-      // 2.2 with runInNewContext: true
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__
-      }
-      // inject component styles
-      if (injectStyles) {
-        injectStyles.call(this, context)
-      }
-      // register component module identifier for async chunk inferrence
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier)
-      }
-    }
-    // used by ssr in case component is cached and beforeCreate
-    // never gets called
-    options._ssrRegister = hook
-  } else if (injectStyles) {
-    hook = shadowMode
-      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
-      : injectStyles
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // for template-only hot-reload because in that case the render fn doesn't
-      // go through the normalizer
-      options._injectStyles = hook
-      // register for functioal component in vue file
-      var originalRender = options.render
-      options.render = function renderWithStyleInjection (h, context) {
-        hook.call(context)
-        return originalRender(h, context)
-      }
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate
-      options.beforeCreate = existing
-        ? [].concat(existing, hook)
-        : [hook]
-    }
-  }
-
-  return {
-    exports: scriptExports,
-    options: options
-  }
-}
-
-// CONCATENATED MODULE: ./src/components/HiddenFields.vue
-var HiddenFields_render, staticRenderFns
-
-
-
-
-/* normalize component */
-
-var component = normalizeComponent(
-  components_HiddenFieldsvue_type_script_lang_js_,
-  HiddenFields_render,
-  staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var HiddenFields = (component.exports);
-// EXTERNAL MODULE: external "babel-helper-vue-jsx-merge-props"
-var external_babel_helper_vue_jsx_merge_props_ = __webpack_require__(13);
-var external_babel_helper_vue_jsx_merge_props_default = /*#__PURE__*/__webpack_require__.n(external_babel_helper_vue_jsx_merge_props_);
-
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Input.vue?vue&type=script&lang=js&
-
-
-
-var keysThatRequireMenuBeingOpen = [KEY_CODES.ENTER, KEY_CODES.END, KEY_CODES.HOME, KEY_CODES.ARROW_LEFT, KEY_CODES.ARROW_UP, KEY_CODES.ARROW_RIGHT, KEY_CODES.ARROW_DOWN];
-/* harmony default export */ var Inputvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--input',
-  inject: ['instance'],
-  data: function data() {
-    return {
-      inputWidth: MIN_INPUT_WIDTH,
-      value: ''
-    };
-  },
-  computed: {
-    needAutoSize: function needAutoSize() {
-      var instance = this.instance;
-      return instance.searchable && !instance.disabled && instance.multiple;
-    },
-    inputStyle: function inputStyle() {
-      return {
-        width: this.needAutoSize ? "".concat(this.inputWidth, "px") : null
-      };
-    }
-  },
-  watch: {
-    'instance.trigger.searchQuery': function instanceTriggerSearchQuery(newValue) {
-      this.value = newValue;
-    },
-    value: function value() {
-      if (this.needAutoSize) this.$nextTick(this.updateInputWidth);
-    }
-  },
-  created: function created() {
-    this.debouncedCallback = debounce_default()(this.updateSearchQuery, INPUT_DEBOUNCE_DELAY, {
-      leading: true,
-      trailing: true
-    });
-  },
-  methods: {
-    clear: function clear() {
-      this.onInput({
-        target: {
-          value: ''
-        }
-      });
-    },
-    focus: function focus() {
-      var instance = this.instance;
-
-      if (!instance.disabled) {
-        this.$refs.input && this.$refs.input.focus();
-      }
-    },
-    blur: function blur() {
-      this.$refs.input && this.$refs.input.blur();
-    },
-    onFocus: function onFocus() {
-      var instance = this.instance;
-      instance.trigger.isFocused = true;
-      if (instance.openOnFocus) instance.openMenu();
-    },
-    onBlur: function onBlur() {
-      var instance = this.instance;
-      var menu = instance.getMenu();
-
-      if (menu && document.activeElement === menu) {
-        return this.focus();
-      }
-
-      instance.trigger.isFocused = false;
-      instance.closeMenu();
-    },
-    onInput: function onInput(evt) {
-      var value = evt.target.value;
-      this.value = value;
-
-      if (value) {
-        this.debouncedCallback();
-      } else {
-        this.debouncedCallback.cancel();
-        this.updateSearchQuery();
-      }
-    },
-    onKeyDown: function onKeyDown(evt) {
-      var instance = this.instance;
-      var key = 'which' in evt ? evt.which : evt.keyCode;
-      if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey) return;
-
-      if (!instance.menu.isOpen && includes(keysThatRequireMenuBeingOpen, key)) {
-        evt.preventDefault();
-        return instance.openMenu();
-      }
-
-      switch (key) {
-        case KEY_CODES.BACKSPACE:
-          {
-            if (instance.backspaceRemoves && !this.value.length) {
-              instance.removeLastValue();
-            }
-
-            break;
-          }
-
-        case KEY_CODES.ENTER:
-          {
-            evt.preventDefault();
-            if (instance.menu.current === null) return;
-            var current = instance.getNode(instance.menu.current);
-            if (current.isBranch && instance.disableBranchNodes) return;
-            instance.select(current);
-            break;
-          }
-
-        case KEY_CODES.ESCAPE:
-          {
-            if (this.value.length) {
-              this.clear();
-            } else if (instance.menu.isOpen) {
-              instance.closeMenu();
-            }
-
-            break;
-          }
-
-        case KEY_CODES.END:
-          {
-            evt.preventDefault();
-            instance.highlightLastOption();
-            break;
-          }
-
-        case KEY_CODES.HOME:
-          {
-            evt.preventDefault();
-            instance.highlightFirstOption();
-            break;
-          }
-
-        case KEY_CODES.ARROW_LEFT:
-          {
-            var _current = instance.getNode(instance.menu.current);
-
-            if (_current.isBranch && instance.shouldExpand(_current)) {
-              evt.preventDefault();
-              instance.toggleExpanded(_current);
-            } else if (!_current.isRootNode && (_current.isLeaf || _current.isBranch && !instance.shouldExpand(_current))) {
-              evt.preventDefault();
-              instance.setCurrentHighlightedOption(_current.parentNode);
-            }
-
-            break;
-          }
-
-        case KEY_CODES.ARROW_UP:
-          {
-            evt.preventDefault();
-            instance.highlightPrevOption();
-            break;
-          }
-
-        case KEY_CODES.ARROW_RIGHT:
-          {
-            var _current2 = instance.getNode(instance.menu.current);
-
-            if (_current2.isBranch && !instance.shouldExpand(_current2)) {
-              evt.preventDefault();
-              instance.toggleExpanded(_current2);
-            }
-
-            break;
-          }
-
-        case KEY_CODES.ARROW_DOWN:
-          {
-            evt.preventDefault();
-            instance.highlightNextOption();
-            break;
-          }
-
-        case KEY_CODES.DELETE:
-          {
-            if (instance.deleteRemoves && !this.value.length) {
-              instance.removeLastValue();
-            }
-
-            break;
-          }
-
-        default:
-          {
-            instance.openMenu();
-          }
-      }
-    },
-    onMouseDown: function onMouseDown(evt) {
-      if (this.value.length) {
-        evt.stopPropagation();
-      }
-    },
-    renderInputContainer: function renderInputContainer() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      var props = {};
-      var children = [];
-
-      if (instance.searchable && !instance.disabled) {
-        children.push(this.renderInput());
-        if (this.needAutoSize) children.push(this.renderSizer());
-      }
-
-      if (!instance.searchable) {
-        deepExtend(props, {
-          on: {
-            focus: this.onFocus,
-            blur: this.onBlur,
-            keydown: this.onKeyDown
-          },
-          ref: 'input'
-        });
-      }
-
-      if (!instance.searchable && !instance.disabled) {
-        deepExtend(props, {
-          attrs: {
-            tabIndex: instance.tabIndex
-          }
-        });
-      }
-
-      return h("div", external_babel_helper_vue_jsx_merge_props_default()([{
-        "class": "vue-treeselect__input-container"
-      }, props]), [children]);
-    },
-    renderInput: function renderInput() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return h("input", {
-        ref: "input",
-        "class": "vue-treeselect__input",
-        attrs: {
-          type: "text",
-          autocomplete: "off",
-          tabIndex: instance.tabIndex,
-          required: instance.required && !instance.hasValue
-        },
-        domProps: {
-          "value": this.value
-        },
-        style: this.inputStyle,
-        on: {
-          "focus": this.onFocus,
-          "input": this.onInput,
-          "blur": this.onBlur,
-          "keydown": this.onKeyDown,
-          "mousedown": this.onMouseDown
-        }
-      });
-    },
-    renderSizer: function renderSizer() {
-      var h = this.$createElement;
-      return h("div", {
-        ref: "sizer",
-        "class": "vue-treeselect__sizer"
-      }, [this.value]);
-    },
-    updateInputWidth: function updateInputWidth() {
-      this.inputWidth = Math.max(MIN_INPUT_WIDTH, this.$refs.sizer.scrollWidth + 15);
-    },
-    updateSearchQuery: function updateSearchQuery() {
-      var instance = this.instance;
-      instance.trigger.searchQuery = this.value;
-    }
-  },
-  render: function render() {
-    return this.renderInputContainer();
-  }
-});
-// CONCATENATED MODULE: ./src/components/Input.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Inputvue_type_script_lang_js_ = (Inputvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/Input.vue
-var Input_render, Input_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var Input_component = normalizeComponent(
-  components_Inputvue_type_script_lang_js_,
-  Input_render,
-  Input_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Input = (Input_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Placeholder.vue?vue&type=script&lang=js&
-/* harmony default export */ var Placeholdervue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--placeholder',
-  inject: ['instance'],
-  render: function render() {
-    var h = arguments[0];
-    var instance = this.instance;
-    var placeholderClass = {
-      'vue-treeselect__placeholder': true,
-      'vue-treeselect-helper-zoom-effect-off': true,
-      'vue-treeselect-helper-hide': instance.hasValue || instance.trigger.searchQuery
-    };
-    return h("div", {
-      "class": placeholderClass
-    }, [instance.placeholder]);
-  }
-});
-// CONCATENATED MODULE: ./src/components/Placeholder.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Placeholdervue_type_script_lang_js_ = (Placeholdervue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/Placeholder.vue
-var Placeholder_render, Placeholder_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var Placeholder_component = normalizeComponent(
-  components_Placeholdervue_type_script_lang_js_,
-  Placeholder_render,
-  Placeholder_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Placeholder = (Placeholder_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SingleValue.vue?vue&type=script&lang=js&
-
-
-/* harmony default export */ var SingleValuevue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--single-value',
-  inject: ['instance'],
-  methods: {
-    renderSingleValueLabel: function renderSingleValueLabel() {
-      var instance = this.instance;
-      var node = instance.selectedNodes[0];
-      var customValueLabelRenderer = instance.$scopedSlots['value-label'];
-      return customValueLabelRenderer ? customValueLabelRenderer({
-        node: node
-      }) : node.label;
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    var instance = this.instance,
-        renderValueContainer = this.$parent.renderValueContainer;
-    var shouldShowValue = instance.hasValue && !instance.trigger.searchQuery;
-    return renderValueContainer([shouldShowValue && h("div", {
-      "class": "vue-treeselect__single-value"
-    }, [this.renderSingleValueLabel()]), h(Placeholder), h(Input, {
-      ref: "input"
-    })]);
-  }
-});
-// CONCATENATED MODULE: ./src/components/SingleValue.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_SingleValuevue_type_script_lang_js_ = (SingleValuevue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/SingleValue.vue
-var SingleValue_render, SingleValue_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var SingleValue_component = normalizeComponent(
-  components_SingleValuevue_type_script_lang_js_,
-  SingleValue_render,
-  SingleValue_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var SingleValue = (SingleValue_component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/icons/Delete.vue?vue&type=template&id=12b4a02e&
-var Deletevue_type_template_id_12b4a02e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 348.333 348.333"}},[_c('path',{attrs:{"d":"M336.559 68.611L231.016 174.165l105.543 105.549c15.699 15.705 15.699 41.145 0 56.85-7.844 7.844-18.128 11.769-28.407 11.769-10.296 0-20.581-3.919-28.419-11.769L174.167 231.003 68.609 336.563c-7.843 7.844-18.128 11.769-28.416 11.769-10.285 0-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139 0-56.85l105.54-105.549L11.774 68.611c-15.699-15.699-15.699-41.145 0-56.844 15.696-15.687 41.127-15.687 56.829 0l105.563 105.554L279.721 11.767c15.705-15.687 41.139-15.687 56.832 0 15.705 15.699 15.705 41.145.006 56.844z"}})])}
-var Deletevue_type_template_id_12b4a02e_staticRenderFns = []
-
-
-// CONCATENATED MODULE: ./src/components/icons/Delete.vue?vue&type=template&id=12b4a02e&
-
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/icons/Delete.vue?vue&type=script&lang=js&
-/* harmony default export */ var Deletevue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--x'
-});
-// CONCATENATED MODULE: ./src/components/icons/Delete.vue?vue&type=script&lang=js&
- /* harmony default export */ var icons_Deletevue_type_script_lang_js_ = (Deletevue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/icons/Delete.vue
-
-
-
-
-
-/* normalize component */
-
-var Delete_component = normalizeComponent(
-  icons_Deletevue_type_script_lang_js_,
-  Deletevue_type_template_id_12b4a02e_render,
-  Deletevue_type_template_id_12b4a02e_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Delete = (Delete_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MultiValueItem.vue?vue&type=script&lang=js&
-
-
-/* harmony default export */ var MultiValueItemvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--multi-value-item',
-  inject: ['instance'],
-  props: {
-    node: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    handleMouseDown: onLeftClick(function handleMouseDown() {
-      var instance = this.instance,
-          node = this.node;
-      instance.select(node);
-    })
-  },
-  /*
-  render: function render() {
-    var h = arguments[0];
-    var instance = this.instance,
-        node = this.node;
-    var itemClass = {
-      'vue-treeselect__multi-value-item': true,
-      'vue-treeselect__multi-value-item-disabled': node.isDisabled,
-      'vue-treeselect__multi-value-item-new': node.isNew
-    };
-    var customValueLabelRenderer = instance.$scopedSlots['value-label'];
-    var labelRenderer = customValueLabelRenderer ? customValueLabelRenderer({
-      node: node
-    }) : node.label;
-    return h("div", {
-      "class": "vue-treeselect__multi-value-item-container"
-    }, [h("div", {
-      "class": itemClass,
-      on: {
-        "mousedown": this.handleMouseDown
-      }
-    }, [h("span", {
-      "class": "vue-treeselect__multi-value-label"
-    }, [labelRenderer]), h("span", {
-      "class": "vue-treeselect__icon vue-treeselect__value-remove"
-    }, [h(Delete)])])]);
-  }
-  */
-  render: function render() {
-    var h = arguments[0];
-    var instance = this.instance,
-        node = this.node;
-    var itemClass = {
-      'vue-treeselect__multi-value-item': true,
-      'vue-treeselect__multi-value-item-disabled': node.isDisabled,
-      'vue-treeselect__multi-value-item-new': node.isNew
-    };
-    var customValueLabelRenderer = instance.$scopedSlots['value-label'];
-    var labelRenderer = customValueLabelRenderer ? customValueLabelRenderer({
-      node: node
-    }) : node.label;
-    return h("div", {
-      "class": "vue-treeselect__multi-value-item-container"
-    }, [h("div", {
-      "class": itemClass
-    }, [h("a", {
-      "class": "vue-treeselect__multi-value-label",
-    }, [labelRenderer]), h("span", {
-      "class": "vue-treeselect__icon vue-treeselect__value-remove",
-      on: {
-        "mousedown": this.handleMouseDown
-      }
-    }, [h(Delete)])])]);
-  }
-});
-// CONCATENATED MODULE: ./src/components/MultiValueItem.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_MultiValueItemvue_type_script_lang_js_ = (MultiValueItemvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/MultiValueItem.vue
-var MultiValueItem_render, MultiValueItem_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var MultiValueItem_component = normalizeComponent(
-  components_MultiValueItemvue_type_script_lang_js_,
-  MultiValueItem_render,
-  MultiValueItem_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var MultiValueItem = (MultiValueItem_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MultiValue.vue?vue&type=script&lang=js&
-
-
-
-
-/* harmony default export */ var MultiValuevue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--multi-value',
-  inject: ['instance'],
-  methods: {
-    renderMultiValueItems: function renderMultiValueItems() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return instance.internalValue.slice(0, instance.limit).map(instance.getNode).map(function (node) {
-        return h(MultiValueItem, {
-          key: "multi-value-item-".concat(node.id),
-          attrs: {
-            node: node
-          }
-        });
-      });
-    },
-    renderExceedLimitTip: function renderExceedLimitTip() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      var count = instance.internalValue.length - instance.limit;
-      if (count <= 0) return null;
-      return h("div", {
-        "class": "vue-treeselect__limit-tip vue-treeselect-helper-zoom-effect-off",
-        key: "exceed-limit-tip"
-      }, [h("span", {
-        "class": "vue-treeselect__limit-tip-text"
-      }, [instance.limitText(count)])]);
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    var renderValueContainer = this.$parent.renderValueContainer;
-    var transitionGroupProps = {
-      props: {
-        tag: 'div',
-        name: 'vue-treeselect__multi-value-item--transition',
-        appear: true
-      }
-    };
-    return renderValueContainer(h("transition-group", external_babel_helper_vue_jsx_merge_props_default()([{
-      "class": "vue-treeselect__multi-value"
-    }, transitionGroupProps]), [this.renderMultiValueItems(), this.renderExceedLimitTip(), h(Placeholder, {
-      key: "placeholder"
-    }), h(Input, {
-      ref: "input",
-      key: "input"
-    })]));
-  }
-});
-// CONCATENATED MODULE: ./src/components/MultiValue.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_MultiValuevue_type_script_lang_js_ = (MultiValuevue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/MultiValue.vue
-var MultiValue_render, MultiValue_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var MultiValue_component = normalizeComponent(
-  components_MultiValuevue_type_script_lang_js_,
-  MultiValue_render,
-  MultiValue_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var MultiValue = (MultiValue_component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/icons/Arrow.vue?vue&type=template&id=5d5151cb&
-var Arrowvue_type_template_id_5d5151cb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 292.362 292.362"}},[_c('path',{attrs:{"d":"M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z"}})])}
-var Arrowvue_type_template_id_5d5151cb_staticRenderFns = []
-
-
-// CONCATENATED MODULE: ./src/components/icons/Arrow.vue?vue&type=template&id=5d5151cb&
-
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/icons/Arrow.vue?vue&type=script&lang=js&
-/* harmony default export */ var Arrowvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--arrow'
-});
-// CONCATENATED MODULE: ./src/components/icons/Arrow.vue?vue&type=script&lang=js&
- /* harmony default export */ var icons_Arrowvue_type_script_lang_js_ = (Arrowvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/icons/Arrow.vue
-
-
-
-
-
-/* normalize component */
-
-var Arrow_component = normalizeComponent(
-  icons_Arrowvue_type_script_lang_js_,
-  Arrowvue_type_template_id_5d5151cb_render,
-  Arrowvue_type_template_id_5d5151cb_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Arrow = (Arrow_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Control.vue?vue&type=script&lang=js&
-
-
-
-
-
-/* harmony default export */ var Controlvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--control',
-  inject: ['instance'],
-  computed: {
-    shouldShowX: function shouldShowX() {
-      var instance = this.instance;
-      return instance.clearable && !instance.disabled && instance.hasValue && (this.hasUndisabledValue || instance.allowClearingDisabled);
-    },
-    shouldShowArrow: function shouldShowArrow() {
-      var instance = this.instance;
-      if (!instance.alwaysOpen) return true;
-      return !instance.menu.isOpen;
-    },
-    hasUndisabledValue: function hasUndisabledValue() {
-      var instance = this.instance;
-      return instance.hasValue && instance.internalValue.some(function (id) {
-        return !instance.getNode(id).isDisabled;
-      });
-    }
-  },
-  methods: {
-    renderX: function renderX() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      var title = instance.multiple ? instance.clearAllText : instance.clearValueText;
-      if (!this.shouldShowX) return null;
-      return h("div", {
-        "class": "vue-treeselect__x-container",
-        attrs: {
-          title: title
-        },
-        on: {
-          "mousedown": this.handleMouseDownOnX
-        }
-      }, [h(Delete, {
-        "class": "vue-treeselect__x"
-      })]);
-    },
-    renderArrow: function renderArrow() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      var arrowClass = {
-        'vue-treeselect__control-arrow': true,
-        'vue-treeselect__control-arrow--rotated': instance.menu.isOpen
-      };
-      if (!this.shouldShowArrow) return null;
-      return h("div", {
-        "class": "vue-treeselect__control-arrow-container",
-        on: {
-          "mousedown": this.handleMouseDownOnArrow
-        }
-      }, [h(Arrow, {
-        "class": arrowClass
-      })]);
-    },
-    handleMouseDownOnX: onLeftClick(function handleMouseDownOnX(evt) {
-      evt.stopPropagation();
-      evt.preventDefault();
-      var instance = this.instance;
-      var result = instance.beforeClearAll();
-
-      var handler = function handler(shouldClear) {
-        if (shouldClear) instance.clear();
-      };
-
-      if (external_is_promise_default()(result)) {
-        result.then(handler);
-      } else {
-        setTimeout(function () {
-          return handler(result);
-        }, 0);
-      }
-    }),
-    handleMouseDownOnArrow: onLeftClick(function handleMouseDownOnArrow(evt) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      var instance = this.instance;
-      instance.focusInput();
-      instance.toggleMenu();
-    }),
-    renderValueContainer: function renderValueContainer(children) {
-      var h = this.$createElement;
-      return h("div", {
-        "class": "vue-treeselect__value-container"
-      }, [children]);
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    var instance = this.instance;
-    var ValueContainer = instance.single ? SingleValue : MultiValue;
-    return h("div", {
-      "class": "vue-treeselect__control",
-      on: {
-        "mousedown": instance.handleMouseDown
-      }
-    }, [h(ValueContainer, {
-      ref: "value-container"
-    }), this.renderX(), this.renderArrow()]);
-  }
-});
-// CONCATENATED MODULE: ./src/components/Control.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Controlvue_type_script_lang_js_ = (Controlvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/Control.vue
-var Control_render, Control_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var Control_component = normalizeComponent(
-  components_Controlvue_type_script_lang_js_,
-  Control_render,
-  Control_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Control = (Control_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Tip.vue?vue&type=script&lang=js&
-/* harmony default export */ var Tipvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--tip',
-  functional: true,
-  props: {
-    type: {
-      type: String,
-      required: true
-    },
-    icon: {
-      type: String,
-      required: true
-    }
-  },
-  render: function render(_, context) {
-    var h = arguments[0];
-    var props = context.props,
-        children = context.children;
-    return h("div", {
-      "class": "vue-treeselect__tip vue-treeselect__".concat(props.type, "-tip")
-    }, [h("div", {
-      "class": "vue-treeselect__icon-container"
-    }, [h("span", {
-      "class": "vue-treeselect__icon-".concat(props.icon)
-    })]), h("span", {
-      "class": "vue-treeselect__tip-text vue-treeselect__".concat(props.type, "-tip-text")
-    }, [children])]);
-  }
-});
-// CONCATENATED MODULE: ./src/components/Tip.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Tipvue_type_script_lang_js_ = (Tipvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/Tip.vue
-var Tip_render, Tip_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var Tip_component = normalizeComponent(
-  components_Tipvue_type_script_lang_js_,
-  Tip_render,
-  Tip_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Tip = (Tip_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Option.vue?vue&type=script&lang=js&
-
-
-
-
-
-var arrowPlaceholder, checkMark, minusMark;
-var Option = {
-  name: 'vue-treeselect--option',
-  inject: ['instance'],
-  props: {
-    node: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    shouldExpand: function shouldExpand() {
-      var instance = this.instance,
-          node = this.node;
-      return node.isBranch && instance.shouldExpand(node);
-    },
-    shouldShow: function shouldShow() {
-      var instance = this.instance,
-          node = this.node;
-      return instance.shouldShowOptionInMenu(node);
-    }
-  },
-  methods: {
-    renderOption: function renderOption() {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      var optionClass = {
-        'vue-treeselect__option': true,
-        'vue-treeselect__option--disabled': node.isDisabled,
-        'vue-treeselect__option--selected': instance.isSelected(node),
-        'vue-treeselect__option--highlight': node.isHighlighted,
-        'vue-treeselect__option--matched': instance.localSearch.active && node.isMatched,
-        'vue-treeselect__option--hide': !this.shouldShow
-      };
-      return h("div", {
-        "class": optionClass,
-        on: {
-          "mouseenter": this.handleMouseEnterOption
-        },
-        attrs: {
-          "data-id": node.id
-        }
-      }, [this.renderArrow(), this.renderLabelContainer([this.renderCheckboxContainer([this.renderCheckbox()]), this.renderLabel()])]);
-    },
-    renderSubOptionsList: function renderSubOptionsList() {
-      var h = this.$createElement;
-      if (!this.shouldExpand) return null;
-      return h("div", {
-        "class": "vue-treeselect__list"
-      }, [this.renderSubOptions(), this.renderNoChildrenTip(), this.renderLoadingChildrenTip(), this.renderLoadingChildrenErrorTip()]);
-    },
-    renderArrow: function renderArrow() {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      if (instance.shouldFlattenOptions && this.shouldShow) return null;
-
-      if (node.isBranch) {
-        var transitionProps = {
-          props: {
-            name: 'vue-treeselect__option-arrow--prepare',
-            appear: true
-          }
-        };
-        var arrowClass = {
-          'vue-treeselect__option-arrow': true,
-          'vue-treeselect__option-arrow--rotated': this.shouldExpand
-        };
-        return h("div", {
-          "class": "vue-treeselect__option-arrow-container",
-          on: {
-            "mousedown": this.handleMouseDownOnArrow
-          }
-        }, [h("transition", transitionProps, [h(Arrow, {
-          "class": arrowClass
-        })])]);
-      }
-
-      if (instance.hasBranchNodes) {
-        if (!arrowPlaceholder) arrowPlaceholder = h("div", {
-          "class": "vue-treeselect__option-arrow-placeholder"
-        }, ["\xA0"]);
-        return arrowPlaceholder;
-      }
-
-      return null;
-    },
-    /*
-    renderLabelContainer: function renderLabelContainer(children) {
-      var h = this.$createElement;
-      return h("div", {
-        "class": "vue-treeselect__label-container",
-        on: {
-          "mousedown": this.handleMouseDownOnLabelContainer
-        }
-      }, [children]);
-    },
-    renderCheckboxContainer: function renderCheckboxContainer(children) {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      if (instance.single) return null;
-      if (instance.disableBranchNodes && node.isBranch) return null;
-      return h("div", {
-        "class": "vue-treeselect__checkbox-container"
-      }, [children]);
-    },
-    */
-    renderLabelContainer: function renderLabelContainer(children) {
-      var h = this.$createElement;
-      return h("div", {
-        "class": "vue-treeselect__label-container"
-      }, [children]);
-    },
-
-    renderCheckboxContainer: function renderCheckboxContainer(children) {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      if (instance.single) return null;
-      if (instance.disableBranchNodes && node.isBranch) return null;
-      return h("div", {
-        "class": "vue-treeselect__checkbox-container",
-      on: {
-        "mousedown": this.handleMouseDownOnLabelContainer
-      }
-      }, [children]);
-    },
-
-
-    renderCheckbox: function renderCheckbox() {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      var checkedState = instance.forest.checkedStateMap[node.id];
-      var checkboxClass = {
-        'vue-treeselect__checkbox': true,
-        'vue-treeselect__checkbox--checked': checkedState === CHECKED,
-        'vue-treeselect__checkbox--indeterminate': checkedState === INDETERMINATE,
-        'vue-treeselect__checkbox--unchecked': checkedState === UNCHECKED,
-        'vue-treeselect__checkbox--disabled': node.isDisabled
-      };
-      if (!checkMark) checkMark = h("span", {
-        "class": "vue-treeselect__check-mark"
-      });
-      if (!minusMark) minusMark = h("span", {
-        "class": "vue-treeselect__minus-mark"
-      });
-      return h("span", {
-        "class": checkboxClass
-      }, [checkMark, minusMark]);
-    },
-    renderLabel: function renderLabel() {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      var shouldShowCount = node.isBranch && (instance.localSearch.active ? instance.showCountOnSearchComputed : instance.showCount);
-      var count = shouldShowCount ? instance.localSearch.active ? instance.localSearch.countMap[node.id][instance.showCountOf] : node.count[instance.showCountOf] : NaN;
-      var labelClassName = 'vue-treeselect__label';
-      var countClassName = 'vue-treeselect__count';
-      var customLabelRenderer = instance.$scopedSlots['option-label'];
-      if (customLabelRenderer) return customLabelRenderer({
-        node: node,
-        shouldShowCount: shouldShowCount,
-        count: count,
-        labelClassName: labelClassName,
-        countClassName: countClassName
-      });
-      return h("label", {
-        "class": labelClassName
-      }, [node.label, shouldShowCount && h("span", {
-        "class": countClassName
-      }, ["(", count, ")"])]);
-    },
-    renderSubOptions: function renderSubOptions() {
-      var h = this.$createElement;
-      var node = this.node;
-      if (!node.childrenStates.isLoaded) return null;
-      return node.children.map(function (childNode) {
-        return h(Option, {
-          attrs: {
-            node: childNode
-          },
-          key: childNode.id
-        });
-      });
-    },
-    renderNoChildrenTip: function renderNoChildrenTip() {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      if (!node.childrenStates.isLoaded || node.children.length) return null;
-      return h(Tip, {
-        attrs: {
-          type: "no-children",
-          icon: "warning"
-        }
-      }, [instance.noChildrenText]);
-    },
-    renderLoadingChildrenTip: function renderLoadingChildrenTip() {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      if (!node.childrenStates.isLoading) return null;
-      return h(Tip, {
-        attrs: {
-          type: "loading",
-          icon: "loader"
-        }
-      }, [instance.loadingText]);
-    },
-    renderLoadingChildrenErrorTip: function renderLoadingChildrenErrorTip() {
-      var h = this.$createElement;
-      var instance = this.instance,
-          node = this.node;
-      if (!node.childrenStates.loadingError) return null;
-      return h(Tip, {
-        attrs: {
-          type: "error",
-          icon: "error"
-        }
-      }, [node.childrenStates.loadingError, h("a", {
-        "class": "vue-treeselect__retry",
-        attrs: {
-          title: instance.retryTitle
-        },
-        on: {
-          "mousedown": this.handleMouseDownOnRetry
-        }
-      }, [instance.retryText])]);
-    },
-    handleMouseEnterOption: function handleMouseEnterOption(evt) {
-      var instance = this.instance,
-          node = this.node;
-      if (evt.target !== evt.currentTarget) return;
-      instance.setCurrentHighlightedOption(node, false);
-    },
-    handleMouseDownOnArrow: onLeftClick(function handleMouseDownOnOptionArrow() {
-      var instance = this.instance,
-          node = this.node;
-      instance.toggleExpanded(node);
-    }),
-    handleMouseDownOnLabelContainer: onLeftClick(function handleMouseDownOnLabelContainer() {
-      var instance = this.instance,
-          node = this.node;
-
-      if (node.isBranch && instance.disableBranchNodes) {
-        instance.toggleExpanded(node);
-      } else {
-        instance.select(node);
-      }
-    }),
-    handleMouseDownOnRetry: onLeftClick(function handleMouseDownOnRetry() {
-      var instance = this.instance,
-          node = this.node;
-      instance.loadChildrenOptions(node);
-    })
-  },
-  render: function render() {
-    var h = arguments[0];
-    var node = this.node;
-    var indentLevel = this.instance.shouldFlattenOptions ? 0 : node.level;
-
-    var listItemClass = defineProperty_default()({
-      'vue-treeselect__list-item': true
-    }, "vue-treeselect__indent-level-".concat(indentLevel), true);
-
-    var transitionProps = {
-      props: {
-        name: 'vue-treeselect__list--transition'
-      }
-    };
-    return h("div", {
-      "class": listItemClass
-    }, [this.renderOption(), h("transition", transitionProps, [this.renderSubOptionsList()])]);
-  }
-};
-/* harmony default export */ var Optionvue_type_script_lang_js_ = (Option);
-// CONCATENATED MODULE: ./src/components/Option.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Optionvue_type_script_lang_js_ = (Optionvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/Option.vue
-var Option_render, Option_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var Option_component = normalizeComponent(
-  components_Optionvue_type_script_lang_js_,
-  Option_render,
-  Option_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var components_Option = (Option_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Menu.vue?vue&type=script&lang=js&
-
-
-
-
-var directionMap = {
-  top: 'top',
-  bottom: 'bottom',
-  above: 'top',
-  below: 'bottom'
-};
-/* harmony default export */ var Menuvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--menu',
-  inject: ['instance'],
-  computed: {
-    menuStyle: function menuStyle() {
-      var instance = this.instance;
-      return {
-        maxHeight: instance.maxHeight + 'px'
-      };
-    },
-    menuContainerStyle: function menuContainerStyle() {
-      var instance = this.instance;
-      return {
-        zIndex: instance.appendToBody ? null : instance.zIndex
-      };
-    }
-  },
-  watch: {
-    'instance.menu.isOpen': function instanceMenuIsOpen(newValue) {
-      if (newValue) {
-        this.$nextTick(this.onMenuOpen);
-      } else {
-        this.onMenuClose();
-      }
-    }
-  },
-  created: function created() {
-    this.menuSizeWatcher = null;
-    this.menuResizeAndScrollEventListeners = null;
-  },
-  mounted: function mounted() {
-    var instance = this.instance;
-    if (instance.menu.isOpen) this.$nextTick(this.onMenuOpen);
-  },
-  destroyed: function destroyed() {
-    this.onMenuClose();
-  },
-  methods: {
-    renderMenu: function renderMenu() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      if (!instance.menu.isOpen) return null;
-      return h("div", {
-        ref: "menu",
-        "class": "vue-treeselect__menu",
-        on: {
-          "mousedown": instance.handleMouseDown
-        },
-        style: this.menuStyle
-      }, [instance.async ? this.renderAsyncSearchMenuInner() : instance.localSearch.active ? this.renderLocalSearchMenuInner() : this.renderNormalMenuInner()]);
-    },
-    renderNormalMenuInner: function renderNormalMenuInner() {
-      var instance = this.instance;
-
-      if (instance.rootOptionsStates.isLoading) {
-        return this.renderLoadingOptionsTip();
-      } else if (instance.rootOptionsStates.loadingError) {
-        return this.renderLoadingRootOptionsErrorTip();
-      } else if (instance.rootOptionsStates.isLoaded && instance.forest.normalizedOptions.length === 0) {
-        return this.renderNoAvailableOptionsTip();
-      } else {
-        return this.renderOptionList();
-      }
-    },
-    renderLocalSearchMenuInner: function renderLocalSearchMenuInner() {
-      var instance = this.instance;
-
-      if (instance.rootOptionsStates.isLoading) {
-        return this.renderLoadingOptionsTip();
-      } else if (instance.rootOptionsStates.loadingError) {
-        return this.renderLoadingRootOptionsErrorTip();
-      } else if (instance.rootOptionsStates.isLoaded && instance.forest.normalizedOptions.length === 0) {
-        return this.renderNoAvailableOptionsTip();
-      } else if (instance.localSearch.noResults) {
-        return this.renderNoResultsTip();
-      } else {
-        return this.renderOptionList();
-      }
-    },
-    renderAsyncSearchMenuInner: function renderAsyncSearchMenuInner() {
-      var instance = this.instance;
-      var entry = instance.getRemoteSearchEntry();
-      var shouldShowSearchPromptTip = instance.trigger.searchQuery === '' && !instance.defaultOptions;
-      var shouldShowNoResultsTip = shouldShowSearchPromptTip ? false : entry.isLoaded && entry.options.length === 0;
-
-      if (shouldShowSearchPromptTip) {
-        return this.renderSearchPromptTip();
-      } else if (entry.isLoading) {
-        return this.renderLoadingOptionsTip();
-      } else if (entry.loadingError) {
-        return this.renderAsyncSearchLoadingErrorTip();
-      } else if (shouldShowNoResultsTip) {
-        return this.renderNoResultsTip();
-      } else {
-        return this.renderOptionList();
-      }
-    },
-    renderOptionList: function renderOptionList() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return h("div", {
-        "class": "vue-treeselect__list"
-      }, [instance.forest.normalizedOptions.map(function (rootNode) {
-        return h(components_Option, {
-          attrs: {
-            node: rootNode
-          },
-          key: rootNode.id
-        });
-      })]);
-    },
-    renderSearchPromptTip: function renderSearchPromptTip() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return h(Tip, {
-        attrs: {
-          type: "search-prompt",
-          icon: "warning"
-        }
-      }, [instance.searchPromptText]);
-    },
-    renderLoadingOptionsTip: function renderLoadingOptionsTip() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return h(Tip, {
-        attrs: {
-          type: "loading",
-          icon: "loader"
-        }
-      }, [instance.loadingText]);
-    },
-    renderLoadingRootOptionsErrorTip: function renderLoadingRootOptionsErrorTip() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return h(Tip, {
-        attrs: {
-          type: "error",
-          icon: "error"
-        }
-      }, [instance.rootOptionsStates.loadingError, h("a", {
-        "class": "vue-treeselect__retry",
-        on: {
-          "click": instance.loadRootOptions
-        },
-        attrs: {
-          title: instance.retryTitle
-        }
-      }, [instance.retryText])]);
-    },
-    renderAsyncSearchLoadingErrorTip: function renderAsyncSearchLoadingErrorTip() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      var entry = instance.getRemoteSearchEntry();
-      return h(Tip, {
-        attrs: {
-          type: "error",
-          icon: "error"
-        }
-      }, [entry.loadingError, h("a", {
-        "class": "vue-treeselect__retry",
-        on: {
-          "click": instance.handleRemoteSearch
-        },
-        attrs: {
-          title: instance.retryTitle
-        }
-      }, [instance.retryText])]);
-    },
-    renderNoAvailableOptionsTip: function renderNoAvailableOptionsTip() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return h(Tip, {
-        attrs: {
-          type: "no-options",
-          icon: "warning"
-        }
-      }, [instance.noOptionsText]);
-    },
-    renderNoResultsTip: function renderNoResultsTip() {
-      var h = this.$createElement;
-      var instance = this.instance;
-      return h(Tip, {
-        attrs: {
-          type: "no-results",
-          icon: "warning"
-        }
-      }, [instance.noResultsText]);
-    },
-    onMenuOpen: function onMenuOpen() {
-      this.adjustMenuOpenDirection();
-      this.setupMenuSizeWatcher();
-      this.setupMenuResizeAndScrollEventListeners();
-    },
-    onMenuClose: function onMenuClose() {
-      this.removeMenuSizeWatcher();
-      this.removeMenuResizeAndScrollEventListeners();
-    },
-    adjustMenuOpenDirection: function adjustMenuOpenDirection() {
-      var instance = this.instance;
-      if (!instance.menu.isOpen) return;
-      var $menu = instance.getMenu();
-      var $control = instance.getControl();
-      var menuRect = $menu.getBoundingClientRect();
-      var controlRect = $control.getBoundingClientRect();
-      var menuHeight = menuRect.height;
-      var viewportHeight = window.innerHeight;
-      var spaceAbove = controlRect.top;
-      var spaceBelow = window.innerHeight - controlRect.bottom;
-      var isControlInViewport = controlRect.top >= 0 && controlRect.top <= viewportHeight || controlRect.top < 0 && controlRect.bottom > 0;
-      var hasEnoughSpaceBelow = spaceBelow > menuHeight + MENU_BUFFER;
-      var hasEnoughSpaceAbove = spaceAbove > menuHeight + MENU_BUFFER;
-
-      if (!isControlInViewport) {
-        instance.closeMenu();
-      } else if (instance.openDirection !== 'auto') {
-        instance.menu.placement = directionMap[instance.openDirection];
-      } else if (hasEnoughSpaceBelow || !hasEnoughSpaceAbove) {
-        instance.menu.placement = 'bottom';
-      } else {
-        instance.menu.placement = 'top';
-      }
-    },
-    setupMenuSizeWatcher: function setupMenuSizeWatcher() {
-      var instance = this.instance;
-      var $menu = instance.getMenu();
-      if (this.menuSizeWatcher) return;
-      this.menuSizeWatcher = {
-        remove: watchSize($menu, this.adjustMenuOpenDirection)
-      };
-    },
-    setupMenuResizeAndScrollEventListeners: function setupMenuResizeAndScrollEventListeners() {
-      var instance = this.instance;
-      var $control = instance.getControl();
-      if (this.menuResizeAndScrollEventListeners) return;
-      this.menuResizeAndScrollEventListeners = {
-        remove: setupResizeAndScrollEventListeners($control, this.adjustMenuOpenDirection)
-      };
-    },
-    removeMenuSizeWatcher: function removeMenuSizeWatcher() {
-      if (!this.menuSizeWatcher) return;
-      this.menuSizeWatcher.remove();
-      this.menuSizeWatcher = null;
-    },
-    removeMenuResizeAndScrollEventListeners: function removeMenuResizeAndScrollEventListeners() {
-      if (!this.menuResizeAndScrollEventListeners) return;
-      this.menuResizeAndScrollEventListeners.remove();
-      this.menuResizeAndScrollEventListeners = null;
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    return h("div", {
-      ref: "menu-container",
-      "class": "vue-treeselect__menu-container",
-      style: this.menuContainerStyle
-    }, [h("transition", {
-      attrs: {
-        name: "vue-treeselect__menu--transition"
-      }
-    }, [this.renderMenu()])]);
-  }
-});
-// CONCATENATED MODULE: ./src/components/Menu.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Menuvue_type_script_lang_js_ = (Menuvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/Menu.vue
-var Menu_render, Menu_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var Menu_component = normalizeComponent(
-  components_Menuvue_type_script_lang_js_,
-  Menu_render,
-  Menu_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Menu = (Menu_component.exports);
-// EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(14);
-var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
-
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MenuPortal.vue?vue&type=script&lang=js&
-
-
-function MenuPortalvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function MenuPortalvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { MenuPortalvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { defineProperty_default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { MenuPortalvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-
-
-
-var PortalTarget = {
-  name: 'vue-treeselect--portal-target',
-  inject: ['instance'],
-  watch: {
-    'instance.menu.isOpen': function instanceMenuIsOpen(newValue) {
-      if (newValue) {
-        this.setupHandlers();
-      } else {
-        this.removeHandlers();
-      }
-    },
-    'instance.menu.placement': function instanceMenuPlacement() {
-      this.updateMenuContainerOffset();
-    }
-  },
-  created: function created() {
-    this.controlResizeAndScrollEventListeners = null;
-    this.controlSizeWatcher = null;
-  },
-  mounted: function mounted() {
-    var instance = this.instance;
-    if (instance.menu.isOpen) this.setupHandlers();
-  },
-  methods: {
-    setupHandlers: function setupHandlers() {
-      this.updateWidth();
-      this.updateMenuContainerOffset();
-      this.setupControlResizeAndScrollEventListeners();
-      this.setupControlSizeWatcher();
-    },
-    removeHandlers: function removeHandlers() {
-      this.removeControlResizeAndScrollEventListeners();
-      this.removeControlSizeWatcher();
-    },
-    setupControlResizeAndScrollEventListeners: function setupControlResizeAndScrollEventListeners() {
-      var instance = this.instance;
-      var $control = instance.getControl();
-      if (this.controlResizeAndScrollEventListeners) return;
-      this.controlResizeAndScrollEventListeners = {
-        remove: setupResizeAndScrollEventListeners($control, this.updateMenuContainerOffset)
-      };
-    },
-    setupControlSizeWatcher: function setupControlSizeWatcher() {
-      var _this = this;
-
-      var instance = this.instance;
-      var $control = instance.getControl();
-      if (this.controlSizeWatcher) return;
-      this.controlSizeWatcher = {
-        remove: watchSize($control, function () {
-          _this.updateWidth();
-
-          _this.updateMenuContainerOffset();
-        })
-      };
-    },
-    removeControlResizeAndScrollEventListeners: function removeControlResizeAndScrollEventListeners() {
-      if (!this.controlResizeAndScrollEventListeners) return;
-      this.controlResizeAndScrollEventListeners.remove();
-      this.controlResizeAndScrollEventListeners = null;
-    },
-    removeControlSizeWatcher: function removeControlSizeWatcher() {
-      if (!this.controlSizeWatcher) return;
-      this.controlSizeWatcher.remove();
-      this.controlSizeWatcher = null;
-    },
-    updateWidth: function updateWidth() {
-      var instance = this.instance;
-      var $portalTarget = this.$el;
-      var $control = instance.getControl();
-      var controlRect = $control.getBoundingClientRect();
-      $portalTarget.style.width = controlRect.width + 'px';
-    },
-    updateMenuContainerOffset: function updateMenuContainerOffset() {
-      var instance = this.instance;
-      var $control = instance.getControl();
-      var $portalTarget = this.$el;
-      var controlRect = $control.getBoundingClientRect();
-      var portalTargetRect = $portalTarget.getBoundingClientRect();
-      var offsetY = instance.menu.placement === 'bottom' ? controlRect.height : 0;
-      var left = Math.round(controlRect.left - portalTargetRect.left) + 'px';
-      var top = Math.round(controlRect.top - portalTargetRect.top + offsetY) + 'px';
-      var menuContainerStyle = this.$refs.menu.$refs['menu-container'].style;
-      var transformVariations = ['transform', 'webkitTransform', 'MozTransform', 'msTransform'];
-      var transform = find(transformVariations, function (t) {
-        return t in document.body.style;
-      });
-      menuContainerStyle[transform] = "translate(".concat(left, ", ").concat(top, ")");
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    var instance = this.instance;
-    var portalTargetClass = ['vue-treeselect__portal-target', instance.wrapperClass];
-    var portalTargetStyle = {
-      zIndex: instance.zIndex
-    };
-    return h("div", {
-      "class": portalTargetClass,
-      style: portalTargetStyle,
-      attrs: {
-        "data-instance-id": instance.getInstanceId()
-      }
-    }, [h(Menu, {
-      ref: "menu"
-    })]);
-  },
-  destroyed: function destroyed() {
-    this.removeHandlers();
-  }
-};
-var placeholder;
-/* harmony default export */ var MenuPortalvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect--menu-portal',
-  created: function created() {
-    this.portalTarget = null;
-  },
-  mounted: function mounted() {
-    this.setup();
-  },
-  destroyed: function destroyed() {
-    this.teardown();
-  },
-  methods: {
-    setup: function setup() {
-      var el = document.createElement('div');
-      document.body.appendChild(el);
-      this.portalTarget = new external_vue_default.a(MenuPortalvue_type_script_lang_js_objectSpread({
-        el: el,
-        parent: this
-      }, PortalTarget));
-    },
-    teardown: function teardown() {
-      document.body.removeChild(this.portalTarget.$el);
-      this.portalTarget.$el.innerHTML = '';
-      this.portalTarget.$destroy();
-      this.portalTarget = null;
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    if (!placeholder) placeholder = h("div", {
-      "class": "vue-treeselect__menu-placeholder"
-    });
-    return placeholder;
-  }
-});
-// CONCATENATED MODULE: ./src/components/MenuPortal.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_MenuPortalvue_type_script_lang_js_ = (MenuPortalvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/MenuPortal.vue
-var MenuPortal_render, MenuPortal_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var MenuPortal_component = normalizeComponent(
-  components_MenuPortalvue_type_script_lang_js_,
-  MenuPortal_render,
-  MenuPortal_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var MenuPortal = (MenuPortal_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Treeselect.vue?vue&type=script&lang=js&
-
-
-
-
-
-/* harmony default export */ var Treeselectvue_type_script_lang_js_ = ({
-  name: 'vue-treeselect',
-  mixins: [treeselectMixin],
-  computed: {
-    wrapperClass: function wrapperClass() {
-      return {
-        'vue-treeselect': true,
-        'vue-treeselect--single': this.single,
-        'vue-treeselect--multi': this.multiple,
-        'vue-treeselect--searchable': this.searchable,
-        'vue-treeselect--disabled': this.disabled,
-        'vue-treeselect--focused': this.trigger.isFocused,
-        'vue-treeselect--has-value': this.hasValue,
-        'vue-treeselect--open': this.menu.isOpen,
-        'vue-treeselect--open-above': this.menu.placement === 'top',
-        'vue-treeselect--open-below': this.menu.placement === 'bottom',
-        'vue-treeselect--branch-nodes-disabled': this.disableBranchNodes,
-        'vue-treeselect--append-to-body': this.appendToBody
-      };
-    }
-  },
-  render: function render() {
-    var h = arguments[0];
-    return h("div", {
-      ref: "wrapper",
-      "class": this.wrapperClass
-    }, [h(HiddenFields), h(Control, {
-      ref: "control"
-    }), this.appendToBody ? h(MenuPortal, {
-      ref: "portal"
-    }) : h(Menu, {
-      ref: "menu"
-    })]);
-  }
-});
-// CONCATENATED MODULE: ./src/components/Treeselect.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Treeselectvue_type_script_lang_js_ = (Treeselectvue_type_script_lang_js_);
-// CONCATENATED MODULE: ./src/components/Treeselect.vue
-var Treeselect_render, Treeselect_staticRenderFns
-
-
-
-
-/* normalize component */
-
-var Treeselect_component = normalizeComponent(
-  components_Treeselectvue_type_script_lang_js_,
-  Treeselect_render,
-  Treeselect_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-
-)
-
-/* harmony default export */ var Treeselect = (Treeselect_component.exports);
-// EXTERNAL MODULE: ./src/style.less
-var style = __webpack_require__(15);
-
-// CONCATENATED MODULE: ./src/index.js
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__esModule", function() { return __esModule; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VERSION", function() { return VERSION; });
-/* concated harmony reexport Treeselect */__webpack_require__.d(__webpack_exports__, "Treeselect", function() { return Treeselect; });
-/* concated harmony reexport treeselectMixin */__webpack_require__.d(__webpack_exports__, "treeselectMixin", function() { return treeselectMixin; });
-/* concated harmony reexport LOAD_ROOT_OPTIONS */__webpack_require__.d(__webpack_exports__, "LOAD_ROOT_OPTIONS", function() { return LOAD_ROOT_OPTIONS; });
-/* concated harmony reexport LOAD_CHILDREN_OPTIONS */__webpack_require__.d(__webpack_exports__, "LOAD_CHILDREN_OPTIONS", function() { return LOAD_CHILDREN_OPTIONS; });
-/* concated harmony reexport ASYNC_SEARCH */__webpack_require__.d(__webpack_exports__, "ASYNC_SEARCH", function() { return ASYNC_SEARCH; });
-
-
-
-/* harmony default export */ var src = __webpack_exports__["default"] = (Treeselect);
-
-
-var __esModule = true;
-var VERSION = "0.1.0";
-
-/***/ })
-/******/ ]);
-//# sourceMappingURL=vue-treeselect.js.map
diff --git a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.css b/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.css
deleted file mode 100644
index d4e38c34..00000000
--- a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*!
- * vue-treeselect v0.1.0 | (c) 2017-2019 Riophae Lee
- * Released under the MIT License.
- * https://vue-treeselect.js.org/
- */.vue-treeselect-helper-hide{display:none}.vue-treeselect-helper-zoom-effect-off{-ms-transform:none!important;transform:none!important}@keyframes vue-treeselect-animation-fade-in{0%{opacity:0}}@keyframes vue-treeselect-animation-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes vue-treeselect-animation-rotate{to{transform:rotate(1turn)}}.vue-treeselect__multi-value-item--transition-enter-active,.vue-treeselect__multi-value-item--transition-leave-active{transition-duration:.2s;transition-property:transform,opacity}.vue-treeselect__multi-value-item--transition-enter-active{transition-timing-function:cubic-bezier(.075,.82,.165,1)}.vue-treeselect__multi-value-item--transition-leave-active{transition-timing-function:cubic-bezier(.215,.61,.355,1);position:absolute}.vue-treeselect__multi-value-item--transition-enter,.vue-treeselect__multi-value-item--transition-leave-to{-ms-transform:scale(.7);transform:scale(.7);opacity:0}.vue-treeselect__multi-value-item--transition-move{transition:transform .2s cubic-bezier(.165,.84,.44,1)}.vue-treeselect{position:relative;text-align:left}.vue-treeselect div,.vue-treeselect span{box-sizing:border-box}.vue-treeselect svg{fill:currentColor}.vue-treeselect__control{padding-left:5px;padding-right:5px;display:table;table-layout:fixed;width:100%;height:36px;border:1px solid #ddd;border-radius:5px;background:#fff;transition-duration:.2s;transition-property:border-color,box-shadow,width,height,background-color,opacity;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover{border-color:#cfcfcf}.vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control{border-color:#039be5;box-shadow:0 0 0 3px rgba(3,155,229,.1)}.vue-treeselect--disabled .vue-treeselect__control{background-color:#f9f9f9}.vue-treeselect--open .vue-treeselect__control{border-color:#cfcfcf}.vue-treeselect--open.vue-treeselect--open-below .vue-treeselect__control{border-bottom-left-radius:0;border-bottom-right-radius:0}.vue-treeselect--open.vue-treeselect--open-above .vue-treeselect__control{border-top-left-radius:0;border-top-right-radius:0}.vue-treeselect__multi-value,.vue-treeselect__value-container{width:100%;vertical-align:middle}.vue-treeselect__value-container{display:table-cell;position:relative}.vue-treeselect--searchable:not(.vue-treeselect--disabled) .vue-treeselect__value-container{cursor:text}.vue-treeselect__multi-value{display:inline-block}.vue-treeselect--has-value .vue-treeselect__multi-value{margin-bottom:5px}.vue-treeselect__placeholder,.vue-treeselect__single-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px;padding-right:5px;position:absolute;top:0;right:0;bottom:0;left:0;line-height:34px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.vue-treeselect__placeholder{color:#bdbdbd}.vue-treeselect__single-value{color:#333}.vue-treeselect--focused.vue-treeselect--searchable .vue-treeselect__single-value{color:#bdbdbd}.vue-treeselect__multi-value-item-container{display:inline-block;padding-top:5px;padding-right:5px;vertical-align:top}.vue-treeselect__multi-value-item{display:inline-table;padding:2px 0;border:1px solid rgba(0,0,0,0);border-radius:2px;font-size:12px;vertical-align:top}.vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-disabled):hover .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new):hover,.vue-treeselect__multi-value-item{cursor:pointer;background:#e3f2fd;color:#039be5}.vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-disabled{cursor:default;background:#f5f5f5;color:#757575}.vue-treeselect--disabled .vue-treeselect__multi-value-item{cursor:default;background:#fff;border-color:#e5e5e5;color:#555}.vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new,.vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new:hover{background:#e8f5e9}.vue-treeselect__multi-value-label,.vue-treeselect__value-remove{display:table-cell;padding:0 5px;vertical-align:middle}.vue-treeselect__value-remove{color:#039be5;padding-left:5px;border-left:1px solid #fff;line-height:0}.vue-treeselect__multi-value-item:hover .vue-treeselect__value-remove{color:#e53935}.vue-treeselect--disabled .vue-treeselect__value-remove,.vue-treeselect__multi-value-item-disabled .vue-treeselect__value-remove{display:none}.vue-treeselect__value-remove>svg{width:6px;height:6px}.vue-treeselect__multi-value-label{padding-right:5px;white-space:pre-line;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vue-treeselect__limit-tip{display:inline-block;padding-top:5px;padding-right:5px;vertical-align:top}.vue-treeselect__limit-tip-text{cursor:default;display:block;margin:2px 0;padding:1px 0;color:#bdbdbd;font-size:12px;font-weight:600}.vue-treeselect__input-container{display:block;max-width:100%;outline:none}.vue-treeselect--single .vue-treeselect__input-container{font-size:inherit;height:100%}.vue-treeselect--multi .vue-treeselect__input-container{display:inline-block;font-size:12px;vertical-align:top}.vue-treeselect--searchable .vue-treeselect__input-container{padding-left:5px;padding-right:5px}.vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container{padding-top:5px;padding-left:0}.vue-treeselect--disabled .vue-treeselect__input-container{display:none}.vue-treeselect__input,.vue-treeselect__sizer{margin:0;line-height:inherit;font-family:inherit;font-size:inherit}.vue-treeselect__input{max-width:100%;margin:0;padding:0;border:0;outline:none;box-sizing:content-box;box-shadow:none;background:none rgba(0,0,0,0);line-height:1;vertical-align:middle}.vue-treeselect__input::-ms-clear{display:none}.vue-treeselect--single .vue-treeselect__input{width:100%;height:100%}.vue-treeselect--multi .vue-treeselect__input{padding-top:3px;padding-bottom:3px}.vue-treeselect--has-value .vue-treeselect__input{line-height:inherit;vertical-align:top}.vue-treeselect__sizer{position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre}.vue-treeselect__x-container{display:table-cell;vertical-align:middle;width:20px;text-align:center;line-height:0;cursor:pointer;color:#ccc;animation:vue-treeselect-animation-fade-in .2s cubic-bezier(.075,.82,.165,1)}.vue-treeselect__x-container:hover{color:#e53935}.vue-treeselect__x{width:8px;height:8px}.vue-treeselect__control-arrow-container{display:table-cell;vertical-align:middle;width:20px;text-align:center;line-height:0;cursor:pointer}.vue-treeselect--disabled .vue-treeselect__control-arrow-container{cursor:default}.vue-treeselect__control-arrow{width:9px;height:9px;color:#ccc}.vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__control-arrow-container:hover .vue-treeselect__control-arrow{color:#616161}.vue-treeselect--disabled .vue-treeselect__control-arrow{opacity:.35}.vue-treeselect__control-arrow--rotated{-ms-transform:rotate(180deg);transform:rotate(180deg)}.vue-treeselect__menu-container{position:absolute;left:0;width:100%;overflow:visible;transition:0s}.vue-treeselect--open-below:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container{top:100%}.vue-treeselect--open-above:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container{bottom:100%}.vue-treeselect__menu{cursor:default;padding-top:5px;padding-bottom:5px;display:block;position:absolute;overflow-x:hidden;overflow-y:auto;width:auto;border:1px solid #cfcfcf;background:#fff;line-height:180%;-webkit-overflow-scrolling:touch}.vue-treeselect--open-below .vue-treeselect__menu{border-bottom-left-radius:5px;border-bottom-right-radius:5px;top:0;margin-top:-1px;border-top-color:#f2f2f2;box-shadow:0 1px 0 rgba(0,0,0,.06)}.vue-treeselect--open-above .vue-treeselect__menu{border-top-left-radius:5px;border-top-right-radius:5px;bottom:0;margin-bottom:-1px;border-bottom-color:#f2f2f2}.vue-treeselect__indent-level-0 .vue-treeselect__option{padding-left:5px}.vue-treeselect__indent-level-0 .vue-treeselect__tip,.vue-treeselect__indent-level-1 .vue-treeselect__option{padding-left:25px}.vue-treeselect__indent-level-1 .vue-treeselect__tip,.vue-treeselect__indent-level-2 .vue-treeselect__option{padding-left:45px}.vue-treeselect__indent-level-2 .vue-treeselect__tip,.vue-treeselect__indent-level-3 .vue-treeselect__option{padding-left:65px}.vue-treeselect__indent-level-3 .vue-treeselect__tip,.vue-treeselect__indent-level-4 .vue-treeselect__option{padding-left:85px}.vue-treeselect__indent-level-4 .vue-treeselect__tip,.vue-treeselect__indent-level-5 .vue-treeselect__option{padding-left:105px}.vue-treeselect__indent-level-5 .vue-treeselect__tip,.vue-treeselect__indent-level-6 .vue-treeselect__option{padding-left:125px}.vue-treeselect__indent-level-6 .vue-treeselect__tip,.vue-treeselect__indent-level-7 .vue-treeselect__option{padding-left:145px}.vue-treeselect__indent-level-7 .vue-treeselect__tip,.vue-treeselect__indent-level-8 .vue-treeselect__option{padding-left:165px}.vue-treeselect__indent-level-8 .vue-treeselect__tip{padding-left:185px}.vue-treeselect__option{padding-left:5px;padding-right:5px;display:table;table-layout:fixed;width:100%}.vue-treeselect__option--highlight{background:#f5f5f5}.vue-treeselect--single .vue-treeselect__option--selected{background:#e3f2fd;font-weight:600}.vue-treeselect--single .vue-treeselect__option--selected:hover{background:#e3f2fd}.vue-treeselect__option--hide{display:none}.vue-treeselect__option-arrow-container,.vue-treeselect__option-arrow-placeholder{display:table-cell;vertical-align:middle;width:20px;text-align:center;line-height:0}.vue-treeselect__option-arrow-container{cursor:pointer}.vue-treeselect__option-arrow{display:inline-block;width:9px;height:9px;color:#ccc;vertical-align:middle;transition:transform .2s cubic-bezier(.19,1,.22,1);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow,.vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow{color:#616161}.vue-treeselect__option-arrow--rotated{-ms-transform:rotate(0);transform:rotate(0)}.vue-treeselect__option-arrow--rotated.vue-treeselect__option-arrow--prepare-enter{-ms-transform:rotate(-90deg)!important;transform:rotate(-90deg)!important}.vue-treeselect__label-container{display:table-cell;vertical-align:middle;cursor:pointer;display:table;width:100%;table-layout:fixed;color:inherit}.vue-treeselect__option--disabled .vue-treeselect__label-container{cursor:not-allowed;color:rgba(0,0,0,.25)}.vue-treeselect__checkbox-container{display:table-cell;width:20px;min-width:20px;height:100%;text-align:center;vertical-align:middle}.vue-treeselect__checkbox{display:block;margin:auto;width:12px;height:12px;border-width:1px;border-style:solid;border-radius:2px;position:relative;transition:all .2s cubic-bezier(.075,.82,.165,1)}.vue-treeselect__check-mark,.vue-treeselect__minus-mark{display:block;position:absolute;left:1px;top:1px;background-repeat:no-repeat;opacity:0;transition:all .2s ease}.vue-treeselect__minus-mark{width:8px;height:8px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=);background-size:8px 8px}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){.vue-treeselect__minus-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.vue-treeselect__minus-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi){.vue-treeselect__minus-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==)}}.vue-treeselect__checkbox--indeterminate>.vue-treeselect__minus-mark{opacity:1}.vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAADi4uLh4eHOxeSRAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=)}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){.vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi){.vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAADh4eHg4ODNzc3h4eEYfw2wAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==)}}.vue-treeselect__check-mark{width:8px;height:8px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAQlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////8IX9KGAAAAFXRSTlMA8u24NxILB+Tawb6jiH1zRz0xIQIIP3GUAAAAMklEQVQI1y3FtQEAMQDDQD+EGbz/qkEVOpyEOP6PudKjZNSXn4Jm2CKRdBKzSLsFWl8fMG0Bl6Jk1rMAAAAASUVORK5CYII=);background-size:8px 8px;-ms-transform:scaleY(.125);transform:scaleY(.125)}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){.vue-treeselect__check-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC)}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.vue-treeselect__check-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi){.vue-treeselect__check-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHXRSTlMA/PiJhGNI9XlEHJB/b2ldV08+Oibk49vPp6QhAYgGBuwAAACCSURBVCjPrdHdDoIwDAXgTWAqCigo/+f9X5OwnoUwtis4V92XNWladUl+rzQPeQJAN2EHxoOnsPn7/oYk8fxBv08Rr/deOH/aZ2Nm8ZJ+s573QGfWKnNuZGzWm3+lv2V3pcU1XQ385/yjmBoM3Z+dXvlbYLLD3ujhTaOM3KaIXvNkFkuSEvYy1LqOAAAAAElFTkSuQmCC)}}.vue-treeselect__checkbox--checked>.vue-treeselect__check-mark{opacity:1;-ms-transform:scaleY(1);transform:scaleY(1)}.vue-treeselect__checkbox--disabled .vue-treeselect__check-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAP1BMVEUAAADj4+Pf39/h4eHh4eHh4eHk5OTh4eHg4ODi4uLh4eHh4eHg4ODh4eHh4eHg4ODh4eHh4eHp6en////h4eFqcyvUAAAAFHRSTlMAOQfy7bgS5NrBvqOIfXNHMSELAgQ/iFsAAAA2SURBVAjXY4AANjYIzcjMAaVFuBkY+RkEWERYmRjYRXjANAOfiIgIFxNIAa8IpxBEi6AwiAQAK2MBd7xY8csAAAAASUVORK5CYII=)}@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){.vue-treeselect__checkbox--disabled .vue-treeselect__check-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==)}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.vue-treeselect__checkbox--disabled .vue-treeselect__check-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi){.vue-treeselect__checkbox--disabled .vue-treeselect__check-mark{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAUVBMVEUAAADh4eHh4eHh4eHh4eHi4uLi4uLh4eHh4eHh4eHf39/j4+Ph4eHh4eHh4eHg4ODi4uLh4eHh4eHi4uLh4eHh4eHh4eHh4eHh4eH////h4eF3FMFTAAAAGnRSTlMA+/eJhGhfSHE9JBzz5KaQf3pXT0Xbz0I5AYDw8F0AAAB+SURBVCjPrdHbDoMgEEVRKAii1dZe9fz/hxplTiKIT7qfYCWTEEZdUvOwbckNAD2WHeh3brHW5f5EzGQ+iN+b1Gt6KPvtv16Dn6JX9M9ya3/A1yfu5dlyduL6Hec7mXY6ddXLPP2lpABGZ8PWXfYLTJxZekVhhl7eTX24zZPNKXoRC7zQLjUAAAAASUVORK5CYII=)}}.vue-treeselect__checkbox--unchecked{border-color:#e0e0e0;background:#fff}.vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked{border-color:#039be5;background:#fff}.vue-treeselect__checkbox--checked,.vue-treeselect__checkbox--indeterminate,.vue-treeselect__label-container:hover .vue-treeselect__checkbox--checked,.vue-treeselect__label-container:hover .vue-treeselect__checkbox--indeterminate{border-color:#039be5;background:#039be5}.vue-treeselect__checkbox--disabled,.vue-treeselect__label-container:hover .vue-treeselect__checkbox--disabled{border-color:#e0e0e0;background-color:#f7f7f7}.vue-treeselect__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:table-cell;padding-left:5px;max-width:100%;vertical-align:middle;cursor:inherit}.vue-treeselect__count{margin-left:5px;font-weight:400;opacity:.6}.vue-treeselect__tip{padding-left:5px;padding-right:5px;display:table;table-layout:fixed;width:100%;color:#757575}.vue-treeselect__tip-text{display:table-cell;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;padding-left:5px;font-size:12px}.vue-treeselect__error-tip .vue-treeselect__retry{cursor:pointer;margin-left:5px;font-style:normal;font-weight:600;text-decoration:none;color:#039be5}.vue-treeselect__icon-container{display:table-cell;vertical-align:middle;width:20px;text-align:center;line-height:0}.vue-treeselect--single .vue-treeselect__icon-container{padding-left:5px}.vue-treeselect__icon-warning{display:block;margin:auto;border-radius:50%;position:relative;width:12px;height:12px;background:#fb8c00}.vue-treeselect__icon-warning:after{display:block;position:absolute;content:"";left:5px;top:2.5px;width:2px;height:1px;border-color:#fff;border-style:solid;border-width:5px 0 1px}.vue-treeselect__icon-error{display:block;margin:auto;border-radius:50%;position:relative;width:12px;height:12px;background:#e53935}.vue-treeselect__icon-error:after,.vue-treeselect__icon-error:before{display:block;position:absolute;content:"";background:#fff;-ms-transform:rotate(45deg);transform:rotate(45deg)}.vue-treeselect__icon-error:before{width:6px;height:2px;left:3px;top:5px}.vue-treeselect__icon-error:after{width:2px;height:6px;left:5px;top:3px}.vue-treeselect__icon-loader{display:block;margin:auto;position:relative;width:12px;height:12px;text-align:center;animation:vue-treeselect-animation-rotate 1.6s linear infinite}.vue-treeselect__icon-loader:after,.vue-treeselect__icon-loader:before{border-radius:50%;position:absolute;content:"";left:0;top:0;display:block;width:100%;height:100%;opacity:.6;animation:vue-treeselect-animation-bounce 1.6s ease-in-out infinite}.vue-treeselect__icon-loader:before{background:#039be5}.vue-treeselect__icon-loader:after{background:#b3e5fc;animation-delay:-.8s}.vue-treeselect__menu-placeholder{display:none}.vue-treeselect__portal-target{position:absolute;display:block;left:0;top:0;height:0;width:0;padding:0;margin:0;border:0;overflow:visible;box-sizing:border-box}
\ No newline at end of file
diff --git a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.js b/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.js
deleted file mode 100644
index 237b6112..00000000
--- a/boranga/frontend/boranga/src/third-party/vue-treeselect/dict/vue-treeselect.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*!
- * vue-treeselect v0.1.0 | (c) 2017-2019 Riophae Lee
- * Released under the MIT License.
- * https://vue-treeselect.js.org/
- */
-!(function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("Vue")):"function"==typeof define&&define.amd?define(["Vue"],t):"object"==typeof exports?exports.VueTreeselect=t(require("Vue")):e.VueTreeselect=t(e.Vue)})(window,(function(e){return (function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=36)})([(function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}}),(function(e,t){var n=/^(attrs|props|on|nativeOn|class|style|hook)$/;function i(e,t){return function(){e&&e.apply(this,arguments),t&&t.apply(this,arguments)}}e.exports=function(e){return e.reduce((function(e,t){var r,s,o,a,l;for(o in t)if(r=e[o],s=t[o],r&&n.test(o))if("class"===o&&("string"==typeof r&&(l=r,e[o]=r={},r[l]=!0),"string"==typeof s&&(l=s,t[o]=s={},s[l]=!0)),"on"===o||"nativeOn"===o||"hook"===o)for(a in s)r[a]=i(r[a],s[a]);else if(Array.isArray(r))e[o]=r.concat(s);else if(Array.isArray(s))e[o]=[r].concat(s);else for(a in s)r[a]=s[a];else e[o]=t[o];return e}),{})}}),(function(e,t,n){var i=n(21),r=n(22),s=n(23);e.exports=function(e){return i(e)||r(e)||s()}}),(function(e,t){e.exports=function(){}}),(function(e,t,n){var i=n(5),r=n(24),s=n(7),o="Expected a function",a=Math.max,l=Math.min;e.exports=function(e,t,n){var c,u,d,h,f,p,v=0,m=!1,g=!1,y=!0;if("function"!=typeof e)throw new TypeError(o);function S(t){var n=c,i=u;return c=u=void 0,v=t,h=e.apply(i,n)}function O(e){var n=e-p;return void 0===p||n>=t||n<0||g&&e-v>=d}function b(){var e=r();if(O(e))return E(e);f=setTimeout(b,(function(e){var n=t-(e-p);return g?l(n,d-(e-v)):n})(e))}function E(e){return f=void 0,y&&c?S(e):(c=u=void 0,h)}function N(){var e=r(),n=O(e);if(c=arguments,u=this,p=e,n){if(void 0===f)return (function(e){return v=e,f=setTimeout(b,t),m?S(e):h})(p);if(g)return clearTimeout(f),f=setTimeout(b,t),S(p)}return void 0===f&&(f=setTimeout(b,t)),h}return t=s(t)||0,i(n)&&(m=!!n.leading,d=(g="maxWait"in n)?a(s(n.maxWait)||0,t):d,y="trailing"in n?!!n.trailing:y),N.cancel=function(){void 0!==f&&clearTimeout(f),v=0,c=p=u=f=void 0},N.flush=function(){return void 0===f?h:E(r())},N}}),(function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}}),(function(e,t,n){var i=n(25),r="object"==typeof self&&self&&self.Object===Object&&self,s=i||r||Function("return this")();e.exports=s}),(function(e,t,n){var i=n(5),r=n(27),s=NaN,o=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(r(e))return s;if(i(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=i(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var n=l.test(e);return n||c.test(e)?u(e.slice(2),n?2:8):a.test(e)?s:+e}}),(function(e,t,n){var i=n(6).Symbol;e.exports=i}),(function(e,t){e.exports=function(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then}}),(function(e,t,n){var i=n(32);e.exports=function(e){return i(2,e)}}),(function(e,t){e.exports=function(e){return e}}),(function(e,t){e.exports=function(e){return function(){return e}}}),(function(e,t){e.exports=function(e){var t=null==e?0:e.length;return t?e[t-1]:void 0}}),(function(e,t,n){var i=n(18),r=n(19),s=n(20);e.exports=function(e,t){return i(e)||r(e,t)||s()}}),(function(e,t,n){"use strict";e.exports=function(e,t){var n=t.length,i=e.length;if(i>n)return!1;if(i===n)return e===t;e:for(var r=0,s=0;r<i;r++){for(var o=e.charCodeAt(r);s<n;)if(t.charCodeAt(s++)===o)continue e;return!1}return!0}}),(function(e,t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=i=function(e){return n(e)}:e.exports=i=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},i(t)}e.exports=i}),(function(t,n){t.exports=e}),(function(e,t){e.exports=function(e){if(Array.isArray(e))return e}}),(function(e,t){e.exports=function(e,t){var n=[],i=!0,r=!1,s=void 0;try{for(var o,a=e[Symbol.iterator]();!(i=(o=a.next()).done)&&(n.push(o.value),!t||n.length!==t);i=!0);}catch(e){r=!0,s=e}finally{try{i||null==a.return||a.return()}finally{if(r)throw s}}return n}}),(function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}}),(function(e,t){e.exports=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}}),(function(e,t){e.exports=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}}),(function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}}),(function(e,t,n){var i=n(6);e.exports=function(){return i.Date.now()}}),(function(e,t,n){(function(t){var n="object"==typeof t&&t&&t.Object===Object&&t;e.exports=n}).call(this,n(26))}),(function(e,t){var n;n=(function(){return this})();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n}),(function(e,t,n){var i=n(28),r=n(31),s="[object Symbol]";e.exports=function(e){return"symbol"==typeof e||r(e)&&i(e)==s}}),(function(e,t,n){var i=n(8),r=n(29),s=n(30),o="[object Null]",a="[object Undefined]",l=i?i.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?a:o:l&&l in Object(e)?r(e):s(e)}}),(function(e,t,n){var i=n(8),r=Object.prototype,s=r.hasOwnProperty,o=r.toString,a=i?i.toStringTag:void 0;e.exports=function(e){var t=s.call(e,a),n=e[a];try{e[a]=void 0;var i=!0}catch(e){}var r=o.call(e);return i&&(t?e[a]=n:delete e[a]),r}}),(function(e,t){var n=Object.prototype.toString;e.exports=function(e){return n.call(e)}}),(function(e,t){e.exports=function(e){return null!=e&&"object"==typeof e}}),(function(e,t,n){var i=n(33),r="Expected a function";e.exports=function(e,t){var n;if("function"!=typeof t)throw new TypeError(r);return e=i(e),function(){return--e>0&&(n=t.apply(this,arguments)),e<=1&&(t=void 0),n}}}),(function(e,t,n){var i=n(34);e.exports=function(e){var t=i(e),n=t%1;return t==t?n?t-n:t:0}}),(function(e,t,n){var i=n(7),r=1/0,s=17976931348623157e292;e.exports=function(e){return e?(e=i(e))===r||e===-r?(e<0?-1:1)*s:e==e?e:0:0===e?e:0}}),(function(e,t,n){}),(function(e,t,n){"use strict";n.r(t);var i=n(14),r=n.n(i),s=n(2),o=n.n(s),a=n(0),l=n.n(a),c=n(15),u=n.n(c),d=n(3),h=n.n(d).a;function f(e){return function(t){if("mousedown"===t.type&&0===t.button){for(var n=arguments.length,i=new Array(n>1?n-1:0),r=1;r<n;r++)i[r-1]=arguments[r];e.call.apply(e,[this,t].concat(i))}}}function p(e,t){var n=e.getBoundingClientRect(),i=t.getBoundingClientRect(),r=t.offsetHeight/3;i.bottom+r>n.bottom?e.scrollTop=Math.min(t.offsetTop+t.clientHeight-e.offsetHeight+r,e.scrollHeight):i.top-r<n.top&&(e.scrollTop=Math.max(t.offsetTop-r,0))}var v,m=n(4),g=n.n(m),y=function(e,t){var n=document.createElement("_"),i=n.appendChild(document.createElement("_")),r=n.appendChild(document.createElement("_")),s=i.appendChild(document.createElement("_")),o=void 0,a=void 0;return i.style.cssText=n.style.cssText="height:100%;left:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;transition:0s;width:100%;z-index:-1",s.style.cssText=r.style.cssText="display:block;height:100%;transition:0s;width:100%",s.style.width=s.style.height="200%",e.appendChild(n),l(),function(){c(),e.removeChild(n)};function l(){c();var s=e.offsetWidth,u=e.offsetHeight;s===o&&u===a||(o=s,a=u,r.style.width=2*s+"px",r.style.height=2*u+"px",n.scrollLeft=n.scrollWidth,n.scrollTop=n.scrollHeight,i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight,t({width:s,height:u})),i.addEventListener("scroll",l),n.addEventListener("scroll",l)}function c(){i.removeEventListener("scroll",l),n.removeEventListener("scroll",l)}};function S(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1)}var O=[],b=100;function E(e){var t=e.$el,n=e.listener,i=e.lastWidth,r=e.lastHeight,s=t.offsetWidth,o=t.offsetHeight;i===s&&r===o||(e.lastWidth=s,e.lastHeight=o,n({width:s,height:o}))}function N(e,t){var n={$el:e,listener:t,lastWidth:null,lastHeight:null};return O.push(n),E(n),v=setInterval((function(){O.forEach(E)}),b),function(){S(O,n),O.length||(clearInterval(v),v=null)}}function _(e,t){var n=9===document.documentMode,i=!0,r=(n?N:y)(e,(function(){return i||t.apply(void 0,arguments)}));return i=!1,r}function L(e){var t=getComputedStyle(e),n=t.overflow,i=t.overflowX,r=t.overflowY;return/(auto|scroll|overlay)/.test(n+r+i)}function x(e,t){var n=(function(e){for(var t=[],n=e.parentNode;n&&"BODY"!==n.nodeName&&n.nodeType===document.ELEMENT_NODE;)L(n)&&t.push(n),n=n.parentNode;return t.push(window),t})(e);return window.addEventListener("resize",t,{passive:!0}),n.forEach((function(e){e.addEventListener("scroll",t,{passive:!0})})),function(){window.removeEventListener("resize",t,{passive:!0}),n.forEach((function(e){e.removeEventListener("scroll",t,{passive:!0})}))}}function w(e){return e!=e}var C=n(9),D=n.n(C),I=n(10),M=n.n(I),A=n(11),T=n.n(A),R=n(12),$=n.n(R),B=function(){return Object.create(null)},z=n(16),V=n.n(z);function k(e){return null!=e&&"object"===V()(e)&&Object.getPrototypeOf(e)===Object.prototype}function F(e,t){if(k(t))for(var n=Object.keys(t),i=0,r=n.length;i<r;i++)s=e,o=n[i],k(a=t[n[i]])?(s[o]||(s[o]={}),F(s[o],a)):s[o]=a;var s,o,a;return e}var j=n(13),H=n.n(j);function P(e,t){return-1!==e.indexOf(t)}function W(e,t,n){for(var i=0,r=e.length;i<r;i++)if(t.call(n,e[i],i,e))return e[i]}function Q(e,t){if(e.length!==t.length)return!0;for(var n=0;n<e.length;n++)if(e[n]!==t[n])return!0;return!1}var Y=8,q=13,K=27,X=35,U=36,J=37,G=38,Z=39,ee=40,te=46;function ne(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function ie(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ne(n,!0).forEach((function(t){l()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ne(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function re(e,t){for(var n=0;;){if(e.level<n)return-1;if(t.level<n)return 1;if(e.index[n]!==t.index[n])return e.index[n]-t.index[n];n++}}function se(e,t,n){return e?u()(t,n):P(n,t)}function oe(e){return e.message||String(e)}var ae=0,le={provide:function(){return{instance:this}},props:{allowClearingDisabled:{type:Boolean,default:!1},allowSelectingDisabledDescendants:{type:Boolean,default:!1},alwaysOpen:{type:Boolean,default:!1},appendToBody:{type:Boolean,default:!1},async:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},autoLoadRootOptions:{type:Boolean,default:!0},autoDeselectAncestors:{type:Boolean,default:!1},autoDeselectDescendants:{type:Boolean,default:!1},autoSelectAncestors:{type:Boolean,default:!1},autoSelectDescendants:{type:Boolean,default:!1},backspaceRemoves:{type:Boolean,default:!0},beforeClearAll:{type:Function,default:$()(!0)},branchNodesFirst:{type:Boolean,default:!1},cacheOptions:{type:Boolean,default:!0},clearable:{type:Boolean,default:!0},clearAllText:{type:String,default:"Clear all"},clearOnSelect:{type:Boolean,default:!1},clearValueText:{type:String,default:"Clear value"},closeOnSelect:{type:Boolean,default:!0},defaultExpandLevel:{type:Number,default:0},defaultOptions:{default:!1},deleteRemoves:{type:Boolean,default:!0},delimiter:{type:String,default:","},flattenSearchResults:{type:Boolean,default:!1},disableBranchNodes:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},disableFuzzyMatching:{type:Boolean,default:!1},flat:{type:Boolean,default:!1},instanceId:{default:function(){return"".concat(ae++,"$$")},type:[String,Number]},joinValues:{type:Boolean,default:!1},limit:{type:Number,default:1/0},limitText:{type:Function,default:function(e){return"and ".concat(e," more")}},loading:{type:Boolean,default:!1},loadingText:{type:String,default:"Loading..."},loadOptions:{type:Function},matchKeys:{type:Array,default:$()(["label"])},maxHeight:{type:Number,default:300},multiple:{type:Boolean,default:!1},name:{type:String},noChildrenText:{type:String,default:"No sub-options."},noOptionsText:{type:String,default:"No options available."},noResultsText:{type:String,default:"No results found..."},normalizer:{type:Function,default:T.a},openDirection:{type:String,default:"auto",validator:function(e){return P(["auto","top","bottom","above","below"],e)}},openOnClick:{type:Boolean,default:!0},openOnFocus:{type:Boolean,default:!1},options:{type:Array},placeholder:{type:String,default:"Select..."},required:{type:Boolean,default:!1},retryText:{type:String,default:"Retry?"},retryTitle:{type:String,default:"Click to retry"},searchable:{type:Boolean,default:!0},searchNested:{type:Boolean,default:!1},searchPromptText:{type:String,default:"Type to search..."},showCount:{type:Boolean,default:!1},showCountOf:{type:String,default:"ALL_CHILDREN",validator:function(e){return P(["ALL_CHILDREN","ALL_DESCENDANTS","LEAF_CHILDREN","LEAF_DESCENDANTS"],e)}},showCountOnSearch:null,sortValueBy:{type:String,default:"ORDER_SELECTED",validator:function(e){return P(["ORDER_SELECTED","LEVEL","INDEX"],e)}},tabIndex:{type:Number,default:0},value:null,valueConsistsOf:{type:String,default:"BRANCH_PRIORITY",validator:function(e){return P(["ALL","BRANCH_PRIORITY","LEAF_PRIORITY","ALL_WITH_INDETERMINATE"],e)}},valueFormat:{type:String,default:"id"},zIndex:{type:[Number,String],default:999}},data:function(){return{trigger:{isFocused:!1,searchQuery:""},menu:{isOpen:!1,current:null,lastScrollPosition:0,placement:"bottom"},forest:{normalizedOptions:[],nodeMap:B(),checkedStateMap:B(),selectedNodeIds:this.extractCheckedNodeIdsFromValue(),selectedNodeMap:B()},rootOptionsStates:{isLoaded:!1,isLoading:!1,loadingError:""},localSearch:{active:!1,noResults:!0,countMap:B()},remoteSearch:B()}},computed:{selectedNodes:function(){return this.forest.selectedNodeIds.map(this.getNode)},internalValue:function(){var e,t=this;if(this.single||this.flat||this.disableBranchNodes||"ALL"===this.valueConsistsOf)e=this.forest.selectedNodeIds.slice();else if("BRANCH_PRIORITY"===this.valueConsistsOf)e=this.forest.selectedNodeIds.filter((function(e){var n=t.getNode(e);return!!n.isRootNode||!t.isSelected(n.parentNode)}));else if("LEAF_PRIORITY"===this.valueConsistsOf)e=this.forest.selectedNodeIds.filter((function(e){var n=t.getNode(e);return!!n.isLeaf||0===n.children.length}));else if("ALL_WITH_INDETERMINATE"===this.valueConsistsOf){var n,i=[];e=this.forest.selectedNodeIds.slice(),this.selectedNodes.forEach((function(t){t.ancestors.forEach((function(t){P(i,t.id)||P(e,t.id)||i.push(t.id)}))})),(n=e).push.apply(n,i)}return"LEVEL"===this.sortValueBy?e.sort((function(e,n){return (function(e,t){return e.level===t.level?re(e,t):e.level-t.level})(t.getNode(e),t.getNode(n))})):"INDEX"===this.sortValueBy&&e.sort((function(e,n){return re(t.getNode(e),t.getNode(n))})),e},hasValue:function(){return this.internalValue.length>0},single:function(){return!this.multiple},visibleOptionIds:function(){var e=this,t=[];return this.traverseAllNodesByIndex((function(n){if(e.localSearch.active&&!e.shouldOptionBeIncludedInSearchResult(n)||t.push(n.id),n.isBranch&&!e.shouldExpand(n))return!1})),t},hasVisibleOptions:function(){return 0!==this.visibleOptionIds.length},showCountOnSearchComputed:function(){return"boolean"==typeof this.showCountOnSearch?this.showCountOnSearch:this.showCount},hasBranchNodes:function(){return this.forest.normalizedOptions.some((function(e){return e.isBranch}))},shouldFlattenOptions:function(){return this.localSearch.active&&this.flattenSearchResults}},watch:{alwaysOpen:function(e){e?this.openMenu():this.closeMenu()},branchNodesFirst:function(){this.initialize()},disabled:function(e){e&&this.menu.isOpen?this.closeMenu():e||this.menu.isOpen||!this.alwaysOpen||this.openMenu()},flat:function(){this.initialize()},internalValue:function(e,t){Q(e,t)&&this.$emit("input",this.getValue(),this.getInstanceId())},matchKeys:function(){this.initialize()},multiple:function(e){e&&this.buildForestState()},options:{handler:function(){this.async||(this.initialize(),this.rootOptionsStates.isLoaded=Array.isArray(this.options))},deep:!0,immediate:!0},"trigger.searchQuery":function(){this.async?this.handleRemoteSearch():this.handleLocalSearch(),this.$emit("search-change",this.trigger.searchQuery,this.getInstanceId())},value:function(){var e=this.extractCheckedNodeIdsFromValue();Q(e,this.internalValue)&&this.fixSelectedNodeIds(e)}},methods:{verifyProps:function(){var e=this;if(h((function(){return!e.async||e.searchable}),(function(){return'For async search mode, the value of "searchable" prop must be true.'})),null!=this.options||this.loadOptions||h((function(){return!1}),(function(){return'Are you meant to dynamically load options? You need to use "loadOptions" prop.'})),this.flat&&h((function(){return e.multiple}),(function(){return'You are using flat mode. But you forgot to add "multiple=true"?'})),!this.flat){["autoSelectAncestors","autoSelectDescendants","autoDeselectAncestors","autoDeselectDescendants"].forEach((function(t){h((function(){return!e[t]}),(function(){return'"'.concat(t,'" only applies to flat mode.')}))}))}},resetFlags:function(){this._blurOnSelect=!1},initialize:function(){var e=this.async?this.getRemoteSearchEntry().options:this.options;if(Array.isArray(e)){var t=this.forest.nodeMap;this.forest.nodeMap=B(),this.keepDataOfSelectedNodes(t),this.forest.normalizedOptions=this.normalize(null,e,t),this.fixSelectedNodeIds(this.internalValue)}else this.forest.normalizedOptions=[]},getInstanceId:function(){return null==this.instanceId?this.id:this.instanceId},getValue:function(){var e=this;if("id"===this.valueFormat)return this.multiple?this.internalValue.slice():this.internalValue[0];var t=this.internalValue.map((function(t){return e.getNode(t).raw}));return this.multiple?t:t[0]},getNode:function(e){return h((function(){return null!=e}),(function(){return"Invalid node id: ".concat(e)})),null==e?null:e in this.forest.nodeMap?this.forest.nodeMap[e]:this.createFallbackNode(e)},createFallbackNode:function(e){var t=this.extractNodeFromValue(e),n={id:e,label:this.enhancedNormalizer(t).label||"".concat(e," (unknown)"),ancestors:[],parentNode:null,isFallbackNode:!0,isRootNode:!0,isLeaf:!0,isBranch:!1,isDisabled:!1,isNew:!1,index:[-1],level:0,raw:t};return this.$set(this.forest.nodeMap,e,n)},extractCheckedNodeIdsFromValue:function(){var e=this;return null==this.value?[]:"id"===this.valueFormat?this.multiple?this.value.slice():[this.value]:(this.multiple?this.value:[this.value]).map((function(t){return e.enhancedNormalizer(t)})).map((function(e){return e.id}))},extractNodeFromValue:function(e){var t=this,n={id:e};return"id"===this.valueFormat?n:W(this.multiple?Array.isArray(this.value)?this.value:[]:this.value?[this.value]:[],(function(n){return n&&t.enhancedNormalizer(n).id===e}))||n},fixSelectedNodeIds:function(e){var t=this,n=[];if(this.single||this.flat||this.disableBranchNodes||"ALL"===this.valueConsistsOf)n=e;else if("BRANCH_PRIORITY"===this.valueConsistsOf)e.forEach((function(e){n.push(e);var i=t.getNode(e);i.isBranch&&t.traverseDescendantsBFS(i,(function(e){n.push(e.id)}))}));else if("LEAF_PRIORITY"===this.valueConsistsOf)for(var i=B(),r=e.slice();r.length;){var s=r.shift(),o=this.getNode(s);n.push(s),o.isRootNode||(o.parentNode.id in i||(i[o.parentNode.id]=o.parentNode.children.length),0==--i[o.parentNode.id]&&r.push(o.parentNode.id))}else if("ALL_WITH_INDETERMINATE"===this.valueConsistsOf)for(var a=B(),l=e.filter((function(e){var n=t.getNode(e);return n.isLeaf||0===n.children.length}));l.length;){var c=l.shift(),u=this.getNode(c);n.push(c),u.isRootNode||(u.parentNode.id in a||(a[u.parentNode.id]=u.parentNode.children.length),0==--a[u.parentNode.id]&&l.push(u.parentNode.id))}Q(this.forest.selectedNodeIds,n)&&(this.forest.selectedNodeIds=n),this.buildForestState()},keepDataOfSelectedNodes:function(e){var t=this;this.forest.selectedNodeIds.forEach((function(n){if(e[n]){var i=ie({},e[n],{isFallbackNode:!0});t.$set(t.forest.nodeMap,n,i)}}))},isSelected:function(e){return!0===this.forest.selectedNodeMap[e.id]},traverseDescendantsBFS:function(e,t){if(e.isBranch)for(var n=e.children.slice();n.length;){var i=n[0];i.isBranch&&n.push.apply(n,o()(i.children)),t(i),n.shift()}},traverseDescendantsDFS:function(e,t){var n=this;e.isBranch&&e.children.forEach((function(e){n.traverseDescendantsDFS(e,t),t(e)}))},traverseAllNodesDFS:function(e){var t=this;this.forest.normalizedOptions.forEach((function(n){t.traverseDescendantsDFS(n,e),e(n)}))},traverseAllNodesByIndex:function(e){!(function t(n){n.children.forEach((function(n){!1!==e(n)&&n.isBranch&&t(n)}))})({children:this.forest.normalizedOptions})},toggleClickOutsideEvent:function(e){e?document.addEventListener("mousedown",this.handleClickOutside,!1):document.removeEventListener("mousedown",this.handleClickOutside,!1)},getValueContainer:function(){return this.$refs.control.$refs["value-container"]},getInput:function(){return this.getValueContainer().$refs.input},focusInput:function(){this.getInput().focus()},blurInput:function(){this.getInput().blur()},handleMouseDown:f((function(e){(e.preventDefault(),e.stopPropagation(),this.disabled)||(this.getValueContainer().$el.contains(e.target)&&!this.menu.isOpen&&(this.openOnClick||this.trigger.isFocused)&&this.openMenu(),this._blurOnSelect?this.blurInput():this.focusInput(),this.resetFlags())})),handleClickOutside:function(e){this.$refs.wrapper&&!this.$refs.wrapper.contains(e.target)&&(this.blurInput(),this.closeMenu())},handleLocalSearch:function(){var e=this,t=this.trigger.searchQuery,n=function(){return e.resetHighlightedOptionWhenNecessary(!0)};if(!t)return this.localSearch.active=!1,n();this.localSearch.active=!0,this.localSearch.noResults=!0,this.traverseAllNodesDFS((function(t){var n;t.isBranch&&(t.isExpandedOnSearch=!1,t.showAllChildrenOnSearch=!1,t.isMatched=!1,t.hasMatchedDescendants=!1,e.$set(e.localSearch.countMap,t.id,(n={},l()(n,"ALL_CHILDREN",0),l()(n,"ALL_DESCENDANTS",0),l()(n,"LEAF_CHILDREN",0),l()(n,"LEAF_DESCENDANTS",0),n)))}));var i=t.trim().toLocaleLowerCase(),r=i.replace(/\s+/g," ").split(" ");this.traverseAllNodesDFS((function(t){e.searchNested&&r.length>1?t.isMatched=r.every((function(e){return se(!1,e,t.nestedSearchLabel)})):t.isMatched=e.matchKeys.some((function(n){return se(!e.disableFuzzyMatching,i,t.lowerCased[n])})),t.isMatched&&(e.localSearch.noResults=!1,t.ancestors.forEach((function(t){return e.localSearch.countMap[t.id].ALL_DESCENDANTS++})),t.isLeaf&&t.ancestors.forEach((function(t){return e.localSearch.countMap[t.id].LEAF_DESCENDANTS++})),null!==t.parentNode&&(e.localSearch.countMap[t.parentNode.id].ALL_CHILDREN+=1,t.isLeaf&&(e.localSearch.countMap[t.parentNode.id].LEAF_CHILDREN+=1))),(t.isMatched||t.isBranch&&t.isExpandedOnSearch)&&null!==t.parentNode&&(t.parentNode.isExpandedOnSearch=!0,t.parentNode.hasMatchedDescendants=!0)})),n()},handleRemoteSearch:function(){var e=this,t=this.trigger.searchQuery,n=this.getRemoteSearchEntry(),i=function(){e.initialize(),e.resetHighlightedOptionWhenNecessary(!0)};if((""===t||this.cacheOptions)&&n.isLoaded)return i();this.callLoadOptionsProp({action:"ASYNC_SEARCH",args:{searchQuery:t},isPending:function(){return n.isLoading},start:function(){n.isLoading=!0,n.isLoaded=!1,n.loadingError=""},succeed:function(r){n.isLoaded=!0,n.options=r,e.trigger.searchQuery===t&&i()},fail:function(e){n.loadingError=oe(e)},end:function(){n.isLoading=!1}})},getRemoteSearchEntry:function(){var e=this,t=this.trigger.searchQuery,n=this.remoteSearch[t]||ie({},{isLoaded:!1,isLoading:!1,loadingError:""},{options:[]});if(this.$watch((function(){return n.options}),(function(){e.trigger.searchQuery===t&&e.initialize()}),{deep:!0}),""===t){if(Array.isArray(this.defaultOptions))return n.options=this.defaultOptions,n.isLoaded=!0,n;if(!0!==this.defaultOptions)return n.isLoaded=!0,n}return this.remoteSearch[t]||this.$set(this.remoteSearch,t,n),n},shouldExpand:function(e){return this.localSearch.active?e.isExpandedOnSearch:e.isExpanded},shouldOptionBeIncludedInSearchResult:function(e){return!!e.isMatched||(!(!e.isBranch||!e.hasMatchedDescendants||this.flattenSearchResults)||!(e.isRootNode||!e.parentNode.showAllChildrenOnSearch))},shouldShowOptionInMenu:function(e){return!(this.localSearch.active&&!this.shouldOptionBeIncludedInSearchResult(e))},getControl:function(){return this.$refs.control.$el},getMenu:function(){var e=(this.appendToBody?this.$refs.portal.portalTarget:this).$refs.menu.$refs.menu;return e&&"#comment"!==e.nodeName?e:null},setCurrentHighlightedOption:function(e){var t=this,n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=this.menu.current;if(null!=i&&i in this.forest.nodeMap&&(this.forest.nodeMap[i].isHighlighted=!1),this.menu.current=e.id,e.isHighlighted=!0,this.menu.isOpen&&n){var r=function(){var n=t.getMenu(),i=n.querySelector('.vue-treeselect__option[data-id="'.concat(e.id,'"]'));i&&p(n,i)};this.getMenu()?r():this.$nextTick(r)}},resetHighlightedOptionWhenNecessary:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.menu.current;!e&&null!=t&&t in this.forest.nodeMap&&this.shouldShowOptionInMenu(this.getNode(t))||this.highlightFirstOption()},highlightFirstOption:function(){if(this.hasVisibleOptions){var e=this.visibleOptionIds[0];this.setCurrentHighlightedOption(this.getNode(e))}},highlightPrevOption:function(){if(this.hasVisibleOptions){var e=this.visibleOptionIds.indexOf(this.menu.current)-1;if(-1===e)return this.highlightLastOption();this.setCurrentHighlightedOption(this.getNode(this.visibleOptionIds[e]))}},highlightNextOption:function(){if(this.hasVisibleOptions){var e=this.visibleOptionIds.indexOf(this.menu.current)+1;if(e===this.visibleOptionIds.length)return this.highlightFirstOption();this.setCurrentHighlightedOption(this.getNode(this.visibleOptionIds[e]))}},highlightLastOption:function(){if(this.hasVisibleOptions){var e=H()(this.visibleOptionIds);this.setCurrentHighlightedOption(this.getNode(e))}},resetSearchQuery:function(){this.trigger.searchQuery=""},closeMenu:function(){!this.menu.isOpen||!this.disabled&&this.alwaysOpen||(this.saveMenuScrollPosition(),this.menu.isOpen=!1,this.toggleClickOutsideEvent(!1),this.resetSearchQuery(),this.$emit("close",this.getValue(),this.getInstanceId()))},openMenu:function(){this.disabled||this.menu.isOpen||(this.menu.isOpen=!0,this.$nextTick(this.resetHighlightedOptionWhenNecessary),this.$nextTick(this.restoreMenuScrollPosition),this.options||this.async||this.loadRootOptions(),this.toggleClickOutsideEvent(!0),this.$emit("open",this.getInstanceId()))},toggleMenu:function(){this.menu.isOpen?this.closeMenu():this.openMenu()},toggleExpanded:function(e){var t;this.localSearch.active?(t=e.isExpandedOnSearch=!e.isExpandedOnSearch)&&(e.showAllChildrenOnSearch=!0):t=e.isExpanded=!e.isExpanded,t&&!e.childrenStates.isLoaded&&this.loadChildrenOptions(e)},buildForestState:function(){var e=this,t=B();this.forest.selectedNodeIds.forEach((function(e){t[e]=!0})),this.forest.selectedNodeMap=t;var n=B();this.multiple&&(this.traverseAllNodesByIndex((function(e){n[e.id]=0})),this.selectedNodes.forEach((function(t){n[t.id]=2,e.flat||e.disableBranchNodes||t.ancestors.forEach((function(t){e.isSelected(t)||(n[t.id]=1)}))}))),this.forest.checkedStateMap=n},enhancedNormalizer:function(e){return ie({},e,{},this.normalizer(e,this.getInstanceId()))},normalize:function(e,t,n){var i=this,s=t.map((function(e){return[i.enhancedNormalizer(e),e]})).map((function(t,s){var o=r()(t,2),a=o[0],c=o[1];i.checkDuplication(a),i.verifyNodeShape(a);var u=a.id,d=a.label,f=a.children,p=a.isDefaultExpanded,v=null===e,m=v?0:e.level+1,g=Array.isArray(f)||null===f,y=!g,S=!!a.isDisabled||!i.flat&&!v&&e.isDisabled,O=!!a.isNew,b=i.matchKeys.reduce((function(e,t){return ie({},e,l()({},t,(n=a[t],"string"==typeof n?n:"number"!=typeof n||w(n)?"":n+"").toLocaleLowerCase()));var n}),{}),E=v?b.label:e.nestedSearchLabel+" "+b.label,N=i.$set(i.forest.nodeMap,u,B());if(i.$set(N,"id",u),i.$set(N,"label",d),i.$set(N,"level",m),i.$set(N,"ancestors",v?[]:[e].concat(e.ancestors)),i.$set(N,"index",(v?[]:e.index).concat(s)),i.$set(N,"parentNode",e),i.$set(N,"lowerCased",b),i.$set(N,"nestedSearchLabel",E),i.$set(N,"isDisabled",S),i.$set(N,"isNew",O),i.$set(N,"isMatched",!1),i.$set(N,"isHighlighted",!1),i.$set(N,"isBranch",g),i.$set(N,"isLeaf",y),i.$set(N,"isRootNode",v),i.$set(N,"raw",c),g){var _,L=Array.isArray(f);i.$set(N,"childrenStates",ie({},{isLoaded:!1,isLoading:!1,loadingError:""},{isLoaded:L})),i.$set(N,"isExpanded","boolean"==typeof p?p:m<i.defaultExpandLevel),i.$set(N,"hasMatchedDescendants",!1),i.$set(N,"hasDisabledDescendants",!1),i.$set(N,"isExpandedOnSearch",!1),i.$set(N,"showAllChildrenOnSearch",!1),i.$set(N,"count",(_={},l()(_,"ALL_CHILDREN",0),l()(_,"ALL_DESCENDANTS",0),l()(_,"LEAF_CHILDREN",0),l()(_,"LEAF_DESCENDANTS",0),_)),i.$set(N,"children",L?i.normalize(N,f,n):[]),!0===p&&N.ancestors.forEach((function(e){e.isExpanded=!0})),L||"function"==typeof i.loadOptions?!L&&N.isExpanded&&i.loadChildrenOptions(N):h((function(){return!1}),(function(){return'Unloaded branch node detected. "loadOptions" prop is required to load its children.'}))}if(N.ancestors.forEach((function(e){return e.count.ALL_DESCENDANTS++})),y&&N.ancestors.forEach((function(e){return e.count.LEAF_DESCENDANTS++})),v||(e.count.ALL_CHILDREN+=1,y&&(e.count.LEAF_CHILDREN+=1),S&&(e.hasDisabledDescendants=!0)),n&&n[u]){var x=n[u];N.isMatched=x.isMatched,N.showAllChildrenOnSearch=x.showAllChildrenOnSearch,N.isHighlighted=x.isHighlighted,x.isBranch&&N.isBranch&&(N.isExpanded=x.isExpanded,N.isExpandedOnSearch=x.isExpandedOnSearch,x.childrenStates.isLoaded&&!N.childrenStates.isLoaded?N.isExpanded=!1:N.childrenStates=ie({},x.childrenStates))}return N}));if(this.branchNodesFirst){var o=s.filter((function(e){return e.isBranch})),a=s.filter((function(e){return e.isLeaf}));s=o.concat(a)}return s},loadRootOptions:function(){var e=this;this.callLoadOptionsProp({action:"LOAD_ROOT_OPTIONS",isPending:function(){return e.rootOptionsStates.isLoading},start:function(){e.rootOptionsStates.isLoading=!0,e.rootOptionsStates.loadingError=""},succeed:function(){e.rootOptionsStates.isLoaded=!0,e.$nextTick((function(){e.resetHighlightedOptionWhenNecessary(!0)}))},fail:function(t){e.rootOptionsStates.loadingError=oe(t)},end:function(){e.rootOptionsStates.isLoading=!1}})},loadChildrenOptions:function(e){var t=this,n=e.id,i=e.raw;this.callLoadOptionsProp({action:"LOAD_CHILDREN_OPTIONS",args:{parentNode:i},isPending:function(){return t.getNode(n).childrenStates.isLoading},start:function(){t.getNode(n).childrenStates.isLoading=!0,t.getNode(n).childrenStates.loadingError=""},succeed:function(){t.getNode(n).childrenStates.isLoaded=!0},fail:function(e){t.getNode(n).childrenStates.loadingError=oe(e)},end:function(){t.getNode(n).childrenStates.isLoading=!1}})},callLoadOptionsProp:function(e){var t=e.action,n=e.args,i=e.isPending,r=e.start,s=e.succeed,o=e.fail,a=e.end;if(this.loadOptions&&!i()){r();var l=M()((function(e,t){e?o(e):s(t),a()})),c=this.loadOptions(ie({id:this.getInstanceId(),instanceId:this.getInstanceId(),action:t},n,{callback:l}));D()(c)&&c.then((function(){l()}),(function(e){l(e)})).catch((function(e){console.error(e)}))}},checkDuplication:function(e){var t=this;h((function(){return!(e.id in t.forest.nodeMap&&!t.forest.nodeMap[e.id].isFallbackNode)}),(function(){return"Detected duplicate presence of node id ".concat(JSON.stringify(e.id),". ")+'Their labels are "'.concat(t.forest.nodeMap[e.id].label,'" and "').concat(e.label,'" respectively.')}))},verifyNodeShape:function(e){h((function(){return!(void 0===e.children&&!0===e.isBranch)}),(function(){return"Are you meant to declare an unloaded branch node? `isBranch: true` is no longer supported, please use `children: null` instead."}))},select:function(e){if(!this.disabled&&!e.isDisabled){this.single&&this.clear();var t=this.multiple&&!this.flat?0===this.forest.checkedStateMap[e.id]:!this.isSelected(e);t?this._selectNode(e):this._deselectNode(e),this.buildForestState(),t?this.$emit("select",e.raw,this.getInstanceId()):this.$emit("deselect",e.raw,this.getInstanceId()),this.localSearch.active&&t&&(this.single||this.clearOnSelect)&&this.resetSearchQuery(),this.single&&this.closeOnSelect&&(this.closeMenu(),this.searchable&&(this._blurOnSelect=!0))}},clear:function(){var e=this;this.hasValue&&(this.single||this.allowClearingDisabled?this.forest.selectedNodeIds=[]:this.forest.selectedNodeIds=this.forest.selectedNodeIds.filter((function(t){return e.getNode(t).isDisabled})),this.buildForestState())},_selectNode:function(e){var t=this;if(this.single||this.disableBranchNodes)return this.addValue(e);if(this.flat)return this.addValue(e),void(this.autoSelectAncestors?e.ancestors.forEach((function(e){t.isSelected(e)||e.isDisabled||t.addValue(e)})):this.autoSelectDescendants&&this.traverseDescendantsBFS(e,(function(e){t.isSelected(e)||e.isDisabled||t.addValue(e)})));var n=e.isLeaf||!e.hasDisabledDescendants||this.allowSelectingDisabledDescendants;if(n&&this.addValue(e),e.isBranch&&this.traverseDescendantsBFS(e,(function(e){e.isDisabled&&!t.allowSelectingDisabledDescendants||t.addValue(e)})),n)for(var i=e;null!==(i=i.parentNode)&&i.children.every(this.isSelected);)this.addValue(i)},_deselectNode:function(e){var t=this;if(this.disableBranchNodes)return this.removeValue(e);if(this.flat)return this.removeValue(e),void(this.autoDeselectAncestors?e.ancestors.forEach((function(e){t.isSelected(e)&&!e.isDisabled&&t.removeValue(e)})):this.autoDeselectDescendants&&this.traverseDescendantsBFS(e,(function(e){t.isSelected(e)&&!e.isDisabled&&t.removeValue(e)})));var n=!1;if(e.isBranch&&this.traverseDescendantsDFS(e,(function(e){e.isDisabled&&!t.allowSelectingDisabledDescendants||(t.removeValue(e),n=!0)})),e.isLeaf||n||0===e.children.length){this.removeValue(e);for(var i=e;null!==(i=i.parentNode)&&this.isSelected(i);)this.removeValue(i)}},addValue:function(e){this.forest.selectedNodeIds.push(e.id),this.forest.selectedNodeMap[e.id]=!0},removeValue:function(e){S(this.forest.selectedNodeIds,e.id),delete this.forest.selectedNodeMap[e.id]},removeLastValue:function(){if(this.hasValue){if(this.single)return this.clear();var e=H()(this.internalValue),t=this.getNode(e);this.select(t)}},saveMenuScrollPosition:function(){var e=this.getMenu();e&&(this.menu.lastScrollPosition=e.scrollTop)},restoreMenuScrollPosition:function(){var e=this.getMenu();e&&(e.scrollTop=this.menu.lastScrollPosition)}},created:function(){this.verifyProps(),this.resetFlags()},mounted:function(){(this.autoFocus||this.autofocus)&&this.focusInput(),this.options||this.async||!this.autoLoadRootOptions||this.loadRootOptions(),this.alwaysOpen&&this.openMenu(),this.async&&this.defaultOptions&&this.handleRemoteSearch()},destroyed:function(){this.toggleClickOutsideEvent(!1)}};function ce(e){return"string"==typeof e?e:null==e||w(e)?"":JSON.stringify(e)}function ue(e,t,n,i,r,s,o,a){var l,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),o?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=l):r&&(l=a?function(){r.call(this,this.$root.$options.shadowRoot)}:r),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(e,t){return l.call(t),u(e,t)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,l):[l]}return{exports:e,options:c}}var de,he,fe,pe=ue({name:"vue-treeselect--hidden-fields",inject:["instance"],functional:!0,render:function(e,t){var n=arguments[0],i=t.injections.instance;if(!i.name||i.disabled||!i.hasValue)return null;var r=i.internalValue.map(ce);return i.multiple&&i.joinValues&&(r=[r.join(i.delimiter)]),r.map((function(e,t){return n("input",{attrs:{type:"hidden",name:i.name},domProps:{value:e},key:"hidden-field-"+t})}))}},void 0,void 0,!1,null,null,null).exports,ve=n(1),me=n.n(ve),ge=[q,X,U,J,G,Z,ee],ye=ue({name:"vue-treeselect--input",inject:["instance"],data:function(){return{inputWidth:5,value:""}},computed:{needAutoSize:function(){var e=this.instance;return e.searchable&&!e.disabled&&e.multiple},inputStyle:function(){return{width:this.needAutoSize?"".concat(this.inputWidth,"px"):null}}},watch:{"instance.trigger.searchQuery":function(e){this.value=e},value:function(){this.needAutoSize&&this.$nextTick(this.updateInputWidth)}},created:function(){this.debouncedCallback=g()(this.updateSearchQuery,200,{leading:!0,trailing:!0})},methods:{clear:function(){this.onInput({target:{value:""}})},focus:function(){this.instance.disabled||this.$refs.input&&this.$refs.input.focus()},blur:function(){this.$refs.input&&this.$refs.input.blur()},onFocus:function(){var e=this.instance;e.trigger.isFocused=!0,e.openOnFocus&&e.openMenu()},onBlur:function(){var e=this.instance,t=e.getMenu();if(t&&document.activeElement===t)return this.focus();e.trigger.isFocused=!1,e.closeMenu()},onInput:function(e){var t=e.target.value;this.value=t,t?this.debouncedCallback():(this.debouncedCallback.cancel(),this.updateSearchQuery())},onKeyDown:function(e){var t=this.instance,n="which"in e?e.which:e.keyCode;if(!(e.ctrlKey||e.shiftKey||e.altKey||e.metaKey)){if(!t.menu.isOpen&&P(ge,n))return e.preventDefault(),t.openMenu();switch(n){case Y:t.backspaceRemoves&&!this.value.length&&t.removeLastValue();break;case q:if(e.preventDefault(),null===t.menu.current)return;var i=t.getNode(t.menu.current);if(i.isBranch&&t.disableBranchNodes)return;t.select(i);break;case K:this.value.length?this.clear():t.menu.isOpen&&t.closeMenu();break;case X:e.preventDefault(),t.highlightLastOption();break;case U:e.preventDefault(),t.highlightFirstOption();break;case J:var r=t.getNode(t.menu.current);r.isBranch&&t.shouldExpand(r)?(e.preventDefault(),t.toggleExpanded(r)):!r.isRootNode&&(r.isLeaf||r.isBranch&&!t.shouldExpand(r))&&(e.preventDefault(),t.setCurrentHighlightedOption(r.parentNode));break;case G:e.preventDefault(),t.highlightPrevOption();break;case Z:var s=t.getNode(t.menu.current);s.isBranch&&!t.shouldExpand(s)&&(e.preventDefault(),t.toggleExpanded(s));break;case ee:e.preventDefault(),t.highlightNextOption();break;case te:t.deleteRemoves&&!this.value.length&&t.removeLastValue();break;default:t.openMenu()}}},onMouseDown:function(e){this.value.length&&e.stopPropagation()},renderInputContainer:function(){var e=this.$createElement,t=this.instance,n={},i=[];return t.searchable&&!t.disabled&&(i.push(this.renderInput()),this.needAutoSize&&i.push(this.renderSizer())),t.searchable||F(n,{on:{focus:this.onFocus,blur:this.onBlur,keydown:this.onKeyDown},ref:"input"}),t.searchable||t.disabled||F(n,{attrs:{tabIndex:t.tabIndex}}),e("div",me()([{class:"vue-treeselect__input-container"},n]),[i])},renderInput:function(){var e=this.$createElement,t=this.instance;return e("input",{ref:"input",class:"vue-treeselect__input",attrs:{type:"text",autocomplete:"off",tabIndex:t.tabIndex,required:t.required&&!t.hasValue},domProps:{value:this.value},style:this.inputStyle,on:{focus:this.onFocus,input:this.onInput,blur:this.onBlur,keydown:this.onKeyDown,mousedown:this.onMouseDown}})},renderSizer:function(){return(0,this.$createElement)("div",{ref:"sizer",class:"vue-treeselect__sizer"},[this.value])},updateInputWidth:function(){this.inputWidth=Math.max(5,this.$refs.sizer.scrollWidth+15)},updateSearchQuery:function(){this.instance.trigger.searchQuery=this.value}},render:function(){return this.renderInputContainer()}},void 0,void 0,!1,null,null,null).exports,Se=ue({name:"vue-treeselect--placeholder",inject:["instance"],render:function(){var e=arguments[0],t=this.instance,n={"vue-treeselect__placeholder":!0,"vue-treeselect-helper-zoom-effect-off":!0,"vue-treeselect-helper-hide":t.hasValue||t.trigger.searchQuery};return e("div",{class:n},[t.placeholder])}},void 0,void 0,!1,null,null,null).exports,Oe=ue({name:"vue-treeselect--single-value",inject:["instance"],methods:{renderSingleValueLabel:function(){var e=this.instance,t=e.selectedNodes[0],n=e.$scopedSlots["value-label"];return n?n({node:t}):t.label}},render:function(){var e=arguments[0],t=this.instance,n=this.$parent.renderValueContainer,i=t.hasValue&&!t.trigger.searchQuery;return n([i&&e("div",{class:"vue-treeselect__single-value"},[this.renderSingleValueLabel()]),e(Se),e(ye,{ref:"input"})])}},void 0,void 0,!1,null,null,null).exports,be=ue({name:"vue-treeselect--x"},(function(){var e=this.$createElement,t=this._self._c||e;return t("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 348.333 348.333"}},[t("path",{attrs:{d:"M336.559 68.611L231.016 174.165l105.543 105.549c15.699 15.705 15.699 41.145 0 56.85-7.844 7.844-18.128 11.769-28.407 11.769-10.296 0-20.581-3.919-28.419-11.769L174.167 231.003 68.609 336.563c-7.843 7.844-18.128 11.769-28.416 11.769-10.285 0-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139 0-56.85l105.54-105.549L11.774 68.611c-15.699-15.699-15.699-41.145 0-56.844 15.696-15.687 41.127-15.687 56.829 0l105.563 105.554L279.721 11.767c15.705-15.687 41.139-15.687 56.832 0 15.705 15.699 15.705 41.145.006 56.844z"}})])}),[],!1,null,null,null).exports,Ee=ue({name:"vue-treeselect--multi-value-item",inject:["instance"],props:{node:{type:Object,required:!0}},methods:{handleMouseDown:f((function(){var e=this.instance,t=this.node;e.select(t)}))},render:function(){var e=arguments[0],t=this.instance,n=this.node,i={"vue-treeselect__multi-value-item":!0,"vue-treeselect__multi-value-item-disabled":n.isDisabled,"vue-treeselect__multi-value-item-new":n.isNew},r=t.$scopedSlots["value-label"],s=r?r({node:n}):n.label;return e("div",{class:"vue-treeselect__multi-value-item-container"},[e("div",{class:i,on:{mousedown:this.handleMouseDown}},[e("span",{class:"vue-treeselect__multi-value-label"},[s]),e("span",{class:"vue-treeselect__icon vue-treeselect__value-remove"},[e(be)])])])}},void 0,void 0,!1,null,null,null).exports,Ne=ue({name:"vue-treeselect--multi-value",inject:["instance"],methods:{renderMultiValueItems:function(){var e=this.$createElement,t=this.instance;return t.internalValue.slice(0,t.limit).map(t.getNode).map((function(t){return e(Ee,{key:"multi-value-item-".concat(t.id),attrs:{node:t}})}))},renderExceedLimitTip:function(){var e=this.$createElement,t=this.instance,n=t.internalValue.length-t.limit;return n<=0?null:e("div",{class:"vue-treeselect__limit-tip vue-treeselect-helper-zoom-effect-off",key:"exceed-limit-tip"},[e("span",{class:"vue-treeselect__limit-tip-text"},[t.limitText(n)])])}},render:function(){var e=arguments[0],t=this.$parent.renderValueContainer,n={props:{tag:"div",name:"vue-treeselect__multi-value-item--transition",appear:!0}};return t(e("transition-group",me()([{class:"vue-treeselect__multi-value"},n]),[this.renderMultiValueItems(),this.renderExceedLimitTip(),e(Se,{key:"placeholder"}),e(ye,{ref:"input",key:"input"})]))}},void 0,void 0,!1,null,null,null).exports,_e=ue({name:"vue-treeselect--arrow"},(function(){var e=this.$createElement,t=this._self._c||e;return t("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 292.362 292.362"}},[t("path",{attrs:{d:"M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z"}})])}),[],!1,null,null,null).exports,Le=ue({name:"vue-treeselect--control",inject:["instance"],computed:{shouldShowX:function(){var e=this.instance;return e.clearable&&!e.disabled&&e.hasValue&&(this.hasUndisabledValue||e.allowClearingDisabled)},shouldShowArrow:function(){var e=this.instance;return!e.alwaysOpen||!e.menu.isOpen},hasUndisabledValue:function(){var e=this.instance;return e.hasValue&&e.internalValue.some((function(t){return!e.getNode(t).isDisabled}))}},methods:{renderX:function(){var e=this.$createElement,t=this.instance,n=t.multiple?t.clearAllText:t.clearValueText;return this.shouldShowX?e("div",{class:"vue-treeselect__x-container",attrs:{title:n},on:{mousedown:this.handleMouseDownOnX}},[e(be,{class:"vue-treeselect__x"})]):null},renderArrow:function(){var e=this.$createElement,t={"vue-treeselect__control-arrow":!0,"vue-treeselect__control-arrow--rotated":this.instance.menu.isOpen};return this.shouldShowArrow?e("div",{class:"vue-treeselect__control-arrow-container",on:{mousedown:this.handleMouseDownOnArrow}},[e(_e,{class:t})]):null},handleMouseDownOnX:f((function(e){e.stopPropagation(),e.preventDefault();var t=this.instance,n=t.beforeClearAll(),i=function(e){e&&t.clear()};D()(n)?n.then(i):setTimeout((function(){return i(n)}),0)})),handleMouseDownOnArrow:f((function(e){e.preventDefault(),e.stopPropagation();var t=this.instance;t.focusInput(),t.toggleMenu()})),renderValueContainer:function(e){return(0,this.$createElement)("div",{class:"vue-treeselect__value-container"},[e])}},render:function(){var e=arguments[0],t=this.instance,n=t.single?Oe:Ne;return e("div",{class:"vue-treeselect__control",on:{mousedown:t.handleMouseDown}},[e(n,{ref:"value-container"}),this.renderX(),this.renderArrow()])}},void 0,void 0,!1,null,null,null).exports,xe=ue({name:"vue-treeselect--tip",functional:!0,props:{type:{type:String,required:!0},icon:{type:String,required:!0}},render:function(e,t){var n=arguments[0],i=t.props,r=t.children;return n("div",{class:"vue-treeselect__tip vue-treeselect__".concat(i.type,"-tip")},[n("div",{class:"vue-treeselect__icon-container"},[n("span",{class:"vue-treeselect__icon-".concat(i.icon)})]),n("span",{class:"vue-treeselect__tip-text vue-treeselect__".concat(i.type,"-tip-text")},[r])])}},void 0,void 0,!1,null,null,null).exports,we={name:"vue-treeselect--option",inject:["instance"],props:{node:{type:Object,required:!0}},computed:{shouldExpand:function(){var e=this.instance,t=this.node;return t.isBranch&&e.shouldExpand(t)},shouldShow:function(){var e=this.instance,t=this.node;return e.shouldShowOptionInMenu(t)}},methods:{renderOption:function(){var e=this.$createElement,t=this.instance,n=this.node;return e("div",{class:{"vue-treeselect__option":!0,"vue-treeselect__option--disabled":n.isDisabled,"vue-treeselect__option--selected":t.isSelected(n),"vue-treeselect__option--highlight":n.isHighlighted,"vue-treeselect__option--matched":t.localSearch.active&&n.isMatched,"vue-treeselect__option--hide":!this.shouldShow},on:{mouseenter:this.handleMouseEnterOption},attrs:{"data-id":n.id}},[this.renderArrow(),this.renderLabelContainer([this.renderCheckboxContainer([this.renderCheckbox()]),this.renderLabel()])])},renderSubOptionsList:function(){var e=this.$createElement;return this.shouldExpand?e("div",{class:"vue-treeselect__list"},[this.renderSubOptions(),this.renderNoChildrenTip(),this.renderLoadingChildrenTip(),this.renderLoadingChildrenErrorTip()]):null},renderArrow:function(){var e=this.$createElement,t=this.instance,n=this.node;if(t.shouldFlattenOptions&&this.shouldShow)return null;if(n.isBranch){var i={"vue-treeselect__option-arrow":!0,"vue-treeselect__option-arrow--rotated":this.shouldExpand};return e("div",{class:"vue-treeselect__option-arrow-container",on:{mousedown:this.handleMouseDownOnArrow}},[e("transition",{props:{name:"vue-treeselect__option-arrow--prepare",appear:!0}},[e(_e,{class:i})])])}return t.hasBranchNodes?(de||(de=e("div",{class:"vue-treeselect__option-arrow-placeholder"},[" "])),de):null},renderLabelContainer:function(e){return(0,this.$createElement)("div",{class:"vue-treeselect__label-container",on:{mousedown:this.handleMouseDownOnLabelContainer}},[e])},renderCheckboxContainer:function(e){var t=this.$createElement,n=this.instance,i=this.node;return n.single?null:n.disableBranchNodes&&i.isBranch?null:t("div",{class:"vue-treeselect__checkbox-container"},[e])},renderCheckbox:function(){var e=this.$createElement,t=this.instance,n=this.node,i=t.forest.checkedStateMap[n.id],r={"vue-treeselect__checkbox":!0,"vue-treeselect__checkbox--checked":2===i,"vue-treeselect__checkbox--indeterminate":1===i,"vue-treeselect__checkbox--unchecked":0===i,"vue-treeselect__checkbox--disabled":n.isDisabled};return he||(he=e("span",{class:"vue-treeselect__check-mark"})),fe||(fe=e("span",{class:"vue-treeselect__minus-mark"})),e("span",{class:r},[he,fe])},renderLabel:function(){var e=this.$createElement,t=this.instance,n=this.node,i=n.isBranch&&(t.localSearch.active?t.showCountOnSearchComputed:t.showCount),r=i?t.localSearch.active?t.localSearch.countMap[n.id][t.showCountOf]:n.count[t.showCountOf]:NaN,s=t.$scopedSlots["option-label"];return s?s({node:n,shouldShowCount:i,count:r,labelClassName:"vue-treeselect__label",countClassName:"vue-treeselect__count"}):e("label",{class:"vue-treeselect__label"},[n.label,i&&e("span",{class:"vue-treeselect__count"},["(",r,")"])])},renderSubOptions:function(){var e=this.$createElement,t=this.node;return t.childrenStates.isLoaded?t.children.map((function(t){return e(we,{attrs:{node:t},key:t.id})})):null},renderNoChildrenTip:function(){var e=this.$createElement,t=this.instance,n=this.node;return!n.childrenStates.isLoaded||n.children.length?null:e(xe,{attrs:{type:"no-children",icon:"warning"}},[t.noChildrenText])},renderLoadingChildrenTip:function(){var e=this.$createElement,t=this.instance;return this.node.childrenStates.isLoading?e(xe,{attrs:{type:"loading",icon:"loader"}},[t.loadingText]):null},renderLoadingChildrenErrorTip:function(){var e=this.$createElement,t=this.instance,n=this.node;return n.childrenStates.loadingError?e(xe,{attrs:{type:"error",icon:"error"}},[n.childrenStates.loadingError,e("a",{class:"vue-treeselect__retry",attrs:{title:t.retryTitle},on:{mousedown:this.handleMouseDownOnRetry}},[t.retryText])]):null},handleMouseEnterOption:function(e){var t=this.instance,n=this.node;e.target===e.currentTarget&&t.setCurrentHighlightedOption(n,!1)},handleMouseDownOnArrow:f((function(){var e=this.instance,t=this.node;e.toggleExpanded(t)})),handleMouseDownOnLabelContainer:f((function(){var e=this.instance,t=this.node;t.isBranch&&e.disableBranchNodes?e.toggleExpanded(t):e.select(t)})),handleMouseDownOnRetry:f((function(){var e=this.instance,t=this.node;e.loadChildrenOptions(t)}))},render:function(){var e=arguments[0],t=this.node,n=this.instance.shouldFlattenOptions?0:t.level,i=l()({"vue-treeselect__list-item":!0},"vue-treeselect__indent-level-".concat(n),!0),r={props:{name:"vue-treeselect__list--transition"}};return e("div",{class:i},[this.renderOption(),e("transition",r,[this.renderSubOptionsList()])])}},Ce=ue(we,void 0,void 0,!1,null,null,null).exports,De={top:"top",bottom:"bottom",above:"top",below:"bottom"},Ie=ue({name:"vue-treeselect--menu",inject:["instance"],computed:{menuStyle:function(){return{maxHeight:this.instance.maxHeight+"px"}},menuContainerStyle:function(){var e=this.instance;return{zIndex:e.appendToBody?null:e.zIndex}}},watch:{"instance.menu.isOpen":function(e){e?this.$nextTick(this.onMenuOpen):this.onMenuClose()}},created:function(){this.menuSizeWatcher=null,this.menuResizeAndScrollEventListeners=null},mounted:function(){this.instance.menu.isOpen&&this.$nextTick(this.onMenuOpen)},destroyed:function(){this.onMenuClose()},methods:{renderMenu:function(){var e=this.$createElement,t=this.instance;return t.menu.isOpen?e("div",{ref:"menu",class:"vue-treeselect__menu",on:{mousedown:t.handleMouseDown},style:this.menuStyle},[t.async?this.renderAsyncSearchMenuInner():t.localSearch.active?this.renderLocalSearchMenuInner():this.renderNormalMenuInner()]):null},renderNormalMenuInner:function(){var e=this.instance;return e.rootOptionsStates.isLoading?this.renderLoadingOptionsTip():e.rootOptionsStates.loadingError?this.renderLoadingRootOptionsErrorTip():e.rootOptionsStates.isLoaded&&0===e.forest.normalizedOptions.length?this.renderNoAvailableOptionsTip():this.renderOptionList()},renderLocalSearchMenuInner:function(){var e=this.instance;return e.rootOptionsStates.isLoading?this.renderLoadingOptionsTip():e.rootOptionsStates.loadingError?this.renderLoadingRootOptionsErrorTip():e.rootOptionsStates.isLoaded&&0===e.forest.normalizedOptions.length?this.renderNoAvailableOptionsTip():e.localSearch.noResults?this.renderNoResultsTip():this.renderOptionList()},renderAsyncSearchMenuInner:function(){var e=this.instance,t=e.getRemoteSearchEntry(),n=""===e.trigger.searchQuery&&!e.defaultOptions,i=!n&&(t.isLoaded&&0===t.options.length);return n?this.renderSearchPromptTip():t.isLoading?this.renderLoadingOptionsTip():t.loadingError?this.renderAsyncSearchLoadingErrorTip():i?this.renderNoResultsTip():this.renderOptionList()},renderOptionList:function(){var e=this.$createElement,t=this.instance;return e("div",{class:"vue-treeselect__list"},[t.forest.normalizedOptions.map((function(t){return e(Ce,{attrs:{node:t},key:t.id})}))])},renderSearchPromptTip:function(){var e=this.$createElement,t=this.instance;return e(xe,{attrs:{type:"search-prompt",icon:"warning"}},[t.searchPromptText])},renderLoadingOptionsTip:function(){var e=this.$createElement,t=this.instance;return e(xe,{attrs:{type:"loading",icon:"loader"}},[t.loadingText])},renderLoadingRootOptionsErrorTip:function(){var e=this.$createElement,t=this.instance;return e(xe,{attrs:{type:"error",icon:"error"}},[t.rootOptionsStates.loadingError,e("a",{class:"vue-treeselect__retry",on:{click:t.loadRootOptions},attrs:{title:t.retryTitle}},[t.retryText])])},renderAsyncSearchLoadingErrorTip:function(){var e=this.$createElement,t=this.instance,n=t.getRemoteSearchEntry();return e(xe,{attrs:{type:"error",icon:"error"}},[n.loadingError,e("a",{class:"vue-treeselect__retry",on:{click:t.handleRemoteSearch},attrs:{title:t.retryTitle}},[t.retryText])])},renderNoAvailableOptionsTip:function(){var e=this.$createElement,t=this.instance;return e(xe,{attrs:{type:"no-options",icon:"warning"}},[t.noOptionsText])},renderNoResultsTip:function(){var e=this.$createElement,t=this.instance;return e(xe,{attrs:{type:"no-results",icon:"warning"}},[t.noResultsText])},onMenuOpen:function(){this.adjustMenuOpenDirection(),this.setupMenuSizeWatcher(),this.setupMenuResizeAndScrollEventListeners()},onMenuClose:function(){this.removeMenuSizeWatcher(),this.removeMenuResizeAndScrollEventListeners()},adjustMenuOpenDirection:function(){var e=this.instance;if(e.menu.isOpen){var t=e.getMenu(),n=e.getControl(),i=t.getBoundingClientRect(),r=n.getBoundingClientRect(),s=i.height,o=window.innerHeight,a=r.top,l=window.innerHeight-r.bottom>s+40,c=a>s+40;r.top>=0&&r.top<=o||r.top<0&&r.bottom>0?"auto"!==e.openDirection?e.menu.placement=De[e.openDirection]:e.menu.placement=l||!c?"bottom":"top":e.closeMenu()}},setupMenuSizeWatcher:function(){var e=this.instance.getMenu();this.menuSizeWatcher||(this.menuSizeWatcher={remove:_(e,this.adjustMenuOpenDirection)})},setupMenuResizeAndScrollEventListeners:function(){var e=this.instance.getControl();this.menuResizeAndScrollEventListeners||(this.menuResizeAndScrollEventListeners={remove:x(e,this.adjustMenuOpenDirection)})},removeMenuSizeWatcher:function(){this.menuSizeWatcher&&(this.menuSizeWatcher.remove(),this.menuSizeWatcher=null)},removeMenuResizeAndScrollEventListeners:function(){this.menuResizeAndScrollEventListeners&&(this.menuResizeAndScrollEventListeners.remove(),this.menuResizeAndScrollEventListeners=null)}},render:function(){var e=arguments[0];return e("div",{ref:"menu-container",class:"vue-treeselect__menu-container",style:this.menuContainerStyle},[e("transition",{attrs:{name:"vue-treeselect__menu--transition"}},[this.renderMenu()])])}},void 0,void 0,!1,null,null,null).exports,Me=n(17),Ae=n.n(Me);function Te(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}var Re,$e={name:"vue-treeselect--portal-target",inject:["instance"],watch:{"instance.menu.isOpen":function(e){e?this.setupHandlers():this.removeHandlers()},"instance.menu.placement":function(){this.updateMenuContainerOffset()}},created:function(){this.controlResizeAndScrollEventListeners=null,this.controlSizeWatcher=null},mounted:function(){this.instance.menu.isOpen&&this.setupHandlers()},methods:{setupHandlers:function(){this.updateWidth(),this.updateMenuContainerOffset(),this.setupControlResizeAndScrollEventListeners(),this.setupControlSizeWatcher()},removeHandlers:function(){this.removeControlResizeAndScrollEventListeners(),this.removeControlSizeWatcher()},setupControlResizeAndScrollEventListeners:function(){var e=this.instance.getControl();this.controlResizeAndScrollEventListeners||(this.controlResizeAndScrollEventListeners={remove:x(e,this.updateMenuContainerOffset)})},setupControlSizeWatcher:function(){var e=this,t=this.instance.getControl();this.controlSizeWatcher||(this.controlSizeWatcher={remove:_(t,(function(){e.updateWidth(),e.updateMenuContainerOffset()}))})},removeControlResizeAndScrollEventListeners:function(){this.controlResizeAndScrollEventListeners&&(this.controlResizeAndScrollEventListeners.remove(),this.controlResizeAndScrollEventListeners=null)},removeControlSizeWatcher:function(){this.controlSizeWatcher&&(this.controlSizeWatcher.remove(),this.controlSizeWatcher=null)},updateWidth:function(){var e=this.instance,t=this.$el,n=e.getControl().getBoundingClientRect();t.style.width=n.width+"px"},updateMenuContainerOffset:function(){var e=this.instance,t=e.getControl(),n=this.$el,i=t.getBoundingClientRect(),r=n.getBoundingClientRect(),s="bottom"===e.menu.placement?i.height:0,o=Math.round(i.left-r.left)+"px",a=Math.round(i.top-r.top+s)+"px";this.$refs.menu.$refs["menu-container"].style[W(["transform","webkitTransform","MozTransform","msTransform"],(function(e){return e in document.body.style}))]="translate(".concat(o,", ").concat(a,")")}},render:function(){var e=arguments[0],t=this.instance,n=["vue-treeselect__portal-target",t.wrapperClass],i={zIndex:t.zIndex};return e("div",{class:n,style:i,attrs:{"data-instance-id":t.getInstanceId()}},[e(Ie,{ref:"menu"})])},destroyed:function(){this.removeHandlers()}},Be=ue({name:"vue-treeselect--menu-portal",created:function(){this.portalTarget=null},mounted:function(){this.setup()},destroyed:function(){this.teardown()},methods:{setup:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalTarget=new Ae.a(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Te(n,!0).forEach((function(t){l()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Te(n).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({el:e,parent:this},$e))},teardown:function(){document.body.removeChild(this.portalTarget.$el),this.portalTarget.$el.innerHTML="",this.portalTarget.$destroy(),this.portalTarget=null}},render:function(){var e=arguments[0];return Re||(Re=e("div",{class:"vue-treeselect__menu-placeholder"})),Re}},void 0,void 0,!1,null,null,null).exports,ze=ue({name:"vue-treeselect",mixins:[le],computed:{wrapperClass:function(){return{"vue-treeselect":!0,"vue-treeselect--single":this.single,"vue-treeselect--multi":this.multiple,"vue-treeselect--searchable":this.searchable,"vue-treeselect--disabled":this.disabled,"vue-treeselect--focused":this.trigger.isFocused,"vue-treeselect--has-value":this.hasValue,"vue-treeselect--open":this.menu.isOpen,"vue-treeselect--open-above":"top"===this.menu.placement,"vue-treeselect--open-below":"bottom"===this.menu.placement,"vue-treeselect--branch-nodes-disabled":this.disableBranchNodes,"vue-treeselect--append-to-body":this.appendToBody}}},render:function(){var e=arguments[0];return e("div",{ref:"wrapper",class:this.wrapperClass},[e(pe),e(Le,{ref:"control"}),this.appendToBody?e(Be,{ref:"portal"}):e(Ie,{ref:"menu"})])}},void 0,void 0,!1,null,null,null).exports;n(35);n.d(t,"__esModule",(function(){return Ve})),n.d(t,"VERSION",(function(){return ke})),n.d(t,"Treeselect",(function(){return ze})),n.d(t,"treeselectMixin",(function(){return le})),n.d(t,"LOAD_ROOT_OPTIONS",(function(){return"LOAD_ROOT_OPTIONS"})),n.d(t,"LOAD_CHILDREN_OPTIONS",(function(){return"LOAD_CHILDREN_OPTIONS"})),n.d(t,"ASYNC_SEARCH",(function(){return"ASYNC_SEARCH"}));t.default=ze;var Ve=!0,ke="0.1.0"})])}));
\ No newline at end of file

From 7049b7d401c880a9457f487cb0fbaf46fdf6d91c Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 14:37:48 +0800
Subject: [PATCH 049/138] Move to only vue3 essentials and make them warnings
 instead of errors.

---
 boranga/frontend/boranga/eslint.config.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/eslint.config.mjs b/boranga/frontend/boranga/eslint.config.mjs
index 7e1613a1..54a888c8 100644
--- a/boranga/frontend/boranga/eslint.config.mjs
+++ b/boranga/frontend/boranga/eslint.config.mjs
@@ -20,7 +20,7 @@ const projectGlobals = {
 export default [
     jsLint.configs.recommended,
     pluginPrettierRecommended,
-    ...pluginVue.configs['flat/recommended'],
+    ...pluginVue.configs['flat/essential'],
     eslintConfigPrettier,
     {
         ignores: ['.venv/', '.env/', '.env', 'node_modules/'],
@@ -51,6 +51,7 @@ export default [
         },
         rules: {
             'prettier/prettier': 'error',
+            'vue/*': 'warn',
             'no-redeclare': 'warn',
             'no-unused-vars': 'warn',
         },

From 7c04b5ad3b5f1560c670b0645bc8b318e413bf13 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 17:03:50 +0800
Subject: [PATCH 050/138] Disable formatter on save as eslint/prettier will
 format via codeActionsOnSave.

---
 .vscode/settings.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 76df8658..5ed4eed9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,4 @@
 {
-    "editor.formatOnSaveMode": "file",
     "eslint.debug": true,
     "eslint.enable": true,
     "eslint.format.enable": true,

From e1b44289f8d31d9efb24c41e7bbf883f5f38dfac Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 17:04:36 +0800
Subject: [PATCH 051/138] Comment out vue plugin for now as don't have the time
 to resolve all issues (there are so many).

---
 boranga/frontend/boranga/eslint.config.mjs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/boranga/frontend/boranga/eslint.config.mjs b/boranga/frontend/boranga/eslint.config.mjs
index 54a888c8..3f8c6840 100644
--- a/boranga/frontend/boranga/eslint.config.mjs
+++ b/boranga/frontend/boranga/eslint.config.mjs
@@ -1,6 +1,6 @@
 import globals from 'globals';
 import jsLint from '@eslint/js';
-import pluginVue from 'eslint-plugin-vue';
+// import pluginVue from 'eslint-plugin-vue';
 import vueEslintParser from 'vue-eslint-parser';
 import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import eslintConfigPrettier from 'eslint-config-prettier';
@@ -20,7 +20,7 @@ const projectGlobals = {
 export default [
     jsLint.configs.recommended,
     pluginPrettierRecommended,
-    ...pluginVue.configs['flat/essential'],
+    // ...pluginVue.configs['flat/essential'],
     eslintConfigPrettier,
     {
         ignores: ['.venv/', '.env/', '.env', 'node_modules/'],
@@ -37,7 +37,7 @@ export default [
     {
         files: ['src/**/*.vue'],
         plugins: {
-            vue: pluginVue,
+            // vue: pluginVue,
         },
         languageOptions: {
             sourceType: 'module',
@@ -51,7 +51,6 @@ export default [
         },
         rules: {
             'prettier/prettier': 'error',
-            'vue/*': 'warn',
             'no-redeclare': 'warn',
             'no-unused-vars': 'warn',
         },

From c088b104d96a67cdffcea5aeccce97e0caaf72c5 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 17:04:55 +0800
Subject: [PATCH 052/138] Remove debug from lint command.

---
 boranga/frontend/boranga/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index e265b4a7..4a2a7876 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -6,7 +6,7 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "lint": "eslint -c eslint.config.mjs . --debug",
+        "lint": "eslint -c eslint.config.mjs .",
         "dev": "vite",
         "build": "vite build",
         "serve": "vite preview"

From 199bc44e18a546d52b7888ada59a03341aefbb19 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 17:05:09 +0800
Subject: [PATCH 053/138] Remove empty unused file.

---
 boranga/frontend/boranga/src/components/user/routes.js | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100755 boranga/frontend/boranga/src/components/user/routes.js

diff --git a/boranga/frontend/boranga/src/components/user/routes.js b/boranga/frontend/boranga/src/components/user/routes.js
deleted file mode 100755
index 54d2524f..00000000
--- a/boranga/frontend/boranga/src/components/user/routes.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default = [
-    
-]

From 79d81f0d54ef4d4e22523394442aa7f32da50532 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 17:05:58 +0800
Subject: [PATCH 054/138] Resolve eslint errors and warnings.

---
 .../src/components/common/add_comm_log.vue    |    4 +-
 .../src/components/common/add_contact.vue     |    7 +-
 .../src/components/common/add_document.vue    |   11 +-
 .../src/components/common/comms_logs.vue      |   38 +-
 .../common/communities_dashboard.vue          |   24 +-
 .../conservation_status/community_status.vue  |   14 +-
 .../conservation_status/cs_documents.vue      |   11 +-
 .../conservation_status/cs_more_referrals.vue |   12 +-
 .../conservation_status/species_status.vue    |   13 +-
 ...onservation_status_community_dashboard.vue |   32 +-
 .../conservation_status_fauna_dashboard.vue   |   62 +-
 .../conservation_status_flora_dashboard.vue   |   61 +-
 .../cs_community_referrals_dashboard.vue      |   19 +-
 .../cs_external_referrals_dashboard.vue       |   19 +-
 .../common/cs_fauna_referrals_dashboard.vue   |   49 +-
 .../common/cs_flora_referrals_dashboard.vue   |   43 +-
 .../common/invite_external_referee.vue        |    2 +-
 .../common/occurrence/add_contact_detail.vue  |    5 +-
 .../common/occurrence/add_observer_detail.vue |    4 +-
 .../common/occurrence/animal_observation.vue  |  503 ++++---
 .../occurrence/community_occurrence.vue       |   10 +-
 .../common/occurrence/contact_datatable.vue   |   17 +-
 .../common/occurrence/observer_datatable.vue  |   16 +-
 .../common/occurrence/occ_documents.vue       |   11 +-
 .../common/occurrence/occ_habitat.vue         |  778 ++++++----
 .../common/occurrence/occ_locations.vue       |   85 +-
 .../common/occurrence/occ_observation.vue     |    2 +
 .../occurrence/occ_ocr_existing_threats.vue   |    5 +-
 .../occurrence/occ_related_ocr_table.vue      |    3 +-
 .../occurrence/occ_related_species_table.vue  |   13 +-
 .../common/occurrence/occ_section_modal.vue   |    2 +-
 .../common/occurrence/occ_threats.vue         |   12 +-
 .../occurrence/occurrence_report_profile.vue  |  194 ++-
 .../common/occurrence/ocr_documents.vue       |   11 +-
 .../common/occurrence/ocr_habitat.vue         |   12 +-
 .../common/occurrence/ocr_location.vue        |   97 +-
 .../common/occurrence/ocr_more_referrals.vue  |   12 +-
 .../common/occurrence/ocr_observation.vue     |    4 +-
 .../occurrence/ocr_related_species_table.vue  |   13 +-
 .../common/occurrence/ocr_section_modal.vue   |    2 +-
 .../common/occurrence/ocr_threats.vue         |   14 +-
 .../common/occurrence/plant_count.vue         |  525 +++++--
 .../common/occurrence/species_occurrence.vue  |   13 +-
 .../common/occurrence_community_dashboard.vue |   24 +-
 .../common/occurrence_fauna_dashboard.vue     |   24 +-
 .../common/occurrence_flora_dashboard.vue     |   24 +-
 .../occurrence_report_community_dashboard.vue |   25 +-
 .../occurrence_report_fauna_dashboard.vue     |   25 +-
 .../occurrence_report_flora_dashboard.vue     |   23 +-
 .../ocr_external_referrals_dashboard.vue      |   19 +-
 .../common/ocr_referrals_dashboard.vue        |   28 +-
 .../common/species_communities/add_threat.vue |   89 +-
 .../community_documents.vue                   |   11 +-
 .../community_occ_threats.vue                 |    3 +-
 .../species_communities/community_profile.vue |   17 +-
 .../species_communities/community_threats.vue |   12 +-
 .../species_communities/related_items.vue     |   18 -
 .../species_combine/add_combine_species.vue   |   10 +-
 .../species_combine_documents.vue             |    4 +-
 .../species_combine_profile.vue               |   10 +-
 .../species_combine_threats.vue               |    4 +-
 .../species_communities/species_documents.vue |   11 +-
 .../species_occ_threats.vue                   |    3 +-
 .../species_communities/species_profile.vue   |   13 +-
 .../species_split/species_split_documents.vue |  480 +++---
 .../species_split/species_split_profile.vue   |   18 +-
 .../species_split/species_split_threats.vue   |    4 +-
 .../species_communities/species_threats.vue   |   12 +-
 .../common/species_fauna_dashboard.vue        |   54 +-
 .../common/species_flora_dashboard.vue        |   54 +-
 .../components/common/table_related_items.vue |    2 +-
 .../conservation_status_proposal.vue          |   19 +-
 .../conservation_status_proposal_submit.vue   |    1 -
 .../conservation_status_proposal_table.vue    |   34 +-
 .../occurrence/occurrence_report_proposal.vue |   32 +-
 .../occurrence/occurrence_report_table.vue    |   27 +-
 .../occurrence/ocr_proposal_submit.vue        |    3 +-
 .../species_communities/dashboard.vue         |    2 +-
 .../species_communities.vue                   |    3 -
 .../components/form_conservation_status.vue   |    6 +-
 .../src/components/form_occurrence_report.vue |    2 +-
 .../src/components/form_species_combine.vue   |    6 +-
 .../components/form_species_communities.vue   |    2 +-
 .../src/components/form_species_split.vue     |   83 +-
 .../boranga/src/components/forms/Form.vue     |   52 -
 .../forms/collapsible_component.vue           |    2 +-
 .../forms/comment_icon_checkbox_radio.vue     |    1 -
 .../src/components/forms/conditions.vue       |   37 -
 .../src/components/forms/declarations.vue     |    2 -
 .../src/components/forms/filefield.vue        |    9 +-
 .../boranga/src/components/forms/group.vue    |    5 +-
 .../src/components/forms/section_toggle.vue   |    1 +
 .../components/forms/select-conditions.vue    |   39 -
 .../boranga/src/components/forms/select.vue   |    3 +-
 .../boranga/src/components/forms/table.vue    |    6 +-
 .../src/components/forms/text-area.vue        |    1 -
 .../boranga/src/components/forms/text.vue     |    1 -
 .../conservation_status/amendment_request.vue |    4 +-
 .../community_conservation_status_history.vue |    4 +-
 .../conservation_status.vue                   |   39 +-
 .../cs_document_history.vue                   |    4 +-
 .../conservation_status/dashboard.vue         |    1 +
 .../proposal_propose_delist.vue               |   11 -
 .../propose_for_agenda.vue                    |    2 +-
 .../conservation_status/proposed_issuance.vue |    3 +-
 .../conservation_status/ready_for_agenda.vue  |    2 +-
 .../internal/conservation_status/referral.vue |    6 +-
 .../species_conservation_status_history.vue   |    4 +-
 .../internal/meetings/agenda_datatable.vue    |    2 +-
 .../components/internal/meetings/cs_queue.vue |   12 +-
 .../components/internal/meetings/meeting.vue  |   27 +-
 .../internal/meetings/meeting_section.vue     |    2 +-
 .../internal/meetings/meetings_datatable.vue  |    7 +-
 .../components/internal/meetings/minutes.vue  |    7 +-
 .../internal/meetings/minutes_history.vue     |    4 +-
 .../internal/occurrence/add_site.vue          |    9 +-
 .../internal/occurrence/amendment_request.vue |    4 +-
 .../internal/occurrence/back_to_assessor.vue  |    5 +-
 .../occurrence/bulk_import_schema.vue         |  925 ++++++++----
 .../community_occurrence_history.vue          |    4 +-
 .../community_occurrence_report_history.vue   |    4 +-
 .../internal/occurrence/dashboard.vue         |    1 +
 .../occ_conservation_threat_history.vue       |    4 +-
 .../occurrence/occ_contact_detail_history.vue |    4 +-
 .../occurrence/occ_document_history.vue       |    4 +-
 .../internal/occurrence/occ_site_history.vue  |    4 +-
 .../occurrence/occ_tenure_history.vue         |    4 +-
 .../internal/occurrence/occurrence.vue        |   40 +-
 .../occurrence/occurrence_combine.vue         |    8 +-
 .../occurrence_combine_contacts.vue           |    4 +-
 .../occurrence_combine_documents.vue          |    8 +-
 .../occurrence_combine_selection.vue          |    4 +-
 .../occurrence/occurrence_combine_sites.vue   |   11 +-
 .../occurrence/occurrence_combine_tenures.vue |    4 +-
 .../occurrence/occurrence_combine_threats.vue |    8 +-
 .../internal/occurrence/occurrence_report.vue | 1329 ++++++++++-------
 .../occurrence/occurrence_site_datatable.vue  |   16 +-
 .../occurrence_tenure_datatable.vue           |    2 +-
 .../internal/occurrence/ocr_approve.vue       |    6 +-
 .../ocr_conservation_threat_history.vue       |    4 +-
 .../internal/occurrence/ocr_decline.vue       |    3 +-
 .../occurrence/ocr_document_history.vue       |    4 +-
 .../ocr_observer_detail_history.vue           |    4 +-
 .../occurrence/ocr_propose_approve.vue        |    8 +-
 .../occurrence/ocr_propose_decline.vue        |    5 +-
 .../internal/occurrence/referral.vue          |    8 +-
 .../occurrence/species_occurrence_history.vue |    4 +-
 .../species_occurrence_report_history.vue     |    4 +-
 .../species_communities/amendment_request.vue |   10 +-
 .../community_document_history.vue            |    4 +-
 .../species_communities/community_history.vue |    4 +-
 .../species_communities/community_rename.vue  |  130 +-
 .../conservation_threat_history.vue           |    4 +-
 .../species_communities/dashboard.vue         |    1 +
 .../species_communities/make_public.vue       |    4 +-
 .../species_communities/species_combine.vue   |    8 +-
 .../species_communities.vue                   |   45 +-
 .../species_document_history.vue              |    4 +-
 .../species_communities/species_history.vue   |    4 +-
 .../species_communities/species_rename.vue    |    8 +-
 .../species_communities/species_split.vue     |    6 +-
 .../src/components/internal/users/manage.vue  |   17 +-
 .../src/utils/responsive_datatable_helper.js  |   11 +-
 .../boranga/src/utils/vue/datatable.vue       |    8 +-
 164 files changed, 4006 insertions(+), 3043 deletions(-)
 delete mode 100755 boranga/frontend/boranga/src/components/forms/Form.vue
 delete mode 100755 boranga/frontend/boranga/src/components/forms/conditions.vue
 delete mode 100755 boranga/frontend/boranga/src/components/forms/select-conditions.vue

diff --git a/boranga/frontend/boranga/src/components/common/add_comm_log.vue b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
index 5941461e..34cf2a48 100755
--- a/boranga/frontend/boranga/src/components/common/add_comm_log.vue
+++ b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
@@ -236,7 +236,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -291,7 +290,6 @@ export default {
             }
         },
         uploadFile(target, file_obj) {
-            let vm = this;
             let _file = null;
             var input = $('.' + target)[0];
             if (input.files && input.files[0]) {
@@ -347,7 +345,7 @@ export default {
                 body: comms,
                 'Content-Type': 'application/json',
             }).then(
-                (response) => {
+                () => {
                     vm.addingComms = false;
                     vm.close();
                 },
diff --git a/boranga/frontend/boranga/src/components/common/add_contact.vue b/boranga/frontend/boranga/src/components/common/add_contact.vue
index bb44881a..69c88fe8 100755
--- a/boranga/frontend/boranga/src/components/common/add_contact.vue
+++ b/boranga/frontend/boranga/src/components/common/add_contact.vue
@@ -132,7 +132,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -205,7 +204,7 @@ export default {
                         body: JSON.stringify(contact),
                     }
                 ).then(
-                    (response) => {
+                    () => {
                         vm.$parent.refreshDatatable();
                         vm.close();
                     },
@@ -226,7 +225,7 @@ export default {
                         body: JSON.stringify(contact),
                     },
                 }).then(
-                    (response) => {
+                    () => {
                         vm.close();
                         vm.$parent.addedContact();
                     },
@@ -247,7 +246,7 @@ export default {
                     campground: 'required',
                     campsite: {
                         required: {
-                            depends: function (el) {
+                            depends: function () {
                                 return vm.campsites.length > 0;
                             },
                         },
diff --git a/boranga/frontend/boranga/src/components/common/add_document.vue b/boranga/frontend/boranga/src/components/common/add_document.vue
index 679f331b..9af92aef 100644
--- a/boranga/frontend/boranga/src/components/common/add_document.vue
+++ b/boranga/frontend/boranga/src/components/common/add_document.vue
@@ -340,7 +340,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -407,9 +406,6 @@ export default {
     mounted: function () {
         let vm = this;
         vm.form = document.forms.documentForm;
-        this.$nextTick(() => {
-            vm.eventListeners();
-        });
     },
     methods: {
         focusDescription: function () {
@@ -507,7 +503,7 @@ export default {
                     },
                     body: JSON.stringify(formData),
                 }).then(
-                    (response) => {
+                    () => {
                         vm.updatingDocument = false;
                         vm.$parent.updatedDocuments();
                         vm.close();
@@ -528,7 +524,7 @@ export default {
                         body: JSON.stringify(formData),
                     },
                 }).then(
-                    (response) => {
+                    () => {
                         vm.addingDocument = false;
                         vm.close();
                         vm.$parent.updatedDocuments();
@@ -541,9 +537,6 @@ export default {
                 );
             }
         },
-        eventListeners: function () {
-            let vm = this;
-        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/comms_logs.vue b/boranga/frontend/boranga/src/components/common/comms_logs.vue
index 5478ee6b..25c1cdf0 100755
--- a/boranga/frontend/boranga/src/components/common/comms_logs.vue
+++ b/boranga/frontend/boranga/src/components/common/comms_logs.vue
@@ -88,7 +88,6 @@ export default {
                     url: vm.logs_url,
                     dataSrc: '',
                 },
-                order: [],
                 columns: [
                     {
                         title: 'Who',
@@ -104,7 +103,7 @@ export default {
                         title: 'When',
                         data: 'when',
                         orderable: false,
-                        mRender: function (data, type, full) {
+                        mRender: function (data) {
                             return moment(data).format(vm.dateFormat);
                         },
                     },
@@ -354,24 +353,23 @@ export default {
                             '#' + commsLogId + ' [data-bs-toggle="popover"]'
                         )
                     );
-                    var popoverList = popoverTriggerList.map(
-                        function (popoverTriggerEl) {
-                            return new bootstrap.Popover(popoverTriggerEl);
-                        }
-                    );
+                    popoverTriggerList.map(function (popoverTriggerEl) {
+                        return new bootstrap.Popover(popoverTriggerEl);
+                    });
                 });
             });
             popover_elem.addEventListener('shown.bs.popover', () => {
                 // when the popover has been made visible to the user
-                let el = vm.$refs.showCommsBtn;
-                var popover_bounding_top = parseInt(
-                    $('.' + popover_name)[0].getBoundingClientRect().top
-                );
-                var el_bounding_top = parseInt(
-                    $(el)[0].getBoundingClientRect().top
-                );
-                var diff = el_bounding_top - popover_bounding_top;
-                var x = diff + 5;
+                // The following code currently doesn't do anything
+                // let el = vm.$refs.showCommsBtn;
+                // var popover_bounding_top = parseInt(
+                //     $('.' + popover_name)[0].getBoundingClientRect().top
+                // );
+                // var el_bounding_top = parseInt(
+                //     $(el)[0].getBoundingClientRect().top
+                // );
+                // var diff = el_bounding_top - popover_bounding_top;
+                // var x = diff + 5;
                 // $('.' + popover_name).children('.arrow').css('top', x + 'px');
             });
         },
@@ -411,11 +409,9 @@ export default {
                             '#' + actionLogId + ' [data-bs-toggle="popover"]'
                         )
                     );
-                    var popoverList = popoverTriggerList.map(
-                        function (popoverTriggerEl) {
-                            return new bootstrap.Popover(popoverTriggerEl);
-                        }
-                    );
+                    popoverTriggerList.map(function (popoverTriggerEl) {
+                        return new bootstrap.Popover(popoverTriggerEl);
+                    });
                 });
             });
             popover_elem.addEventListener('shown.bs.popover', () => {
diff --git a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
index b20492c6..95828b0e 100644
--- a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
@@ -593,7 +593,6 @@ export default {
         },
         column_region: function () {
             return {
-                data: 'regions',
                 data: 'regions',
                 orderable: true,
                 searchable: false,
@@ -982,13 +981,14 @@ export default {
             vm.initialiseCommunityNameLookup();
             vm.initialiseCommunityIdLookup();
             vm.addEventListeners();
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterCommunityName') != 'all' &&
                 sessionStorage.getItem('filterCommunityName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCommunityNameText'),
                     vm.filterCommunityName,
                     false,
@@ -1001,7 +1001,7 @@ export default {
                 sessionStorage.getItem('filterCommunityMigratedId') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCommunityMigratedIdText'),
                     vm.filterCommunityMigratedId,
                     false,
@@ -1045,7 +1045,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCommunityName = data;
                     sessionStorage.setItem(
@@ -1053,12 +1052,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCommunityName = 'all';
                     sessionStorage.setItem('filterCommunityNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-community_name_lookup-results"]'
                     );
@@ -1087,7 +1085,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCommunityMigratedId = data;
                     sessionStorage.setItem(
@@ -1095,12 +1092,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCommunityMigratedId = 'all';
                     sessionStorage.setItem('filterCommunityMigratedIdText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-community_id_lookup-results"]'
                     );
@@ -1230,7 +1226,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your proposal has been discarded',
@@ -1280,7 +1276,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your proposal has been reinstated',
@@ -1337,7 +1333,7 @@ export default {
             );
             vm.$refs.communities_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
index 92544306..e8082ca0 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
@@ -1532,7 +1532,12 @@ export default {
         has_comment_value: function () {
             let has_value = false;
             for (var i = 0; i < this.referral_comments_boxes.length; i++) {
-                if (this.referral_comments_boxes[i].hasOwnProperty('value')) {
+                if (
+                    Object.prototype.hasOwnProperty.call(
+                        this.referral_comments_boxes[i],
+                        'value'
+                    )
+                ) {
                     if (
                         this.referral_comments_boxes[i].value != null &&
                         this.referral_comments_boxes[i].value != undefined &&
@@ -1736,18 +1741,16 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.conservation_status_obj.community_id = data;
                     vm.community_display = e.params.data.text;
                     vm.$emit('saveConservationStatus');
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.conservation_status_obj.community_id = null;
                     vm.community_display = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.community_name_lookup +
@@ -1810,7 +1813,6 @@ export default {
             var assessor_mode =
                 this.conservation_status_obj.assessor_mode.assessor_level;
             if (!this.conservation_status_obj.can_user_edit) {
-                var current_referral_present = false;
                 $.each(this.conservation_status_obj.referrals, (i, v) => {
                     var referral_name = `comment-field-Referral-${v.referral.email}`;
                     var referral_visibility =
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
index 2883d00a..c8288851 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
@@ -85,7 +85,6 @@ export default {
             conservationStatusDocumentHistoryId: null,
             documentBody: 'documentBody' + vm._uid,
             panelBody: 'conservation-status-documents-' + vm._uid,
-            panelBody: 'cs-documents-' + vm._uid,
             values: null,
             cs_document_url: api_endpoints.conservation_status_documents,
             documents_headers: [
@@ -396,7 +395,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The document has been discarded',
@@ -413,7 +412,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateDocument: function (id) {
@@ -442,7 +441,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your document has been reinstated',
@@ -459,7 +458,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         updatedDocuments() {
@@ -518,7 +517,7 @@ export default {
             );
             vm.$refs.documents_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
index bf67e1ac..89821042 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
@@ -63,7 +63,7 @@ export default {
                     {
                         title: 'Referral',
                         data: 'referral',
-                        render: function (data, type, full) {
+                        render: function (data) {
                             return `<span>${data.first_name} ${data.last_name}</span>`;
                         },
                     },
@@ -324,27 +324,17 @@ export default {
                 console.log('in shown.bs.popover');
 
                 var el = vm.$refs.showRef;
-                var popoverheight = parseInt($('.' + popover_name).height());
 
                 var popover_bounding_top = parseInt(
                     $('.' + popover_name)[0].getBoundingClientRect().top
                 );
-                var popover_bounding_bottom = parseInt(
-                    $('.' + popover_name)[0].getBoundingClientRect().bottom
-                );
 
                 var el_bounding_top = parseInt(
                     $(el)[0].getBoundingClientRect().top
                 );
-                var el_bounding_bottom = parseInt(
-                    $(el)[0].getBoundingClientRect().top
-                );
 
                 var diff = el_bounding_top - popover_bounding_top;
 
-                var position = parseInt($('.' + popover_name).position().top);
-                var pos2 = parseInt($(el).position().top) - 5;
-
                 var x = diff + 5;
                 $('.' + popover_name)
                     .children('.arrow')
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
index d48e2fad..9b45dd96 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
@@ -1575,7 +1575,12 @@ export default {
         has_comment_value: function () {
             let has_value = false;
             for (var i = 0; i < this.referral_comments_boxes.length; i++) {
-                if (this.referral_comments_boxes[i].hasOwnProperty('value')) {
+                if (
+                    Object.prototype.hasOwnProperty.call(
+                        this.referral_comments_boxes[i],
+                        'value'
+                    )
+                ) {
                     if (
                         this.referral_comments_boxes[i].value != null &&
                         this.referral_comments_boxes[i].value != undefined &&
@@ -1773,13 +1778,12 @@ export default {
                     vm.taxon_previous_name = data.taxon_previous_name;
                     vm.$emit('saveConservationStatus');
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.conservation_status_obj.species_taxonomy_id = null;
                     vm.species_display = '';
                     vm.taxon_previous_name = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
@@ -1845,7 +1849,6 @@ export default {
             var assessor_mode =
                 this.conservation_status_obj.assessor_mode.assessor_level;
             if (!this.conservation_status_obj.can_user_edit) {
-                var current_referral_present = false;
                 $.each(this.conservation_status_obj.referrals, (i, v) => {
                     var referral_name = `comment-field-Referral-${v.referral.email}`;
                     var referral_visibility =
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
index e4f89102..fb5eee9c 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
@@ -769,7 +769,6 @@ export default {
             };
         },
         column_number: function () {
-            let vm = this;
             return {
                 data: 'conservation_status_number',
                 orderable: true,
@@ -1427,13 +1426,14 @@ export default {
             vm.initialiseAssessorLookup();
             vm.initialiseSubmitterLookup();
             vm.addEventListeners();
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterCSCommunityName') != 'all' &&
                 sessionStorage.getItem('filterCSCommunityName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSCommunityNameText'),
                     vm.filterCSCommunityName,
                     false,
@@ -1447,7 +1447,7 @@ export default {
                 sessionStorage.getItem('filterCSCommunityMigratedId') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSCommunityMigratedIdText'),
                     vm.filterCSCommunityMigratedId,
                     false,
@@ -1494,7 +1494,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSCommunityName = data;
                     sessionStorage.setItem(
@@ -1502,12 +1501,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSCommunityName = 'all';
                     sessionStorage.setItem('filterCSCommunityNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_community_name_lookup-results"]'
                     );
@@ -1537,7 +1535,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSCommunityMigratedId = data;
                     sessionStorage.setItem(
@@ -1545,15 +1542,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSCommunityMigratedId = 'all';
                     sessionStorage.setItem(
                         'filterCSCommunityMigratedIdText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_community_id_lookup-results"]'
                     );
@@ -1590,11 +1586,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.filterCSCommunityAssessor = 'all';
                     sessionStorage.setItem('filterCSCommunityAssessorText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_assessor_lookup-results"]'
                     );
@@ -1628,7 +1624,7 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.selected_referral = null;
                     vm.filterCSCommunitySubmitter = 'all';
                     sessionStorage.setItem(
@@ -1636,7 +1632,7 @@ export default {
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_submitter_lookup-results"]'
                     );
@@ -1737,7 +1733,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your proposal has been discarded',
@@ -1787,7 +1783,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your proposal has been reinstated',
@@ -1881,7 +1877,7 @@ export default {
             );
             vm.$refs.cs_communities_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
index a36704e1..2dbff2b5 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
@@ -847,7 +847,6 @@ export default {
             };
         },
         column_number: function () {
-            let vm = this;
             return {
                 data: 'conservation_status_number',
                 orderable: true,
@@ -1559,14 +1558,14 @@ export default {
             vm.initialiseAssessorLookup();
             vm.initialiseSubmitterLookup();
             vm.addEventListeners();
-
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterCSFaunaScientificName') !=
                     'all' &&
                 sessionStorage.getItem('filterCSFaunaScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFaunaScientificNameText'),
                     vm.filterCSFaunaScientificName,
                     false,
@@ -1578,7 +1577,7 @@ export default {
                 sessionStorage.getItem('filterCSFaunaCommonName') != 'all' &&
                 sessionStorage.getItem('filterCSFaunaCommonName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFaunaCommonNameText'),
                     vm.filterCSFaunaCommonName,
                     false,
@@ -1591,7 +1590,7 @@ export default {
                     'all' &&
                 sessionStorage.getItem('filterCSFaunaPhylogeneticGroup') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSFaunaPhylogeneticGroupText'
                     ),
@@ -1605,7 +1604,7 @@ export default {
                 sessionStorage.getItem('filterCSFaunaFamily') != 'all' &&
                 sessionStorage.getItem('filterCSFaunaFamily') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFaunaFamilyText'),
                     vm.filterCSFaunaFamily,
                     false,
@@ -1617,7 +1616,7 @@ export default {
                 sessionStorage.getItem('filterCSFaunaGenus') != 'all' &&
                 sessionStorage.getItem('filterCSFaunaGenus') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFaunaGenusText'),
                     vm.filterCSFaunaGenus,
                     false,
@@ -1629,7 +1628,7 @@ export default {
                 sessionStorage.getItem('filterCSFaunaAssessor') != 'all' &&
                 sessionStorage.getItem('filterCSFaunaAssessor') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFaunaAssessorText'),
                     vm.filterCSFaunaAssessor,
                     false,
@@ -1641,7 +1640,7 @@ export default {
                 sessionStorage.getItem('filterCSFaunaSubmitter') != 'all' &&
                 sessionStorage.getItem('filterCSFaunaSubmitter') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFaunaSubmitterText'),
                     vm.filterCSFaunaSubmitter,
                     false,
@@ -1689,7 +1688,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaScientificName = data; // this is id session
                     sessionStorage.setItem(
@@ -1697,15 +1695,14 @@ export default {
                         e.params.data.text
                     ); // this is name session
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFaunaScientificName = 'all';
                     sessionStorage.setItem(
                         'filterCSFaunaScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_scientific_name_lookup-results"]'
                     );
@@ -1736,7 +1733,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaCommonName = data;
                     sessionStorage.setItem(
@@ -1744,12 +1740,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFaunaCommonName = 'all';
                     sessionStorage.setItem('filterCSFaunaCommonNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_common_name_lookup-results"]'
                     );
@@ -1780,7 +1775,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaPhylogeneticGroup = data;
                     sessionStorage.setItem(
@@ -1788,15 +1782,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFaunaPhylogeneticGroup = 'all';
                     sessionStorage.setItem(
                         'filterCSFaunaPhylogeneticGroupText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_phylo_group_lookup-results"]'
                     );
@@ -1826,7 +1819,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaFamily = data;
                     sessionStorage.setItem(
@@ -1834,12 +1826,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFaunaFamily = 'all';
                     sessionStorage.setItem('filterCSFaunaFamilyText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_family_lookup-results"]'
                     );
@@ -1869,7 +1860,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFaunaGenus = data;
                     sessionStorage.setItem(
@@ -1877,12 +1867,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFaunaGenus = 'all';
                     sessionStorage.setItem('filterCSFaunaGenusText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     //const searchField = $(".select2-search__field")
                     const searchField = $(
                         '[aria-controls="select2-cs_genera_lookup-results"]'
@@ -1920,11 +1909,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.filterCSFaunaAssessor = 'all';
                     sessionStorage.setItem('filterCSFaunaAssessorText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_assessor_lookup-results"]'
                     );
@@ -1958,12 +1947,12 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.selected_referral = null;
                     vm.filterCSFaunaSubmitter = 'all';
                     sessionStorage.setItem('filterCSFaunaSubmitterText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_submitter_lookup-results"]'
                     );
@@ -1993,7 +1982,6 @@ export default {
                         vm.filterListsSpecies.wa_priority_lists;
                     vm.wa_priority_categories =
                         vm.filterListsSpecies.wa_priority_categories;
-                    vm.processing_statuses = vm.processing_statuses;
                     vm.change_codes = vm.filterListsSpecies.change_codes;
                     vm.submitter_categories =
                         vm.filterListsSpecies.submitter_categories;
@@ -2068,7 +2056,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your proposal has been discarded',
@@ -2118,7 +2106,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your proposal has been reinstated',
@@ -2212,7 +2200,7 @@ export default {
             );
             vm.$refs.fauna_cs_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
index fcdfdb4e..bbd2a0b4 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
@@ -837,7 +837,6 @@ export default {
             };
         },
         column_number: function () {
-            let vm = this;
             return {
                 data: 'conservation_status_number',
                 orderable: true,
@@ -1551,14 +1550,14 @@ export default {
             vm.initialiseAssessorLookup();
             vm.initialiseSubmitterLookup();
             vm.addEventListeners();
-
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterCSFloraScientificName') !=
                     'all' &&
                 sessionStorage.getItem('filterCSFloraScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFloraScientificNameText'),
                     vm.filterCSFloraScientificName,
                     false,
@@ -1570,7 +1569,7 @@ export default {
                 sessionStorage.getItem('filterCSFloraCommonName') != 'all' &&
                 sessionStorage.getItem('filterCSFloraCommonName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFloraCommonNameText'),
                     vm.filterCSFloraCommonName,
                     false,
@@ -1583,7 +1582,7 @@ export default {
                     'all' &&
                 sessionStorage.getItem('filterCSFloraPhylogeneticGroup') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSFloraPhylogeneticGroupText'
                     ),
@@ -1597,7 +1596,7 @@ export default {
                 sessionStorage.getItem('filterCSFloraFamily') != 'all' &&
                 sessionStorage.getItem('filterCSFloraFamily') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFloraFamilyText'),
                     vm.filterCSFloraFamily,
                     false,
@@ -1609,7 +1608,7 @@ export default {
                 sessionStorage.getItem('filterCSFloraGenus') != 'all' &&
                 sessionStorage.getItem('filterCSFloraGenus') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFloraGenusText'),
                     vm.filterCSFloraGenus,
                     false,
@@ -1621,7 +1620,7 @@ export default {
                 sessionStorage.getItem('filterCSFloraAssessor') != 'all' &&
                 sessionStorage.getItem('filterCSFloraAssessor') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFloraAssessorText'),
                     vm.filterCSFloraAssessor,
                     false,
@@ -1633,7 +1632,7 @@ export default {
                 sessionStorage.getItem('filterCSFloraSubmitter') != 'all' &&
                 sessionStorage.getItem('filterCSFloraSubmitter') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSFloraSubmitterText'),
                     vm.filterCSFloraSubmitter,
                     false,
@@ -1680,7 +1679,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraScientificName = data;
                     sessionStorage.setItem(
@@ -1688,15 +1686,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFloraScientificName = 'all';
                     sessionStorage.setItem(
                         'filterCSFloraScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_scientific_name_lookup-results"]'
                     );
@@ -1727,7 +1724,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraCommonName = data;
                     sessionStorage.setItem(
@@ -1735,12 +1731,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFloraCommonName = 'all';
                     sessionStorage.setItem('filterCSFloraCommonNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_common_name_lookup-results"]'
                     );
@@ -1771,7 +1766,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraPhylogeneticGroup = data;
                     sessionStorage.setItem(
@@ -1779,15 +1773,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFloraPhylogeneticGroup = 'all';
                     sessionStorage.setItem(
                         'filterCSFloraPhylogeneticGroupText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_phylo_group_lookup-results"]'
                     );
@@ -1818,7 +1811,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraFamily = data;
                     sessionStorage.setItem(
@@ -1826,12 +1818,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFloraFamily = 'all';
                     sessionStorage.setItem('filterCSFloraFamilyText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     //const searchField = $(".select2-search__field")
                     const searchField = $(
                         '[aria-controls="select2-cs_family_lookup-results"]'
@@ -1863,7 +1854,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSFloraGenus = data;
                     sessionStorage.setItem(
@@ -1871,12 +1861,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSFloraGenus = 'all';
                     sessionStorage.setItem('filterCSFloraGenusText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     //const searchField = $(".select2-search__field")
                     const searchField = $(
                         '[aria-controls="select2-cs_genera_lookup-results"]'
@@ -1914,11 +1903,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.filterCSFloraAssessor = 'all';
                     sessionStorage.setItem('filterCSFloraAssessorText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_assessor_lookup-results"]'
                     );
@@ -1952,12 +1941,12 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.selected_referral = null;
                     vm.filterCSFloraSubmitter = 'all';
                     sessionStorage.setItem('filterCSFloraSubmitterText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_submitter_lookup-results"]'
                     );
@@ -2061,7 +2050,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your proposal has been discarded',
@@ -2111,7 +2100,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your proposal has been reinstated',
@@ -2204,7 +2193,7 @@ export default {
             );
             vm.$refs.flora_cs_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
index c43dee47..7fa57244 100644
--- a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
@@ -448,11 +448,12 @@ export default {
             vm.initialiseCommunityNameLookup();
             vm.initialiseCommunityIdLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterCSRefCommunityName') != 'all' &&
                 sessionStorage.getItem('filterCSRefCommunityName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefCommunityNameText'),
                     vm.filterCSRefCommunityName,
                     false,
@@ -465,7 +466,7 @@ export default {
                     'all' &&
                 sessionStorage.getItem('filterCSRefCommunityMigratedId') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSRefCommunityMigratedIdText'
                     ),
@@ -505,7 +506,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefCommunityName = data;
                     sessionStorage.setItem(
@@ -513,12 +513,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefCommunityName = 'all';
                     sessionStorage.setItem('filterCSRefCommunityNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_community_name_lookup-results"]'
                     );
@@ -547,7 +546,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefCommunityMigratedId = data;
                     sessionStorage.setItem(
@@ -555,15 +553,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefCommunityMigratedId = 'all';
                     sessionStorage.setItem(
                         'filterCSRefCommunityMigratedIdText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_community_id_lookup-results"]'
                     );
@@ -574,7 +571,7 @@ export default {
             let vm = this;
             vm.$refs.cs_communities_ref_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
index 125384dd..10f98ce7 100644
--- a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
@@ -379,12 +379,13 @@ export default {
             vm.initialiseScientificNameLookup();
             vm.initialiseCommunityNameLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterCSRefFloraScientificName') !=
                     'all' &&
                 sessionStorage.getItem('filterCSRefFloraScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSRefFloraScientificNameText'
                     ),
@@ -400,7 +401,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFloraCommunityName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFloraCommunityNameText'),
                     vm.filterCSRefFloraCommunityName,
                     false,
@@ -438,7 +439,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraScientificName = data;
                     sessionStorage.setItem(
@@ -446,15 +446,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraScientificName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFloraScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_scientific_name_lookup-results"]'
                     );
@@ -483,7 +482,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraCommunityName = data;
                     sessionStorage.setItem(
@@ -491,15 +489,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraCommunityName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFloraCommunityNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_referrals_community_name_lookup-results"]'
                     );
@@ -511,7 +508,7 @@ export default {
             let vm = this;
             vm.$refs.flora_cs_ref_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
index 0bc0eec4..ae3d74e3 100644
--- a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
@@ -299,7 +299,6 @@ export default {
             };
         },
         column_action: function () {
-            let vm = this;
             return {
                 data: 'id',
                 orderable: false,
@@ -315,21 +314,18 @@ export default {
             };
         },
         column_conservation_status: function () {
-            let vm = this;
             return {
                 data: 'conservation_status',
                 visible: false,
             };
         },
         column_can_be_processed: function () {
-            let vm = this;
             return {
                 data: 'can_be_processed',
                 visible: false,
             };
         },
         column_can_user_process: function () {
-            let vm = this;
             return {
                 data: 'can_user_process',
                 visible: false,
@@ -346,7 +342,6 @@ export default {
                 vm.column_status,
                 vm.column_action,
             ];
-            let search = false;
             let buttons = [
                 {
                     extend: 'excel',
@@ -521,13 +516,13 @@ export default {
             vm.initialiseFamilyLookup();
             vm.initialiseGeneraLookup();
             vm.addEventListeners();
-
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterCSRefFaunaScientificName') !=
                     'all' &&
                 sessionStorage.getItem('filterCSRefFaunaScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSRefFaunaScientificNameText'
                     ),
@@ -541,7 +536,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFaunaCommonName') != 'all' &&
                 sessionStorage.getItem('filterCSRefFaunaCommonName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFaunaCommonNameText'),
                     vm.filterCSRefFaunaCommonName,
                     false,
@@ -555,7 +550,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFaunaPhylogeneticGroup') !=
                     null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSRefFaunaPhylogeneticGroupText'
                     ),
@@ -569,7 +564,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFaunaFamily') != 'all' &&
                 sessionStorage.getItem('filterCSRefFaunaFamily') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFaunaFamilyText'),
                     vm.filterCSRefFaunaFamily,
                     false,
@@ -581,7 +576,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFaunaGenus') != 'all' &&
                 sessionStorage.getItem('filterCSRefFaunaGenus') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFaunaGenusText'),
                     vm.filterCSRefFaunaGenus,
                     false,
@@ -620,7 +615,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaScientificName = data;
                     sessionStorage.setItem(
@@ -628,15 +622,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFaunaScientificName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFaunaScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_scientific_name_lookup-results"]'
                     );
@@ -666,7 +659,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaCommonName = data;
                     sessionStorage.setItem(
@@ -674,15 +666,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFaunaCommonName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFaunaCommonNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_common_name_lookup-results"]'
                     );
@@ -712,7 +703,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaPhylogeneticGroup = data;
                     sessionStorage.setItem(
@@ -720,15 +710,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFaunaPhylogeneticGroup = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFaunaPhylogeneticGroupText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_phylo_group_lookup-results"]'
                     );
@@ -758,7 +747,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaFamily = data;
                     sessionStorage.setItem(
@@ -766,12 +754,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFaunaFamily = 'all';
                     sessionStorage.setItem('filterCSRefFaunaFamilyText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_family_lookup-results"]'
                     );
@@ -801,7 +788,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFaunaGenus = data;
                     sessionStorage.setItem(
@@ -809,12 +795,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFaunaGenus = 'all';
                     sessionStorage.setItem('filterCSRefFaunaGenusText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_genera_lookup-results"]'
                     );
@@ -825,7 +810,7 @@ export default {
             let vm = this;
             vm.$refs.fauna_cs_ref_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
index 049c2a0b..b4b2b615 100644
--- a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
@@ -554,12 +554,13 @@ export default {
             vm.initialiseFamilyLookup();
             vm.initialiseGeneraLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterCSRefFloraScientificName') !=
                     'all' &&
                 sessionStorage.getItem('filterCSRefFloraScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSRefFloraScientificNameText'
                     ),
@@ -573,7 +574,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFloraCommonName') != 'all' &&
                 sessionStorage.getItem('filterCSRefFloraCommonName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFloraCommonNameText'),
                     vm.filterCSRefFloraCommonName,
                     false,
@@ -587,7 +588,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFloraPhylogeneticGroup') !=
                     null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSRefFloraPhylogeneticGroupText'
                     ),
@@ -601,7 +602,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFloraFamily') != 'all' &&
                 sessionStorage.getItem('filterCSRefFloraFamily') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFloraFamilyText'),
                     vm.filterCSRefFloraFamily,
                     false,
@@ -613,7 +614,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFloraGenus') != 'all' &&
                 sessionStorage.getItem('filterCSRefFloraGenus') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFloraGenusText'),
                     vm.filterCSRefFloraGenus,
                     false,
@@ -652,7 +653,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraScientificName = data;
                     sessionStorage.setItem(
@@ -660,15 +660,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraScientificName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFloraScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_scientific_name_lookup-results"]'
                     );
@@ -699,7 +698,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraCommonName = data;
                     sessionStorage.setItem(
@@ -707,15 +705,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraCommonName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFloraCommonNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_common_name_lookup-results"]'
                     );
@@ -746,7 +743,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraPhylogeneticGroup = data;
                     sessionStorage.setItem(
@@ -754,15 +750,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraPhylogeneticGroup = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFloraPhylogeneticGroupText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_phylo_group_lookup-results"]'
                     );
@@ -792,7 +787,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraFamily = data;
                     sessionStorage.setItem(
@@ -800,12 +794,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraFamily = 'all';
                     sessionStorage.setItem('filterCSRefFloraFamilyText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_family_lookup-results"]'
                     );
@@ -835,7 +828,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraGenus = data;
                     sessionStorage.setItem(
@@ -843,12 +835,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraGenus = 'all';
                     sessionStorage.setItem('filterCSRefFloraGenusText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_ref_genera_lookup-results"]'
                     );
@@ -859,7 +850,7 @@ export default {
             let vm = this;
             vm.$refs.flora_cs_ref_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/invite_external_referee.vue b/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
index 6268e272..29fa4cbe 100644
--- a/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
+++ b/boranga/frontend/boranga/src/components/common/invite_external_referee.vue
@@ -229,7 +229,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         vm.$emit('externalRefereeInviteSent', response);
                         vm.close();
                     });
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
index 834d0061..b6dbc51e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
@@ -210,7 +210,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -292,7 +291,7 @@ export default {
                     },
                     body: JSON.stringify(formData),
                 }).then(
-                    (response) => {
+                    () => {
                         vm.updatingContact = false;
                         vm.$parent.updatedContactDetails();
                         vm.close();
@@ -313,7 +312,7 @@ export default {
                     },
                     body: JSON.stringify(formData),
                 }).then(
-                    (response) => {
+                    () => {
                         vm.addingContact = false;
                         vm.$parent.updatedContactDetails();
                         vm.close();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
index d70be5e8..8728f410 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
@@ -343,7 +343,7 @@ export default {
                     },
                     body: JSON.stringify(formData),
                 }).then(
-                    (response) => {
+                    () => {
                         vm.updatingObserver = false;
                         vm.$parent.updatedObserverDetails();
                         vm.close();
@@ -363,7 +363,7 @@ export default {
                     },
                     body: JSON.stringify(formData),
                 }).then(
-                    (response) => {
+                    () => {
                         vm.addingObserver = false;
                         vm.$parent.updatedObserverDetails();
                         vm.close();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
index 4836687b..fc07f29d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/animal_observation.vue
@@ -7,8 +7,12 @@
                 >
                 <div class="col-sm-9">
                     <select
-ref="primary_detection_select" v-model="animal_observation.primary_detection_method" :disabled="isReadOnly"
-                        style="width:100%;" class="form-select input-sm">
+                        ref="primary_detection_select"
+                        v-model="animal_observation.primary_detection_method"
+                        :disabled="isReadOnly"
+                        style="width: 100%"
+                        class="form-select input-sm"
+                    >
                         <option
                             v-for="option in primary_detection_method_list"
                             :key="option.id"
@@ -36,7 +40,9 @@ ref="primary_detection_select" v-model="animal_observation.primary_detection_met
                             "
                         >
                             <input
-v-if="animal_observation.secondary_sign_name" type="text" class="form-control mb-3"
+                                v-if="animal_observation.secondary_sign_name"
+                                type="text"
+                                class="form-control mb-3"
                                 :value="
                                     animal_observation.secondary_sign_name +
                                     ' (Now Archived)'
@@ -89,7 +95,11 @@ v-if="animal_observation.secondary_sign_name" type="text" class="form-control mb
                             "
                         >
                             <input
-v-if="animal_observation.reproductive_state_name" type="text" class="form-control mb-3"
+                                v-if="
+                                    animal_observation.reproductive_state_name
+                                "
+                                type="text"
+                                class="form-control mb-3"
                                 :value="
                                     animal_observation.reproductive_state_name +
                                     ' (Now Archived)'
@@ -162,7 +172,9 @@ v-if="animal_observation.reproductive_state_name" type="text" class="form-contro
                             "
                         >
                             <input
-v-if="animal_observation.death_reason" type="text" class="form-control mb-3"
+                                v-if="animal_observation.death_reason"
+                                type="text"
+                                class="form-control mb-3"
                                 :value="
                                     animal_observation.death_reason +
                                     ' (Now Archived)'
@@ -203,8 +215,14 @@ v-if="animal_observation.death_reason" type="text" class="form-control mb-3"
                 >
                 <div class="col-sm-9">
                     <textarea
-id="distinct_features" v-model="animal_observation.distinctive_feature" :disabled="isReadOnly" type="text" row="2"
-                        class="form-control" placeholder="" />
+                        id="distinct_features"
+                        v-model="animal_observation.distinctive_feature"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
@@ -214,8 +232,14 @@ id="distinct_features" v-model="animal_observation.distinctive_feature" :disable
                 >
                 <div class="col-sm-9">
                     <textarea
-id="distinct_features" v-model="animal_observation.action_taken" :disabled="isReadOnly" type="text" row="2"
-                        class="form-control" placeholder="" />
+                        id="distinct_features"
+                        v-model="animal_observation.action_taken"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
@@ -225,8 +249,14 @@ id="distinct_features" v-model="animal_observation.action_taken" :disabled="isRe
                 >
                 <div class="col-sm-9">
                     <textarea
-id="distinct_features" v-model="animal_observation.action_required" :disabled="isReadOnly" type="text" row="2"
-                        class="form-control" placeholder="" />
+                        id="distinct_features"
+                        v-model="animal_observation.action_required"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
 
@@ -236,8 +266,14 @@ id="distinct_features" v-model="animal_observation.action_required" :disabled="i
                 >
                 <div class="col-sm-9">
                     <textarea
-id="distinct_features" v-model="animal_observation.observation_detail_comment" :disabled="isReadOnly" type="text" row="2"
-                        class="form-control" placeholder="" />
+                        id="distinct_features"
+                        v-model="animal_observation.observation_detail_comment"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -246,7 +282,7 @@ id="distinct_features" v-model="animal_observation.observation_detail_comment" :
                 </label>
                 <div class="col-sm-9">
                     <input
-v-model="animal_observation.count_date
+                        v-model="animal_observation.count_date"
                         :disabled="true"
                         type="datetime-local"
                         class="form-control"
@@ -266,7 +302,10 @@ v-model="animal_observation.count_date
                 </div>
                 <div class="col-sm-2">
                     <input
-id="not-counted" v-model="animal_observation.counted" type="checkbox" true-value="false"
+                        id="not-counted"
+                        v-model="animal_observation.counted"
+                        type="checkbox"
+                        true-value="false"
                         false-value="true"
                         @change="checkboxChanged"
                     />
@@ -283,23 +322,41 @@ id="not-counted" v-model="animal_observation.counted" type="checkbox" true-value
                 <div class="col-sm-2">
                     Male
                     <input
-id="alive_adult_male" v-model="animal_observation.alive_adult_male" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_adult_male"
+                        v-model="animal_observation.alive_adult_male"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Male
                     <input
-id="alive_juvenile_male" v-model="animal_observation.alive_juvenile_male" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_juvenile_male"
+                        v-model="animal_observation.alive_juvenile_male"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Male
                     <input
-id="alive_unsure_male" v-model="animal_observation.alive_unsure_male" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_unsure_male"
+                        v-model="animal_observation.alive_unsure_male"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -307,23 +364,41 @@ id="alive_unsure_male" v-model="animal_observation.alive_unsure_male" :disabled=
                 <div class="col-sm-2">
                     Female
                     <input
-id="alive_adult_female" v-model="animal_observation.alive_adult_female" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_adult_female"
+                        v-model="animal_observation.alive_adult_female"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Female
                     <input
-id="alive_juvenile_female" v-model="animal_observation.alive_juvenile_female" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_juvenile_female"
+                        v-model="animal_observation.alive_juvenile_female"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Female
                     <input
-id="alive_unsure_female" v-model="animal_observation.alive_unsure_female" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_unsure_female"
+                        v-model="animal_observation.alive_unsure_female"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -331,23 +406,41 @@ id="alive_unsure_female" v-model="animal_observation.alive_unsure_female" :disab
                 <div class="col-sm-2">
                     Sex Unknown
                     <input
-id="alive_adult_unknown" v-model="animal_observation.alive_adult_unknown" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_adult_unknown"
+                        v-model="animal_observation.alive_adult_unknown"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
                     <input
-id="alive_juvenile_unknown" v-model="animal_observation.alive_juvenile_unknown" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_juvenile_unknown"
+                        v-model="animal_observation.alive_juvenile_unknown"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
                     <input
-id="alive_unsure_unknown" v-model="animal_observation.alive_unsure_unknown" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="alive_unsure_unknown"
+                        v-model="animal_observation.alive_unsure_unknown"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
             </div>
 
@@ -362,23 +455,41 @@ id="alive_unsure_unknown" v-model="animal_observation.alive_unsure_unknown" :dis
                 <div class="col-sm-2">
                     Male
                     <input
-id="dead_adult_male" v-model="animal_observation.dead_adult_male" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_adult_male"
+                        v-model="animal_observation.dead_adult_male"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Male
                     <input
-id="dead_juvenile_male" v-model="animal_observation.dead_juvenile_male" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_juvenile_male"
+                        v-model="animal_observation.dead_juvenile_male"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Male
                     <input
-id="dead_unsure_male" v-model="animal_observation.dead_unsure_male" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_unsure_male"
+                        v-model="animal_observation.dead_unsure_male"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -386,23 +497,41 @@ id="dead_unsure_male" v-model="animal_observation.dead_unsure_male" :disabled="i
                 <div class="col-sm-2">
                     Female
                     <input
-id="dead_adult_female" v-model="animal_observation.dead_adult_female" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_adult_female"
+                        v-model="animal_observation.dead_adult_female"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Female
                     <input
-id="dead_juvenile_female" v-model="animal_observation.dead_juvenile_female" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_juvenile_female"
+                        v-model="animal_observation.dead_juvenile_female"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Female
                     <input
-id="dead_unsure_female" v-model="animal_observation.dead_unsure_female" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_unsure_female"
+                        v-model="animal_observation.dead_unsure_female"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
             </div>
             <div class="row mb-4">
@@ -410,23 +539,41 @@ id="dead_unsure_female" v-model="animal_observation.dead_unsure_female" :disable
                 <div class="col-sm-2">
                     Sex Unknown
                     <input
-id="dead_adult_unknown" v-model="animal_observation.dead_adult_unknown" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_adult_unknown"
+                        v-model="animal_observation.dead_adult_unknown"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
                     <input
-id="dead_juvenile_unknown" v-model="animal_observation.dead_juvenile_unknown" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_juvenile_unknown"
+                        v-model="animal_observation.dead_juvenile_unknown"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
                 <div class="col-sm-2">
                     Sex Unknown
                     <input
-id="dead_unsure_unknown" v-model="animal_observation.dead_unsure_unknown" :disabled="isReadOnly || not_counted"
-                        type="number" class="form-control animal-count-input" placeholder="" min="0"
-                        step="1" />
+                        id="dead_unsure_unknown"
+                        v-model="animal_observation.dead_unsure_unknown"
+                        :disabled="isReadOnly || not_counted"
+                        type="number"
+                        class="form-control animal-count-input"
+                        placeholder=""
+                        min="0"
+                        step="1"
+                    />
                 </div>
             </div>
 
@@ -436,8 +583,14 @@ id="dead_unsure_unknown" v-model="animal_observation.dead_unsure_unknown" :disab
                 >
                 <div class="col-sm-6">
                     <input
-id="quadrats_surveyed" v-model="total_seen" readonly type="number" class="form-control ocr_number"
-                        placeholder="" min="0" />
+                        id="quadrats_surveyed"
+                        v-model="total_seen"
+                        readonly
+                        type="number"
+                        class="form-control ocr_number"
+                        placeholder=""
+                        min="0"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -453,7 +606,8 @@ id="quadrats_surveyed" v-model="total_seen" readonly type="number" class="form-c
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingAnimalOnservationDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
                     <button
-v-if="!updatingAnimalOnservationDetails" :disabled="isReadOnly"
+                        v-if="!updatingAnimalOnservationDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
                         @click.prevent="updateAnimalObservationDetails()"
                     >
@@ -485,36 +639,35 @@ export default {
     props: {
         animal_observation: {
             type: Object,
-            required: true
+            required: true,
         },
         is_report: {
             type: Boolean,
-            required: true
+            required: true,
         },
         occurrence_id: {
             type: Number,
-            required: true
+            required: true,
         },
         processing_status: {
             type: String,
-            required: false
+            required: false,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         isReadOnly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
-        let vm = this;
         return {
             //----list of values dictionary
             primary_detection_method_list: [],
@@ -526,7 +679,7 @@ export default {
             total_seen: 0,
             listOfAnimalValuesDict: {},
             not_counted: false,
-        }
+        };
     },
     watch: {
         animal_observation: function () {
@@ -542,38 +695,36 @@ export default {
     },
     created: async function () {
         let vm = this;
-        const response = await fetch(`/api/occurrence/animal_observation_list_of_values.json`);
+        const response = await fetch(
+            `/api/occurrence/animal_observation_list_of_values.json`
+        );
         vm.listOfAnimalValuesDict = await response.json();
-        vm.primary_detection_method_list = vm.listOfAnimalValuesDict.primary_detection_method_list;
-        vm.primary_detection_method_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
+        vm.primary_detection_method_list =
+            vm.listOfAnimalValuesDict.primary_detection_method_list;
+        vm.primary_detection_method_list.splice(0, 0, {
+            id: '',
+            name: '',
+        });
         vm.secondary_sign_list = vm.listOfAnimalValuesDict.secondary_sign_list;
-        vm.secondary_sign_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
+        vm.secondary_sign_list.splice(0, 0, {
+            id: '',
+            name: '',
+        });
         vm.reprod_state_list = vm.listOfAnimalValuesDict.reprod_state_list;
-        vm.reprod_state_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
+        vm.reprod_state_list.splice(0, 0, {
+            id: '',
+            name: '',
+        });
         vm.death_reason_list = vm.listOfAnimalValuesDict.death_reason_list;
-        vm.death_reason_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.death_reason_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.animal_health_list = vm.listOfAnimalValuesDict.animal_health_list;
-        vm.animal_health_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.animal_health_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
     },
     mounted: function () {
         let vm = this;
@@ -598,35 +749,39 @@ export default {
         initialisePrimaryDetectionSelect: function () {
             let vm = this;
             // Initialise select2 for proposed Conservation Criteria
-            $(vm.$refs.primary_detection_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Primary Detection Method",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.primary_detection_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Primary Detection Method',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.animal_observation.primary_detection_method = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.animal_observation.primary_detection_method =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.animal_observation.primary_detection_method = selected.val();
+                    vm.animal_observation.primary_detection_method =
+                        selected.val();
                 });
         },
         initialiseSecondarySignSelect: function () {
             let vm = this;
             // Initialise select2 for proposed Conservation Criteria
-            $(vm.$refs.secondary_sign_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Secondary Signs",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.secondary_sign_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Secondary Signs',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.animal_observation.secondary_sign = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.animal_observation.secondary_sign = selected.val();
                 });
@@ -634,17 +789,18 @@ export default {
         initialiseReprodStateSelect: function () {
             let vm = this;
             // Initialise select2 for proposed Conservation Criteria
-            $(vm.$refs.reproductive_state_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Reproductive State",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.reproductive_state_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Reproductive State',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     vm.animal_observation.reproductive_state = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
                     vm.animal_observation.reproductive_state = selected.val();
                 });
@@ -656,38 +812,49 @@ export default {
             if (vm.is_report) {
                 endpoint = api_endpoints.occurrence_report;
             }
-            fetch(helpers.add_endpoint_json(endpoint, (vm.occurrence_id + '/update_animal_observation_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.animal_observation),
-            }).then((response) => {
-                vm.updatingAnimalOnservationDetails = false;
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Animal Observation details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                }).then((result) => {
-                    if (vm.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Animal Observation details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    endpoint,
+                    vm.occurrence_id + '/update_animal_observation_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingAnimalOnservationDetails = false;
-            });
+                    body: JSON.stringify(vm.animal_observation),
+                }
+            ).then(
+                () => {
+                    vm.updatingAnimalOnservationDetails = false;
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Animal Observation details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then(() => {
+                        if (vm.processing_status == 'Unlocked') {
+                            vm.$router.go();
+                        }
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Animal Observation details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingAnimalOnservationDetails = false;
+                }
+            );
         },
     },
 };
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
index e5db88ac..abb372a6 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/community_occurrence.vue
@@ -195,7 +195,6 @@ export default {
     mounted: function () {
         let vm = this;
         this.$nextTick(() => {
-            vm.eventListeners();
             vm.initialiseCommunityNameLookup();
         });
     },
@@ -226,20 +225,18 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.occurrence_obj.community = data;
                     vm.occurrence_obj.community_id = data.id;
                     vm.community_display = e.params.data.text;
                     vm.taxon_previous_name = e.params.data.taxon_previous_name;
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.occurrence_obj.community_id = null;
                     vm.community_display = '';
                     vm.taxon_previous_name = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.community_name_lookup +
@@ -263,9 +260,6 @@ export default {
                 });
             }
         },
-        eventListeners: function () {
-            let vm = this;
-        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
index 34d7a5d4..1977040d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/contact_datatable.vue
@@ -237,7 +237,7 @@ export default {
         };
     },
     watch: {
-        isReadOnly: function (newVal, oldVal) {
+        isReadOnly: function () {
             this.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
         },
     },
@@ -289,7 +289,7 @@ export default {
             );
             vm.$refs.contact_detail_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
@@ -332,7 +332,6 @@ export default {
             this.$refs.contact_detail.isModalOpen = true;
         },
         editContactDetail: function (id) {
-            let vm = this;
             this.$refs.contact_detail.contact_detail_id = id;
             this.$refs.contact_detail.contact_detail_action = 'edit';
             fetch(
@@ -349,7 +348,6 @@ export default {
             this.$refs.contact_detail.isModalOpen = true;
         },
         viewContactDetail: function (id) {
-            let vm = this;
             this.$refs.contact_detail.contact_detail_id = id;
             this.$refs.contact_detail.contact_detail_action = 'view';
             fetch(
@@ -391,7 +389,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The Contact has been discarded',
@@ -399,7 +397,7 @@ export default {
                                     customClass: {
                                         confirmButton: 'btn btn-primary',
                                     },
-                                }).then((result) => {
+                                }).then(() => {
                                     vm.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
                                     vm.$emit('refreshOccurrenceReport');
                                     if (
@@ -416,7 +414,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateContactDetail: function (id) {
@@ -431,7 +429,7 @@ export default {
                     headers: { 'Content-Type': 'application/json' },
                 }
             ).then(
-                (response) => {
+                () => {
                     swal.fire({
                         title: 'Reinstated',
                         text: 'The Contact has been reinstated',
@@ -439,7 +437,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         vm.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
                         vm.$emit('refreshOccurrenceReport');
                         if (vm.occurrence_obj.processing_status == 'Unlocked') {
@@ -461,7 +459,6 @@ export default {
             );
         },
         updatedContactDetails() {
-            let vm = this;
             this.$refs.contact_detail_datatable.vmDataTable.ajax.reload();
         },
         historyContactDetail: function (id) {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
index 4d819bb8..a5b42eea 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/observer_datatable.vue
@@ -202,7 +202,7 @@ export default {
                 ],
                 columns: columns,
                 processing: true,
-                rowCallback: function (row, data, index) {
+                rowCallback: function (row, data) {
                     if (!data.visible) {
                         $(row)
                             .children('td:not(.actions)')
@@ -223,7 +223,7 @@ export default {
         };
     },
     watch: {
-        isReadOnly: function (newVal, oldVal) {
+        isReadOnly: function () {
             this.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
         },
     },
@@ -275,7 +275,7 @@ export default {
             );
             vm.$refs.observer_detail_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
@@ -376,7 +376,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The Observer has been discarded',
@@ -384,7 +384,7 @@ export default {
                                     customClass: {
                                         confirmButton: 'btn btn-primary',
                                     },
-                                }).then((result) => {
+                                }).then(() => {
                                     vm.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
                                     vm.$emit('refreshOccurrenceReport');
                                     if (
@@ -401,7 +401,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateObserverDetail: function (id) {
@@ -416,7 +416,7 @@ export default {
                     headers: { 'Content-Type': 'application/json' },
                 }
             ).then(
-                (response) => {
+                () => {
                     swal.fire({
                         title: 'Reinstated',
                         text: 'The Observer has been reinstated',
@@ -424,7 +424,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         vm.$refs.observer_detail_datatable.vmDataTable.ajax.reload();
                         vm.$emit('refreshOccurrenceReport');
                         if (
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
index 66f42ec1..7293c181 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
@@ -315,7 +315,6 @@ export default {
             this.$refs.document_detail.isModalOpen = true;
         },
         editDocument: function (id) {
-            let vm = this;
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
@@ -381,7 +380,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The document has been discarded',
@@ -398,7 +397,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateDocument: function (id) {
@@ -427,7 +426,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your document has been reinstated',
@@ -444,7 +443,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         updatedDocuments() {
@@ -491,7 +490,7 @@ export default {
 
             vm.$refs.documents_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
index de664115..743680c4 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
@@ -9,8 +9,12 @@
                 <label for="" class="col-sm-3 control-label">Land Form:</label>
                 <div class="col-sm-9">
                     <select
-ref="land_form_select" v-model="occurrence_obj.habitat_composition.land_form" :disabled="isReadOnly"
-                        style="width:100%;" class="form-select input-sm">
+                        ref="land_form_select"
+                        v-model="occurrence_obj.habitat_composition.land_form"
+                        :disabled="isReadOnly"
+                        style="width: 100%"
+                        class="form-select input-sm"
+                    >
                         <option
                             v-for="option in land_form_list"
                             :key="option.id"
@@ -40,7 +44,10 @@ ref="land_form_select" v-model="occurrence_obj.habitat_composition.land_form" :d
                             "
                         >
                             <input
-v-if="occurrence_obj.habitat_composition.rock_type" type="text"
+                                v-if="
+                                    occurrence_obj.habitat_composition.rock_type
+                                "
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_obj.habitat_composition
@@ -69,8 +76,13 @@ v-if="occurrence_obj.habitat_composition.rock_type" type="text"
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.habitat_composition.rock_type" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="
+                                occurrence_obj.habitat_composition.rock_type
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -80,10 +92,14 @@ v-model="occurrence_obj.habitat_composition.rock_type" class="form-control" type
                 >
                 <div class="col-sm-6">
                     <input
-id="loose_rock_per" v-model="
+                        id="loose_rock_per"
+                        v-model="
                             occurrence_obj.habitat_composition
                                 .loose_rock_percent
-                        " :disabled="isReadOnly" type="number" class="form-control"
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control"
                         placeholder=""
                         min="0"
                         max="100"
@@ -109,7 +125,10 @@ id="loose_rock_per" v-model="
                             "
                         >
                             <input
-v-if="occurrence_obj.habitat_composition.soil_type" type="text"
+                                v-if="
+                                    occurrence_obj.habitat_composition.soil_type
+                                "
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_obj.habitat_composition
@@ -138,8 +157,13 @@ v-if="occurrence_obj.habitat_composition.soil_type" type="text"
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.habitat_composition.soil_type" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="
+                                occurrence_obj.habitat_composition.soil_type
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -164,7 +188,11 @@ v-model="occurrence_obj.habitat_composition.soil_type" class="form-control" type
                             "
                         >
                             <input
-v-if="occurrence_obj.habitat_composition.soil_colour" colour="text"
+                                v-if="
+                                    occurrence_obj.habitat_composition
+                                        .soil_colour
+                                "
+                                colour="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_obj.habitat_composition
@@ -184,16 +212,23 @@ v-if="occurrence_obj.habitat_composition.soil_colour" colour="text"
                             class="form-select"
                         >
                             <option
-v-for="soil_colour in soil_colour_list" :key="soil_colour.id"
-                                :value="soil_colour.id">
+                                v-for="soil_colour in soil_colour_list"
+                                :key="soil_colour.id"
+                                :value="soil_colour.id"
+                            >
                                 {{ soil_colour.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.habitat_composition.soil_colour" class="form-control" colour="text"
-                            :disabled="isReadOnly" />
+                            v-model="
+                                occurrence_obj.habitat_composition.soil_colour
+                            "
+                            class="form-control"
+                            colour="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -218,7 +253,11 @@ v-model="occurrence_obj.habitat_composition.soil_colour" class="form-control" co
                             "
                         >
                             <input
-v-if="occurrence_obj.habitat_composition.soil_condition" type="text"
+                                v-if="
+                                    occurrence_obj.habitat_composition
+                                        .soil_condition
+                                "
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_obj.habitat_composition
@@ -238,16 +277,24 @@ v-if="occurrence_obj.habitat_composition.soil_condition" type="text"
                             class="form-select"
                         >
                             <option
-v-for="soil_condition in soil_condition_list" :key="soil_condition.id"
-                                :value="soil_condition.id">
+                                v-for="soil_condition in soil_condition_list"
+                                :key="soil_condition.id"
+                                :value="soil_condition.id"
+                            >
                                 {{ soil_condition.name }}
                             </option>
                         </select>
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.habitat_composition.soil_condition" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="
+                                occurrence_obj.habitat_composition
+                                    .soil_condition
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -270,7 +317,10 @@ v-model="occurrence_obj.habitat_composition.soil_condition" class="form-control"
                             "
                         >
                             <input
-v-if="occurrence_obj.habitat_composition.drainage" type="text"
+                                v-if="
+                                    occurrence_obj.habitat_composition.drainage
+                                "
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_obj.habitat_composition
@@ -299,8 +349,13 @@ v-if="occurrence_obj.habitat_composition.drainage" type="text"
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.habitat_composition.drainage" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="
+                                occurrence_obj.habitat_composition.drainage
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -310,8 +365,14 @@ v-model="occurrence_obj.habitat_composition.drainage" class="form-control" type=
                 >
                 <div class="col-sm-9">
                     <textarea
-v-model="occurrence_obj.habitat_composition.water_quality" :disabled="isReadOnly" type="text" class="form-control"
-                        placeholder="" />
+                        v-model="
+                            occurrence_obj.habitat_composition.water_quality
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -320,8 +381,14 @@ v-model="occurrence_obj.habitat_composition.water_quality" :disabled="isReadOnly
                 >
                 <div class="col-sm-9">
                     <textarea
-v-model="occurrence_obj.habitat_composition.habitat_notes" :disabled="isReadOnly" type="text" class="form-control"
-                        placeholder="" />
+                        v-model="
+                            occurrence_obj.habitat_composition.habitat_notes
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -342,7 +409,8 @@ v-model="occurrence_obj.habitat_composition.habitat_notes" :disabled="isReadOnly
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingHabitatCompositionDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
                     <button
-v-if="!updatingHabitatCompositionDetails" :disabled="isReadOnly"
+                        v-if="!updatingHabitatCompositionDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
                         @click.prevent="updateHabitatCompositionDetails()"
                     >
@@ -361,7 +429,8 @@ v-if="!updatingHabitatCompositionDetails" :disabled="isReadOnly"
             </div>
 
             <RelatedReports
-:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
                 :section_type="'habitat_composition'"
                 @copy-update="copyUpdate"
             />
@@ -378,7 +447,10 @@ v-if="!updatingHabitatCompositionDetails" :disabled="isReadOnly"
                 <label for="" class="col-sm-3 control-label">Pristine %:</label>
                 <div class="col-sm-6">
                     <input
-id="pristine" v-model="occurrence_obj.habitat_condition.pristine" :disabled="isReadOnly" type="number"
+                        id="pristine"
+                        v-model="occurrence_obj.habitat_condition.pristine"
+                        :disabled="isReadOnly"
+                        type="number"
                         class="form-control occ_number"
                         placeholder=""
                         min="0"
@@ -393,7 +465,10 @@ id="pristine" v-model="occurrence_obj.habitat_condition.pristine" :disabled="isR
                 >
                 <div class="col-sm-6">
                     <input
-id="excellent" v-model="occurrence_obj.habitat_condition.excellent" :disabled="isReadOnly" type="number"
+                        id="excellent"
+                        v-model="occurrence_obj.habitat_condition.excellent"
+                        :disabled="isReadOnly"
+                        type="number"
                         class="form-control occ_number"
                         placeholder=""
                         min="0"
@@ -408,7 +483,10 @@ id="excellent" v-model="occurrence_obj.habitat_condition.excellent" :disabled="i
                 >
                 <div class="col-sm-6">
                     <input
-id="very_good" v-model="occurrence_obj.habitat_condition.very_good" :disabled="isReadOnly" type="number"
+                        id="very_good"
+                        v-model="occurrence_obj.habitat_condition.very_good"
+                        :disabled="isReadOnly"
+                        type="number"
                         class="form-control occ_number"
                         placeholder=""
                         min="0"
@@ -421,7 +499,11 @@ id="very_good" v-model="occurrence_obj.habitat_condition.very_good" :disabled="i
                 <label for="" class="col-sm-3 control-label">Good %:</label>
                 <div class="col-sm-6">
                     <input
-id="good" v-model="occurrence_obj.habitat_condition.good" :disabled="isReadOnly" type="number" class="form-control occ_number"
+                        id="good"
+                        v-model="occurrence_obj.habitat_condition.good"
+                        :disabled="isReadOnly"
+                        type="number"
+                        class="form-control occ_number"
                         placeholder=""
                         min="0"
                         max="100"
@@ -433,7 +515,10 @@ id="good" v-model="occurrence_obj.habitat_condition.good" :disabled="isReadOnly"
                 <label for="" class="col-sm-3 control-label">Degraded %:</label>
                 <div class="col-sm-6">
                     <input
-id="degraded" v-model="occurrence_obj.habitat_condition.degraded" :disabled="isReadOnly" type="number"
+                        id="degraded"
+                        v-model="occurrence_obj.habitat_condition.degraded"
+                        :disabled="isReadOnly"
+                        type="number"
                         class="form-control occ_number"
                         placeholder=""
                         min="0"
@@ -448,9 +533,12 @@ id="degraded" v-model="occurrence_obj.habitat_condition.degraded" :disabled="isR
                 >
                 <div class="col-sm-6">
                     <input
-id="completely_degraded" v-model="
+                        id="completely_degraded"
+                        v-model="
                             occurrence_obj.habitat_condition.completely_degraded
-                        " :disabled="isReadOnly" type="number"
+                        "
+                        :disabled="isReadOnly"
+                        type="number"
                         class="form-control occ_number"
                         placeholder=""
                         min="0"
@@ -463,8 +551,13 @@ id="completely_degraded" v-model="
                 <label for="" class="col-sm-3 control-label"></label>
                 <div class="col-sm-6">
                     <input
-id="habitat_cond_sum" v-model="habitat_cond_sum" readonly type="text" class="form-control occ_number"
-                        placeholder="" />
+                        id="habitat_cond_sum"
+                        v-model="habitat_cond_sum"
+                        readonly
+                        type="text"
+                        class="form-control occ_number"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div
@@ -476,7 +569,7 @@ id="habitat_cond_sum" v-model="habitat_cond_sum" readonly type="text" class="for
                 </label>
                 <div class="col-sm-9">
                     <input
-v-model="occurrence_obj.habitat_condition.count_date
+                        v-model="occurrence_obj.habitat_condition.count_date"
                         :disabled="true"
                         type="datetime-local"
                         class="form-control"
@@ -499,7 +592,8 @@ v-model="occurrence_obj.habitat_condition.count_date
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <button
-v-if="!updatingHabitatConditionDetails" :disabled="isReadOnly"
+                        v-if="!updatingHabitatConditionDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
                         @click.prevent="updateHabitatConditionDetails()"
                     >
@@ -517,7 +611,9 @@ v-if="!updatingHabitatConditionDetails" :disabled="isReadOnly"
                 </div>
             </div>
             <RelatedReports
-:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'habitat_condition'"
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'habitat_condition'"
                 @copy-update="copyUpdate"
             />
         </FormSection>
@@ -533,9 +629,17 @@ v-if="!updatingHabitatConditionDetails" :disabled="isReadOnly"
                 >
                 <div class="col-sm-9">
                     <textarea
-id="vegetation_structure_text_1" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_one" :disabled="isReadOnly" type="text"
-                        row="2" class="form-control"
-                        placeholder="" />
+                        id="vegetation_structure_text_1"
+                        v-model="
+                            occurrence_obj.vegetation_structure
+                                .vegetation_structure_layer_one
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -544,9 +648,17 @@ id="vegetation_structure_text_1" v-model="occurrence_obj.vegetation_structure.ve
                 >
                 <div class="col-sm-9">
                     <textarea
-id="vegetation_structure_text_2" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_two" :disabled="isReadOnly" type="text"
-                        row="2" class="form-control"
-                        placeholder="" />
+                        id="vegetation_structure_text_2"
+                        v-model="
+                            occurrence_obj.vegetation_structure
+                                .vegetation_structure_layer_two
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -555,9 +667,17 @@ id="vegetation_structure_text_2" v-model="occurrence_obj.vegetation_structure.ve
                 >
                 <div class="col-sm-9">
                     <textarea
-id="vegetation_structure_text_3" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_three" :disabled="isReadOnly" type="text"
-                        row="2" class="form-control"
-                        placeholder="" />
+                        id="vegetation_structure_text_3"
+                        v-model="
+                            occurrence_obj.vegetation_structure
+                                .vegetation_structure_layer_three
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -566,9 +686,17 @@ id="vegetation_structure_text_3" v-model="occurrence_obj.vegetation_structure.ve
                 >
                 <div class="col-sm-9">
                     <textarea
-id="vegetation_structure_text_4" v-model="occurrence_obj.vegetation_structure.vegetation_structure_layer_four" :disabled="isReadOnly" type="text"
-                        row="2" class="form-control"
-                        placeholder="" />
+                        id="vegetation_structure_text_4"
+                        v-model="
+                            occurrence_obj.vegetation_structure
+                                .vegetation_structure_layer_four
+                        "
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -588,7 +716,8 @@ id="vegetation_structure_text_4" v-model="occurrence_obj.vegetation_structure.ve
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <button
-v-if="!updatingVegetationStructure" :disabled="isReadOnly"
+                        v-if="!updatingVegetationStructure"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
                         @click.prevent="updateVegetationStructure()"
                     >
@@ -606,7 +735,8 @@ v-if="!updatingVegetationStructure" :disabled="isReadOnly"
                 </div>
             </div>
             <RelatedReports
-:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
                 :section_type="'vegetation_structure'"
                 @copy-update="copyUpdate"
             />
@@ -626,9 +756,14 @@ v-if="!updatingVegetationStructure" :disabled="isReadOnly"
                 >
                 <div class="col-sm-9">
                     <input
-ref="last_fire_date" v-model="occurrence_obj.fire_history.last_fire_estimate" :disabled="isReadOnly" type="month"
-                        class="form-control" name="last_fire_date"
-                        @change="checkDate()" />
+                        ref="last_fire_date"
+                        v-model="occurrence_obj.fire_history.last_fire_estimate"
+                        :disabled="isReadOnly"
+                        type="month"
+                        class="form-control"
+                        name="last_fire_date"
+                        @change="checkDate()"
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -648,7 +783,9 @@ ref="last_fire_date" v-model="occurrence_obj.fire_history.last_fire_estimate" :d
                             "
                         >
                             <input
-v-if="occurrence_obj.fire_history.intensity" type="text" class="form-control mb-3"
+                                v-if="occurrence_obj.fire_history.intensity"
+                                type="text"
+                                class="form-control mb-3"
                                 :value="
                                     occurrence_obj.fire_history.intensity +
                                     ' (Now Archived)'
@@ -674,8 +811,11 @@ v-if="occurrence_obj.fire_history.intensity" type="text" class="form-control mb-
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.fire_history.intensity" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="occurrence_obj.fire_history.intensity"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -683,8 +823,14 @@ v-model="occurrence_obj.fire_history.intensity" class="form-control" type="text"
                 <label for="" class="col-sm-3 control-label">Comments :</label>
                 <div class="col-sm-9">
                     <textarea
-id="fire_history_comment" v-model="occurrence_obj.fire_history.comment" :disabled="isReadOnly" type="text" row="2"
-                        class="form-control" placeholder="" />
+                        id="fire_history_comment"
+                        v-model="occurrence_obj.fire_history.comment"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -702,7 +848,8 @@ id="fire_history_comment" v-model="occurrence_obj.fire_history.comment" :disable
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <button
-v-if="!updatingFireHistoryDetails" :disabled="isReadOnly"
+                        v-if="!updatingFireHistoryDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
                         @click.prevent="updateFireHistoryDetails()"
                     >
@@ -714,7 +861,9 @@ v-if="!updatingFireHistoryDetails" :disabled="isReadOnly"
                 </div>
             </div>
             <RelatedReports
-:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'fire_history'"
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'fire_history'"
                 @copy-update="copyUpdate"
             />
         </FormSection>
@@ -737,8 +886,14 @@ v-if="!updatingFireHistoryDetails" :disabled="isReadOnly"
                 </div>
                 <div class="col-sm-9">
                     <textarea
-id="related_species" v-model="occurrence_obj.associated_species.comment" :disabled="isReadOnly" type="text" row="2"
-                        class="form-control" placeholder="" />
+                        id="related_species"
+                        v-model="occurrence_obj.associated_species.comment"
+                        :disabled="isReadOnly"
+                        type="text"
+                        row="2"
+                        class="form-control"
+                        placeholder=""
+                    />
                 </div>
             </div>
             <div class="row mb-3">
@@ -759,7 +914,8 @@ id="related_species" v-model="occurrence_obj.associated_species.comment" :disabl
             <div class="row mb-3">
                 <div class="col-sm-12">
                     <button
-v-if="!updatingAssociatedSpeciesDetails" :disabled="isReadOnly"
+                        v-if="!updatingAssociatedSpeciesDetails"
+                        :disabled="isReadOnly"
                         class="btn btn-primary btn-sm float-end"
                         @click.prevent="updateAssociatedSpeciesDetails()"
                     >
@@ -778,7 +934,9 @@ v-if="!updatingAssociatedSpeciesDetails" :disabled="isReadOnly"
             </div>
 
             <RelatedReports
-:is-read-only="isReadOnly" :occurrence_obj=occurrence_obj :section_type="'associated_species'"
+                :is-read-only="isReadOnly"
+                :occurrence_obj="occurrence_obj"
+                :section_type="'associated_species'"
                 @copy-update="copyUpdate"
             />
         </FormSection>
@@ -800,16 +958,16 @@ export default {
     props: {
         occurrence_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
@@ -821,7 +979,7 @@ export default {
             fireHistoryBody: 'fireHistoryBody' + vm._uid,
             associatedSpeciesBody: 'associatedSpeciesBody' + vm._uid,
             //---to show fields related to Fauna
-            isFauna: vm.occurrence_obj.group_type === "fauna" ? true : false,
+            isFauna: vm.occurrence_obj.group_type === 'fauna' ? true : false,
             //----list of values dictionary
             listOfValuesDict: {},
             //scientific_name_list: [],
@@ -838,7 +996,7 @@ export default {
             updatingVegetationStructure: false,
             updatingFireHistoryDetails: false,
             updatingAssociatedSpeciesDetails: false,
-        }
+        };
     },
     computed: {
         isReadOnly: function () {
@@ -863,47 +1021,40 @@ export default {
         const response = await fetch('/api/occurrence/list_of_values.json');
         vm.listOfValuesDict = await response.json();
         vm.land_form_list = vm.listOfValuesDict.land_form_list;
-        vm.land_form_list.splice(0, 0,
-            {
-                id: '',
-                name: '',
-            });
+        vm.land_form_list.splice(0, 0, {
+            id: '',
+            name: '',
+        });
         vm.rock_type_list = vm.listOfValuesDict.rock_type_list;
-        vm.rock_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.rock_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.soil_type_list = vm.listOfValuesDict.soil_type_list;
-        vm.soil_type_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.soil_type_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.soil_colour_list = vm.listOfValuesDict.soil_colour_list;
-        vm.soil_colour_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.soil_colour_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.soil_condition_list = vm.listOfValuesDict.soil_condition_list;
-        vm.soil_condition_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.soil_condition_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.drainage_list = vm.listOfValuesDict.drainage_list;
-        vm.drainage_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.drainage_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.intensity_list = vm.listOfValuesDict.intensity_list;
-        vm.intensity_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.intensity_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
     },
     mounted: function () {
         let vm = this;
@@ -914,232 +1065,301 @@ export default {
     methods: {
         eventListeners: function () {
             let vm = this;
-            $(vm.$refs.flowering_period_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Select Flowering Period",
-                multiple: true,
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.flowering_period_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Select Flowering Period',
+                    multiple: true,
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_obj.conservation_attributes.flowering_period = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.occurrence_obj.conservation_attributes.flowering_period =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_obj.conservation_attributes.flowering_period = selected.val();
+                    vm.occurrence_obj.conservation_attributes.flowering_period =
+                        selected.val();
                 });
         },
         checkDate: function () {
             let vm = this;
             if (vm.$refs.last_fire_date.value) {
-                vm.occurrence_obj.fire_history.last_fire_estimate = vm.$refs.last_fire_date.value;
-            }
-            else {
+                vm.occurrence_obj.fire_history.last_fire_estimate =
+                    vm.$refs.last_fire_date.value;
+            } else {
                 vm.occurrence_obj.fire_history.last_fire_estimate = null;
             }
         },
         relatedSpeciesTextChanged: function (new_text) {
-            this.occurrence_obj.associated_species.related_species = new_text
+            this.occurrence_obj.associated_species.related_species = new_text;
         },
         initialiseLandFormSelect: function () {
             let vm = this;
             // Initialise select2 for proposed Conservation Criteria
-            $(vm.$refs.land_form_select).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                multiple: true,
-                placeholder: "Select Land Form",
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.land_form_select)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    multiple: true,
+                    placeholder: 'Select Land Form',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_obj.habitat_composition.land_form = selected.val();
-                }).
-                on("select2:unselect", function (e) {
+                    vm.occurrence_obj.habitat_composition.land_form =
+                        selected.val();
+                })
+                .on('select2:unselect', function (e) {
                     var selected = $(e.currentTarget);
-                    vm.occurrence_obj.habitat_composition.land_form = selected.val();
+                    vm.occurrence_obj.habitat_composition.land_form =
+                        selected.val();
                 });
         },
         copyUpdate: function (object, section) {
             let vm = this;
             vm.occurrence_obj[section] = object[section];
-            $(vm.$refs.land_form_select).val(vm.occurrence_obj.habitat_composition.land_form).trigger('change.select2');
+            $(vm.$refs.land_form_select)
+                .val(vm.occurrence_obj.habitat_composition.land_form)
+                .trigger('change.select2');
             vm.$refs.related_species.reload();
             vm.calcKeigheryTotal();
         },
         updateHabitatCompositionDetails: function () {
             let vm = this;
             vm.updatingHabitatCompositionDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_habitat_composition_details')), {
-                method: 'POST',
-                body: JSON.stringify(vm.occurrence_obj.habitat_composition),
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }).then(async (response) => {
-                vm.updatingHabitatCompositionDetails = false;
-                vm.occurrence_obj.habitat_composition = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Habitat Composition details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Habitat Composition details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/update_habitat_composition_details'
+                ),
+                {
+                    method: 'POST',
+                    body: JSON.stringify(vm.occurrence_obj.habitat_composition),
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingHabitatCompositionDetails = false;
-            });
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingHabitatCompositionDetails = false;
+                    vm.occurrence_obj.habitat_composition =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Habitat Composition details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Habitat Composition details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingHabitatCompositionDetails = false;
+                }
+            );
         },
         updateHabitatConditionDetails: function () {
             let vm = this;
             var valKeigheryTotal = vm.calcKeigheryTotal();
             if (valKeigheryTotal) {
                 vm.updatingHabitatConditionDetails = true;
-                fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_habitat_condition_details')), {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.occurrence,
+                        vm.occurrence_obj.id +
+                            '/update_habitat_condition_details'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(
+                            vm.occurrence_obj.habitat_condition
+                        ),
+                    }
+                ).then(
+                    async (response) => {
+                        vm.updatingHabitatConditionDetails = false;
+                        vm.occurrence_obj.habitat_condition =
+                            await response.json();
+                        swal.fire({
+                            title: 'Saved',
+                            text: 'Habitat Condition details have been saved',
+                            icon: 'success',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                    },
+                    (error) => {
+                        var text = helpers.apiVueResourceError(error);
+                        swal.fire({
+                            title: 'Error',
+                            text:
+                                'Habitat Condition details cannot be saved because of the following error: ' +
+                                text,
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        vm.updatingHabitatConditionDetails = false;
+                    }
+                );
+            }
+        },
+        updateVegetationStructure: function () {
+            let vm = this;
+            vm.updatingVegetationStructure = true;
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/update_vegetation_structure'
+                ),
+                {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(vm.occurrence_obj.habitat_condition),
-                }).then(async (response) => {
-                    vm.updatingHabitatConditionDetails = false;
-                    vm.occurrence_obj.habitat_condition = await response.json();
+                    body: JSON.stringify(
+                        vm.occurrence_obj.vegetation_structure
+                    ),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingVegetationStructure = false;
+                    vm.occurrence_obj.vegetation_structure =
+                        await response.json();
                     swal.fire({
                         title: 'Saved',
-                        text: 'Habitat Condition details have been saved',
+                        text: 'Vegetation Structure details have been saved',
                         icon: 'success',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
+                            confirmButton: 'btn btn-primary',
                         },
+                    }).then(() => {
+                        if (vm.occurrence_obj.processing_status == 'Unlocked') {
+                            vm.$router.go();
+                        }
                     });
-                }, (error) => {
+                },
+                (error) => {
                     var text = helpers.apiVueResourceError(error);
                     swal.fire({
                         title: 'Error',
-                        text: 'Habitat Condition details cannot be saved because of the following error: ' + text,
+                        text:
+                            'Vegetation Structure details cannot be saved because of the following error: ' +
+                            text,
                         icon: 'error',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
+                            confirmButton: 'btn btn-primary',
                         },
                     });
-                    vm.updatingHabitatConditionDetails = false;
-                });
-            }
-        },
-        updateVegetationStructure: function () {
-            let vm = this;
-            vm.updatingVegetationStructure = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_vegetation_structure')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_obj.vegetation_structure),
-            }).then(async (response) => {
-                vm.updatingVegetationStructure = false;
-                vm.occurrence_obj.vegetation_structure = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Vegetation Structure details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-
-                }).then((result) => {
-                    if (vm.occurrence_obj.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Vegetation Structure details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-                vm.updatingVegetationStructure = false;
-            });
+                    vm.updatingVegetationStructure = false;
+                }
+            );
         },
         updateFireHistoryDetails: function () {
             let vm = this;
             vm.updatingFireHistoryDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_fire_history_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_obj.fire_history),
-            }).then(async (response) => {
-                vm.updatingFireHistoryDetails = false;
-                vm.occurrence_obj.fire_history = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Fire History details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Fire History details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/update_fire_history_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingFireHistoryDetails = false;
-            });
+                    body: JSON.stringify(vm.occurrence_obj.fire_history),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingFireHistoryDetails = false;
+                    vm.occurrence_obj.fire_history = await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Fire History details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Fire History details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingFireHistoryDetails = false;
+                }
+            );
         },
         updateAssociatedSpeciesDetails: function () {
             let vm = this;
             vm.updatingAssociatedSpeciesDetails = true;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence, (vm.occurrence_obj.id + '/update_associated_species_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.occurrence_obj.associated_species),
-            }).then(async (response) => {
-                vm.updatingAssociatedSpeciesDetails = false;
-                vm.occurrence_obj.associated_species = await response.json();
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Associated Species details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Associated Species cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/update_associated_species_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.updatingAssociatedSpeciesDetails = false;
-            });
+                    body: JSON.stringify(vm.occurrence_obj.associated_species),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingAssociatedSpeciesDetails = false;
+                    vm.occurrence_obj.associated_species =
+                        await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Associated Species details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Associated Species cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingAssociatedSpeciesDetails = false;
+                }
+            );
         },
         calcKeigheryTotal: function () {
             let vm = this;
@@ -1149,7 +1369,9 @@ export default {
             let c = parseInt(vm.occurrence_obj.habitat_condition.very_good);
             let d = parseInt(vm.occurrence_obj.habitat_condition.good);
             let e = parseInt(vm.occurrence_obj.habitat_condition.degraded);
-            let f = parseInt(vm.occurrence_obj.habitat_condition.completely_degraded);
+            let f = parseInt(
+                vm.occurrence_obj.habitat_condition.completely_degraded
+            );
             total = a + b + c + d + e + f;
             vm.habitat_cond_sum = total;
             if (total > 100) {
@@ -1158,16 +1380,14 @@ export default {
                     text: 'The total Kiery Scale should not exceed 100% ',
                     icon: 'warning',
                     customClass: {
-                        confirmButton: 'btn btn-primary'
+                        confirmButton: 'btn btn-primary',
                     },
                 });
                 return false;
-            }
-            else {
+            } else {
                 return true;
             }
-
-        }
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
index 6d5afdb9..ba34b4ab 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -16,7 +16,10 @@
             </div>
             <div class="row mb-3">
                 <MapComponent
-ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_obj"
+                    ref="component_map"
+                    :key="componentMapKey"
+                    class="me-3"
+                    :context="occurrence_obj"
                     :is_external="false"
                     :point-features-supported="true"
                     :polygon-features-supported="true"
@@ -124,8 +127,11 @@ ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_obj
                 <label for="" class="col-sm-3 control-label">Region:</label>
                 <div class="col-sm-9">
                     <select
-v-model="occurrence_obj.location.region_id" :disabled="isReadOnly" class="form-select"
-                        @change="filterDistrict($event)">
+                        v-model="occurrence_obj.location.region_id"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                        @change="filterDistrict($event)"
+                    >
                         <option
                             v-for="option in region_list"
                             :key="option.id"
@@ -158,7 +164,8 @@ v-model="occurrence_obj.location.region_id" :disabled="isReadOnly" class="form-s
                 <label for="" class="col-sm-3 control-label">Locality:</label>
                 <div class="col-sm-9">
                     <textarea
-id="locality" v-model="occurrence_obj.location.locality
+                        id="locality"
+                        v-model="occurrence_obj.location.locality"
                         :disabled="isReadOnly"
                         class="form-control"
                         rows="1"
@@ -174,7 +181,8 @@ id="locality" v-model="occurrence_obj.location.locality
                 >
                 <div class="col-sm-9">
                     <textarea
-id="loc_description" v-model="occurrence_obj.location.location_description
+                        id="loc_description"
+                        v-model="occurrence_obj.location.location_description"
                         :disabled="isReadOnly"
                         class="form-control"
                         rows="2"
@@ -188,7 +196,8 @@ id="loc_description" v-model="occurrence_obj.location.location_description
                 >
                 <div class="col-sm-9">
                     <textarea
-id="boundary_descr" v-model="occurrence_obj.location.boundary_description
+                        id="boundary_descr"
+                        v-model="occurrence_obj.location.boundary_description"
                         :disabled="isReadOnly"
                         class="form-control"
                         rows="2"
@@ -226,7 +235,10 @@ id="boundary_descr" v-model="occurrence_obj.location.boundary_description
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_obj.location
+                            v-if="
+                                coordinate_source_list &&
+                                coordinate_source_list.length > 0 &&
+                                occurrence_obj.location &&
                                 !coordinate_source_list
                                     .map((d) => d.id)
                                     .includes(
@@ -236,7 +248,8 @@ v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_
                             "
                         >
                             <input
-v-if="occurrence_obj.location.coordinate_source" type="text"
+                                v-if="occurrence_obj.location.coordinate_source"
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_obj.location.coordinate_source +
@@ -249,8 +262,11 @@ v-if="occurrence_obj.location.coordinate_source" type="text"
                             </div>
                         </template>
                         <select
-                            v-model="occurrence_obj.location.coordinate_source_id"
-                            class="form-select">
+                            v-model="
+                                occurrence_obj.location.coordinate_source_id
+                            "
+                            class="form-select"
+                        >
                             <option
                                 v-for="option in coordinate_source_list"
                                 :key="option.id"
@@ -262,8 +278,11 @@ v-if="occurrence_obj.location.coordinate_source" type="text"
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.location.coordinate_source" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="occurrence_obj.location.coordinate_source"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -293,7 +312,10 @@ v-model="occurrence_obj.location.coordinate_source" class="form-control" type="t
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_obj.location
+                            v-if="
+                                location_accuracy_list &&
+                                location_accuracy_list.length > 0 &&
+                                occurrence_obj.location &&
                                 !location_accuracy_list
                                     .map((d) => d.id)
                                     .includes(
@@ -303,7 +325,8 @@ v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_
                             "
                         >
                             <input
-v-if="occurrence_obj.location.location_accuracy" type="text"
+                                v-if="occurrence_obj.location.location_accuracy"
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_obj.location.location_accuracy +
@@ -316,8 +339,11 @@ v-if="occurrence_obj.location.location_accuracy" type="text"
                             </div>
                         </template>
                         <select
-                            v-model="occurrence_obj.location.location_accuracy_id"
-                            class="form-select">
+                            v-model="
+                                occurrence_obj.location.location_accuracy_id
+                            "
+                            class="form-select"
+                        >
                             <option
                                 v-for="option in location_accuracy_list"
                                 :key="option.id"
@@ -329,8 +355,11 @@ v-if="occurrence_obj.location.location_accuracy" type="text"
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_obj.location.location_accuracy" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="occurrence_obj.location.location_accuracy"
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -350,8 +379,11 @@ v-model="occurrence_obj.location.location_accuracy" class="form-control" type="t
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingLocationDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
                     <button
-v-if="!updatingLocationDetails" class="btn btn-primary btn-sm float-end"
-                        :disabled="isReadOnly" @click.prevent="updateLocationDetails()">
+                        v-if="!updatingLocationDetails"
+                        class="btn btn-primary btn-sm float-end"
+                        :disabled="isReadOnly"
+                        @click.prevent="updateLocationDetails()"
+                    >
                         Update
                     </button>
                     <button v-else disabled class="float-end btn btn-primary">
@@ -372,7 +404,8 @@ v-if="!updatingLocationDetails" class="btn btn-primary btn-sm float-end"
             >
                 <div>
                     <OccurrenceSiteDatatable
-v-if="occurrence_obj" ref="occurrence_sites_datatable"
+                        v-if="occurrence_obj"
+                        ref="occurrence_sites_datatable"
                         :key="datatableOCCSiteKey"
                         :occurrence_obj="occurrence_obj"
                         @updated-sites="updatedSites"
@@ -388,7 +421,8 @@ v-if="occurrence_obj" ref="occurrence_sites_datatable"
             >
                 <div>
                     <OccurrenceTenureDatatable
-v-if="occurrence_obj" ref="occurrence_tenure_datatable"
+                        v-if="occurrence_obj"
+                        ref="occurrence_tenure_datatable"
                         :key="datatableOCCTenureKey"
                         :occurrence-id="occurrence_obj.id"
                         :href-container-id="getMapContainerId"
@@ -399,7 +433,9 @@ v-if="occurrence_obj" ref="occurrence_tenure_datatable"
                 </div>
             </FormSection>
             <RelatedReports
-v-if="occurrence_obj" ref="related_reports_datatable" :key="datatableRelatedOCRKey"
+                v-if="occurrence_obj"
+                ref="related_reports_datatable"
+                :key="datatableRelatedOCRKey"
                 :is-read-only="isReadOnly"
                 :occurrence_obj="occurrence_obj"
                 :section_type="'location'"
@@ -597,7 +633,6 @@ export default {
     },
     created: async function () {
         let vm = this;
-        let action = this.$route.query.action;
 
         fetch(
             helpers.add_endpoint_join(
@@ -769,7 +804,7 @@ export default {
                             customClass: {
                                 confirmButton: 'btn btn-primary',
                             },
-                        }).then((result) => {
+                        }).then(() => {
                             if (
                                 vm.occurrence_obj.processing_status ==
                                 'Unlocked'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
index ae8c3b70..89699a6c 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
@@ -771,6 +771,7 @@ export default {
             );
         },
         populatePlantCountLookups: function () {
+            let vm = this;
             // using child refs to assign the list values to avoid calling the above api again in plantCount component
             vm.$refs.plantCountDetail.plant_count_method_list =
                 vm.listOfValuesDict.plant_count_method_list;
@@ -798,6 +799,7 @@ export default {
             });
         },
         populateAnimalObservationLookups: function () {
+            let vm = this;
             // using child refs to assign the list values to avoid calling the above api again in AnimalObservation component
             vm.$refs.animalObservationDetail.primary_detection_method_list =
                 vm.listOfValuesDict.primary_detection_method_list;
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
index 0bda12bc..6093afae 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
@@ -41,7 +41,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import { v4 as uuid } from 'uuid';
@@ -317,7 +317,7 @@ export default {
                 },
                 body: formData,
             }).then(
-                (response) => {
+                () => {
                     vm.addingThreat = false;
                     vm.refreshFromResponse();
                     vm.$parent.updatedThreats();
@@ -330,7 +330,6 @@ export default {
             );
         },
         viewThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
index f8e9ce09..d9c2c567 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
@@ -80,7 +80,6 @@ export default {
         'toggle-show-on-map',
     ],
     data() {
-        let vm = this;
         return {
             uuid: uuid(),
             datatable_id: 'datatable-related-ocr-' + uuid(),
@@ -255,7 +254,7 @@ export default {
                         vm.adjust_table_width();
                     }, 100);
                 },
-                initComplete: function (settings, json) {
+                initComplete: function () {
                     setTimeout(function () {
                         vm.adjust_table_width();
                     }, 100);
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
index 5c6c53a7..fa946ae3 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
@@ -152,7 +152,6 @@ export default {
                 buttons: [],
                 columns: columns,
                 processing: true,
-                initComplete: function (settings, json) {},
             };
         },
         datatable_headers: function () {
@@ -181,7 +180,7 @@ export default {
                         '/add_related_species?species=' +
                         vm.selected_scientific_name
                 ).then(
-                    (response) => {
+                    () => {
                         swal.fire({
                             title: 'Added',
                             text: 'Related Species has been added',
@@ -223,7 +222,7 @@ export default {
                                 '/remove_related_species?species=' +
                                 id
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Removed',
                                     text: 'Related Species has been removed',
@@ -240,7 +239,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         initialiseScientificNameLookup: function () {
@@ -269,15 +268,13 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.selected_scientific_name = data;
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.selected_scientific_name = null;
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
index b5bbaded..1d12a309 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_section_modal.vue
@@ -78,7 +78,7 @@
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import { api_endpoints, helpers } from '@/utils/hooks';
+import { api_endpoints } from '@/utils/hooks';
 export default {
     name: 'SectionModal',
     components: {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
index 317b3b0b..750da884 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
@@ -611,7 +611,6 @@ export default {
             });
         },
         editThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
             fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
@@ -631,7 +630,6 @@ export default {
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
@@ -683,7 +681,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your threat has been removed',
@@ -700,7 +698,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateThreat: function (id) {
@@ -727,7 +725,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your threat has been reinstated',
@@ -744,7 +742,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         updatedThreats() {
@@ -801,7 +799,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
index fd15911b..231d4b97 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
@@ -11,7 +11,8 @@
             >
                 <template v-if="!is_external">
                     <CollapsibleComponent
-ref="assessment_comments" component_title="Assessment Comments"
+                        ref="assessment_comments"
+                        component_title="Assessment Comments"
                         :collapsed="false"
                     >
                         <div class="row">
@@ -20,9 +21,14 @@ ref="assessment_comments" component_title="Assessment Comments"
                                     <div class="col">
                                         <div class="form-floating m-3">
                                             <textarea
-id="assessor_deficiencies" v-model="occurrence_report_obj.deficiency_data"
-                                                :disabled="deficiency_readonly" class="form-control"
-                                                placeholder="Deficiency Comments" />
+                                                id="assessor_deficiencies"
+                                                v-model="
+                                                    occurrence_report_obj.deficiency_data
+                                                "
+                                                :disabled="deficiency_readonly"
+                                                class="form-control"
+                                                placeholder="Deficiency Comments"
+                                            />
                                             <label
                                                 for="assessor_deficiencies"
                                                 class="form-label"
@@ -35,9 +41,17 @@ id="assessor_deficiencies" v-model="occurrence_report_obj.deficiency_data"
                                     <div class="col">
                                         <div class="form-floating m-3 mt-1">
                                             <textarea
-id="assessor_comment" v-model="occurrence_report_obj.assessor_data"
-                                                :disabled="assessor_comment_readonly" class="form-control" rows="3"
-                                                placeholder="Assessor Comments" />
+                                                id="assessor_comment"
+                                                v-model="
+                                                    occurrence_report_obj.assessor_data
+                                                "
+                                                :disabled="
+                                                    assessor_comment_readonly
+                                                "
+                                                class="form-control"
+                                                rows="3"
+                                                placeholder="Assessor Comments"
+                                            />
                                             <label
                                                 for=""
                                                 class="col-sm-4 col-form-label"
@@ -64,13 +78,22 @@ id="assessor_comment" v-model="occurrence_report_obj.assessor_data"
                                                         class="form-floating m-3 mt-1"
                                                     >
                                                         <textarea
-v-if='!ref.readonly' :id="ref.name" v-model="referral.referral_comment"
+                                                            v-if="!ref.readonly"
+                                                            :id="ref.name"
+                                                            v-model="
+                                                                referral.referral_comment
+                                                            "
                                                             :disabled="true"
                                                             :name="ref.name"
                                                             class="form-control"
-                                                            :placeholder="ref.label" />
+                                                            :placeholder="
+                                                                ref.label
+                                                            "
+                                                        />
                                                         <textarea
-v-else :disabled="true" :name="ref.name"
+                                                            v-else
+                                                            :disabled="true"
+                                                            :name="ref.name"
                                                             :value="
                                                                 ref.value || ''
                                                             "
@@ -104,7 +127,9 @@ v-else :disabled="true" :name="ref.name"
                         >
                         <div :id="select_scientific_name" class="col-sm-9">
                             <select
-:id="scientific_name_lookup" :ref="scientific_name_lookup" :disabled="isReadOnly"
+                                :id="scientific_name_lookup"
+                                :ref="scientific_name_lookup"
+                                :disabled="isReadOnly"
                                 :name="scientific_name_lookup"
                                 class="form-control"
                             />
@@ -114,7 +139,10 @@ v-else :disabled="true" :name="ref.name"
                         <label for="" class="col-sm-3 col-form-label"></label>
                         <div class="col-sm-9">
                             <textarea
-id="species_display" v-model="species_display" disabled class="form-control"
+                                id="species_display"
+                                v-model="species_display"
+                                disabled
+                                class="form-control"
                                 rows="2"
                             />
                         </div>
@@ -125,7 +153,10 @@ id="species_display" v-model="species_display" disabled class="form-control"
                         >
                         <div class="col-sm-9">
                             <input
-id="previous_name" v-model="taxon_previous_name" readonly type="text"
+                                id="previous_name"
+                                v-model="taxon_previous_name"
+                                readonly
+                                type="text"
                                 class="form-control"
                                 placeholder=""
                             />
@@ -139,7 +170,9 @@ id="previous_name" v-model="taxon_previous_name" readonly type="text"
                         >
                         <div :id="select_community_name" class="col-sm-9">
                             <select
-:id="community_name_lookup" :ref="community_name_lookup" :disabled="isReadOnly"
+                                :id="community_name_lookup"
+                                :ref="community_name_lookup"
+                                :disabled="isReadOnly"
                                 :name="community_name_lookup"
                                 class="form-control"
                             />
@@ -149,7 +182,10 @@ id="previous_name" v-model="taxon_previous_name" readonly type="text"
                         <label for="" class="col-sm-3 col-form-label"></label>
                         <div class="col-sm-9">
                             <textarea
-id="community_display" v-model="community_display" disabled class="form-control"
+                                id="community_display"
+                                v-model="community_display"
+                                disabled
+                                class="form-control"
                                 rows="2"
                             />
                         </div>
@@ -166,7 +202,9 @@ id="community_display" v-model="community_display" disabled class="form-control"
                     >
                     <div class="col-sm-9">
                         <input
-id="migrated_from_id" :value="occurrence_report_obj.migrated_from_id" disabled
+                            id="migrated_from_id"
+                            :value="occurrence_report_obj.migrated_from_id"
+                            disabled
                             type="text"
                             class="form-control"
                         />
@@ -176,7 +214,8 @@ id="migrated_from_id" :value="occurrence_report_obj.migrated_from_id" disabled
                     <label for="" class="col-sm-3 col-form-label">Site:</label>
                     <div class="col-sm-9">
                         <textarea
-id="site" v-model="occurrence_report_obj.site
+                            id="site"
+                            v-model="occurrence_report_obj.site"
                             :disabled="isReadOnly"
                             class="form-control"
                             rows="1"
@@ -196,8 +235,15 @@ id="site" v-model="occurrence_report_obj.site
                         </label>
                         <div class="col-sm-9">
                             <input
-id="occurrence_report_is_for_occurrence_number" v-model="occurrence_report_obj.ocr_for_occ_number
-                                " type="text" :disabled="isReadOnly" class="form-control" autocomplete="new-password" />
+                                id="occurrence_report_is_for_occurrence_number"
+                                v-model="
+                                    occurrence_report_obj.ocr_for_occ_number
+                                "
+                                type="text"
+                                :disabled="isReadOnly"
+                                class="form-control"
+                                autocomplete="new-password"
+                            />
                         </div>
                     </div>
                     <div class="row mb-3">
@@ -211,8 +257,13 @@ id="occurrence_report_is_for_occurrence_number" v-model="occurrence_report_obj.o
                         </label>
                         <div class="col-sm-9">
                             <input
-id="occurrence_report_for_occurrence_name" v-model="occurrence_report_obj.ocr_for_occ_name
-                                " type="text" :disabled="isReadOnly" class="form-control" autocomplete="new-password" />
+                                id="occurrence_report_for_occurrence_name"
+                                v-model="occurrence_report_obj.ocr_for_occ_name"
+                                type="text"
+                                :disabled="isReadOnly"
+                                class="form-control"
+                                autocomplete="new-password"
+                            />
                         </div>
                     </div>
                 </template>
@@ -223,7 +274,7 @@ id="occurrence_report_for_occurrence_name" v-model="occurrence_report_obj.ocr_fo
                     >
                     <div class="col-sm-9">
                         <input
-v-model="occurrence_report_obj.observation_date
+                            v-model="occurrence_report_obj.observation_date"
                             :disabled="isReadOnly"
                             type="datetime-local"
                             class="form-control"
@@ -233,7 +284,8 @@ v-model="occurrence_report_obj.observation_date
                     </div>
                 </div>
                 <ObserverDatatable
-ref="observer_datatable" :occurrence_report_obj="occurrence_report_obj"
+                    ref="observer_datatable"
+                    :occurrence_report_obj="occurrence_report_obj"
                     :is_external="is_external"
                     :is-read-only="isReadOnly"
                     :show_observer_contact_information="
@@ -262,16 +314,16 @@ export default {
         FormSection,
         HelpText,
         ObserverDatatable,
-        CollapsibleComponent
+        CollapsibleComponent,
     },
     props: {
         occurrence_report_obj: {
             type: Object,
-            required: true
+            required: true,
         },
         referral: {
             type: Object,
-            required: false
+            required: false,
         },
         is_external: {
             type: Boolean,
@@ -287,10 +339,8 @@ export default {
         let vm = this;
         return {
             uuid: null,
-            scientific_name_lookup:
-                'scientific_name_lookup' + vm._uid,
-            select_scientific_name:
-                'select_scientific_name' + vm._uid,
+            scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
+            select_scientific_name: 'select_scientific_name' + vm._uid,
             community_name_lookup: 'community_name_lookup' + vm._uid,
             select_community_name: 'select_community_name' + vm._uid,
             isFauna:
@@ -303,7 +353,7 @@ export default {
             community_display: '',
             taxon_previous_name: '',
             referral_comments_boxes: [],
-        }
+        };
     },
     computed: {
         isReadOnly: function () {
@@ -373,19 +423,19 @@ export default {
         let dict_url =
             action == 'view'
                 ? api_endpoints.cs_profile_dict +
-                '?group_type=' +
-                vm.occurrence_report_obj.group_type +
-                '&action=' +
-                action
+                  '?group_type=' +
+                  vm.occurrence_report_obj.group_type +
+                  '&action=' +
+                  action
                 : api_endpoints.cs_profile_dict +
-                '?group_type=' +
-                vm.occurrence_report_obj.group_type;
-        fetch(dict_url).then(async (response) => {
+                  '?group_type=' +
+                  vm.occurrence_report_obj.group_type;
+        fetch(dict_url).then(
+            async (response) => {
                 vm.cs_profile_dict = await response.json();
                 if (!vm.isCommunity) {
                     this.getSpeciesDisplay();
-                }
-                else {
+                } else {
                     this.getCommunityDisplay();
                 }
             },
@@ -409,7 +459,7 @@ export default {
     },
     methods: {
         test: function () {
-            console.log('test')
+            console.log('test');
         },
         initialiseScientificNameLookup: function () {
             let vm = this;
@@ -438,8 +488,8 @@ export default {
                 .on('select2:select', function (e) {
                     // eslint-disable-next-line no-unused-vars
                     var selected = $(e.currentTarget);
-                    let data = e.params.data.id;
-                    vm.occurrence_report_obj.species_id = e.params.data.species_id;
+                    vm.occurrence_report_obj.species_id =
+                        e.params.data.species_id;
                     vm.species_display = e.params.data.text;
                     vm.taxon_previous_name = e.params.data.taxon_previous_name;
                     // Unfortunate to call this twice but the change event on the fieldset fires before
@@ -458,8 +508,8 @@ export default {
                 .on('select2:open', function (e) {
                     const searchField = $(
                         '[aria-controls="select2-' +
-                        vm.scientific_name_lookup +
-                        '-results"]'
+                            vm.scientific_name_lookup +
+                            '-results"]'
                     );
                     // move focus to select2 field
                     searchField[0].focus();
@@ -468,14 +518,17 @@ export default {
         getSpeciesDisplay: function () {
             let vm = this;
             if (vm.occurrence_report_obj.species_taxonomy_id != null) {
-                let species_display_url = api_endpoints.species_display + "?taxon_id=" + vm.occurrence_report_obj.species_taxonomy_id
+                let species_display_url =
+                    api_endpoints.species_display +
+                    '?taxon_id=' +
+                    vm.occurrence_report_obj.species_taxonomy_id;
                 fetch(species_display_url).then(async (response) => {
-                        const data = await response.json();
-                        var newOption = new Option(data.name, data.id, false, true);
-                        $('#' + vm.scientific_name_lookup).append(newOption);
-                        vm.species_display = data.name
-                        vm.taxon_previous_name = data.taxon_previous_name
-                    })
+                    const data = await response.json();
+                    var newOption = new Option(data.name, data.id, false, true);
+                    $('#' + vm.scientific_name_lookup).append(newOption);
+                    vm.species_display = data.name;
+                    vm.taxon_previous_name = data.taxon_previous_name;
+                });
             }
         },
         initialiseCommunityNameLookup: function () {
@@ -519,8 +572,8 @@ export default {
                 .on('select2:open', function (e) {
                     const searchField = $(
                         '[aria-controls="select2-' +
-                        vm.community_name_lookup +
-                        '-results"]'
+                            vm.community_name_lookup +
+                            '-results"]'
                     );
                     // move focus to select2 field
                     searchField[0].focus();
@@ -529,21 +582,23 @@ export default {
         getCommunityDisplay: function () {
             let vm = this;
             if (vm.occurrence_report_obj?.community_id) {
-                let community_display_url = api_endpoints.community_display +
-                    "?community_id=" + vm.occurrence_report_obj.community_id
+                let community_display_url =
+                    api_endpoints.community_display +
+                    '?community_id=' +
+                    vm.occurrence_report_obj.community_id;
                 fetch(community_display_url).then(async (response) => {
-                        const data = await response.json();
-                        var newOption = new Option(data.name, data.id, false, true);
-                        $('#' + vm.community_name_lookup).append(newOption);
-                        vm.community_display = data.name
-                    })
+                    const data = await response.json();
+                    var newOption = new Option(data.name, data.id, false, true);
+                    $('#' + vm.community_name_lookup).append(newOption);
+                    vm.community_display = data.name;
+                });
             }
         },
         incrementComponentMapKey: function () {
             this.uuid = uuid();
         },
         formatObservationDate: function () {
-            if (this.occurrence_report_obj.observation_date === "") {
+            if (this.occurrence_report_obj.observation_date === '') {
                 this.occurrence_report_obj.observation_date = null;
             }
         },
@@ -575,9 +630,9 @@ export default {
                     var referral_name = `comment-field-Referral-${v.referral.email}`;
                     var referral_visibility =
                         assessor_mode == 'referral' &&
-                            this.occurrence_report_obj.assessor_mode
-                                .assessor_can_assess &&
-                            this.referral.referral == v.referral.id
+                        this.occurrence_report_obj.assessor_mode
+                            .assessor_can_assess &&
+                        this.referral.referral == v.referral.id
                             ? false
                             : true;
                     var referral_label = `${v.referral.fullname}`;
@@ -596,11 +651,14 @@ export default {
             this.$emit('refreshOccurrenceReport');
         },
         saveOccurrenceReport: function (e) {
-            console.log(e.target.id)
-            if (e.target.id != 'select_scientific_name' && e.target.id != 'select_community_name') {
+            console.log(e.target.id);
+            if (
+                e.target.id != 'select_scientific_name' &&
+                e.target.id != 'select_community_name'
+            ) {
                 this.$emit('saveOccurrenceReport');
             }
-        }
+        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
index 857c87ee..1c1cc7de 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
@@ -335,7 +335,6 @@ export default {
             this.$refs.document_detail.isModalOpen = true;
         },
         editDocument: function (id) {
-            let vm = this;
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
@@ -399,7 +398,7 @@ export default {
                             headers: { 'Content-Type': 'application/json' },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'The document has been discarded',
@@ -407,7 +406,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then((result) => {
+                            }).then(() => {
                                 vm.$refs.documents_datatable.vmDataTable.ajax.reload();
                                 if (
                                     vm.occurrence_report_obj
@@ -448,7 +447,7 @@ export default {
                             headers: { 'Content-Type': 'application/json' },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your document has been reinstated',
@@ -456,7 +455,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then((result) => {
+                            }).then(() => {
                                 vm.$refs.documents_datatable.vmDataTable.ajax.reload();
                                 if (
                                     vm.occurrence_report_obj
@@ -533,7 +532,7 @@ export default {
             );
             vm.$refs.documents_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
index 677cbe2e..63900ce8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
@@ -1095,7 +1095,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         if (
                             vm.occurrence_report_obj.processing_status ==
                             'Unlocked'
@@ -1152,7 +1152,7 @@ export default {
                             customClass: {
                                 confirmButton: 'btn btn-primary',
                             },
-                        }).then((result) => {
+                        }).then(() => {
                             if (
                                 vm.occurrence_report_obj.processing_status ==
                                 'Unlocked'
@@ -1172,7 +1172,7 @@ export default {
                             customClass: {
                                 confirmButton: 'btn btn-primary',
                             },
-                        }).then((result) => {
+                        }).then(() => {
                             if (
                                 vm.occurrence_report_obj.processing_status ==
                                 'Unlocked'
@@ -1214,7 +1214,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         if (
                             vm.occurrence_report_obj.processing_status ==
                             'Unlocked'
@@ -1266,7 +1266,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         if (
                             vm.occurrence_report_obj.processing_status ==
                             'Unlocked'
@@ -1321,7 +1321,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         if (
                             vm.occurrence_report_obj.processing_status ==
                             'Unlocked'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
index 2b6783e9..eb0b68df 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
@@ -17,7 +17,10 @@
             </div>
             <div class="row mb-3">
                 <MapComponent
-ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_report_obj"
+                    ref="component_map"
+                    :key="componentMapKey"
+                    class="me-3"
+                    :context="occurrence_report_obj"
                     :is_external="is_external"
                     :point-features-supported="true"
                     :polygon-features-supported="isFauna == false"
@@ -54,8 +57,11 @@ ref="component_map" :key="componentMapKey" class="me-3" :context="occurrence_rep
                 <label for="" class="col-sm-3 control-label">Region:</label>
                 <div class="col-sm-9">
                     <select
-v-model="occurrence_report_obj.location.region_id" :disabled="isReadOnly" class="form-select"
-                        @change="filterDistrict($event)">
+                        v-model="occurrence_report_obj.location.region_id"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                        @change="filterDistrict($event)"
+                    >
                         <option
                             v-for="option in region_list"
                             :key="option.id"
@@ -70,8 +76,10 @@ v-model="occurrence_report_obj.location.region_id" :disabled="isReadOnly" class=
                 <label for="" class="col-sm-3 control-label">District:</label>
                 <div class="col-sm-9">
                     <select
-v-model="occurrence_report_obj.location.district_id" :disabled="isReadOnly"
-                        class="form-select">
+                        v-model="occurrence_report_obj.location.district_id"
+                        :disabled="isReadOnly"
+                        class="form-select"
+                    >
                         <option
                             v-for="option in filtered_district_list"
                             :key="option.id"
@@ -86,7 +94,8 @@ v-model="occurrence_report_obj.location.district_id" :disabled="isReadOnly"
                 <label for="" class="col-sm-3 control-label">Locality:</label>
                 <div class="col-sm-9">
                     <textarea
-id="locality" v-model="occurrence_report_obj.location.locality
+                        id="locality"
+                        v-model="occurrence_report_obj.location.locality"
                         :disabled="isReadOnly"
                         class="form-control"
                         rows="1"
@@ -103,7 +112,9 @@ id="locality" v-model="occurrence_report_obj.location.locality
                 >
                 <div class="col-sm-9">
                     <textarea
-id="loc_description" v-model="occurrence_report_obj.location.location_description
+                        id="loc_description"
+                        v-model="
+                            occurrence_report_obj.location.location_description
                         "
                         :disabled="isReadOnly"
                         class="form-control"
@@ -118,7 +129,9 @@ id="loc_description" v-model="occurrence_report_obj.location.location_descriptio
                 >
                 <div class="col-sm-9">
                     <textarea
-id="boundary_descr" v-model="occurrence_report_obj.location.boundary_description
+                        id="boundary_descr"
+                        v-model="
+                            occurrence_report_obj.location.boundary_description
                         "
                         :disabled="isReadOnly"
                         class="form-control"
@@ -217,7 +230,10 @@ id="boundary_descr" v-model="occurrence_report_obj.location.boundary_description
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_report_obj.location
+                            v-if="
+                                coordinate_source_list &&
+                                coordinate_source_list.length > 0 &&
+                                occurrence_report_obj.location
                                     .coordinate_source_id &&
                                 !coordinate_source_list
                                     .map((d) => d.id)
@@ -228,7 +244,11 @@ v-if="coordinate_source_list && coordinate_source_list.length > 0 && occurrence_
                             "
                         >
                             <input
-v-if="occurrence_report_obj.location.coordinate_source" type="text"
+                                v-if="
+                                    occurrence_report_obj.location
+                                        .coordinate_source
+                                "
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_report_obj.location
@@ -241,8 +261,12 @@ v-if="occurrence_report_obj.location.coordinate_source" type="text"
                             </div>
                         </template>
                         <select
-                            v-model="occurrence_report_obj.location.coordinate_source_id"
-                            class="form-select">
+                            v-model="
+                                occurrence_report_obj.location
+                                    .coordinate_source_id
+                            "
+                            class="form-select"
+                        >
                             <option
                                 v-for="option in coordinate_source_list"
                                 :key="option.id"
@@ -254,8 +278,14 @@ v-if="occurrence_report_obj.location.coordinate_source" type="text"
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_report_obj.location.coordinate_source_id" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="
+                                occurrence_report_obj.location
+                                    .coordinate_source_id
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -284,7 +314,10 @@ v-model="occurrence_report_obj.location.coordinate_source_id" class="form-contro
                 <div class="col-sm-9">
                     <template v-if="!isReadOnly">
                         <template
-v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_report_obj.location
+                            v-if="
+                                location_accuracy_list &&
+                                location_accuracy_list.length > 0 &&
+                                occurrence_report_obj.location
                                     .location_accuracy_id &&
                                 !location_accuracy_list
                                     .map((d) => d.id)
@@ -295,7 +328,11 @@ v-if="location_accuracy_list && location_accuracy_list.length > 0 && occurrence_
                             "
                         >
                             <input
-v-if="occurrence_report_obj.location.location_accuracy" type="text"
+                                v-if="
+                                    occurrence_report_obj.location
+                                        .location_accuracy
+                                "
+                                type="text"
                                 class="form-control mb-3"
                                 :value="
                                     occurrence_report_obj.location
@@ -308,8 +345,12 @@ v-if="occurrence_report_obj.location.location_accuracy" type="text"
                             </div>
                         </template>
                         <select
-                            v-model="occurrence_report_obj.location.location_accuracy_id"
-                            class="form-select">
+                            v-model="
+                                occurrence_report_obj.location
+                                    .location_accuracy_id
+                            "
+                            class="form-select"
+                        >
                             <option
                                 v-for="option in location_accuracy_list"
                                 :key="option.id"
@@ -321,8 +362,13 @@ v-if="occurrence_report_obj.location.location_accuracy" type="text"
                     </template>
                     <template v-else>
                         <input
-v-model="occurrence_report_obj.location.location_accuracy" class="form-control" type="text"
-                            :disabled="isReadOnly" />
+                            v-model="
+                                occurrence_report_obj.location.location_accuracy
+                            "
+                            class="form-control"
+                            type="text"
+                            :disabled="isReadOnly"
+                        />
                     </template>
                 </div>
             </div>
@@ -331,8 +377,11 @@ v-model="occurrence_report_obj.location.location_accuracy" class="form-control"
                 <div class="col-sm-12">
                     <!-- <button v-if="!updatingLocationDetails" class="pull-right btn btn-primary" @click.prevent="updateDetails()" :disabled="!can_update()">Update</button> -->
                     <button
-v-if="!updatingLocationDetails" class="btn btn-primary btn-sm float-end"
-                        :disabled="isReadOnly" @click.prevent="updateLocationDetails()">
+                        v-if="!updatingLocationDetails"
+                        class="btn btn-primary btn-sm float-end"
+                        :disabled="isReadOnly"
+                        @click.prevent="updateLocationDetails()"
+                    >
                         Update
                     </button>
                     <button v-else disabled class="float-end btn btn-primary">
@@ -538,8 +587,6 @@ export default {
     created: async function () {
         let vm = this;
         this.uuid = uuid();
-        //------fetch list of values according to action
-        let action = this.$route.query.action;
 
         //------fetch list of values
         fetch(
@@ -663,7 +710,7 @@ export default {
                             customClass: {
                                 confirmButton: 'btn btn-primary',
                             },
-                        }).then((result) => {
+                        }).then(() => {
                             if (
                                 vm.occurrence_report_obj.processing_status ==
                                 'Unlocked'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
index e20c049a..24c25d16 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
@@ -63,7 +63,7 @@ export default {
                     {
                         title: 'Referral',
                         data: 'referral',
-                        render: function (data, type, full) {
+                        render: function (data) {
                             return `<span>${data.first_name} ${data.last_name}</span>`;
                         },
                     },
@@ -310,27 +310,17 @@ export default {
                 console.log('in shown.bs.popover');
 
                 var el = vm.$refs.showRef;
-                var popoverheight = parseInt($('.' + popover_name).height());
 
                 var popover_bounding_top = parseInt(
                     $('.' + popover_name)[0].getBoundingClientRect().top
                 );
-                var popover_bounding_bottom = parseInt(
-                    $('.' + popover_name)[0].getBoundingClientRect().bottom
-                );
 
                 var el_bounding_top = parseInt(
                     $(el)[0].getBoundingClientRect().top
                 );
-                var el_bounding_bottom = parseInt(
-                    $(el)[0].getBoundingClientRect().top
-                );
 
                 var diff = el_bounding_top - popover_bounding_top;
 
-                var position = parseInt($('.' + popover_name).position().top);
-                var pos2 = parseInt($(el).position().top) - 5;
-
                 var x = diff + 5;
                 $('.' + popover_name)
                     .children('.arrow')
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
index 523d3b75..c89eb183 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
@@ -684,7 +684,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         if (
                             vm.occurrence_report_obj.processing_status ==
                             'Unlocked'
@@ -739,7 +739,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         if (
                             vm.occurrence_report_obj.processing_status ==
                             'Unlocked'
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
index 6e0ad097..841193ce 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
@@ -152,7 +152,6 @@ export default {
                 buttons: [],
                 columns: columns,
                 processing: true,
-                initComplete: function (settings, json) {},
             };
         },
         datatable_headers: function () {
@@ -181,7 +180,7 @@ export default {
                         '/add_related_species?species=' +
                         vm.selected_scientific_name
                 ).then(
-                    (response) => {
+                    () => {
                         swal.fire({
                             title: 'Added',
                             text: 'Related Species has been added',
@@ -229,7 +228,7 @@ export default {
                                 '/remove_related_species?species=' +
                                 id
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Removed',
                                     text: 'Related Species has been removed',
@@ -252,7 +251,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         initialiseScientificNameLookup: function () {
@@ -281,15 +280,13 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.selected_scientific_name = data;
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.selected_scientific_name = null;
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
index ba75eb70..d4fdc1ec 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_section_modal.vue
@@ -78,7 +78,7 @@
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
-import { api_endpoints, helpers } from '@/utils/hooks';
+import { api_endpoints } from '@/utils/hooks';
 export default {
     name: 'SectionModal',
     components: {
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
index 7e62350d..112bab53 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
@@ -528,7 +528,6 @@ export default {
             this.$refs.threat_detail.isModalOpen = true;
         },
         editThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
             fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(
@@ -548,7 +547,6 @@ export default {
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.ocr_threat, id)).then(
@@ -600,7 +598,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your threat has been removed',
@@ -608,7 +606,7 @@ export default {
                                     customClass: {
                                         confirmButton: 'btn btn-primary',
                                     },
-                                }).then((result) => {
+                                }).then(() => {
                                     vm.$refs.threats_datatable.vmDataTable.ajax.reload();
                                     if (
                                         vm.occurrence_report_obj
@@ -624,7 +622,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateThreat: function (id) {
@@ -650,7 +648,7 @@ export default {
                             headers: { 'Content-Type': 'application/json' },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your threat has been reinstated',
@@ -658,7 +656,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then((result) => {
+                            }).then(() => {
                                 vm.$refs.threats_datatable.vmDataTable.ajax.reload();
                                 if (
                                     vm.occurrence_report_obj
@@ -733,7 +731,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
index 8dc0f6eb..fb38b40c 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/plant_count.vue
@@ -17,7 +17,9 @@
                         "
                     >
                         <input
-v-if="plant_count.plant_count_method" type="text" class="form-control mb-3"
+                            v-if="plant_count.plant_count_method"
+                            type="text"
+                            class="form-control mb-3"
                             :value="
                                 plant_count.plant_count_method +
                                 ' (Now Archived)'
@@ -33,16 +35,21 @@ v-if="plant_count.plant_count_method" type="text" class="form-control mb-3"
                         class="form-select"
                     >
                         <option
-v-for="plant_count_method in plant_count_method_list" :key="plant_count_method.id"
-                            :value="plant_count_method.id">
+                            v-for="plant_count_method in plant_count_method_list"
+                            :key="plant_count_method.id"
+                            :value="plant_count_method.id"
+                        >
                             {{ plant_count_method.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
                     <input
-v-model="plant_count.plant_count_method" class="form-control" type="text"
-                        :disabled="isReadOnly" />
+                        v-model="plant_count.plant_count_method"
+                        class="form-control"
+                        type="text"
+                        :disabled="isReadOnly"
+                    />
                 </template>
             </div>
         </div>
@@ -63,7 +70,9 @@ v-model="plant_count.plant_count_method" class="form-control" type="text"
                         "
                     >
                         <input
-v-if="plant_count.plant_count_accuracy" type="text" class="form-control mb-3"
+                            v-if="plant_count.plant_count_accuracy"
+                            type="text"
+                            class="form-control mb-3"
                             :value="
                                 plant_count.plant_count_accuracy +
                                 ' (Now Archived)'
@@ -79,16 +88,21 @@ v-if="plant_count.plant_count_accuracy" type="text" class="form-control mb-3"
                         class="form-select"
                     >
                         <option
-v-for="plant_count_accuracy in plant_count_accuracy_list" :key="plant_count_accuracy.id"
-                            :value="plant_count_accuracy.id">
+                            v-for="plant_count_accuracy in plant_count_accuracy_list"
+                            :key="plant_count_accuracy.id"
+                            :value="plant_count_accuracy.id"
+                        >
                             {{ plant_count_accuracy.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
                     <input
-v-model="plant_count.plant_count_accuracy" class="form-control" type="text"
-                        :disabled="isReadOnly" />
+                        v-model="plant_count.plant_count_accuracy"
+                        class="form-control"
+                        type="text"
+                        :disabled="isReadOnly"
+                    />
                 </template>
             </div>
         </div>
@@ -109,7 +123,9 @@ v-model="plant_count.plant_count_accuracy" class="form-control" type="text"
                         "
                     >
                         <input
-v-if="plant_count.counted_subject" type="text" class="form-control mb-3"
+                            v-if="plant_count.counted_subject"
+                            type="text"
+                            class="form-control mb-3"
                             :value="
                                 plant_count.counted_subject + ' (Now Archived)'
                             "
@@ -124,16 +140,21 @@ v-if="plant_count.counted_subject" type="text" class="form-control mb-3"
                         class="form-select"
                     >
                         <option
-v-for="counted_subject in counted_subject_list" :key="counted_subject.id"
-                            :value="counted_subject.id">
+                            v-for="counted_subject in counted_subject_list"
+                            :key="counted_subject.id"
+                            :value="counted_subject.id"
+                        >
                             {{ counted_subject.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
                     <input
-v-model="plant_count.counted_subject" class="form-control" type="text"
-                        :disabled="isReadOnly" />
+                        v-model="plant_count.counted_subject"
+                        class="form-control"
+                        type="text"
+                        :disabled="isReadOnly"
+                    />
                 </template>
             </div>
         </div>
@@ -143,7 +164,7 @@ v-model="plant_count.counted_subject" class="form-control" type="text"
             </label>
             <div class="col-sm-9">
                 <input
-v-model="plant_count.count_date
+                    v-model="plant_count.count_date"
                     :disabled="true"
                     type="datetime-local"
                     class="form-control"
@@ -157,7 +178,10 @@ v-model="plant_count.count_date
             >
             <div class="col-sm-6">
                 <input
-id="est_population_area" v-model="plant_count.estimated_population_area" :disabled="isReadOnly" type="number"
+                    id="est_population_area"
+                    v-model="plant_count.estimated_population_area"
+                    :disabled="isReadOnly"
+                    type="number"
                     class="form-control ocr_number"
                     placeholder=""
                     min="0"
@@ -181,7 +205,9 @@ id="est_population_area" v-model="plant_count.estimated_population_area" :disabl
                         "
                     >
                         <input
-v-if="plant_count.plant_condition" type="text" class="form-control mb-3"
+                            v-if="plant_count.plant_condition"
+                            type="text"
+                            class="form-control mb-3"
                             :value="
                                 plant_count.plant_condition + ' (Now Archived)'
                             "
@@ -196,16 +222,21 @@ v-if="plant_count.plant_condition" type="text" class="form-control mb-3"
                         class="form-select"
                     >
                         <option
-v-for="plant_condition in plant_condition_list" :key="plant_condition.id"
-                            :value="plant_condition.id">
+                            v-for="plant_condition in plant_condition_list"
+                            :key="plant_condition.id"
+                            :value="plant_condition.id"
+                        >
                             {{ plant_condition.name }}
                         </option>
                     </select>
                 </template>
                 <template v-else>
                     <input
-v-model="plant_count.plant_condition" class="form-control" type="text"
-                        :disabled="isReadOnly" />
+                        v-model="plant_count.plant_condition"
+                        class="form-control"
+                        type="text"
+                        :disabled="isReadOnly"
+                    />
                 </template>
             </div>
         </div>
@@ -220,7 +251,10 @@ v-model="plant_count.plant_condition" class="form-control" type="text"
             </div>
             <div class="col-sm-2">
                 <input
-id="not-counted" v-model="plant_count.counted" type="checkbox" true-value="false"
+                    id="not-counted"
+                    v-model="plant_count.counted"
+                    type="checkbox"
+                    true-value="false"
                     false-value="true"
                     @change="checkboxChanged"
                 />
@@ -237,46 +271,94 @@ id="not-counted" v-model="plant_count.counted" type="checkbox" true-value="false
             <div class="col-sm-3 fw-bold">Alive</div>
             <div class="col-sm-2">
                 <input
-id="alive_mature" v-model="plant_count.detailed_alive_mature" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="alive_mature"
+                    v-model="plant_count.detailed_alive_mature"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
             <div class="col-sm-2">
                 <input
-id="plant_alive_juvenile" v-model="plant_count.detailed_alive_juvenile" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="plant_alive_juvenile"
+                    v-model="plant_count.detailed_alive_juvenile"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
             <div class="col-sm-2">
                 <input
-id="alive_seedling" v-model="plant_count.detailed_alive_seedling" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="alive_seedling"
+                    v-model="plant_count.detailed_alive_seedling"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
             <div class="col-sm-2">
                 <input
-id="alive_unknown" v-model="plant_count.detailed_alive_unknown" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="alive_unknown"
+                    v-model="plant_count.detailed_alive_unknown"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <div class="row mb-3">
             <div class="col-sm-3 fw-bold">Dead</div>
             <div class="col-sm-2">
                 <input
-id="dead_mature" v-model="plant_count.detailed_dead_mature" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="dead_mature"
+                    v-model="plant_count.detailed_dead_mature"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
             <div class="col-sm-2">
                 <input
-id="plant_dead_juvenile" v-model="plant_count.detailed_dead_juvenile" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="plant_dead_juvenile"
+                    v-model="plant_count.detailed_dead_juvenile"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
             <div class="col-sm-2">
                 <input
-id="dead_seedling" v-model="plant_count.detailed_dead_seedling" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="dead_seedling"
+                    v-model="plant_count.detailed_dead_seedling"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
             <div class="col-sm-2">
                 <input
-id="dead_unknown" v-model="plant_count.detailed_dead_unknown" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control plant_count" placeholder="" min="0" />
+                    id="dead_unknown"
+                    v-model="plant_count.detailed_dead_unknown"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control plant_count"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <label for="" class="col-lg-3 control-label fs-5 fw-bold"
@@ -286,16 +368,28 @@ id="dead_unknown" v-model="plant_count.detailed_dead_unknown" :disabled="isReadO
             <label for="" class="col-sm-3 control-label">Number alive :</label>
             <div class="col-sm-6">
                 <input
-id="simple_alive" v-model="plant_count.simple_alive" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control ocr_number" placeholder="" min="0" />
+                    id="simple_alive"
+                    v-model="plant_count.simple_alive"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control ocr_number"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <div class="row mb-3">
             <label for="" class="col-sm-3 control-label">Number dead :</label>
             <div class="col-sm-6">
                 <input
-id="simple_dead" v-model="plant_count.simple_dead" :disabled="isReadOnly || not_counted"
-                    type="number" class="form-control ocr_number" placeholder="" min="0" />
+                    id="simple_dead"
+                    v-model="plant_count.simple_dead"
+                    :disabled="isReadOnly || not_counted"
+                    type="number"
+                    class="form-control ocr_number"
+                    placeholder=""
+                    min="0"
+                />
             </div>
         </div>
         <label for="" class="col-lg-3 control-label fs-5 fw-bold"
@@ -307,14 +401,24 @@ id="simple_dead" v-model="plant_count.simple_dead" :disabled="isReadOnly || not_
                 <div class="form-check form-check-inline">
                     <label for="quadratsPresentYes">Yes</label>
                     <input
-id="quadratsPresentYes" v-model="plant_count.quadrats_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="quadratsPresentYes"
+                        v-model="plant_count.quadrats_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="quadratsPresentNo">No</label>
                     <input
-id="quadratsPresentNo" v-model="plant_count.quadrats_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="quadratsPresentNo"
+                        v-model="plant_count.quadrats_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -326,14 +430,24 @@ id="quadratsPresentNo" v-model="plant_count.quadrats_present" :disabled="isReadO
                 <div class="form-check form-check-inline">
                     <label for="quadratsDataYes">Yes</label>
                     <input
-id="quadratsDataYes" v-model="plant_count.quadrats_data_attached" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="quadratsDataYes"
+                        v-model="plant_count.quadrats_data_attached"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="quadratsDataNo">No</label>
                     <input
-id="quadratsDataNo" v-model="plant_count.quadrats_data_attached" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="quadratsDataNo"
+                        v-model="plant_count.quadrats_data_attached"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -343,7 +457,10 @@ id="quadratsDataNo" v-model="plant_count.quadrats_data_attached" :disabled="isRe
             >
             <div class="col-sm-6">
                 <input
-id="quadrats_surveyed" v-model="plant_count.quadrats_surveyed" :disabled="isReadOnly" type="number"
+                    id="quadrats_surveyed"
+                    v-model="plant_count.quadrats_surveyed"
+                    :disabled="isReadOnly"
+                    type="number"
                     class="form-control ocr_number"
                     placeholder=""
                     min="0"
@@ -356,7 +473,10 @@ id="quadrats_surveyed" v-model="plant_count.quadrats_surveyed" :disabled="isRead
             >
             <div class="col-sm-6">
                 <input
-id="ind_quadrat_area" v-model="plant_count.individual_quadrat_area" :disabled="isReadOnly" type="number"
+                    id="ind_quadrat_area"
+                    v-model="plant_count.individual_quadrat_area"
+                    :disabled="isReadOnly"
+                    type="number"
                     class="form-control ocr_number"
                     placeholder=""
                     min="0"
@@ -369,7 +489,10 @@ id="ind_quadrat_area" v-model="plant_count.individual_quadrat_area" :disabled="i
             >
             <div class="col-sm-6">
                 <input
-id="tot_quadrat_area" v-model="plant_count.total_quadrat_area" :disabled="isReadOnly" type="number"
+                    id="tot_quadrat_area"
+                    v-model="plant_count.total_quadrat_area"
+                    :disabled="isReadOnly"
+                    type="number"
                     class="form-control ocr_number"
                     placeholder=""
                     min="0"
@@ -382,7 +505,10 @@ id="tot_quadrat_area" v-model="plant_count.total_quadrat_area" :disabled="isRead
             >
             <div class="col-sm-6">
                 <input
-id="flow_plant_per" v-model="plant_count.flowering_plants_per" :disabled="isReadOnly" type="number"
+                    id="flow_plant_per"
+                    v-model="plant_count.flowering_plants_per"
+                    :disabled="isReadOnly"
+                    type="number"
                     class="form-control ocr_number"
                     placeholder=""
                     min="0"
@@ -399,14 +525,24 @@ id="flow_plant_per" v-model="plant_count.flowering_plants_per" :disabled="isRead
                 <div class="form-check form-check-inline">
                     <label for="reprodPresentYes">Yes</label>
                     <input
-id="reprodPresentYes" v-model="plant_count.clonal_reproduction_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="reprodPresentYes"
+                        v-model="plant_count.clonal_reproduction_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="reprodPresentNo">No</label>
                     <input
-id="reprodPresentNo" v-model="plant_count.clonal_reproduction_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="reprodPresentNo"
+                        v-model="plant_count.clonal_reproduction_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -418,14 +554,24 @@ id="reprodPresentNo" v-model="plant_count.clonal_reproduction_present" :disabled
                 <div class="form-check form-check-inline">
                     <label for="vegStatePresentYes">Yes</label>
                     <input
-id="vegStatePresentYes" v-model="plant_count.vegetative_state_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="vegStatePresentYes"
+                        v-model="plant_count.vegetative_state_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="vegStatePresentNo">No</label>
                     <input
-id="vegStatePresentNo" v-model="plant_count.vegetative_state_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="vegStatePresentNo"
+                        v-model="plant_count.vegetative_state_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -435,14 +581,24 @@ id="vegStatePresentNo" v-model="plant_count.vegetative_state_present" :disabled=
                 <div class="form-check form-check-inline">
                     <label for="flowerBudsPresentYes">Yes</label>
                     <input
-id="flowerBudsPresentYes" v-model="plant_count.flower_bud_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="flowerBudsPresentYes"
+                        v-model="plant_count.flower_bud_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="flowerBudsPresentNo">No</label>
                     <input
-id="flowerBudsPresentNo" v-model="plant_count.flower_bud_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="flowerBudsPresentNo"
+                        v-model="plant_count.flower_bud_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -452,14 +608,24 @@ id="flowerBudsPresentNo" v-model="plant_count.flower_bud_present" :disabled="isR
                 <div class="form-check form-check-inline">
                     <label for="flowerPresentYes">Yes</label>
                     <input
-id="flowerPresentYes" v-model="plant_count.flower_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="flowerPresentYes"
+                        v-model="plant_count.flower_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="flowerPresentNo">No</label>
                     <input
-id="flowerPresentNo" v-model="plant_count.flower_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="flowerPresentNo"
+                        v-model="plant_count.flower_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -471,14 +637,24 @@ id="flowerPresentNo" v-model="plant_count.flower_present" :disabled="isReadOnly"
                 <div class="form-check form-check-inline">
                     <label for="immFruitPresentYes">Yes</label>
                     <input
-id="immFruitPresentYes" v-model="plant_count.immature_fruit_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="immFruitPresentYes"
+                        v-model="plant_count.immature_fruit_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="immFruitPresentNo">No</label>
                     <input
-id="immFruitPresentNo" v-model="plant_count.immature_fruit_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="immFruitPresentNo"
+                        v-model="plant_count.immature_fruit_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -488,14 +664,24 @@ id="immFruitPresentNo" v-model="plant_count.immature_fruit_present" :disabled="i
                 <div class="form-check form-check-inline">
                     <label for="ripeFruitPresentYes">Yes</label>
                     <input
-id="ripeFruitPresentYes" v-model="plant_count.ripe_fruit_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="ripeFruitPresentYes"
+                        v-model="plant_count.ripe_fruit_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="ripeFruitPresentNo">No</label>
                     <input
-id="ripeFruitPresentNo" v-model="plant_count.ripe_fruit_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="ripeFruitPresentNo"
+                        v-model="plant_count.ripe_fruit_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -507,14 +693,24 @@ id="ripeFruitPresentNo" v-model="plant_count.ripe_fruit_present" :disabled="isRe
                 <div class="form-check form-check-inline">
                     <label for="dehFruitPresentYes">Yes</label>
                     <input
-id="dehFruitPresentYes" v-model="plant_count.dehisced_fruit_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="true">&nbsp;
+                        id="dehFruitPresentYes"
+                        v-model="plant_count.dehisced_fruit_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="true"
+                    />&nbsp;
                 </div>
                 <div class="form-check form-check-inline">
                     <label for="dehFruitPresentNo">No</label>
                     <input
-id="dehFruitPresentNo" v-model="plant_count.dehisced_fruit_present" :disabled="isReadOnly" class="form-check-input"
-                        type="radio" value="false">&nbsp;
+                        id="dehFruitPresentNo"
+                        v-model="plant_count.dehisced_fruit_present"
+                        :disabled="isReadOnly"
+                        class="form-check-input"
+                        type="radio"
+                        value="false"
+                    />&nbsp;
                 </div>
             </div>
         </div>
@@ -524,8 +720,14 @@ id="dehFruitPresentNo" v-model="plant_count.dehisced_fruit_present" :disabled="i
             >
             <div class="col-sm-9">
                 <textarea
-id="pollinator_obs" v-model="plant_count.pollinator_observation" :disabled="isReadOnly" type="text" row="2"
-                    class="form-control" placeholder="" />
+                    id="pollinator_obs"
+                    v-model="plant_count.pollinator_observation"
+                    :disabled="isReadOnly"
+                    type="text"
+                    row="2"
+                    class="form-control"
+                    placeholder=""
+                />
             </div>
         </div>
         <div class="row mb-3">
@@ -534,8 +736,14 @@ id="pollinator_obs" v-model="plant_count.pollinator_observation" :disabled="isRe
             >
             <div class="col-sm-9">
                 <textarea
-id="plant_count_comment" v-model="plant_count.comment" :disabled="isReadOnly" type="text" row="2"
-                    class="form-control" placeholder="" />
+                    id="plant_count_comment"
+                    v-model="plant_count.comment"
+                    :disabled="isReadOnly"
+                    type="text"
+                    row="2"
+                    class="form-control"
+                    placeholder=""
+                />
             </div>
         </div>
         <div class="row mb-3">
@@ -548,7 +756,8 @@ id="plant_count_comment" v-model="plant_count.comment" :disabled="isReadOnly" ty
         <div class="row mb-3">
             <div class="col-sm-12">
                 <button
-v-if="!updatingPlantCountDetails" :disabled="isReadOnly"
+                    v-if="!updatingPlantCountDetails"
+                    :disabled="isReadOnly"
                     class="btn btn-primary btn-sm float-end"
                     @click.prevent="updatePlantCountDetails()"
                 >
@@ -579,36 +788,35 @@ export default {
     props: {
         plant_count: {
             type: Object,
-            required: true
+            required: true,
         },
         is_report: {
             type: Boolean,
-            required: true
+            required: true,
         },
         occurrence_id: {
             type: Number,
-            required: true
+            required: true,
         },
         processing_status: {
             type: String,
-            required: false
+            required: false,
         },
         // this prop is only send from split species form to make the original species readonly
         is_readonly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         is_external: {
             type: Boolean,
-            default: false
+            default: false,
         },
         isReadOnly: {
             type: Boolean,
-            default: false
+            default: false,
         },
     },
     data: function () {
-        let vm = this;
         return {
             //----list of values dictionary
             listOfPlantValuesDict: {},
@@ -618,39 +826,38 @@ export default {
             counted_subject_list: [],
             updatingPlantCountDetails: false,
             not_counted: false,
-        }
+        };
     },
     computed: {},
     watch: {},
     created: async function () {
         let vm = this;
-        const response = await fetch(`/api/occurrence/plant_count_list_of_values.json`);
+        const response = await fetch(
+            `/api/occurrence/plant_count_list_of_values.json`
+        );
         vm.listOfPlantValuesDict = await response.json();
-        vm.plant_count_method_list = vm.listOfPlantValuesDict.plant_count_method_list;
-        vm.plant_count_method_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-        vm.plant_count_accuracy_list = vm.listOfPlantValuesDict.plant_count_accuracy_list;
-        vm.plant_count_accuracy_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.plant_count_method_list =
+            vm.listOfPlantValuesDict.plant_count_method_list;
+        vm.plant_count_method_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
+        vm.plant_count_accuracy_list =
+            vm.listOfPlantValuesDict.plant_count_accuracy_list;
+        vm.plant_count_accuracy_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.plant_condition_list = vm.listOfPlantValuesDict.plant_condition_list;
-        vm.plant_condition_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
+        vm.plant_condition_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
         vm.counted_subject_list = vm.listOfPlantValuesDict.counted_subject_list;
-        vm.counted_subject_list.splice(0, 0,
-            {
-                id: null,
-                name: null,
-            });
-
+        vm.counted_subject_list.splice(0, 0, {
+            id: null,
+            name: null,
+        });
     },
     mounted: function () {
         let vm = this;
@@ -658,8 +865,7 @@ export default {
         vm.not_counted = !vm.plant_count.counted;
     },
     methods: {
-        eventListeners: function () {
-        },
+        eventListeners: function () {},
         checkboxChanged: function () {
             this.not_counted = this.plant_count.counted == 'false';
         },
@@ -670,38 +876,49 @@ export default {
             if (vm.is_report) {
                 endpoint = api_endpoints.occurrence_report;
             }
-            fetch(helpers.add_endpoint_json(endpoint, (vm.occurrence_id + '/update_plant_count_details')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(vm.plant_count),
-            }).then((response) => {
-                vm.updatingPlantCountDetails = false;
-                swal.fire({
-                    title: 'Saved',
-                    text: 'Plant Count details have been saved',
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
+            fetch(
+                helpers.add_endpoint_json(
+                    endpoint,
+                    vm.occurrence_id + '/update_plant_count_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                }).then((result) => {
-                    if (vm.processing_status == "Unlocked") {
-                        vm.$router.go();
-                    }
-                });
-            }, (error) => {
-                var text = helpers.apiVueResourceError(error);
-                swal.fire({
-                    title: 'Error',
-                    text: 'Plant Count details cannot be saved because of the following error: ' + text,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary'
-                    },
-                });
-                vm.updatingPlantCountDetails = false;
-            });
+                    body: JSON.stringify(vm.plant_count),
+                }
+            ).then(
+                () => {
+                    vm.updatingPlantCountDetails = false;
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Plant Count details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then(() => {
+                        if (vm.processing_status == 'Unlocked') {
+                            vm.$router.go();
+                        }
+                    });
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Plant Count details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingPlantCountDetails = false;
+                }
+            );
         },
     },
 };
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
index c50662d6..ec1f30e9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
@@ -177,7 +177,7 @@
 import FormSection from '@/components/forms/section_toggle.vue';
 import ContactDatatable from './contact_datatable.vue';
 import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
-import { api_endpoints, helpers } from '@/utils/hooks';
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
     name: 'SpeciesOccurrence',
@@ -240,7 +240,6 @@ export default {
     mounted: function () {
         let vm = this;
         this.$nextTick(() => {
-            vm.eventListeners();
             vm.initialiseScientificNameLookup();
         });
     },
@@ -273,23 +272,20 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
-                    let data = e.params.data.id;
                     vm.occurrence_obj.species = e.params.data.species_id;
                     //vm.occurrence_obj.species_id = data.species_id;
                     vm.species_display = e.params.data.text;
                     vm.taxon_previous_name = e.params.data.taxon_previous_name;
                     vm.common_name = e.params.data.common_name;
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.occurrence_obj.species = null;
                     //vm.occurrence_obj.species_id = null
                     vm.species_display = '';
                     vm.taxon_previous_name = '';
                     vm.common_name = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
@@ -316,9 +312,6 @@ export default {
                 });
             }
         },
-        eventListeners: function () {
-            let vm = this;
-        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
index 8b60388f..7c8d4b64 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
@@ -578,7 +578,7 @@ export default {
             vm.initialiseOccurrenceNameLookup();
             vm.initialiseCommunityNameLookup();
             vm.addEventListeners();
-
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterOCCCommunityOccurrenceName') !=
@@ -587,7 +587,7 @@ export default {
                     null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterOCCCommunityOccurrenceNameText'
                     ),
@@ -603,7 +603,7 @@ export default {
                 sessionStorage.getItem('filterOCCCommunityName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCCCommunityNameText'),
                     vm.filterOCCCommunityName,
                     false,
@@ -649,7 +649,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.text;
                     vm.filterOCCCommunityOccurrenceName = data;
                     sessionStorage.setItem(
@@ -657,15 +656,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCCCommunityOccurrenceName = 'all';
                     sessionStorage.setItem(
                         'filterOCCCommunityOccurrenceNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occurrence_name_lookup-results"]'
                     );
@@ -694,7 +692,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCCCommunityName = data;
                     sessionStorage.setItem(
@@ -702,12 +699,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCCCommunityName = 'all';
                     sessionStorage.setItem('filterOCCCommunityNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occ_community_name_lookup-results"]'
                     );
@@ -811,7 +807,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The occurrence has been discarded',
@@ -859,7 +855,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your report has been reinstated',
@@ -916,7 +912,7 @@ export default {
             );
             vm.$refs.community_occ_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
index bba3e104..ee0e173f 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
@@ -571,13 +571,13 @@ export default {
             vm.initialiseOccurrenceLookupName();
             vm.initialiseScientificNameLookup();
             vm.addEventListeners();
-
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterOCCFaunaOccurrenceName') !=
                     'all' &&
                 sessionStorage.getItem('filterOCCFaunaOccurrenceName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCCFaunaOccurrenceNameText'),
                     vm.filterOCCFaunaOccurrenceName,
                     false,
@@ -590,7 +590,7 @@ export default {
                     'all' &&
                 sessionStorage.getItem('filterOCCFaunaScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCCFaunaScientificNameText'),
                     vm.filterOCCFaunaScientificName,
                     false,
@@ -636,7 +636,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.text;
                     vm.filterOCCFaunaOccurrenceName = data;
                     sessionStorage.setItem(
@@ -644,15 +643,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCCFaunaOccurrenceName = 'all';
                     sessionStorage.setItem(
                         'filterOCCFaunaOccurrenceNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occurrence_name_lookup-results"]'
                     );
@@ -684,7 +682,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCCFaunaScientificName = data;
                     sessionStorage.setItem(
@@ -692,15 +689,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCCFaunaScientificName = 'all';
                     sessionStorage.setItem(
                         'filterOCCFaunaScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occ_scientific_name_lookup_by_groupname-results"]'
                     );
@@ -803,7 +799,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your report has been discarded',
@@ -851,7 +847,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your report has been reinstated',
@@ -908,7 +904,7 @@ export default {
             );
             vm.$refs.fauna_occ_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
index 20cb8232..bbe7d1c9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
@@ -572,13 +572,13 @@ export default {
             vm.initialiseOccurrenceNameLookup();
             vm.initialiseScientificNameLookup();
             vm.addEventListeners();
-
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterOCCFloraOccurrenceName') !=
                     'all' &&
                 sessionStorage.getItem('filterOCCFloraOccurrenceName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCCFloraOccurrenceNameText'),
                     vm.filterOCCFloraOccurrenceName,
                     false,
@@ -591,7 +591,7 @@ export default {
                     'all' &&
                 sessionStorage.getItem('filterOCCFloraScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCCFloraScientificNameText'),
                     vm.filterOCCFloraScientificName,
                     false,
@@ -637,7 +637,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.text;
                     vm.filterOCCFloraOccurrenceName = data;
                     sessionStorage.setItem(
@@ -645,15 +644,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCCFloraOccurrenceName = 'all';
                     sessionStorage.setItem(
                         'filterOCCFloraOccurrenceNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occurrence_name_lookup-results"]'
                     );
@@ -685,7 +683,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCCFloraScientificName = data;
                     sessionStorage.setItem(
@@ -693,15 +690,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCCFloraScientificName = 'all';
                     sessionStorage.setItem(
                         'filterOCCFloraScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occ_scientific_name_lookup_by_groupname-results"]'
                     );
@@ -806,7 +802,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The occurrence has been discarded',
@@ -854,7 +850,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'The occurrence has been reinstated',
@@ -911,7 +907,7 @@ export default {
             );
             vm.$refs.flora_occ_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
index 67555b31..e5e92737 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
@@ -368,7 +368,6 @@ export default {
             };
         },
         column_number: function () {
-            let vm = this;
             return {
                 data: 'occurrence_report_number',
                 orderable: true,
@@ -473,7 +472,6 @@ export default {
             };
         },
         column_action: function () {
-            let vm = this;
             return {
                 data: 'id',
                 orderable: false,
@@ -724,12 +722,13 @@ export default {
             vm.initialiseOccurrenceLookup();
             vm.initialiseCommunityNameLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterOCRCommunityOccurrence') !=
                     'all' &&
                 sessionStorage.getItem('filterOCRCommunityOccurrence') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRCommunityOccurrenceText'),
                     vm.filterOCRCommunityOccurrence,
                     false,
@@ -741,7 +740,7 @@ export default {
                 sessionStorage.getItem('filterOCRCommunityName') != 'all' &&
                 sessionStorage.getItem('filterOCRCommunityName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRCommunityNameText'),
                     vm.filterOCRCommunityName,
                     false,
@@ -787,7 +786,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRCommunityOccurrence = data;
                     sessionStorage.setItem(
@@ -795,15 +793,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRCommunityOccurrence = 'all';
                     sessionStorage.setItem(
                         'filterOCRCommunityOccurrenceText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_occurrence_lookup-results"]'
                     );
@@ -832,7 +829,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRCommunityName = data;
                     sessionStorage.setItem(
@@ -840,12 +836,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRCommunityName = 'all';
                     sessionStorage.setItem('filterOCRCommunityNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_community_name_lookup-results"]'
                     );
@@ -939,7 +934,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your report has been discarded',
@@ -989,7 +984,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your report has been reinstated',
@@ -1046,7 +1041,7 @@ export default {
             );
             vm.$refs.community_ocr_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
index 7b42f8d8..0a47258b 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
@@ -367,7 +367,6 @@ export default {
             };
         },
         column_number: function () {
-            let vm = this;
             return {
                 data: 'occurrence_report_number',
                 orderable: true,
@@ -472,7 +471,6 @@ export default {
             };
         },
         column_action: function () {
-            let vm = this;
             return {
                 data: 'id',
                 orderable: false,
@@ -725,11 +723,12 @@ export default {
             vm.initialiseOccurrenceLookup();
             vm.initialiseScientificNameLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterOCRFaunaOccurrence') != 'all' &&
                 sessionStorage.getItem('filterOCRFaunaOccurrence') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRFaunaOccurrenceText'),
                     vm.filterOCRFaunaOccurrence,
                     false,
@@ -742,7 +741,7 @@ export default {
                     'all' &&
                 sessionStorage.getItem('filterOCRFaunaScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRFaunaScientificNameText'),
                     vm.filterOCRFaunaScientificName,
                     false,
@@ -788,7 +787,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFaunaOccurrence = data;
                     sessionStorage.setItem(
@@ -796,12 +794,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRFaunaOccurrence = 'all';
                     sessionStorage.setItem('filterOCRFaunaOccurrenceText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_occurrence_lookup-results"]'
                     );
@@ -831,7 +828,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFaunaScientificName = data;
                     sessionStorage.setItem(
@@ -839,15 +835,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRFaunaScientificName = 'all';
                     sessionStorage.setItem(
                         'filterOCRFaunaScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_scientific_name_lookup_by_groupname-results"]'
                     );
@@ -944,7 +939,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your report has been discarded',
@@ -994,7 +989,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your report has been reinstated',
@@ -1051,7 +1046,7 @@ export default {
             );
             vm.$refs.fauna_ocr_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
index 276791be..13d764d0 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
@@ -726,11 +726,12 @@ export default {
             vm.initialiseOccurrenceLookup();
             vm.initialiseScientificNameLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterOCRFloraOccurrence') != 'all' &&
                 sessionStorage.getItem('filterOCRFloraOccurrence') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRFloraOccurrenceText'),
                     vm.filterOCRFloraOccurrence,
                     false,
@@ -743,7 +744,7 @@ export default {
                     'all' &&
                 sessionStorage.getItem('filterOCRFloraScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRFloraScientificNameText'),
                     vm.filterOCRFloraScientificName,
                     false,
@@ -789,7 +790,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFloraOccurrence = data;
                     sessionStorage.setItem(
@@ -797,12 +797,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRFloraOccurrence = 'all';
                     sessionStorage.setItem('filterOCRFloraOccurrenceText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_occurrence_lookup-results"]'
                     );
@@ -832,7 +831,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRFloraScientificName = data;
                     sessionStorage.setItem(
@@ -840,15 +838,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRFloraScientificName = 'all';
                     sessionStorage.setItem(
                         'filterOCRFloraScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_scientific_name_lookup_by_groupname-results"]'
                     );
@@ -945,7 +942,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your report has been discarded',
@@ -995,7 +992,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your report has been reinstated',
@@ -1052,7 +1049,7 @@ export default {
             );
             vm.$refs.flora_ocr_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
index e81e94ef..9f9dbde4 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
@@ -379,12 +379,13 @@ export default {
             vm.initialiseScientificNameLookup();
             vm.initialiseCommunityNameLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterCSRefFloraScientificName') !=
                     'all' &&
                 sessionStorage.getItem('filterCSRefFloraScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterCSRefFloraScientificNameText'
                     ),
@@ -400,7 +401,7 @@ export default {
                 sessionStorage.getItem('filterCSRefFloraCommunityName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSRefFloraCommunityNameText'),
                     vm.filterCSRefFloraCommunityName,
                     false,
@@ -438,7 +439,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraScientificName = data;
                     sessionStorage.setItem(
@@ -446,15 +446,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraScientificName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFloraScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_ref_scientific_name_lookup-results"]'
                     );
@@ -483,7 +482,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSRefFloraCommunityName = data;
                     sessionStorage.setItem(
@@ -491,15 +489,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSRefFloraCommunityName = 'all';
                     sessionStorage.setItem(
                         'filterCSRefFloraCommunityNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_referrals_community_name_lookup-results"]'
                     );
@@ -511,7 +508,7 @@ export default {
             let vm = this;
             vm.$refs.flora_ocr_ref_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
index 4d3a27a9..85bdfd81 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
@@ -221,7 +221,6 @@ export default {
             };
         },
         column_number: function () {
-            let vm = this;
             return {
                 data: 'occurrence_report_number',
                 orderable: true,
@@ -482,12 +481,13 @@ export default {
                 vm.initialiseScientificNameLookup();
             }
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterOCRReferralsOccurrence') !=
                     'all' &&
                 sessionStorage.getItem('filterOCRReferralsOccurrence') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRReferralsOccurrenceText'),
                     vm.filterOCRReferralsOccurrence,
                     false,
@@ -501,7 +501,7 @@ export default {
                 sessionStorage.getItem('filterOCRReferralsScientificName') !=
                     null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem(
                         'filterOCRReferralsScientificNameText'
                     ),
@@ -515,7 +515,7 @@ export default {
                 sessionStorage.getItem('filterOCRReferralsName') != 'all' &&
                 sessionStorage.getItem('filterOCRReferralsName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRReferralsNameText'),
                     vm.filterOCRReferralsName,
                     false,
@@ -561,7 +561,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRReferralsOccurrence = data;
                     sessionStorage.setItem(
@@ -569,15 +568,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRReferralsOccurrence = 'all';
                     sessionStorage.setItem(
                         'filterOCRReferralsOccurrenceText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_referrals_occurrence_lookup-results"]'
                     );
@@ -609,7 +607,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRReferralsScientificName = data;
                     sessionStorage.setItem(
@@ -617,15 +614,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRReferralsScientificName = 'all';
                     sessionStorage.setItem(
                         'filterOCRReferralsScientificNameText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_referrals_scientific_name_lookup_by_groupname-results"]'
                     );
@@ -654,7 +650,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRReferralsName = data;
                     sessionStorage.setItem(
@@ -662,12 +657,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRReferralsName = 'all';
                     sessionStorage.setItem('filterOCRReferralsNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_referrals_community_name_lookup-results"]'
                     );
@@ -678,7 +672,7 @@ export default {
             let vm = this;
             vm.$refs.flora_ocr_referrals_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
index 10da7fed..0a0657f9 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
@@ -209,7 +209,10 @@
                                                     class="form-check form-check-inline"
                                                 >
                                                     <input
-                                                        :id="'current_impact_' + current_impact.id"
+                                                        :id="
+                                                            'current_impact_' +
+                                                            current_impact.id
+                                                        "
                                                         :key="current_impact.id"
                                                         v-model="
                                                             threatObj.current_impact
@@ -217,7 +220,6 @@
                                                         :disabled="isReadOnly"
                                                         type="radio"
                                                         class="form-check-input"
-                                                        "
                                                         :value="
                                                             current_impact.id
                                                         "
@@ -301,7 +303,10 @@
                                                     class="form-check form-check-inline"
                                                 >
                                                     <input
-                                                        :id="'potential_impact_' + potential_impact.id"
+                                                        :id="
+                                                            'potential_impact_' +
+                                                            potential_impact.id
+                                                        "
                                                         :key="
                                                             potential_impact.id
                                                         "
@@ -311,7 +316,9 @@
                                                         :disabled="isReadOnly"
                                                         type="radio"
                                                         class="form-check-input"
-                                                        :value="potential_impact.id"
+                                                        :value="
+                                                            potential_impact.id
+                                                        "
                                                     />
                                                     <label
                                                         :for="
@@ -393,7 +400,10 @@
                                                     class="form-check form-check-inline"
                                                 >
                                                     <input
-                                                        :id="'potential_threat_onset_' + potential_threat_onset.id"
+                                                        :id="
+                                                            'potential_threat_onset_' +
+                                                            potential_threat_onset.id
+                                                        "
                                                         :key="
                                                             potential_threat_onset.id
                                                         "
@@ -403,7 +413,9 @@
                                                         :disabled="isReadOnly"
                                                         type="radio"
                                                         class="form-check-input"
-                                                        :value="potential_threat_onset.id"
+                                                        :value="
+                                                            potential_threat_onset.id
+                                                        "
                                                     />
                                                     <label
                                                         :for="
@@ -464,7 +476,8 @@
                                             ref="date_observed"
                                             v-model="threatObj.date_observed"
                                             :disabled="isReadOnly"
-                                            type="date" class="form-control"
+                                            type="date"
+                                            class="form-control"
                                             name="date_observed"
                                         />
                                     </div>
@@ -562,7 +575,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -630,9 +642,6 @@ export default {
     mounted: function () {
         let vm = this;
         vm.form = document.forms.threatForm;
-        this.$nextTick(() => {
-            vm.eventListeners();
-        });
     },
     methods: {
         ok: function () {
@@ -642,7 +651,7 @@ export default {
             }
         },
         cancel: function () {
-            this.close()
+            this.close();
         },
         close: function () {
             this.isModalOpen = false;
@@ -653,9 +662,12 @@ export default {
         sendData: function () {
             let vm = this;
             vm.errors = false;
-            vm.threatObj.date_observed = vm.threatObj.date_observed == "" ? null : vm.threatObj.date_observed
+            vm.threatObj.date_observed =
+                vm.threatObj.date_observed == ''
+                    ? null
+                    : vm.threatObj.date_observed;
             let threatObj = JSON.parse(JSON.stringify(vm.threatObj));
-            let formData = new FormData()
+            let formData = new FormData();
 
             if (vm.threatObj.id) {
                 vm.updatingThreat = true;
@@ -665,16 +677,19 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.updatingThreat = false;
-                    vm.$parent.updatedThreats();
-                    vm.close();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.updatingThreat = false;
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    () => {
+                        vm.updatingThreat = false;
+                        vm.$parent.updatedThreats();
+                        vm.close();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                        vm.updatingThreat = false;
+                    }
+                );
             } else {
                 vm.addingThreat = true;
                 formData.append('data', JSON.stringify(threatObj));
@@ -683,21 +698,21 @@ export default {
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify(formData)
-                }).then((response) => {
-                    vm.addingThreat = false;
-                    vm.close();
-                    vm.$parent.updatedThreats();
-                }, (error) => {
-                    vm.errors = true;
-                    vm.addingThreat = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                });
+                    body: JSON.stringify(formData),
+                }).then(
+                    () => {
+                        vm.addingThreat = false;
+                        vm.close();
+                        vm.$parent.updatedThreats();
+                    },
+                    (error) => {
+                        vm.errors = true;
+                        vm.addingThreat = false;
+                        vm.errorString = helpers.apiVueResourceError(error);
+                    }
+                );
             }
         },
-        eventListeners: function () {
-            let vm = this;
-        }
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
index fdd87c9c..b400dc66 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
@@ -309,7 +309,6 @@ export default {
             this.$refs.document_detail.isModalOpen = true;
         },
         editDocument: function (id) {
-            let vm = this;
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
@@ -372,7 +371,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The document has been discarded',
@@ -389,7 +388,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateDocument: function (id) {
@@ -418,7 +417,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your document has been reinstated',
@@ -435,7 +434,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         updatedDocuments() {
@@ -483,7 +482,7 @@ export default {
             );
             vm.$refs.documents_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
index d9aedaaa..734f4383 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
@@ -526,7 +526,6 @@ export default {
             );
         },
         viewThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
@@ -577,7 +576,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
index 85749f46..1c7103ab 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
@@ -1354,7 +1354,7 @@ export default {
             }
             return [];
         },
-        chainedSelectDistricts: function (regions, action, deselect_region_id) {
+        chainedSelectDistricts: function (regions, action) {
             let vm = this;
             if (action != 'fetch') {
                 vm.species_community.districts = []; //-----to remove the previous selection
@@ -1430,17 +1430,7 @@ export default {
                 vm.species_community.last_data_curration_date = null;
             }
         },
-        eventListeners: function () {
-            let vm = this;
-
-            var date = new Date();
-            var today = new Date(
-                date.getFullYear(),
-                date.getMonth(),
-                date.getDate()
-            );
-        },
-        handleMinimumFireIntervalRange: function (e) {
+        handleMinimumFireIntervalRange: function () {
             if (this.minimum_fire_interval_range == false) {
                 this.species_community.conservation_attributes.minimum_fire_interval_to =
                     null;
@@ -1479,7 +1469,6 @@ export default {
                     title: 'Changing from Manual to Auto',
                     text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
                     icon: 'info',
-                    showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
                     customClass: {
@@ -1523,7 +1512,6 @@ export default {
                     title: 'Changing from Manual to Auto',
                     text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
                     icon: 'info',
-                    showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
                     customClass: {
@@ -1576,7 +1564,6 @@ export default {
                     title: 'Changing from Manual to Auto',
                     text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
                     icon: 'info',
-                    showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
                     customClass: {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
index d1cb2da1..4dc24e62 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
@@ -558,7 +558,6 @@ export default {
             this.$refs.threat_detail.isModalOpen = true;
         },
         editThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
             fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
@@ -578,7 +577,6 @@ export default {
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
@@ -644,7 +642,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your threat has been removed',
@@ -662,7 +660,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateThreat: function (id) {
@@ -701,7 +699,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your threat has been reinstated',
@@ -719,7 +717,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         updatedThreats() {
@@ -777,7 +775,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue b/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
index 49422333..037e8f60 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
@@ -59,7 +59,6 @@
 </template>
 
 <script>
-import { api_endpoints, helpers } from '@/utils/hooks';
 export default {
     components: {},
     props: {
@@ -88,23 +87,6 @@ export default {
             },
         };
     },
-    computed: {},
-    watch: {},
-    mounted: function () {
-        let vm = this;
-    },
-    methods: {
-        eventListeners: function () {
-            let vm = this;
-
-            var date = new Date();
-            var today = new Date(
-                date.getFullYear(),
-                date.getMonth(),
-                date.getDate()
-            );
-        },
-    },
 };
 </script>
 
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
index eee2fef0..75c9616e 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
@@ -91,9 +91,7 @@ export default {
     mounted: function () {
         let vm = this;
         vm.form = document.forms.addSpeciesToCombine;
-    },
-    mounted: function () {
-        let vm = this;
+
         this.$nextTick(() => {
             vm.initialiseScientificNameLookup();
         });
@@ -186,16 +184,14 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     // let data = e.params.data.id;
                     let data = e.params.data.species_id;
                     vm.combineSpeciesId = data;
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.combineSpeciesId = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
index baa78376..ee709367 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
@@ -329,7 +329,7 @@ export default {
             vm.$refs.documents_datatable.vmDataTable.on(
                 'click',
                 'input[data-add-document]',
-                function (e) {
+                function () {
                     //e.preventDefault();
                     let id = $(this).attr('data-add-document');
                     let chkbox = $(this).attr('id');
@@ -347,7 +347,7 @@ export default {
             );
             vm.$refs.documents_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
index eb8e5a64..86772b7b 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
@@ -1683,7 +1683,7 @@
 
 <script>
 import FormSection from '@/components/forms/section_toggle.vue';
-import { api_endpoints, helpers } from '@/utils/hooks';
+import { api_endpoints } from '@/utils/hooks';
 export default {
     name: 'SpeciesCombineProfile',
     components: {
@@ -1964,7 +1964,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.species_community.taxonomy_id = data;
                     vm.species_community.taxonomy_details = e.params.data;
@@ -1978,8 +1977,7 @@ export default {
                     vm.name_authority = e.params.data.name_authority;
                     vm.name_comments = e.params.data.name_comments;
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.species_community.taxonomy_id = '';
                     vm.species_display = '';
                     vm.common_name = '';
@@ -1989,7 +1987,7 @@ export default {
                     (vm.family = ''), (vm.genus = ''), (vm.name_authority = '');
                     vm.name_comments = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
@@ -2400,7 +2398,7 @@ export default {
             }
             return [];
         },
-        chainedSelectDistricts: function (regions, action, deselect_region_id) {
+        chainedSelectDistricts: function (regions, action) {
             let vm = this;
             if (action != 'fetch') {
                 vm.species_community.districts = []; //-----to remove the previous selection
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
index 3c364719..e4795b79 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
@@ -317,7 +317,7 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.on(
                 'click',
                 'input[data-add-threat]',
-                function (e) {
+                function () {
                     //e.preventDefault();
                     let id = $(this).attr('data-add-threat');
                     let chkbox = $(this).attr('id');
@@ -335,7 +335,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
index 4ed1c9ff..dd58d404 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
@@ -313,7 +313,6 @@ export default {
             this.$refs.document_detail.isModalOpen = true;
         },
         editDocument: function (id) {
-            let vm = this;
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Document';
@@ -376,7 +375,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The document has been discarded',
@@ -393,7 +392,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateDocument: function (id) {
@@ -422,7 +421,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your document has been reinstated',
@@ -439,7 +438,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         updatedDocuments() {
@@ -487,7 +486,7 @@ export default {
             );
             vm.$refs.documents_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
index 4014381e..33ffd5ef 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
@@ -526,7 +526,6 @@ export default {
             );
         },
         viewThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.occ_threat, id)).then(
@@ -577,7 +576,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
index 8373c96e..96233249 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
@@ -1640,7 +1640,6 @@ export default {
                     title: 'Changing from Manual to Auto',
                     text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
                     icon: 'info',
-                    showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
                     customClass: {
@@ -1684,7 +1683,6 @@ export default {
                     title: 'Changing from Manual to Auto',
                     text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
                     icon: 'info',
-                    showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
                     customClass: {
@@ -1737,7 +1735,6 @@ export default {
                     title: 'Changing from Manual to Auto',
                     text: 'If you choose to revert back to manual in future the manually entered value will still be there for you. It is not deleted.',
                     icon: 'info',
-                    showCancelButton: true,
                     confirmButtonText: 'Ok',
                     showCancelButton: false,
                     customClass: {
@@ -1846,7 +1843,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.species_community.taxonomy_id = data;
                     vm.species_display = e.params.data.scientific_name;
@@ -1869,8 +1865,7 @@ export default {
                     // vm.filterFloraScientificName = data;
                     // sessionStorage.setItem("filterFloraScientificNameText", e.params.data.text);
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.species_community.taxonomy_id = '';
                     vm.species_display = '';
                     vm.conservation_category = '';
@@ -1883,7 +1878,7 @@ export default {
                     (vm.family = ''), (vm.genus = ''), (vm.name_authority = '');
                     vm.name_comments = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
@@ -1984,7 +1979,7 @@ export default {
                         selected.val();
                 });
         },
-        handleMinimumFireIntervalRange: function (e) {
+        handleMinimumFireIntervalRange: function () {
             if (this.minimum_fire_interval_range == false) {
                 this.species_community.conservation_attributes.minimum_fire_interval_to =
                     null;
@@ -2088,7 +2083,7 @@ export default {
             }
             return [];
         },
-        chainedSelectDistricts: function (regions, action, deselect_region_id) {
+        chainedSelectDistricts: function (regions, action) {
             let vm = this;
             if (action != 'fetch') {
                 vm.species_community.districts = []; //-----to remove the previous selection
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
index ad0e553e..703b59cb 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
@@ -33,8 +33,11 @@
                 </div>
                 <div>
                     <datatable
-ref="documents_datatable" :id="panelBody" :dt-options="documents_options"
-                    :dt-headers="documents_headers"/>
+                        ref="documents_datatable"
+                        :id="panelBody"
+                        :dt-options="documents_options"
+                        :dt-headers="documents_headers"
+                    />
                 </div>
             </form>
         </FormSection>
@@ -47,250 +50,299 @@ import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
     name: 'SpeciesSplitDocuments',
-        components: {
-            FormSection,
-            datatable,
+    components: {
+        FormSection,
+        datatable,
+    },
+    props: {
+        species_community: {
+            type: Object,
+            required: true,
         },
-        props:{
-            species_community:{
-                type: Object,
-                required:true
-            },
-            species_original:{
-                type: Object,
-                required:true
-            },
+        species_original: {
+            type: Object,
+            required: true,
         },
-        data:function () {
-            let vm = this;
-            return{
-                uuid:0,
-                documentBody: 'documentBody' + vm._uid,
-                panelBody: "species-split-documents-"+vm._uid,
-                values:null,
-                // to store all the documents of original on first load.
-                original_species_documents:[],
-                species_document_url: api_endpoints.species_documents,
-                documents_headers:['Number','Category', 'Sub Category','Document','Description','Date/Time','Action'],
-                documents_options:{
-                    autowidth: true,
-                    language:{
-                        processing: constants.DATATABLE_PROCESSING_HTML
+    },
+    data: function () {
+        let vm = this;
+        return {
+            uuid: 0,
+            documentBody: 'documentBody' + vm._uid,
+            panelBody: 'species-split-documents-' + vm._uid,
+            values: null,
+            // to store all the documents of original on first load.
+            original_species_documents: [],
+            species_document_url: api_endpoints.species_documents,
+            documents_headers: [
+                'Number',
+                'Category',
+                'Sub Category',
+                'Document',
+                'Description',
+                'Date/Time',
+                'Action',
+            ],
+            documents_options: {
+                autowidth: true,
+                language: {
+                    processing: constants.DATATABLE_PROCESSING_HTML,
+                },
+                responsive: true,
+                searching: true,
+                //  to show the "workflow Status","Action" columns always in the last position
+                columnDefs: [
+                    { responsivePriority: 1, targets: 0 },
+                    { responsivePriority: 2, targets: -1 },
+                ],
+                ajax: {
+                    url: helpers.add_endpoint_json(
+                        api_endpoints.species,
+                        vm.species_original.id + '/documents'
+                    ),
+                    dataSrc: '',
+                },
+                order: [],
+                dom:
+                    "<'d-flex align-items-center'<'me-auto'l>fB>" +
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'d-flex align-items-center'<'me-auto'i>p>",
+                buttons: [
+                    {
+                        extend: 'excel',
+                        title: 'Boranga Species Split Documents Excel Export',
+                        text: '<i class="fa-solid fa-download"></i> Excel',
+                        className: 'btn btn-primary me-2 rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    responsive: true,
-                    searching: true,
-                     //  to show the "workflow Status","Action" columns always in the last position
-                    columnDefs: [
-                        { responsivePriority: 1, targets: 0 },
-                        { responsivePriority: 2, targets: -1 },
-                    ],
-                    ajax:{
-                        "url": helpers.add_endpoint_json(api_endpoints.species,vm.species_original.id+'/documents'),
-                        "dataSrc": ''
+                    {
+                        extend: 'csv',
+                        title: 'Boranga Species Split Documents CSV Export',
+                        text: '<i class="fa-solid fa-download"></i> CSV',
+                        className: 'btn btn-primary rounded',
+                        exportOptions: {
+                            orthogonal: 'export',
+                        },
                     },
-                    order: [],
-                    dom: "<'d-flex align-items-center'<'me-auto'l>fB>" +
-                         "<'row'<'col-sm-12'tr>>" +
-                         "<'d-flex align-items-center'<'me-auto'i>p>",
-                    buttons:[
-                        {
-                            extend: 'excel',
-                            title: 'Boranga Species Split Documents Excel Export',
-                            text: '<i class="fa-solid fa-download"></i> Excel',
-                            className: 'btn btn-primary me-2 rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                ],
+                columns: [
+                    {
+                        data: 'document_number',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return full.document_number;
+                            } else {
+                                return '<s>' + full.document_number + '</s>';
                             }
                         },
-                        {
-                            extend: 'csv',
-                            title: 'Boranga Species Split Documents CSV Export',
-                            text: '<i class="fa-solid fa-download"></i> CSV',
-                            className: 'btn btn-primary rounded',
-                            exportOptions: {
-                                orthogonal: 'export'
+                    },
+                    {
+                        data: 'document_category_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return full.document_category_name;
+                            } else {
+                                return (
+                                    '<s>' + full.document_category_name + '</s>'
+                                );
                             }
                         },
-                    ],
-                    columns: [
-                        {
-                            data: "document_number",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.active)
-                                {
-                                    return full.document_number;
-                                }
-                                else{
-                                    return '<s>'+ full.document_number + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "document_category_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.active){
-                                    return full.document_category_name;
-                                }
-                                else{
-                                    return '<s>'+ full.document_category_name + '</s>'
-                                }
-                            },
-
-                        },
-                        {
-                            data: "document_sub_category_name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                if(full.active){
-                                    return full.document_sub_category_name;
-                                }
-                                else{
-                                    return '<s>'+ full.document_sub_category_name + '</s>'
-                                }
-                            },
-
+                    },
+                    {
+                        data: 'document_sub_category_name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return full.document_sub_category_name;
+                            } else {
+                                return (
+                                    '<s>' +
+                                    full.document_sub_category_name +
+                                    '</s>'
+                                );
+                            }
                         },
-                        {
-                            data: "name",
-                            orderable: true,
-                            searchable: true,
-                            mRender: function(data,type,full){
-                                let links='';
-                                if(full.active){
-                                    let value = full.name;
-                                    let result = helpers.dtPopoverSplit(value, 30, 'hover');
-                                    links+='<span><a href="'+ full._file+'" target="_blank">' + result.text + '</a> ' + result.link + '</span>';
-                                }else{
-                                    let value = full.name;
-                                    let result = helpers.dtPopover(value, 30, 'hover');
-                                    links += type == 'export' ? value : '<s>' + result + '</s>';
-                                }
-                                return links;
-                            },
-
+                    },
+                    {
+                        data: 'name',
+                        orderable: true,
+                        searchable: true,
+                        mRender: function (data, type, full) {
+                            let links = '';
+                            if (full.active) {
+                                let value = full.name;
+                                let result = helpers.dtPopoverSplit(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    '<span><a href="' +
+                                    full._file +
+                                    '" target="_blank">' +
+                                    result.text +
+                                    '</a> ' +
+                                    result.link +
+                                    '</span>';
+                            } else {
+                                let value = full.name;
+                                let result = helpers.dtPopover(
+                                    value,
+                                    30,
+                                    'hover'
+                                );
+                                links +=
+                                    type == 'export'
+                                        ? value
+                                        : '<s>' + result + '</s>';
+                            }
+                            return links;
                         },
-                        {
-                            data: "description",
-                            orderable: true,
-                            searchable: true,
-                            'render': function(value, type, full){
-                                let result = helpers.dtPopover(value, 30, 'hover');
-                                if(full.active){
-                                    return type=='export' ? value : result;
-                                }else{
-                                    return type=='export' ? value : '<s>'+ result + '</s>';
-                                }
-                            },
+                    },
+                    {
+                        data: 'description',
+                        orderable: true,
+                        searchable: true,
+                        render: function (value, type, full) {
+                            let result = helpers.dtPopover(value, 30, 'hover');
+                            if (full.active) {
+                                return type == 'export' ? value : result;
+                            } else {
+                                return type == 'export'
+                                    ? value
+                                    : '<s>' + result + '</s>';
+                            }
                         },
-                        {
-                            data: "uploaded_date",
-                            mRender:function (data,type,full){
-                                if(full.active){
-                                    return data != '' && data != null ? moment(data).format('DD/MM/YYYY HH:mm'):'';
-                                }else{
-                                    return data != '' && data != null ? '<s>'+ moment(data).format('DD/MM/YYYY HH:mm') + '</s>':'';
-                                }
+                    },
+                    {
+                        data: 'uploaded_date',
+                        mRender: function (data, type, full) {
+                            if (full.active) {
+                                return data != '' && data != null
+                                    ? moment(data).format('DD/MM/YYYY HH:mm')
+                                    : '';
+                            } else {
+                                return data != '' && data != null
+                                    ? '<s>' +
+                                          moment(data).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          ) +
+                                          '</s>'
+                                    : '';
                             }
                         },
-                        {
-                            data: "id",
-                            mRender:function (data,type,full){
-                                // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
-                                if(!vm.original_species_documents.includes(full.id)){
-                                    vm.original_species_documents.push(full.id)
-                                };
+                    },
+                    {
+                        data: 'id',
+                        mRender: function (data, type, full) {
+                            // to store the original species documents for the use of radio btn options on first load so that no need to call api to get the documents ids
+                            if (
+                                !vm.original_species_documents.includes(full.id)
+                            ) {
+                                vm.original_species_documents.push(full.id);
+                            }
 
-                                if(vm.species_community.documents.includes(full.id)){
-                                    return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}"  checked>`;
-                                }
-                                else{
-                                    return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}">`;
-                                }
+                            if (
+                                vm.species_community.documents.includes(full.id)
+                            ) {
+                                return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}"  checked>`;
+                            } else {
+                                return `<input class='form-check-input' type="checkbox" id="document_chkbox-${vm.species_community.id}-${full.id}" data-add-document="${full.id}">`;
                             }
                         },
-                    ],
-                    processing:true,
-                    drawCallback: function() {
+                    },
+                ],
+                processing: true,
+                drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function() {
-                        helpers.enablePopovers();
-                        // another option to fix the responsive table overflow css on tab switch
-                        setTimeout(function (){
-                            vm.adjust_table_width();
-                        },100);
-                    },
+                initComplete: function () {
+                    helpers.enablePopovers();
+                    // another option to fix the responsive table overflow css on tab switch
+                    setTimeout(function () {
+                        vm.adjust_table_width();
+                    }, 100);
+                },
+            },
+        };
+    },
+    computed: {},
+    mounted: function () {
+        let vm = this;
+        this.$nextTick(() => {
+            vm.addEventListeners();
+            if (vm.$parent.document_selection != null) {
+                if (vm.$parent.document_selection === 'selectAll') {
+                    document.getElementById(
+                        'doc_select_all' + vm.species_community.id
+                    ).checked = true;
+                } else {
+                    document.getElementById(
+                        'doc_select_individual' + vm.species_community.id
+                    ).checked = true;
                 }
             }
-        },
-    computed: {},
-        mounted: function(){
+        });
+    },
+    methods: {
+        selectDocumentOption(e) {
             let vm = this;
-            this.$nextTick(() => {
-                vm.addEventListeners();
-                if(vm.$parent.document_selection!=null){
-                    if(vm.$parent.document_selection==="selectAll"){
-                        document.getElementById('doc_select_all'+vm.species_community.id).checked=true;
-                    }
-                    else{
-                        document.getElementById('doc_select_individual'+vm.species_community.id).checked=true;
-                    }
-                }
+            //--fetch the value of selected radio btn
+            let selected_option = e.target.value;
+            //----set the selected value to the parent variable so as to get the data when tab is reloaded/refreshed
+            vm.$parent.document_selection = selected_option;
 
-            });
+            if (selected_option == 'selectAll') {
+                //-- copy all original species documents to new species documents array
+                vm.species_community.documents = vm.original_species_documents;
+                this.$refs.documents_datatable.vmDataTable.ajax.reload();
+            } else if (selected_option == 'individual') {
+                //----empty the array to later select individual
+                vm.species_community.documents = [];
+                this.$refs.documents_datatable.vmDataTable.ajax.reload();
+            }
         },
-        methods:{
-            selectDocumentOption(e){
-                let vm=this;
-                //--fetch the value of selected radio btn
-                let selected_option=e.target.value;
-                //----set the selected value to the parent variable so as to get the data when tab is reloaded/refreshed
-                vm.$parent.document_selection=selected_option;
-
-                if(selected_option == "selectAll"){
-                    //-- copy all original species documents to new species documents array
-                    vm.species_community.documents=vm.original_species_documents;
-                    this.$refs.documents_datatable.vmDataTable.ajax.reload();
-                }
-                else if(selected_option == "individual"){
-                    //----empty the array to later select individual
-                    vm.species_community.documents=[];
-                    this.$refs.documents_datatable.vmDataTable.ajax.reload();
-                }
-            },
-            addEventListeners:function (){
-                let vm=this;
-                vm.$refs.documents_datatable.vmDataTable.on('click', 'input[data-add-document]', function(e) {
-                    //e.preventDefault();
+        addEventListeners: function () {
+            let vm = this;
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'click',
+                'input[data-add-document]',
+                function () {
                     let id = $(this).attr('data-add-document');
                     let chkbox = $(this).attr('id');
-                    if($("#"+chkbox).is(':checked')== true){
-                        if(!vm.species_community.documents.includes(id)){
+                    if ($('#' + chkbox).is(':checked') == true) {
+                        if (!vm.species_community.documents.includes(id)) {
                             vm.species_community.documents.push(parseInt(id));
                         }
-                    }
-                    else{
-                        let doc_arr=vm.species_community.documents;
+                    } else {
+                        let doc_arr = vm.species_community.documents;
                         //---remove document id from array (for this arr.splice is used)
                         var index = doc_arr.indexOf(id);
-                        vm.species_community.documents.splice(index,1);
+                        vm.species_community.documents.splice(index, 1);
                     }
-                });
-                vm.$refs.documents_datatable.vmDataTable.on('childRow.dt', function (e, settings) {
+                }
+            );
+            vm.$refs.documents_datatable.vmDataTable.on(
+                'childRow.dt',
+                function () {
                     helpers.enablePopovers();
-                });
-            },
-            adjust_table_width: function(){
-                if (this.$refs.documents_datatable !== undefined) {this.$refs.documents_datatable.vmDataTable.columns.adjust().responsive.recalc();}
-            },
+                }
+            );
+        },
+        adjust_table_width: function () {
+            if (this.$refs.documents_datatable !== undefined) {
+                this.$refs.documents_datatable.vmDataTable.columns
+                    .adjust()
+                    .responsive.recalc();
+            }
         },
-
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
index 642028a4..dc404582 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
@@ -1700,7 +1700,7 @@
 
 <script>
 import FormSection from '@/components/forms/section_toggle.vue';
-import { api_endpoints, helpers } from '@/utils/hooks';
+import { api_endpoints } from '@/utils/hooks';
 export default {
     name: 'SpeciesSplitProfile',
     components: {
@@ -2030,7 +2030,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.species_community.taxonomy_id = data;
                     vm.species_community.taxonomy_details = e.params.data;
@@ -2044,8 +2043,7 @@ export default {
                     vm.name_authority = e.params.data.name_authority;
                     vm.name_comments = e.params.data.name_comments;
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.species_community.taxonomy_id = '';
                     vm.species_display = '';
                     vm.common_name = '';
@@ -2055,7 +2053,7 @@ export default {
                     (vm.family = ''), (vm.genus = ''), (vm.name_authority = '');
                     vm.name_comments = '';
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-' +
                             vm.scientific_name_lookup +
@@ -2356,7 +2354,7 @@ export default {
                 return '';
             }
         },
-        handleMinimumFireIntervalRange: function (e) {
+        handleMinimumFireIntervalRange: function () {
             if (this.minimum_fire_interval_range_new == false) {
                 this.species_community.conservation_attributes.minimum_fire_interval_to =
                     null;
@@ -2451,7 +2449,7 @@ export default {
             }
             return [];
         },
-        chainedSelectDistricts: function (regions, action, deselect_region_id) {
+        chainedSelectDistricts: function (regions, action) {
             let vm = this;
             if (action != 'fetch' && action != 'select') {
                 vm.species_community.districts = []; //-----to remove the previous selection
@@ -2474,11 +2472,7 @@ export default {
                 }
             }
         },
-        chainedSelectReadonlyDistricts: function (
-            regions,
-            action,
-            deselect_region_id
-        ) {
+        chainedSelectReadonlyDistricts: function (regions) {
             let vm = this;
 
             vm.district_list_readonly = [];
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
index 42d3bff1..3afc32a1 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
@@ -309,7 +309,7 @@ export default {
             vm.$refs.threats_datatable.vmDataTable.on(
                 'click',
                 'input[data-add-threat]',
-                function (e) {
+                function () {
                     //e.preventDefault();
                     let id = $(this).attr('data-add-threat');
                     let chkbox = $(this).attr('id');
@@ -327,7 +327,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
index 09f75d18..5929e44f 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
@@ -559,7 +559,6 @@ export default {
             this.$refs.threat_detail.isModalOpen = true;
         },
         editThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'edit';
             fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
@@ -579,7 +578,6 @@ export default {
             this.$refs.threat_detail.isModalOpen = true;
         },
         viewThreat: function (id) {
-            let vm = this;
             this.$refs.threat_detail.threat_id = id;
             this.$refs.threat_detail.threat_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.threat, id)).then(
@@ -646,7 +644,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'Your threat has been removed',
@@ -664,7 +662,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateThreat: function (id) {
@@ -702,7 +700,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your threat has been reinstated',
@@ -720,7 +718,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         updatedThreats() {
@@ -778,7 +776,7 @@ export default {
             );
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
index cb8ac08b..38627ed8 100644
--- a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
@@ -1178,13 +1178,14 @@ export default {
             vm.initialiseFamilyLookup();
             vm.initialiseGeneraLookup();
             vm.addEventListeners();
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterFaunaScientificName') != 'all' &&
                 sessionStorage.getItem('filterFaunaScientificName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFaunaScientificNameText'),
                     vm.filterFaunaScientificName,
                     false,
@@ -1197,7 +1198,7 @@ export default {
                 sessionStorage.getItem('filterFaunaCommonName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFaunaCommonNameText'),
                     vm.filterFaunaCommonName,
                     false,
@@ -1211,7 +1212,7 @@ export default {
                 sessionStorage.getItem('filterFaunaPhylogeneticGroup') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFaunaPhylogeneticGroupText'),
                     vm.filterFaunaPhylogeneticGroup,
                     false,
@@ -1224,7 +1225,7 @@ export default {
                 sessionStorage.getItem('filterFaunaFamily') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFaunaFamilyText'),
                     vm.filterFaunaFamily,
                     false,
@@ -1237,7 +1238,7 @@ export default {
                 sessionStorage.getItem('filterFaunaGenus') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFaunaGenusText'),
                     vm.filterFaunaGenus,
                     false,
@@ -1282,7 +1283,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaScientificName = data; // this is id session
                     sessionStorage.setItem(
@@ -1290,12 +1290,11 @@ export default {
                         e.params.data.text
                     ); // this is name session
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFaunaScientificName = 'all';
                     sessionStorage.setItem('filterFaunaScientificNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-scientific_name_lookup-results"]'
                     );
@@ -1325,7 +1324,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaCommonName = data;
                     sessionStorage.setItem(
@@ -1333,12 +1331,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFaunaCommonName = 'all';
                     sessionStorage.setItem('filterFaunaCommonNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-common_name_lookup-results"]'
                     );
@@ -1368,7 +1365,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaPhylogeneticGroup = data;
                     sessionStorage.setItem(
@@ -1376,15 +1372,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFaunaPhylogeneticGroup = 'all';
                     sessionStorage.setItem(
                         'filterFaunaPhylogeneticGroupText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-phylo_group_lookup-results"]'
                     );
@@ -1414,7 +1409,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaFamily = data;
                     sessionStorage.setItem(
@@ -1422,12 +1416,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFaunaFamily = 'all';
                     sessionStorage.setItem('filterFaunaFamilyText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     //const searchField = $(".select2-search__field")
                     const searchField = $(
                         '[aria-controls="select2-family_lookup-results"]'
@@ -1458,7 +1451,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFaunaGenus = data;
                     sessionStorage.setItem(
@@ -1466,12 +1458,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFaunaGenus = 'all';
                     sessionStorage.setItem('filterFaunaGenusText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     //const searchField = $(".select2-search__field")
                     const searchField = $(
                         '[aria-controls="select2-genera_lookup-results"]'
@@ -1610,7 +1601,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The fauna record has been discarded',
@@ -1660,7 +1651,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'The fauna record has been reinstated',
@@ -1715,12 +1706,9 @@ export default {
                     vm.historyDocument(id);
                 }
             );
-            vm.$refs.fauna_datatable.vmDataTable.on(
-                'childRow.dt',
-                function (e, settings) {
-                    helpers.enablePopovers();
-                }
-            );
+            vm.$refs.fauna_datatable.vmDataTable.on('childRow.dt', function () {
+                helpers.enablePopovers();
+            });
         },
     },
 };
diff --git a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
index ed2b2b7f..33eb01c5 100755
--- a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
@@ -1188,13 +1188,14 @@ export default {
             vm.initialiseFamilyLookup();
             vm.initialiseGeneraLookup();
             vm.addEventListeners();
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterFloraScientificName') != 'all' &&
                 sessionStorage.getItem('filterFloraScientificName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFloraScientificNameText'),
                     vm.filterFloraScientificName,
                     false,
@@ -1208,7 +1209,7 @@ export default {
                 sessionStorage.getItem('filterFloraCommonName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFloraCommonNameText'),
                     vm.filterFloraCommonName,
                     false,
@@ -1222,7 +1223,7 @@ export default {
                 sessionStorage.getItem('filterFloraPhylogeneticGroup') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFloraPhylogeneticGroupText'),
                     vm.filterFloraPhylogeneticGroup,
                     false,
@@ -1235,7 +1236,7 @@ export default {
                 sessionStorage.getItem('filterFloraFamily') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFloraFamilyText'),
                     vm.filterFloraFamily,
                     false,
@@ -1248,7 +1249,7 @@ export default {
                 sessionStorage.getItem('filterFloraGenus') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterFloraGenusText'),
                     vm.filterFloraGenus,
                     false,
@@ -1293,7 +1294,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraScientificName = data;
                     sessionStorage.setItem(
@@ -1301,12 +1301,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFloraScientificName = 'all';
                     sessionStorage.setItem('filterFloraScientificNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-scientific_name_lookup-results"]'
                     );
@@ -1335,7 +1334,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraCommonName = data;
                     sessionStorage.setItem(
@@ -1343,12 +1341,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFloraCommonName = 'all';
                     sessionStorage.setItem('filterFloraCommonNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-common_name_lookup-results"]'
                     );
@@ -1378,7 +1375,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraFamily = data;
                     sessionStorage.setItem(
@@ -1386,12 +1382,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFloraFamily = 'all';
                     sessionStorage.setItem('filterFloraFamilyText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-family_lookup-results"]'
                     );
@@ -1420,7 +1415,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraGenus = data;
                     sessionStorage.setItem(
@@ -1428,12 +1422,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFloraGenus = 'all';
                     sessionStorage.setItem('filterFloraGenusText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-genera_lookup-results"]'
                     );
@@ -1462,7 +1455,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterFloraPhylogeneticGroup = data;
                     sessionStorage.setItem(
@@ -1470,15 +1462,14 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterFloraPhylogeneticGroup = 'all';
                     sessionStorage.setItem(
                         'filterFloraPhylogeneticGroupText',
                         ''
                     );
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-phylo_group_lookup-results"]'
                     );
@@ -1615,7 +1606,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The flora record has been discarded',
@@ -1665,7 +1656,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'The flora record has been reinstated',
@@ -1720,12 +1711,9 @@ export default {
                     vm.historyDocument(id);
                 }
             );
-            vm.$refs.flora_datatable.vmDataTable.on(
-                'childRow.dt',
-                function (e, settings) {
-                    helpers.enablePopovers();
-                }
-            );
+            vm.$refs.flora_datatable.vmDataTable.on('childRow.dt', function () {
+                helpers.enablePopovers();
+            });
         },
         delay(callback, ms) {
             var timer = 0;
diff --git a/boranga/frontend/boranga/src/components/common/table_related_items.vue b/boranga/frontend/boranga/src/components/common/table_related_items.vue
index f55605f9..99cd02b5 100644
--- a/boranga/frontend/boranga/src/components/common/table_related_items.vue
+++ b/boranga/frontend/boranga/src/components/common/table_related_items.vue
@@ -186,7 +186,7 @@ export default {
         vm.$nextTick(() => {
             vm.$refs.related_items_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
index 7dc502db..29ad89de 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
@@ -252,7 +252,6 @@ export default {
     },
     beforeRouteEnter: function (to, from, next) {
         if (to.params.conservation_status_id) {
-            let vm = this;
             fetch(
                 `/api/conservation_status/${to.params.conservation_status_id}.json`
             ).then(
@@ -268,7 +267,7 @@ export default {
                                     '/amendment_request'
                             )
                         ).then(
-                            async (response) => {
+                            async () => {
                                 vm.setAmendmentData(data);
                             },
                             (err) => {
@@ -365,12 +364,12 @@ export default {
         window.removeEventListener('beforeunload', this.leaving);
     },
     methods: {
-        set_formData: function (e) {
+        set_formData: function () {
             let vm = this;
             let formData = new FormData(vm.form);
             return formData;
         },
-        save: async function (e) {
+        save: async function () {
             let vm = this;
             var missing_data = vm.can_submit('');
             if (missing_data != true) {
@@ -395,7 +394,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {
+                async () => {
                     let swalHtml =
                         '<p>Your conservation status proposal has been saved as a draft.</p>';
                     if (vm.saveExitCSProposal) {
@@ -465,20 +464,20 @@ export default {
                 },
                 body: JSON.stringify(this.conservation_status_obj),
             }).then(
-                async (response) => {},
+                async () => {},
                 (err) => {
                     console.log(err);
                 }
             );
         },
-        save_before_submit: async function (e) {
+        save_before_submit: async function () {
             let vm = this;
             vm.saveError = false;
 
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
             const result = await fetch(vm.cs_proposal_form_url, payload).then(
-                async (response) => {},
+                async () => {},
                 (err) => {
                     var errorText = helpers.apiVueResourceError(err);
                     swal.fire({
@@ -635,7 +634,7 @@ export default {
             }).then(
                 async (result) => {
                     if (result.isConfirmed) {
-                        let result = await vm.save_before_submit();
+                        await vm.save_before_submit();
                         if (!vm.saveError) {
                             let payload = new Object();
                             Object.assign(payload, vm.conservation_status_obj);
@@ -674,7 +673,7 @@ export default {
                         vm.paySubmitting = false;
                     }
                 },
-                (error) => {
+                () => {
                     vm.submitting = true;
                     vm.paySubmitting = false;
                 }
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
index 761b8c3a..8afd6775 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
@@ -110,7 +110,6 @@ export default {
         });
     },
     data: function () {
-        let vm = this;
         return {
             conservation_status_obj: {},
         };
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
index 3ee76460..ea0db255 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
@@ -335,7 +335,6 @@ export default {
             };
         },
         column_action: function () {
-            let vm = this;
             return {
                 // 10. Action
                 data: 'id',
@@ -361,7 +360,6 @@ export default {
             let vm = this;
 
             let columns = [];
-            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -390,7 +388,6 @@ export default {
                 vm.column_status,
                 vm.column_action,
             ];
-            search = false;
 
             return {
                 autoWidth: false,
@@ -470,14 +467,6 @@ export default {
                 vm.filterCSExCommunityName
             );
         },
-        filterCSScientificName: function () {
-            let vm = this;
-            vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
-            sessionStorage.setItem(
-                vm.filterCSScientificName_cache,
-                vm.filterCSScientificName
-            );
-        },
         filterCSConservationList: function () {
             let vm = this;
             vm.$refs.conservation_status_datatable.vmDataTable.ajax.reload(); // This calls ajax() backend call.
@@ -526,13 +515,14 @@ export default {
             vm.initialiseScientificNameLookup();
             vm.initialiseCommunityNameLookup();
             vm.addEventListeners();
+            var newOption = null;
             // -- to set the select2 field with the session value if exists onload()
             if (
                 sessionStorage.getItem('filterCSScientificName') != 'all' &&
                 sessionStorage.getItem('filterCSScientificName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSScientificNameText'),
                     vm.filterCSScientificName,
                     false,
@@ -545,7 +535,7 @@ export default {
                 sessionStorage.getItem('filterCSExCommunityName') != null
             ) {
                 // contructor new Option(text, value, defaultSelected, selected)
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterCSExCommunityNameText'),
                     vm.filterCSExCommunityName,
                     false,
@@ -582,7 +572,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSScientificName = data;
                     sessionStorage.setItem(
@@ -590,12 +579,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSScientificName = 'all';
                     sessionStorage.setItem('filterCSScientificNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_scientific_name_lookup-results"]'
                     );
@@ -624,7 +612,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterCSExCommunityName = data;
                     sessionStorage.setItem(
@@ -632,12 +619,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterCSExCommunityName = 'all';
                     sessionStorage.setItem('filterCSExCommunityNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-cs_community_name_lookup-results"]'
                     );
@@ -721,7 +707,7 @@ export default {
                             headers: { 'Content-Type': 'application/json' },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'Your proposal has been discarded',
@@ -764,7 +750,7 @@ export default {
                             headers: { 'Content-Type': 'application/json' },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your proposal has been reinstated. You may continue to work on it now.',
@@ -806,7 +792,7 @@ export default {
             );
             vm.$refs.conservation_status_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
index fb2ac342..ae95853b 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_proposal.vue
@@ -239,7 +239,6 @@ export default {
     },
     beforeRouteEnter: function (to, from, next) {
         if (to.params.occurrence_report_id) {
-            let vm = this;
             fetch(
                 `/api/occurrence_report/${to.params.occurrence_report_id}.json`
             ).then(
@@ -260,7 +259,7 @@ export default {
                                     '/amendment_request'
                             )
                         ).then(
-                            async (response) => {
+                            async () => {
                                 vm.setAmendmentData(data);
                             },
                             (err) => {
@@ -357,10 +356,9 @@ export default {
     },
     methods: {
         submit_text: function () {
-            let vm = this;
             return 'Submit';
         },
-        set_formData: function (e) {
+        set_formData: function () {
             let vm = this;
             let formData = new FormData(vm.form);
             return formData;
@@ -501,9 +499,8 @@ export default {
                 }
             });
         },
-        save_wo_confirm: function (e) {
+        save_wo_confirm: function () {
             let vm = this;
-            let formData = vm.set_formData();
             fetch(vm.ocr_proposal_form_url, {
                 method: 'POST',
                 headers: {
@@ -511,7 +508,7 @@ export default {
                 },
             });
         },
-        save_before_submit: async function (e) {
+        save_before_submit: async function () {
             console.log('save before submit');
             let vm = this;
             vm.saveError = false;
@@ -565,7 +562,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {
+                async () => {
                     console.log('saved before submit');
                 },
                 (err) => {
@@ -632,9 +629,10 @@ export default {
             // loop through all (non-hidden) required fields, and check data has been entered
             required_fields.each(function () {
                 var id = 'id_' + this.name;
+                var text = null;
                 if (this.type == 'radio') {
                     if (!$('input[name=' + this.name + ']').is(':checked')) {
-                        var text = $('#' + id).text();
+                        text = $('#' + id).text();
                         console.log(
                             'radio not checked: ' + this.type + ' ' + text
                         );
@@ -643,12 +641,12 @@ export default {
                 }
 
                 if (this.type == 'checkbox') {
-                    var id = 'id_' + this.classList['value'];
+                    id = 'id_' + this.classList['value'];
                     if (
                         $('[class=' + this.classList['value'] + ']:checked')
                             .length == 0
                     ) {
-                        var text = $('#' + id).text();
+                        text = $('#' + id).text();
                         console.log(
                             'checkbox not checked: ' + this.type + ' ' + text
                         );
@@ -658,8 +656,8 @@ export default {
 
                 if (this.type == 'select-one') {
                     if ($(this).val() == '') {
-                        var text = $('#' + id).text(); // this is the (question) label
-                        var id = 'id_' + $(this).prop('name'); // the label id
+                        text = $('#' + id).text(); // this is the (question) label
+                        id = 'id_' + $(this).prop('name'); // the label id
                         console.log(
                             'selector not selected: ' + this.type + ' ' + text
                         );
@@ -670,7 +668,7 @@ export default {
                 if (this.type == 'file') {
                     var num_files = $('#' + id).attr('num_files');
                     if (num_files == '0') {
-                        var text = $('#' + id).text();
+                        text = $('#' + id).text();
                         console.log(
                             'file not uploaded: ' + this.type + ' ' + this.name
                         );
@@ -680,7 +678,7 @@ export default {
 
                 if (this.type == 'text') {
                     if (this.value == '') {
-                        var text = $('#' + id).text();
+                        text = $('#' + id).text();
                         console.log(
                             'text not provided: ' + this.type + ' ' + this.name
                         );
@@ -690,7 +688,7 @@ export default {
 
                 if (this.type == 'textarea') {
                     if (this.value == '') {
-                        var text = $('#' + id).text();
+                        text = $('#' + id).text();
                         console.log(
                             'textarea not provided: ' +
                                 this.type +
@@ -861,7 +859,7 @@ export default {
                     }
                     vm.submitting = false;
                 },
-                (error) => {
+                () => {
                     vm.submitting = false;
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
index d698a8b3..94a62824 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
@@ -297,7 +297,6 @@ export default {
             };
         },
         column_action: function () {
-            let vm = this;
             return {
                 data: 'id',
                 orderable: false,
@@ -323,7 +322,6 @@ export default {
         datatable_options: function () {
             let vm = this;
             let columns = [];
-            let search = null;
             let buttons = [
                 {
                     extend: 'excel',
@@ -353,8 +351,6 @@ export default {
                 vm.column_status,
                 vm.column_action,
             ];
-            search = false;
-            buttons = buttons;
 
             return {
                 autoWidth: false,
@@ -463,11 +459,12 @@ export default {
             vm.initialiseScientificNameLookup();
             vm.initialiseCommunityNameLookup();
             vm.addEventListeners();
+            var newOption = null;
             if (
                 sessionStorage.getItem('filterOCRScientificName') != 'all' &&
                 sessionStorage.getItem('filterOCRScientificName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRScientificNameText'),
                     vm.filterOCRScientificName,
                     false,
@@ -479,7 +476,7 @@ export default {
                 sessionStorage.getItem('filterOCRExCommunityName') != 'all' &&
                 sessionStorage.getItem('filterOCRExCommunityName') != null
             ) {
-                var newOption = new Option(
+                newOption = new Option(
                     sessionStorage.getItem('filterOCRExCommunityNameText'),
                     vm.filterOCRExCommunityName,
                     false,
@@ -516,7 +513,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRScientificName = data;
                     sessionStorage.setItem(
@@ -524,12 +520,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRScientificName = 'all';
                     sessionStorage.setItem('filterOCRScientificNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_scientific_name_lookup-results"]'
                     );
@@ -558,7 +553,6 @@ export default {
                     },
                 })
                 .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
                     let data = e.params.data.id;
                     vm.filterOCRExCommunityName = data;
                     sessionStorage.setItem(
@@ -566,12 +560,11 @@ export default {
                         e.params.data.text
                     );
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.filterOCRExCommunityName = 'all';
                     sessionStorage.setItem('filterOCRExCommunityNameText', '');
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-ocr_community_name_lookup-results"]'
                     );
@@ -654,7 +647,7 @@ export default {
                             headers: { 'Content-Type': 'application/json' },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Occurrence Report Discarded',
                                 text: 'The occurrence report has been discarded',
@@ -697,7 +690,7 @@ export default {
                                 headers: { 'Content-Type': 'application/json' },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'Your report has been reinstated',
@@ -808,7 +801,7 @@ export default {
             );
             vm.$refs.occurrence_report_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
index 98bc33b7..6a2d0f24 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/ocr_proposal_submit.vue
@@ -101,7 +101,7 @@
     </div>
 </template>
 <script>
-import { api_endpoints, helpers } from '@/utils/hooks';
+import { api_endpoints } from '@/utils/hooks';
 
 export default {
     beforeRouteEnter: function (to, from, next) {
@@ -111,7 +111,6 @@ export default {
         });
     },
     data: function () {
-        let vm = this;
         return {
             occurrence_report_obj: {},
         };
diff --git a/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue b/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
index 3be04789..1cd160ed 100644
--- a/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/external/species_communities/dashboard.vue
@@ -117,7 +117,6 @@ export default {
         FormSection,
     },
     data() {
-        let vm = this;
         return {
             user_preference: 'flora',
             group_types: [],
@@ -171,6 +170,7 @@ export default {
     mounted: function () {
         let vm = this;
         this.$nextTick(function () {
+            // eslint-disable-next-line no-undef
             chevron_toggle.init();
             if (localStorage.getItem('speciesCommunitiesActiveTab') === null) {
                 vm.set_active_tab(vm.user_preference);
diff --git a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
index dad6636c..da5b5940 100755
--- a/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/external/species_communities/species_communities.vue
@@ -198,9 +198,6 @@ export default {
                 : `/api/external_species/${this.species_community.id}/public_image/`;
         },
     },
-    mounted: function () {
-        let vm = this;
-    },
     methods: {
         onImageLoad: function () {
             this.downloadingImage = false;
diff --git a/boranga/frontend/boranga/src/components/form_conservation_status.vue b/boranga/frontend/boranga/src/components/form_conservation_status.vue
index b8b82039..a949753c 100644
--- a/boranga/frontend/boranga/src/components/form_conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/form_conservation_status.vue
@@ -218,16 +218,12 @@ export default {
     mounted: function () {
         let vm = this;
         vm.form = document.forms.new_conservation_status;
-        vm.eventListener();
     },
     methods: {
         //----function to resolve datatable exceeding beyond the div
-        tabClicked: function (param) {
+        tabClicked: function () {
             this.reloadcount = this.reloadcount + 1;
         },
-        eventListener: function () {
-            let vm = this;
-        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/form_occurrence_report.vue b/boranga/frontend/boranga/src/components/form_occurrence_report.vue
index 40971779..d8c88cb9 100644
--- a/boranga/frontend/boranga/src/components/form_occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/form_occurrence_report.vue
@@ -283,7 +283,7 @@ export default {
         });
     },
     methods: {
-        tabClicked: function (param) {},
+        tabClicked: function () {},
         refreshFromResponse: function () {
             this.$emit('refreshFromResponse');
         },
diff --git a/boranga/frontend/boranga/src/components/form_species_combine.vue b/boranga/frontend/boranga/src/components/form_species_combine.vue
index f5db4234..3031c85e 100644
--- a/boranga/frontend/boranga/src/components/form_species_combine.vue
+++ b/boranga/frontend/boranga/src/components/form_species_combine.vue
@@ -163,16 +163,12 @@ export default {
         let vm = this;
         //vm.set_tabs();
         vm.form = document.forms.new_species;
-        vm.eventListener();
     },
     methods: {
         //----function to resolve datatable exceeding beyond the div
-        tabClicked: function (param) {
+        tabClicked: function () {
             this.reloadcount = this.reloadcount + 1;
         },
-        eventListener: function () {
-            let vm = this;
-        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/form_species_communities.vue b/boranga/frontend/boranga/src/components/form_species_communities.vue
index 43d9c470..7699da2b 100755
--- a/boranga/frontend/boranga/src/components/form_species_communities.vue
+++ b/boranga/frontend/boranga/src/components/form_species_communities.vue
@@ -274,7 +274,7 @@ export default {
         vm.form = document.forms.new_species;
     },
     methods: {
-        tabClicked: function (param) {
+        tabClicked: function () {
             this.reloadcount = this.reloadcount + 1;
         },
         refreshSpeciesCommunity: function () {
diff --git a/boranga/frontend/boranga/src/components/form_species_split.vue b/boranga/frontend/boranga/src/components/form_species_split.vue
index 3b3f8714..e54a2afa 100644
--- a/boranga/frontend/boranga/src/components/form_species_split.vue
+++ b/boranga/frontend/boranga/src/components/form_species_split.vue
@@ -37,7 +37,7 @@
                 <li class="nav-item">
                     <a
                         id="pills-threats-tab"
-                    class="nav-link"
+                        class="nav-link"
                         data-bs-toggle="pill"
                         :href="'#' + threatBody"
                         role="tab"
@@ -74,7 +74,7 @@
                     <SpeciesDocuments
                         :key="reloadcount"
                         id="speciesDocuments"
-                    ref="species_documents"
+                        ref="species_documents"
                         :is_internal="is_internal"
                         :species_community="species_community"
                         :species_original="species_original"
@@ -90,7 +90,7 @@
                     <SpeciesThreats
                         :key="reloadcount"
                         id="speciesThreats"
-                    ref="species_threats"
+                        ref="species_threats"
                         :is_internal="is_internal"
                         :species_community="species_community"
                         :species_original="species_original"
@@ -108,42 +108,42 @@ import SpeciesDocuments from '@/components/common/species_communities/species_sp
 import SpeciesThreats from '@/components/common/species_communities/species_split/species_split_threats.vue';
 
 export default {
-        components: {
-            SpeciesProfile,
-            SpeciesDocuments,
-            SpeciesThreats,
+    components: {
+        SpeciesProfile,
+        SpeciesDocuments,
+        SpeciesThreats,
+    },
+    props: {
+        species_original: {
+            type: Object,
+            required: true,
         },
-        props:{
-            species_original:{
-                type: Object,
-                required:true
-            },
-            species_community:{
-                type: Object,
-                required:true
-            },
-            is_external:{
-              type: Boolean,
-              default: false
-            },
-            is_internal:{
-              type: Boolean,
-              default: false
-            },
+        species_community: {
+            type: Object,
+            required: true,
         },
-        data:function () {
-            let vm = this;
-            return{
-                profileBody: 'profileBody' + vm._uid,
-                documentBody: 'documentBody' + vm._uid,
-                threatBody: 'threatBody' + vm._uid,
-                relatedItemBody: 'relatedItemBody' + vm._uid,
-                values:null,
-                reloadcount:0,
-                document_selection:null,
-                threat_selection:null,
-            }
+        is_external: {
+            type: Boolean,
+            default: false,
         },
+        is_internal: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        let vm = this;
+        return {
+            profileBody: 'profileBody' + vm._uid,
+            documentBody: 'documentBody' + vm._uid,
+            threatBody: 'threatBody' + vm._uid,
+            relatedItemBody: 'relatedItemBody' + vm._uid,
+            values: null,
+            reloadcount: 0,
+            document_selection: null,
+            threat_selection: null,
+        };
+    },
     computed: {
         related_items_ajax_url: function () {
             return (
@@ -155,15 +155,16 @@ export default {
         related_items_filter_list_url: function () {
             return '/api/species/filter_list.json';
         },
-        mounted: function() {
+        mounted: function () {
             let vm = this;
             vm.form = document.forms.new_species;
         },
-        methods:{
+        methods: {
             //----function to resolve datatable exceeding beyond the div
-            tabClicked: function(param){
-                this.reloadcount = this.reloadcount+1;
+            tabClicked: function () {
+                this.reloadcount = this.reloadcount + 1;
             },
-        }
+        },
+    },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/forms/Form.vue b/boranga/frontend/boranga/src/components/forms/Form.vue
deleted file mode 100755
index 40a25455..00000000
--- a/boranga/frontend/boranga/src/components/forms/Form.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-    import Renderer from '@/utils/renderer'
-    import bs from 'bootstrap'
-    //require('../../node_modules/bootstrap/dist/css/bootstrap.css');
-    require('../../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css')
-    require('../../node_modules/font-awesome/css/font-awesome.min.css')
-    export default {
-        props:{
-            application:{
-                type: Array,
-                required:true
-            },
-            data:{
-                type: Array,
-                default:function () {
-                    return null;
-                }
-            }
-        },
-        data:function () {
-            return{
-                values:null
-            }
-        },
-        methods:{
-            mapDataToApplication:function () {
-                if (this.data) {
-                    let fdata = {};
-                    let jans = this.data;
-                    for (var a in jans) {
-                        var key = Object.keys(jans[a])[0];
-                        fdata[key] = jans[a][key][0];
-                    }
-                    this.values = fdata
-                }
-            }
-        },
-        mounted:function () {
-            this.mapDataToApplication();
-        },
-        render(h) {
-            let vm =this;
-            return (
-                <div>
-                    {vm.application.map(d =>{
-                        return Renderer.renderChildren(h,d,vm.values)
-                    })}
-                </div>
-            )
-        }
-    }
-</script>
diff --git a/boranga/frontend/boranga/src/components/forms/collapsible_component.vue b/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
index 042309e0..5f44e6e8 100644
--- a/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
+++ b/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
@@ -76,7 +76,7 @@ export default {
         });
     },
     methods: {
-        toggle_filters_button_clicked: function (e) {
+        toggle_filters_button_clicked: function () {
             // Bootstrap add a 'collapsed' class name to the element
             let filters_expanded_when_clicked = $(
                 '#' + this.button_elem_id
diff --git a/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue b/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue
index 9482b47f..4fe6ed26 100755
--- a/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue
+++ b/boranga/frontend/boranga/src/components/forms/comment_icon_checkbox_radio.vue
@@ -41,7 +41,6 @@ export default {
         'assessor_readonly',
     ],
     data() {
-        let vm = this;
         return {
             showingComment: false,
         };
diff --git a/boranga/frontend/boranga/src/components/forms/conditions.vue b/boranga/frontend/boranga/src/components/forms/conditions.vue
deleted file mode 100755
index eec31495..00000000
--- a/boranga/frontend/boranga/src/components/forms/conditions.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-    export default {
-        props:["conditions","renderer","name","data","readonly"],
-        mounted(){
-
-        },
-        render(h) {
-            let vm =this;
-            try {
-                var conditions = vm.conditions;
-                if (conditions) {
-                    var values = Object.keys(conditions);
-                    if (!values) {
-                        return (
-                            <div> no conditions </div>
-                        )
-                    }else{
-                        return (
-                            <div>
-                                {values.map(val =>{
-                                    {return conditions[val].map(c=>{
-                                        {return (<div id={'cons_'+vm.name+'_'+val} class="hidden">
-                                            {vm.renderer.renderChildren(h,c,vm.data,vm.readonly)}
-                                        </div>)}
-                                    })}
-                                })}
-                            </div>
-                        )
-                    }
-                }
-            } catch (e) {
-                console.log(e);
-            }
-        }
-
-    }
-</script>
diff --git a/boranga/frontend/boranga/src/components/forms/declarations.vue b/boranga/frontend/boranga/src/components/forms/declarations.vue
index cc4ab5a3..14e90eb3 100755
--- a/boranga/frontend/boranga/src/components/forms/declarations.vue
+++ b/boranga/frontend/boranga/src/components/forms/declarations.vue
@@ -27,8 +27,6 @@
 </template>
 
 <script>
-import HelpText from './help_text.vue';
-import HelpTextUrl from './help_text_url.vue';
 export default {
     props: [
         'name',
diff --git a/boranga/frontend/boranga/src/components/forms/filefield.vue b/boranga/frontend/boranga/src/components/forms/filefield.vue
index 533e94f2..147f1140 100755
--- a/boranga/frontend/boranga/src/components/forms/filefield.vue
+++ b/boranga/frontend/boranga/src/components/forms/filefield.vue
@@ -269,13 +269,6 @@ export default {
                     }
                 }
             }
-
-            if (!file_updated) {
-                vm.files.push({
-                    name: e.target.files[0].name,
-                    file: e.target.files[0],
-                });
-            }
         },
         delete_document: function (file) {
             /* deletes, previously saved file, from the server */
@@ -314,7 +307,7 @@ export default {
                         }
                     );
                 },
-                (error) => {}
+                () => {}
             );
         },
         num_documents: function () {
diff --git a/boranga/frontend/boranga/src/components/forms/group.vue b/boranga/frontend/boranga/src/components/forms/group.vue
index d0f318fc..96a9cfbc 100755
--- a/boranga/frontend/boranga/src/components/forms/group.vue
+++ b/boranga/frontend/boranga/src/components/forms/group.vue
@@ -61,14 +61,13 @@ export default {
         };
     },
     mounted: function () {
-        var vm = this;
         $('[data-toggle="tooltip"]').tooltip();
     },
     methods: {
-        expand: function (e) {
+        expand: function () {
             this.isExpanded = true;
         },
-        minimize: function (e) {
+        minimize: function () {
             this.isExpanded = false;
         },
     },
diff --git a/boranga/frontend/boranga/src/components/forms/section_toggle.vue b/boranga/frontend/boranga/src/components/forms/section_toggle.vue
index 765bf0c5..3fa7de2c 100644
--- a/boranga/frontend/boranga/src/components/forms/section_toggle.vue
+++ b/boranga/frontend/boranga/src/components/forms/section_toggle.vue
@@ -113,6 +113,7 @@ export default {
         },
     },
     mounted: function () {
+        // eslint-disable-next-line no-undef
         chevron_toggle.init();
     },
     methods: {
diff --git a/boranga/frontend/boranga/src/components/forms/select-conditions.vue b/boranga/frontend/boranga/src/components/forms/select-conditions.vue
deleted file mode 100755
index e68231f9..00000000
--- a/boranga/frontend/boranga/src/components/forms/select-conditions.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-    export default {
-        props:["conditions","renderer","name","data","readonly"],
-        mounted(){
-
-        },
-        render(h) {
-            let vm =this;
-            try {
-                var conditions = vm.conditions;
-                if (conditions) {
-                    var values = Object.keys(conditions);
-                    if (!values) {
-                        return (
-                            <div> no conditions </div>
-                        )
-                    }else{
-                        return (
-                            <div>
-                                {values.map(val =>{
-                                    {return (
-                                        <div id={'cons_'+vm.name+'_'+val} class="hidden">
-                                            {conditions[val].map(c=>{
-                                                return vm.renderer.renderChildren(h,c,vm.data,vm.readonly)
-                                            })}
-                                        </div>
-                                    )}
-                                })}
-                            </div>
-                        )
-                    }
-                }
-            } catch (e) {
-                console.log(e);
-            }
-        }
-
-    }
-</script>
diff --git a/boranga/frontend/boranga/src/components/forms/select.vue b/boranga/frontend/boranga/src/components/forms/select.vue
index 6ebd35e2..2eebddc2 100755
--- a/boranga/frontend/boranga/src/components/forms/select.vue
+++ b/boranga/frontend/boranga/src/components/forms/select.vue
@@ -160,7 +160,6 @@
 </template>
 
 <script>
-var select2 = require('select2');
 import Comment from './comment.vue';
 import HelpText from './help_text.vue';
 import HelpTextUrl from './help_text_url.vue';
@@ -229,7 +228,7 @@ export default {
         },
         init: function () {
             let vm = this;
-            setTimeout(function (e) {
+            setTimeout(function () {
                 $('#' + vm.selectid)
                     .select2({
                         theme: 'bootstrap',
diff --git a/boranga/frontend/boranga/src/components/forms/table.vue b/boranga/frontend/boranga/src/components/forms/table.vue
index a978d0a7..4ace9ade 100644
--- a/boranga/frontend/boranga/src/components/forms/table.vue
+++ b/boranga/frontend/boranga/src/components/forms/table.vue
@@ -215,10 +215,6 @@ export default {
         } else {
             return { isClickable: 'return true;' };
         }
-
-        return {
-            showingComment: false,
-        };
     },
 
     computed: {
@@ -237,7 +233,7 @@ export default {
             vm.updateTableJSON();
         });
 
-        $('#content-editable-table').on('click', '.ibtnDel', function (event) {
+        $('#content-editable-table').on('click', '.ibtnDel', function () {
             $(this).closest('tr').remove();
         });
 
diff --git a/boranga/frontend/boranga/src/components/forms/text-area.vue b/boranga/frontend/boranga/src/components/forms/text-area.vue
index c1736aa2..276edcc4 100755
--- a/boranga/frontend/boranga/src/components/forms/text-area.vue
+++ b/boranga/frontend/boranga/src/components/forms/text-area.vue
@@ -87,7 +87,6 @@ export default {
         'help_text_assessor_url',
     ],
     data() {
-        let vm = this;
         return {
             showingComment: false,
         };
diff --git a/boranga/frontend/boranga/src/components/forms/text.vue b/boranga/frontend/boranga/src/components/forms/text.vue
index 93361cd8..c9317d2d 100755
--- a/boranga/frontend/boranga/src/components/forms/text.vue
+++ b/boranga/frontend/boranga/src/components/forms/text.vue
@@ -88,7 +88,6 @@ export default {
         'help_text_assessor_url',
     ],
     data() {
-        let vm = this;
         return {
             showingComment: false,
         };
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
index eacabf35..bed197cc 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
@@ -93,7 +93,7 @@ import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FileField2 from '@/components/forms/filefield.vue';
 
-import { helpers, api_endpoints } from '@/utils/hooks.js';
+import { helpers } from '@/utils/hooks.js';
 export default {
     name: 'AmendmentRequest',
     components: {
@@ -211,7 +211,7 @@ export default {
                     'Content-Type': 'multipart/form-data',
                 },
             }).then(
-                (response) => {
+                () => {
                     swal.fire({
                         title: 'Sent',
                         text: 'An email has been sent to proponent with the request to amend this Proposal',
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue
index a288ead7..298b88e1 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/community_conservation_status_history.vue
@@ -59,7 +59,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -425,7 +425,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index b88f6652..5ebbacc6 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -1339,7 +1339,7 @@ export default {
         },
     },
     watch: {
-        canRefer: function (newVal, oldVal) {
+        canRefer: function (newVal) {
             // Had to add this hack as the select2 was not being removed when the parent div was removed
             // from the DOM when the CS was approved
             if (!newVal && Object.hasOwn(this.$refs, 'referees')) {
@@ -1476,7 +1476,7 @@ export default {
                             },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'Your proposal has been discarded',
@@ -1540,7 +1540,7 @@ export default {
                             },
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Delisted',
                                 text: `Conservation Status ${this.conservation_status_obj.conservation_status_number} has been delisted.`,
@@ -1654,7 +1654,7 @@ export default {
                     : {};
             this.$refs.proposed_decline.isModalOpen = true;
         },
-        save: async function (e) {
+        save: async function () {
             let vm = this;
             var missing_data = vm.can_submit('');
             if (missing_data != true) {
@@ -1679,7 +1679,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {
+                async () => {
                     swal.fire({
                         title: 'Saved',
                         text: 'Your changes have been saved',
@@ -1731,7 +1731,7 @@ export default {
                 }
             });
         },
-        save_before_submit: async function (e) {
+        save_before_submit: async function () {
             let vm = this;
             vm.saveError = false;
 
@@ -1744,7 +1744,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {},
+                async () => {},
                 (err) => {
                     var errorText = helpers.apiVueResourceError(err);
                     swal.fire({
@@ -1857,7 +1857,7 @@ export default {
             }).then(
                 async (swalresult) => {
                     if (swalresult.isConfirmed) {
-                        let result = await vm.save_before_submit();
+                        await vm.save_before_submit();
                         if (!vm.saveError) {
                             let payload = new Object();
                             Object.assign(payload, vm.conservation_status_obj);
@@ -1897,7 +1897,7 @@ export default {
                         vm.submitConservationStatus = false;
                     }
                 },
-                (error) => {
+                () => {
                     vm.submitConservationStatus = false;
                 }
             );
@@ -1912,10 +1912,7 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(
-                async (response) => {},
-                (err) => {}
-            );
+            });
         },
         refreshFromResponse: async function (response) {
             const data = await response.json();
@@ -2116,14 +2113,13 @@ export default {
                     }
                     vm.assignTo();
                 })
-                .on('select2:unselecting', function (e) {
+                .on('select2:unselecting', function () {
                     var self = $(this);
                     setTimeout(() => {
                         self.select2('close');
                     }, 0);
                 })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     if (
                         [
                             'Ready For Agenda',
@@ -2211,8 +2207,7 @@ export default {
                             vm.$refs.referral_text.focus();
                         });
                     })
-                    .on('select2:unselect', function (e) {
-                        var selected = $(e.currentTarget);
+                    .on('select2:unselect', function () {
                         vm.selected_referral = null;
                     });
                 vm.initialiseAssignedOfficerSelect();
@@ -2228,7 +2223,6 @@ export default {
             vm.referral_text = '';
         },
         remindExternalReferee: function (external_referee_invite) {
-            let vm = this;
             fetch(
                 helpers.add_endpoint_join(
                     api_endpoints.cs_external_referee_invites,
@@ -2241,7 +2235,7 @@ export default {
                     },
                 }
             )
-                .then((response) => {
+                .then(() => {
                     swal.fire({
                         title: 'Reminder Email Sent',
                         text: `A reminder email was successfully sent to ${external_referee_invite.full_name} (${external_referee_invite.email}).`,
@@ -2280,7 +2274,7 @@ export default {
                             },
                         }
                     )
-                        .then((response) => {
+                        .then(() => {
                             this.fetchConservationStatus();
                             swal.fire({
                                 title: 'External Referee Invite Retracted',
@@ -2302,7 +2296,6 @@ export default {
         },
         sendReferral: function () {
             let vm = this;
-            let formData = new FormData(vm.form);
             vm.sendingReferral = true;
             let payload = new Object();
             Object.assign(payload, vm.conservation_status_obj);
@@ -2312,7 +2305,7 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
+            }).then(async () => {
                 let data = {
                     email: vm.selected_referral,
                     text: vm.referral_text,
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue
index caa88708..41979421 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/cs_document_history.vue
@@ -54,7 +54,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -430,7 +430,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
index 08467d01..4bf7c33e 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/dashboard.vue
@@ -235,6 +235,7 @@ export default {
         this.fetchProfile();
     },
     mounted: function () {
+        // eslint-disable-next-line no-undef
         chevron_toggle.init();
     },
     methods: {
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
index 116c25ba..2d3be91f 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
@@ -114,18 +114,7 @@
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import { helpers, api_endpoints } from '@/utils/hooks.js';
-const calculateDefaultDate = () => {
-    const now = new Date();
-    now.setHours(9, 0, 0, 0); // Set time to 9:00 AM
 
-    const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
-    const day = String(now.getDate()).padStart(2, '0');
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-};
 export default {
     name: 'ProposeDelistProposal',
     components: {
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
index 2bb7afc7..b0c6140d 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/propose_for_agenda.vue
@@ -119,7 +119,7 @@ export default {
                     }),
                 }
             ).then(
-                (response) => {
+                () => {
                     vm.$router.push({ path: '/internal/conservation-status/' });
                 },
                 (error) => {
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
index 4f193fdb..d79edbfb 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposed_issuance.vue
@@ -245,8 +245,7 @@ export default {
             return `Approve Conservation Status CS${this.conservation_status_id}`;
         },
         can_preview: function () {
-            return (this.processing_status == 'Proposed DeListed' ||
-                'With Assessor (Requirements)') &&
+            return this.processing_status == 'Proposed DeListed' &&
                 this.approval.effective_from_date &&
                 this.approval.effective_to_date
                 ? true
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
index ff33e4c6..8c59b426 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/ready_for_agenda.vue
@@ -117,7 +117,7 @@ export default {
                     }),
                 }
             ).then(
-                (response) => {
+                () => {
                     vm.$router.push({ path: '/internal/conservation-status/' });
                 },
                 (error) => {
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
index 94a69a8b..ff1237e1 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/referral.vue
@@ -251,7 +251,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {
+                async () => {
                     swal.fire({
                         title: 'Saved',
                         text: 'Your changes have been saved',
@@ -262,7 +262,7 @@ export default {
                     });
                     vm.savingConservationStatus = false;
                 },
-                (err) => {
+                () => {
                     vm.savingConservationStatus = false;
                 }
             );
@@ -311,7 +311,7 @@ export default {
                             },
                             body: JSON.stringify(payload),
                         }).then(
-                            async (response) => {
+                            async () => {
                                 fetch(
                                     helpers.add_endpoint_json(
                                         api_endpoints.cs_referrals,
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue
index 642fa76a..82e06397 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/species_conservation_status_history.vue
@@ -57,7 +57,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -508,7 +508,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
index d1575814..de797b4a 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
@@ -267,7 +267,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             new_species_list: [],
@@ -316,6 +315,7 @@ export default {
     mounted: function () {
         let vm = this;
         this.$nextTick(function () {
+            // eslint-disable-next-line no-undef
             chevron_toggle.init();
             vm.set_active_tab('pills-flora', 'flora');
         });
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index 205b933d..8bbe6478 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -79,7 +79,6 @@ export default {
                     ),
                     dataSrc: '',
                 },
-                order: [],
                 dom:
                     "<'d-flex align-items-center'<'me-auto'l>fB>" +
                     "<'row'<'col-sm-12'tr>>" +
@@ -133,7 +132,7 @@ export default {
                     {
                         data: 'scientific_name',
                         searchable: true,
-                        render: function (value, type, full) {
+                        render: function (value, type) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return type == 'export' ? value : result;
                         },
@@ -142,7 +141,7 @@ export default {
                     {
                         data: 'change_code',
                         searchable: true,
-                        render: function (value, type, full) {
+                        render: function (value, type) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return type == 'export' ? value : result;
                         },
@@ -298,7 +297,7 @@ export default {
 
             vm.$refs.cs_queue_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
@@ -360,10 +359,10 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
-        addTableListeners: function (e) {
+        addTableListeners: function () {
             let vm = this;
             // for "...more" tooltip to work after reload
             helpers.enablePopovers();
@@ -381,7 +380,6 @@ export default {
             $('.dtMoveDown').off('click');
         },
         async sendDirection(req, direction) {
-            let vm = this;
             let movement = direction == 'down' ? 'move_down' : 'move_up';
             try {
                 await fetch(
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
index ba9b8c29..c89f18c7 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
@@ -439,7 +439,7 @@ export default {
                 name: 'internal-meetings-dash',
             });
         },
-        save: async function (e) {
+        save: async function () {
             let vm = this;
             var missing_data = vm.can_submit('');
             if (missing_data != true) {
@@ -464,7 +464,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {
+                async () => {
                     swal.fire({
                         title: 'Saved',
                         text: 'Your changes have been saved',
@@ -517,7 +517,7 @@ export default {
                 }
             });
         },
-        save_before_submit: async function (e) {
+        save_before_submit: async function () {
             //console.log('save before submit');
             let vm = this;
             vm.saveError = false;
@@ -553,7 +553,7 @@ export default {
             );
             return result;
         },
-        can_schedule: function (check_action) {
+        can_schedule: function () {
             let vm = this;
             let blank_fields = [];
 
@@ -613,7 +613,7 @@ export default {
                 return blank_fields;
             }
             //to count if records exists in the minutes table
-            vm.$refs.minutes.$refs.minutes_datatable.vmDataTable.rows().count();
+            // vm.$refs.minutes.$refs.minutes_datatable.vmDataTable.rows().count();
         },
         isFutureMeeting: function () {
             let vm = this;
@@ -707,7 +707,7 @@ export default {
             }).then(
                 async (swalresult) => {
                     if (swalresult.isConfirmed) {
-                        let result = await vm.save_before_submit();
+                        await vm.save_before_submit();
                         if (!vm.saveError) {
                             let payload = new Object();
                             Object.assign(payload, vm.meeting_obj);
@@ -741,7 +741,7 @@ export default {
                         }
                     }
                 },
-                (error) => {
+                () => {
                     vm.submitMeeting = false;
                 }
             );
@@ -776,7 +776,7 @@ export default {
             }).then(
                 async (swalresult) => {
                     if (swalresult.isConfirmed) {
-                        let result = await vm.save_before_submit();
+                        await vm.save_before_submit();
                         if (!vm.saveError) {
                             let payload = new Object();
                             Object.assign(payload, vm.meeting_obj);
@@ -811,7 +811,7 @@ export default {
                         }
                     }
                 },
-                (error) => {
+                () => {
                     vm.completingMeeting = false;
                 }
             );
@@ -954,7 +954,7 @@ export default {
             }).then(
                 async (swalresult) => {
                     if (swalresult.isConfirmed) {
-                        let result = await vm.save_before_submit();
+                        await vm.save_before_submit();
                         if (!vm.saveError) {
                             let payload = new Object();
                             Object.assign(payload, vm.meeting_obj);
@@ -991,7 +991,7 @@ export default {
                         }
                     }
                 },
-                (error) => {
+                () => {
                     vm.submitMeeting = false;
                 }
             );
@@ -1006,10 +1006,7 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(
-                async (response) => {},
-                (err) => {}
-            );
+            });
         },
     },
 };
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
index 604c4490..46ab7c8a 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting_section.vue
@@ -297,7 +297,7 @@ import datatable from '@vue-utils/datatable.vue';
 import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 
-import { constants, api_endpoints, helpers } from '@/utils/hooks';
+import { api_endpoints } from '@/utils/hooks';
 
 const calculateDefaultDate = () => {
     const now = new Date();
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
index ef4cea86..c5eb320e 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
@@ -291,7 +291,6 @@ export default {
             };
         },
         column_action: function () {
-            let vm = this;
             return {
                 data: 'id',
                 orderable: false,
@@ -536,7 +535,7 @@ export default {
                             'Content-Type': 'application/json',
                         },
                     }).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Discarded',
                                 text: 'Your meeting has been discarded',
@@ -578,7 +577,7 @@ export default {
                             'Content-Type': 'application/json',
                         },
                     }).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Reinstated',
                                 text: 'Your meeting has been reinstated',
@@ -622,7 +621,7 @@ export default {
             );
             vm.$refs.meetings_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
index 07d15054..3d5f95ac 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
@@ -277,7 +277,6 @@ export default {
             this.$refs.document_detail.isModalOpen = true;
         },
         editDocument: function (id) {
-            let vm = this;
             this.$refs.document_detail.document_id = id;
             this.$refs.document_detail.document_action = 'edit';
             this.$refs.document_detail.title = 'Edit a Minute';
@@ -339,7 +338,7 @@ export default {
                                 },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The minutes have been discarded',
@@ -389,7 +388,7 @@ export default {
                                 },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Reinstated',
                                     text: 'The minutes have been reinstated',
@@ -456,7 +455,7 @@ export default {
             );
             vm.$refs.minutes_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue
index 46344663..78ac9ae5 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes_history.vue
@@ -54,7 +54,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -401,7 +401,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
index ba2f1ee2..486fcf03 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
@@ -322,7 +322,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -391,7 +390,6 @@ export default {
         vm.form = document.forms.siteForm;
 
         this.$nextTick(() => {
-            vm.eventListeners();
             vm.initialiseOCRSelect();
         });
     },
@@ -456,7 +454,7 @@ export default {
                     },
                     body: JSON.stringify(formData),
                 }).then(
-                    (response) => {
+                    () => {
                         vm.updatingSite = false;
                         vm.$parent.updatedSites();
                         vm.close();
@@ -477,7 +475,7 @@ export default {
                     },
                     body: JSON.stringify(formData),
                 }).then(
-                    (response) => {
+                    () => {
                         vm.addingSite = false;
                         vm.close();
                         vm.$parent.updatedSites();
@@ -490,9 +488,6 @@ export default {
                 );
             }
         },
-        eventListeners: function () {
-            let vm = this;
-        },
     },
 };
 </script>
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
index c1a84e0c..19e19575 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
@@ -87,7 +87,7 @@ import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FileField2 from '@/components/forms/filefield.vue';
 
-import { helpers, api_endpoints } from '@/utils/hooks.js';
+import { helpers } from '@/utils/hooks.js';
 export default {
     name: 'AmendmentRequest',
     components: {
@@ -212,7 +212,7 @@ export default {
                     'Content-Type': 'multipart/form-data',
                 },
             }).then(
-                (response) => {
+                () => {
                     swal.fire({
                         title: 'Sent',
                         text: 'An email has been sent to proponent with the request to amend this Proposal',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
index 6533a7b3..d6c3144c 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/back_to_assessor.vue
@@ -64,7 +64,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -118,7 +117,7 @@ export default {
                     body: JSON.stringify(vm.back_to_assessor),
                 }
             ).then(
-                (response) => {
+                () => {
                     swal.fire({
                         title: 'Sent Back',
                         text: `${vm.occurrence_report_number} has been sent back to the assessor with the provided reason.`,
@@ -126,7 +125,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         vm.$router.go();
                     });
                 },
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index 875f7d1d..480fdbc7 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -30,9 +30,7 @@
                                     <div class="row">
                                         <div class="col-5">
                                             <h4 class="text-capitalize">
-                                                {{
-                                                    schema.group_type_display
-                                                }}
+                                                {{ schema.group_type_display }}
                                                 Bulk Import Schema
                                                 <span
                                                     class="badge bg-secondary ms-3"
@@ -53,14 +51,17 @@
                                                     ></i
                                                 ></span>
                                                 <input
-type="text" class="form-control form-control-sm"
+                                                    type="text"
+                                                    class="form-control form-control-sm"
                                                     placeholder="Add tag"
                                                     @keydown="addTag"
                                                 />
                                             </div>
                                             <div class="float-end">
                                                 <button
-id="copy-schema" type="button" class="btn btn-primary me-2"
+                                                    id="copy-schema"
+                                                    type="button"
+                                                    class="btn btn-primary me-2"
                                                     :disabled="false"
                                                     @click.prevent="
                                                         copySchema(schema.id)
@@ -72,7 +73,8 @@ id="copy-schema" type="button" class="btn btn-primary me-2"
                                                     Copy
                                                 </button>
                                                 <button
-type="button" class="btn btn-primary me-2"
+                                                    type="button"
+                                                    class="btn btn-primary me-2"
                                                     :disabled="validatingSchema"
                                                     @click.prevent="validate()"
                                                 >
@@ -94,7 +96,8 @@ type="button" class="btn btn-primary me-2"
                                                     >
                                                 </button>
                                                 <a
-role="button" class="btn btn-primary"
+                                                    role="button"
+                                                    class="btn btn-primary"
                                                     :href="`/api/occurrence_report_bulk_import_schemas/${schema.id}/preview_import_file/?updated=${schema.datetime_updated}`"
                                                     ><i
                                                         class="bi bi-filetype-xlsx me-1"
@@ -114,7 +117,10 @@ role="button" class="btn btn-primary"
                                         >
                                         <div class="col-sm-7">
                                             <input
-id="schema-name" ref="schema-name" v-model="schema.name" type="text"
+                                                id="schema-name"
+                                                ref="schema-name"
+                                                v-model="schema.name"
+                                                type="text"
                                                 class="form-control"
                                                 placeholder="Enter Schema Name"
                                                 autofocus
@@ -130,7 +136,9 @@ id="schema-name" ref="schema-name" v-model="schema.name" type="text"
                                             >Master Schema<i
                                                 v-if="schema.is_master"
                                                 class="bi bi-lock-fill text-warning ms-2"
-                                                title="This is a Master Schema. When copied by an Occurrence Approver, any columns from the master will be locked."></i></label>
+                                                title="This is a Master Schema. When copied by an Occurrence Approver, any columns from the master will be locked."
+                                            ></i
+                                        ></label>
                                         <div
                                             v-if="schema.can_user_toggle_master"
                                             class="col-sm-1"
@@ -140,7 +148,9 @@ id="schema-name" ref="schema-name" v-model="schema.name" type="text"
                                                 style="transform: scale(1.3)"
                                             >
                                                 <input
-id="is-master-schema" v-model="schema.is_master" class="form-check-input"
+                                                    id="is-master-schema"
+                                                    v-model="schema.is_master"
+                                                    class="form-check-input"
                                                     type="checkbox"
                                                     @change="save()"
                                                 />
@@ -159,8 +169,13 @@ id="is-master-schema" v-model="schema.is_master" class="form-check-input"
                                                 "
                                             >
                                                 <span
-                                                    v-for="(tag, index) in schema.tags"
-                                                    :key="tag" class="d-inline-flex align-items-center badge bg-info fs-6 my-2 me-2">{{ tag }}<i
+                                                    v-for="(
+                                                        tag, index
+                                                    ) in schema.tags"
+                                                    :key="tag"
+                                                    class="d-inline-flex align-items-center badge bg-info fs-6 my-2 me-2"
+                                                    >{{ tag
+                                                    }}<i
                                                         v-if="
                                                             schema.can_user_edit
                                                         "
@@ -206,7 +221,9 @@ id="is-master-schema" v-model="schema.is_master" class="form-check-input"
                             >
                                 <tbody class="columns">
                                     <tr
-v-for="(column, index) in schema.columns"
+                                        v-for="(
+                                            column, index
+                                        ) in schema.columns"
                                         :key="column.id"
                                         :class="
                                             classesForRow(
@@ -215,12 +232,17 @@ v-for="(column, index) in schema.columns"
                                                 selectedColumn
                                             )
                                         "
-                                        :style="selectedColumn == column ? '' : `background-color:${stringToRGBAColor(column.model_name)};`"
+                                        :style="
+                                            selectedColumn == column
+                                                ? ''
+                                                : `background-color:${stringToRGBAColor(column.model_name)};`
+                                        "
                                         role="button"
                                         @click="selectColumn(column)"
                                     >
                                         <td
-style="width:5%" class="text-center fw-bold"
+                                            style="width: 5%"
+                                            class="text-center fw-bold"
                                             :class="
                                                 selectedColumn == column
                                                     ? 'text-light'
@@ -230,7 +252,8 @@ style="width:5%" class="text-center fw-bold"
                                             {{ index + 1 }}
                                         </td>
                                         <td
-class="ps-3 fw-bold" style="font-size:0.9em; width:40%"
+                                            class="ps-3 fw-bold"
+                                            style="font-size: 0.9em; width: 40%"
                                             :class="
                                                 selectedColumn == column
                                                     ? 'py-1'
@@ -259,9 +282,14 @@ class="ps-3 fw-bold" style="font-size:0.9em; width:40%"
                                                 }}</span
                                             >
                                             <span
-                                                v-if="column.xlsx_data_validation_allow_blank == false"
+                                                v-if="
+                                                    column.xlsx_data_validation_allow_blank ==
+                                                    false
+                                                "
                                                 class="text-danger"
-                                                        title="Mandatory Column">*</span>
+                                                title="Mandatory Column"
+                                                >*</span
+                                            >
                                             >
                                             <small
                                                 class="d-block text-capitalize mb-0"
@@ -284,7 +312,8 @@ class="ps-3 fw-bold" style="font-size:0.9em; width:40%"
                                             style="width: 10%"
                                         >
                                             <i
-class="bi bi-eye-fill " role="button"
+                                                class="bi bi-eye-fill"
+                                                role="button"
                                                 :class="
                                                     schema.can_user_edit &&
                                                     column.is_editable_by_user &&
@@ -297,25 +326,38 @@ class="bi bi-eye-fill " role="button"
                                                 "
                                             ></i>
                                             <i
-v-if="schema.can_user_edit && column.is_editable_by_user && (!index == 0 && schema.columns.length > 2 && column.id)"
+                                                v-if="
+                                                    schema.can_user_edit &&
+                                                    column.is_editable_by_user &&
+                                                    !index == 0 &&
+                                                    schema.columns.length > 2 &&
+                                                    column.id
+                                                "
                                                 class="bi bi-arrow-down-up"
                                                 role="button"
                                                 style="cursor: move"
                                             ></i>
                                             <i
-v-if="column.id && !column.is_editable_by_user" class="bi bi-lock-fill"
+                                                v-if="
+                                                    column.id &&
+                                                    !column.is_editable_by_user
+                                                "
+                                                class="bi bi-lock-fill"
                                                 :title="`Column ${column.xlsx_column_header_name} is locked as it was copied from a master schema`"
                                             ></i>
                                         </td>
                                     </tr>
                                     <tr
-v-if="schema.can_user_edit" class="border-bottom-0"
+                                        v-if="schema.can_user_edit"
+                                        class="border-bottom-0"
                                         :class="
                                             schema.columns.length == 0
                                                 ? 'border-top-0'
                                                 : ''
                                         "
-                                        role="button" @click.prevent="addNewColumn">
+                                        role="button"
+                                        @click.prevent="addNewColumn"
+                                    >
                                         <th
                                             class="border-0 ps-3 pt-2 text-muted"
                                             colspan="2"
@@ -372,7 +414,8 @@ v-if="schema.can_user_edit" class="border-bottom-0"
                                     >
                                     <div class="col-sm-8">
                                         <select
-ref="django-import-model" v-model="
+                                            ref="django-import-model"
+                                            v-model="
                                                 selectedColumn.django_import_content_type
                                             "
                                             class="form-select form-select-sm"
@@ -419,7 +462,11 @@ ref="django-import-model" v-model="
                                     </div>
                                 </div>
                                 <div
-v-if="selectedContentType && !selectedColumn?.id && !showDjangoImportFieldSelect"
+                                    v-if="
+                                        selectedContentType &&
+                                        !selectedColumn?.id &&
+                                        !showDjangoImportFieldSelect
+                                    "
                                     class="row d-flex align-items-start mb-2"
                                 >
                                     <label
@@ -429,7 +476,8 @@ v-if="selectedContentType && !selectedColumn?.id && !showDjangoImportFieldSelect
                                     >
                                     <div class="col-sm-8">
                                         <button
-type="button" class="btn btn-primary btn-sm d-block mb-2"
+                                            type="button"
+                                            class="btn btn-primary btn-sm d-block mb-2"
                                             @click.prevent="
                                                 addAllColumns(false)
                                             "
@@ -440,7 +488,8 @@ type="button" class="btn btn-primary btn-sm d-block mb-2"
                                             Add All Fields
                                         </button>
                                         <button
-type="button" class="btn btn-primary btn-sm me-2 d-block mb-2"
+                                            type="button"
+                                            class="btn btn-primary btn-sm me-2 d-block mb-2"
                                             @click.prevent="addAllColumns(true)"
                                         >
                                             <i
@@ -449,7 +498,8 @@ type="button" class="btn btn-primary btn-sm me-2 d-block mb-2"
                                             Add All Mandatory Fields
                                         </button>
                                         <button
-type="button" class="btn btn-primary btn-sm d-block"
+                                            type="button"
+                                            class="btn btn-primary btn-sm d-block"
                                             @click.prevent="addSingleColumn()"
                                         >
                                             <i
@@ -470,8 +520,12 @@ type="button" class="btn btn-primary btn-sm d-block"
                                     >
                                     <div class="col-sm-8">
                                         <select
-ref="django-import-field" v-model="selectedColumn.django_import_field_name"
-                                            class="form-select form-select-sm" aria-label="Django Import Field"
+                                            ref="django-import-field"
+                                            v-model="
+                                                selectedColumn.django_import_field_name
+                                            "
+                                            class="form-select form-select-sm"
+                                            aria-label="Django Import Field"
                                             :disabled="
                                                 selectedColumn.order == 0
                                             "
@@ -531,17 +585,25 @@ ref="django-import-field" v-model="selectedColumn.django_import_field_name"
                                                 class="input-group input-group-sm"
                                             >
                                                 <input
-id="column-name" ref="column-name" v-model="
+                                                    id="column-name"
+                                                    ref="column-name"
+                                                    v-model="
                                                         selectedColumn.xlsx_column_header_name
                                                     "
-                                                    type="text" class="form-control"
+                                                    type="text"
+                                                    class="form-control"
                                                     name="column-name"
                                                 />
                                             </div>
                                         </div>
                                     </div>
                                     <div
-v-if="selectedField.type == 'IntegerField' && defaultValueChoices && defaultValueChoices.length > 0"
+                                        v-if="
+                                            selectedField.type ==
+                                                'IntegerField' &&
+                                            defaultValueChoices &&
+                                            defaultValueChoices.length > 0
+                                        "
                                         class="row d-flex align-items-center mb-2"
                                     >
                                         <label
@@ -554,7 +616,10 @@ v-if="selectedField.type == 'IntegerField' && defaultValueChoices && defaultValu
                                                 class="input-group input-group-sm"
                                             >
                                                 <select
-id="default-value" v-model="selectedColumn.default_value"
+                                                    id="default-value"
+                                                    v-model="
+                                                        selectedColumn.default_value
+                                                    "
                                                     class="form-select"
                                                 >
                                                     <option :value="null">
@@ -571,7 +636,11 @@ id="default-value" v-model="selectedColumn.default_value"
                                         </div>
                                     </div>
                                     <div
-v-if="selectedField.type == 'IntegerField' && !selectedColumn.default_value"
+                                        v-if="
+                                            selectedField.type ==
+                                                'IntegerField' &&
+                                            !selectedColumn.default_value
+                                        "
                                         class="row d-flex align-items-center mb-2"
                                     >
                                         <label
@@ -591,8 +660,12 @@ v-if="selectedField.type == 'IntegerField' && !selectedColumn.default_value"
                                                 class="input-group input-group-sm"
                                             >
                                                 <select
-v-model="selectedColumn.is_emailuser_column" class="form-select w-50"
-                                                    aria-label="Allow Blank">
+                                                    v-model="
+                                                        selectedColumn.is_emailuser_column
+                                                    "
+                                                    class="form-select w-50"
+                                                    aria-label="Allow Blank"
+                                                >
                                                     <option :value="true">
                                                         Yes
                                                     </option>
@@ -616,7 +689,11 @@ v-model="selectedColumn.is_emailuser_column" class="form-select w-50"
                                                 class="input-group input-group-sm"
                                             >
                                                 <input
-id="" type="text" class="form-control" name="" placeholder=""
+                                                    id=""
+                                                    type="text"
+                                                    class="form-control"
+                                                    name=""
+                                                    placeholder=""
                                                     disabled
                                                     :value="selectedField.type"
                                                 />
@@ -636,8 +713,11 @@ id="" type="text" class="form-control" name="" placeholder=""
                                                 class="input-group input-group-sm"
                                             >
                                                 <input
-id="xlsx-validation-type" type="text"
-                                                    class="form-control form-control-sm" name="xlsx-validation-type" disabled
+                                                    id="xlsx-validation-type"
+                                                    type="text"
+                                                    class="form-control form-control-sm"
+                                                    name="xlsx-validation-type"
+                                                    disabled
                                                     :value="
                                                         excelValidationType()
                                                     "
@@ -667,7 +747,12 @@ id="xlsx-validation-type" type="text"
                                                     "
                                                 >
                                                     <button
-                                                        v-if="selectedField.choices && selectedField.choices.length > 0"
+                                                        v-if="
+                                                            selectedField.choices &&
+                                                            selectedField
+                                                                .choices
+                                                                .length > 0
+                                                        "
                                                         type="button"
                                                         class="btn btn-primary"
                                                         data-bs-toggle="modal"
@@ -711,9 +796,17 @@ id="xlsx-validation-type" type="text"
                                                     >Allow Blank</span
                                                 >
                                                 <select
-v-model="selectedColumn.xlsx_data_validation_allow_blank" class="form-select w-50"
+                                                    v-model="
+                                                        selectedColumn.xlsx_data_validation_allow_blank
+                                                    "
+                                                    class="form-select w-50"
                                                     aria-label="Allow Blank"
-                                                    :disabled="!selectedField.allow_null && selectedField.name != 'occurrence_number'">
+                                                    :disabled="
+                                                        !selectedField.allow_null &&
+                                                        selectedField.name !=
+                                                            'occurrence_number'
+                                                    "
+                                                >
                                                     <option :value="true">
                                                         Yes
                                                     </option>
@@ -731,7 +824,9 @@ v-model="selectedColumn.xlsx_data_validation_allow_blank" class="form-select w-5
                                                     >Max Length</span
                                                 >
                                                 <input
-type="text" class="form-control" aria-label="Max Length"
+                                                    type="text"
+                                                    class="form-control"
+                                                    aria-label="Max Length"
                                                     aria-describedby="max-length"
                                                     :value="
                                                         selectedField.max_length
@@ -776,7 +871,10 @@ type="text" class="form-control" aria-label="Max Length"
                                                     v-if="!customLookupField"
                                                 >
                                                     <select
-v-model="selectedColumn.django_lookup_field_name" class="form-select"
+                                                        v-model="
+                                                            selectedColumn.django_lookup_field_name
+                                                        "
+                                                        class="form-select"
                                                         aria-label="Lookup Field"
                                                         @change="
                                                             selectLookupField()
@@ -793,7 +891,8 @@ v-model="selectedColumn.django_lookup_field_name" class="form-select"
                                                         </option>
                                                     </select>
                                                     <a
-v-if="selectedColumn.id" class="btn btn-primary"
+                                                        v-if="selectedColumn.id"
+                                                        class="btn btn-primary"
                                                         :href="`/api/occurrence_report_bulk_import_schema_columns/${selectedColumn.id}/preview_foreign_key_values_xlsx/`"
                                                         ><i
                                                             class="bi bi-filetype-xlsx"
@@ -803,7 +902,9 @@ v-if="selectedColumn.id" class="btn btn-primary"
                                                     >
                                                 </template>
                                                 <select
-v-else ref="lookup-field" class="form-select"
+                                                    v-else
+                                                    ref="lookup-field"
+                                                    class="form-select"
                                                     aria-label="Lookup Field"
                                                     @change="
                                                         selectLookupField()
@@ -828,13 +929,18 @@ v-else ref="lookup-field" class="form-select"
                                                 class="input-group input-group-sm mb-2 mt-2"
                                             >
                                                 <input
-ref="custom-lookup-field" v-model="selectedColumn.django_lookup_field_name"
+                                                    ref="custom-lookup-field"
+                                                    v-model="
+                                                        selectedColumn.django_lookup_field_name
+                                                    "
                                                     class="form-control form-control-sm"
                                                     type="text"
                                                     placeholder="Enter Custom Lookup Field"
-                                                    aria-label="Custom Lookup Field">
+                                                    aria-label="Custom Lookup Field"
+                                                />
                                                 <a
-v-if="selectedColumn.id" class="btn btn-primary"
+                                                    v-if="selectedColumn.id"
+                                                    class="btn btn-primary"
                                                     :href="`/api/occurrence_report_bulk_import_schema_columns/${selectedColumn.id}/preview_foreign_key_values_xlsx/`"
                                                     ><i
                                                         class="bi bi-filetype-xlsx"
@@ -849,7 +955,8 @@ v-if="selectedColumn.id" class="btn btn-primary"
                                             </div>
                                             <div>
                                                 <button
-type="button" class="btn btn-primary btn-sm mb-2"
+                                                    type="button"
+                                                    class="btn btn-primary btn-sm mb-2"
                                                     @click.prevent="
                                                         addLookupFilter()
                                                     "
@@ -868,11 +975,19 @@ type="button" class="btn btn-primary btn-sm mb-2"
                                                     "
                                                 >
                                                     <div
-v-for="(lookupFilter, index) in selectedColumn.lookup_filters"
+                                                        v-for="(
+                                                            lookupFilter, index
+                                                        ) in selectedColumn.lookup_filters"
                                                         class="input-group input-group-sm mb-2"
                                                     >
                                                         <select
-                                                            v-model="selectedColumn.lookup_filters[index].filter_field_name"
+                                                            v-model="
+                                                                selectedColumn
+                                                                    .lookup_filters[
+                                                                    index
+                                                                ]
+                                                                    .filter_field_name
+                                                            "
                                                             class="form-select"
                                                             @change="
                                                                 lookupFilterFieldChanged(
@@ -897,8 +1012,14 @@ v-for="(lookupFilter, index) in selectedColumn.lookup_filters"
                                                             </option>
                                                         </select>
                                                         <select
-                                                            v-model="selectedColumn.lookup_filters[index].filter_type"
-                                                            class="form-select">
+                                                            v-model="
+                                                                selectedColumn
+                                                                    .lookup_filters[
+                                                                    index
+                                                                ].filter_type
+                                                            "
+                                                            class="form-select"
+                                                        >
                                                             <option
                                                                 v-for="lookupFilter in lookupSchematypes"
                                                                 :value="
@@ -922,7 +1043,13 @@ v-for="(lookupFilter, index) in selectedColumn.lookup_filters"
                                                                 ].values
                                                                     .length > 0
                                                             "
-                                                            v-model="selectedColumn.lookup_filters[index].values[0].filter_value"
+                                                            v-model="
+                                                                selectedColumn
+                                                                    .lookup_filters[
+                                                                    index
+                                                                ].values[0]
+                                                                    .filter_value
+                                                            "
                                                             type="text"
                                                             class="form-control"
                                                             placeholder="Enter Value"
@@ -938,13 +1065,16 @@ v-for="(lookupFilter, index) in selectedColumn.lookup_filters"
                                                             "
                                                         />
                                                         <input
-v-else type="text" class="form-control"
+                                                            v-else
+                                                            type="text"
+                                                            class="form-control"
                                                             placeholder="Select Field First"
                                                             disabled
                                                         />
 
                                                         <button
-type="button" class="btn btn-danger"
+                                                            type="button"
+                                                            class="btn btn-danger"
                                                             @click.prevent="
                                                                 removeLookupFilter(
                                                                     selectedColumn,
@@ -987,7 +1117,9 @@ type="button" class="btn btn-danger"
                                         "
                                         class="btn btn-primary btn-sm me-2"
                                         :disabled="saving"
-                                        @click.prevent="save()"><i class="bi bi-floppy-fill me-1"></i>
+                                        @click.prevent="save()"
+                                    >
+                                        <i class="bi bi-floppy-fill me-1"></i>
                                         Save Column
                                         <template v-if="saving"
                                             ><span
@@ -1001,8 +1133,12 @@ type="button" class="btn btn-danger"
                                         >
                                     </button>
                                     <button
-v-if="!selectedColumn.id" class="btn btn-danger btn-sm"
-                                        :disabled="saving" @click.prevent="cancelAddingColumn(selectedColumn)"><i
+                                        v-if="!selectedColumn.id"
+                                        class="btn btn-danger btn-sm"
+                                        :disabled="saving"
+                                        @click.prevent="
+                                            cancelAddingColumn(selectedColumn)
+                                        "
                                     >
                                         <i class="bi bi-x-circle-fill me-1"></i>
                                         Cancel Adding Column
@@ -1010,7 +1146,10 @@ v-if="!selectedColumn.id" class="btn btn-danger btn-sm"
                                     <button
                                         v-else-if="selectedColumn.order != 0"
                                         class="btn btn-danger btn-sm"
-                                        :disabled="saving" @click.prevent="removeColumn(selectedColumn)"><i
+                                        :disabled="saving"
+                                        @click.prevent="
+                                            removeColumn(selectedColumn)
+                                        "
                                     >
                                         <i class="bi bi-trash3-fill me-1"></i>
                                         Delete Column
@@ -1081,8 +1220,9 @@ v-if="!selectedColumn.id" class="btn btn-danger btn-sm"
                         ><button
                             class="btn btn-primary me-2 float-end"
                             :disabled="saving"
-                            @click.prevent="saveAndExit()">Save
-                            Save and Exit
+                            @click.prevent="saveAndExit()"
+                        >
+                            Save Save and Exit
                             <template v-if="saving"
                                 ><span
                                     class="spinner-border spinner-border-sm ms-2"
@@ -1105,7 +1245,10 @@ v-if="!selectedColumn.id" class="btn btn-danger btn-sm"
             "
         >
             <div
-id="preview-choices" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false"
+                id="preview-choices"
+                class="modal fade"
+                data-bs-backdrop="static"
+                data-bs-keyboard="false"
                 tabindex="-1"
                 aria-labelledby="preview-choices-label"
                 aria-hidden="true"
@@ -1180,7 +1323,7 @@ import { api_endpoints } from '@/utils/hooks.js';
 export default {
     name: 'OccurrenceReportBulkImportSchema',
     components: {
-        alert
+        alert,
     },
     data() {
         return {
@@ -1202,8 +1345,8 @@ export default {
             newColumn: null,
             saving: false,
             validatingSchema: false,
-            errors: null
-        }
+            errors: null,
+        };
     },
     computed: {
         showDjangoLookupField() {
@@ -1221,9 +1364,9 @@ export default {
         },
     },
     created() {
-        this.fetchBulkImportSchema()
-        this.fetchDefaultValueChoices()
-        this.fetchLookupSchematypes()
+        this.fetchBulkImportSchema();
+        this.fetchDefaultValueChoices();
+        this.fetchLookupSchematypes();
     },
     methods: {
         fetchLookupSchematypes() {
@@ -1231,140 +1374,192 @@ export default {
                 .then(async (response) => {
                     this.lookupSchematypes = await response.json();
                 })
-                .catch(error => {
-                    console.error(error)
-                })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         fetchBulkImportSchema() {
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.$route.params.bulk_import_schema_id}/`)
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas}${this.$route.params.bulk_import_schema_id}/`
+            )
                 .then(async (response) => {
                     this.schema = await response.json();
-                    this.fetchContentTypes()
+                    this.fetchContentTypes();
                     this.$nextTick(() => {
                         if (!this.schema.can_user_edit) {
                             this.disableMainFieldsetInputs();
                         } else {
                             this.enableMainFieldsetInputs();
-                            var el = document.querySelector('.columns')
-                            this.sortable = Sortable.create(
-                                el, {
+                            var el = document.querySelector('.columns');
+                            this.sortable = Sortable.create(el, {
                                 animation: 150,
                                 handle: '.bi-arrow-down-up',
                                 onEnd: (event) => {
-                                    let column = this.schema.columns.splice(event.oldIndex, 1)[0]
-                                    this.schema.columns.splice(event.newIndex, 0, column)
+                                    let column = this.schema.columns.splice(
+                                        event.oldIndex,
+                                        1
+                                    )[0];
+                                    this.schema.columns.splice(
+                                        event.newIndex,
+                                        0,
+                                        column
+                                    );
                                     // Update the order of the columns
-                                    this.schema.columns.forEach((column, index) => {
-                                        column.order = index
-                                    })
-                                    this.save()
-                                }
-                            })
+                                    this.schema.columns.forEach(
+                                        (column, index) => {
+                                            column.order = index;
+                                        }
+                                    );
+                                    this.save();
+                                },
+                            });
                         }
-                    })
-                })
-                .catch(error => {
-                    console.error(error)
+                    });
                 })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         fetchContentTypes() {
-            fetch(`${api_endpoints.content_types}ocr_bulk_import_content_types/`)
+            fetch(
+                `${api_endpoints.content_types}ocr_bulk_import_content_types/`
+            )
                 .then(async (response) => {
                     this.djangoContentTypes = await response.json();
                     // Filter out content types that have no fields
-                    this.djangoContentTypesFiltered = this.djangoContentTypes.filter(
-                        djangoContentType => djangoContentType.model_fields.length > 0
-                    )
+                    this.djangoContentTypesFiltered =
+                        this.djangoContentTypes.filter(
+                            (djangoContentType) =>
+                                djangoContentType.model_fields.length > 0
+                        );
                     // Filter out content types where all their fields are already columns in the schema
-                    this.djangoContentTypesFiltered = this.djangoContentTypesFiltered.filter(
-                        djangoContentType => !djangoContentType.model_fields.every(
-                            modelField => this.schema.columns.some(
-                                column => (column.django_import_field_name == modelField.name &&
-                                    column.django_import_content_type == modelField.content_type)
-                            )
-                        )
-                    )
-                })
-                .catch(error => {
-                    console.error(error)
+                    this.djangoContentTypesFiltered =
+                        this.djangoContentTypesFiltered.filter(
+                            (djangoContentType) =>
+                                !djangoContentType.model_fields.every(
+                                    (modelField) =>
+                                        this.schema.columns.some(
+                                            (column) =>
+                                                column.django_import_field_name ==
+                                                    modelField.name &&
+                                                column.django_import_content_type ==
+                                                    modelField.content_type
+                                        )
+                                )
+                        );
                 })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         fetchDefaultValueChoices() {
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}default_value_choices/`)
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas}default_value_choices/`
+            )
                 .then(async (response) => {
                     this.defaultValueChoices = await response.json();
                 })
-                .catch(error => {
-                    console.error(error)
-                })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         selectDjangoImportContentType() {
             if (!this.selectedColumn.django_import_content_type) {
-                this.selectedField = null
-                this.selectedContentType = null
-                this.showDjangoImportFieldSelect = false
-                this.$refs['django-import-field'].focus()
-                return
+                this.selectedField = null;
+                this.selectedContentType = null;
+                this.showDjangoImportFieldSelect = false;
+                this.$refs['django-import-field'].focus();
+                return;
             }
             this.selectedContentType = this.djangoContentTypes.filter(
-                djangoContentType => djangoContentType.id == this.selectedColumn.django_import_content_type
-            )[0]
+                (djangoContentType) =>
+                    djangoContentType.id ==
+                    this.selectedColumn.django_import_content_type
+            )[0];
             // Filter out fields that are already columns in the schema
-            this.djangoImportFieldsFiltered = this.selectedContentType.model_fields.filter(
-                modelField => !this.schema.columns.some(column => column.django_import_field_name == modelField.name &&
-                    column.django_import_content_type == modelField.content_type)
-            )
+            this.djangoImportFieldsFiltered =
+                this.selectedContentType.model_fields.filter(
+                    (modelField) =>
+                        !this.schema.columns.some(
+                            (column) =>
+                                column.django_import_field_name ==
+                                    modelField.name &&
+                                column.django_import_content_type ==
+                                    modelField.content_type
+                        )
+                );
             // If there are already other columns with the same django content type
             // then move the selected column to the end of the list of those columns
-            if (this.schema.columns.filter(column => column.django_import_content_type == this.selectedColumn.django_import_content_type).length > 1) {
+            if (
+                this.schema.columns.filter(
+                    (column) =>
+                        column.django_import_content_type ==
+                        this.selectedColumn.django_import_content_type
+                ).length > 1
+            ) {
                 let lastColumn = this.schema.columns.findLast(
-                    column => column.django_import_content_type == this.selectedColumn.django_import_content_type
-                        && column.django_import_field_name != this.selectedColumn.django_import_field_name)
-                let lastColumnIndex = this.schema.columns.indexOf(lastColumn) + 1
-                this.schema.columns.splice(this.selectedColumnIndex, 1)
-                this.schema.columns.splice(lastColumnIndex, 0, this.selectedColumn)
-                this.selectedColumnIndex = lastColumnIndex
+                    (column) =>
+                        column.django_import_content_type ==
+                            this.selectedColumn.django_import_content_type &&
+                        column.django_import_field_name !=
+                            this.selectedColumn.django_import_field_name
+                );
+                let lastColumnIndex =
+                    this.schema.columns.indexOf(lastColumn) + 1;
+                this.schema.columns.splice(this.selectedColumnIndex, 1);
+                this.schema.columns.splice(
+                    lastColumnIndex,
+                    0,
+                    this.selectedColumn
+                );
+                this.selectedColumnIndex = lastColumnIndex;
                 // Update the order of the columns to reflect the new order
-                this.applyOrderToColumns()
+                this.applyOrderToColumns();
             }
             this.$nextTick(() => {
                 this.enablePopovers();
-                this.selectedColumn.model_name = this.selectedContentType.model_verbose_name
+                this.selectedColumn.model_name =
+                    this.selectedContentType.model_verbose_name;
                 document.querySelector('tr.active').scrollIntoView();
-            })
+            });
         },
         selectDjangoImportField() {
             if (!this.selectedColumn.django_import_field_name) {
-                this.selectedField = null
-                this.$refs['django-import-field'].focus()
-                return
+                this.selectedField = null;
+                this.$refs['django-import-field'].focus();
+                return;
             }
             this.selectedField = this.selectedContentType.model_fields.filter(
-                modelField => modelField.name == this.selectedColumn.django_import_field_name
-            )[0]
+                (modelField) =>
+                    modelField.name ==
+                    this.selectedColumn.django_import_field_name
+            )[0];
             this.$nextTick(() => {
                 this.enablePopovers();
-                this.selectedColumn.xlsx_column_header_name = `${this.selectedContentType.model_abbreviation.toUpperCase()} ${this.selectedField.display_name}`
+                this.selectedColumn.xlsx_column_header_name = `${this.selectedContentType.model_abbreviation.toUpperCase()} ${this.selectedField.display_name}`;
                 if (!this.selectedColumn.id) {
-                    this.selectedColumn.xlsx_data_validation_allow_blank = this.selectedField.allow_null
+                    this.selectedColumn.xlsx_data_validation_allow_blank =
+                        this.selectedField.allow_null;
                 }
-                this.$refs['column-name'].focus()
-            })
+                this.$refs['column-name'].focus();
+            });
         },
         selectLookupField() {
             if (this.selectedColumn.django_lookup_field_name == 'custom') {
-                this.customLookupField = true
+                this.customLookupField = true;
                 if (this.previousCustomLookupField) {
-                    this.selectedColumn.django_lookup_field_name = this.previousCustomLookupField
+                    this.selectedColumn.django_lookup_field_name =
+                        this.previousCustomLookupField;
                 } else {
-                    this.selectedColumn.django_lookup_field_name = ''
+                    this.selectedColumn.django_lookup_field_name = '';
                 }
                 this.$nextTick(() => {
-                    this.$refs['custom-lookup-field'].focus()
-                })
+                    this.$refs['custom-lookup-field'].focus();
+                });
             } else {
-                this.customLookupField = false
-                this.selectedColumn.django_lookup_field_name = this.$refs['lookup-field'].value
+                this.customLookupField = false;
+                this.selectedColumn.django_lookup_field_name =
+                    this.$refs['lookup-field'].value;
             }
         },
         getNewColumnData() {
@@ -1381,59 +1576,76 @@ export default {
                 import_validations: [],
                 lookup_filters: [],
                 is_editable_by_user: true,
-                is_emailuser_column: false
-            }
+                is_emailuser_column: false,
+            };
         },
         addSingleColumn() {
-            this.showDjangoImportFieldSelect = true
+            this.showDjangoImportFieldSelect = true;
             this.$nextTick(() => {
                 this.enablePopovers();
-                this.$refs['django-import-field'].focus()
-            })
+                this.$refs['django-import-field'].focus();
+            });
         },
         addNewColumn() {
-            this.newColumn = Object.assign({}, this.getNewColumnData())
-            this.schema.columns.push(this.newColumn)
+            this.newColumn = Object.assign({}, this.getNewColumnData());
+            this.schema.columns.push(this.newColumn);
             this.selectedContentType = null;
             this.selectedField = null;
-            this.selectedColumn = this.newColumn
-            this.selectedColumnIndex = this.schema.columns.indexOf(this.newColumn)
-            this.addEditMode = true
-            this.showDjangoImportFieldSelect = false
+            this.selectedColumn = this.newColumn;
+            this.selectedColumnIndex = this.schema.columns.indexOf(
+                this.newColumn
+            );
+            this.addEditMode = true;
+            this.showDjangoImportFieldSelect = false;
             this.$nextTick(() => {
                 this.enablePopovers();
-                this.$refs['django-import-model'].focus()
-            })
+                this.$refs['django-import-model'].focus();
+            });
         },
         addAllColumns(onlyMandatory) {
             swal.fire({
-                title: onlyMandatory ? `Add All Mandatory Fields` : `Add All Fields`,
-                text: onlyMandatory ? `Are you sure you want to add all mandatory fields from the "${this.selectedContentType.model_verbose_name ? this.selectedContentType.model_verbose_name : this.selectedContentType.model}" model?` : `Are you sure you want to add all fields from the "${this.selectedContentType.model_verbose_name}" model?`,
+                title: onlyMandatory
+                    ? `Add All Mandatory Fields`
+                    : `Add All Fields`,
+                text: onlyMandatory
+                    ? `Are you sure you want to add all mandatory fields from the "${this.selectedContentType.model_verbose_name ? this.selectedContentType.model_verbose_name : this.selectedContentType.model}" model?`
+                    : `Are you sure you want to add all fields from the "${this.selectedContentType.model_verbose_name}" model?`,
                 icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Confirm',
                 cancelButtonText: 'Cancel',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary me-2'
+                    cancelButton: 'btn btn-secondary me-2',
                 },
-                reverseButtons: true
+                reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    let newColumns = this.selectedContentType.model_fields.map(modelField => {
-                        return {
-                            id: null,
-                            schema: this.schema.id,
-                            django_import_content_type: this.selectedContentType.id,
-                            django_import_field_name: modelField.name,
-                            xlsx_column_header_name: `${this.selectedContentType.model_abbreviation.toUpperCase()} ${modelField.display_name}`,
-                            xlsx_data_validation_allow_blank: modelField.allow_null,
-                            default_value: null,
-                            import_validations: []
+                    let newColumns = this.selectedContentType.model_fields.map(
+                        (modelField) => {
+                            return {
+                                id: null,
+                                schema: this.schema.id,
+                                django_import_content_type:
+                                    this.selectedContentType.id,
+                                django_import_field_name: modelField.name,
+                                xlsx_column_header_name: `${this.selectedContentType.model_abbreviation.toUpperCase()} ${modelField.display_name}`,
+                                xlsx_data_validation_allow_blank:
+                                    modelField.allow_null,
+                                default_value: null,
+                                import_validations: [],
+                            };
                         }
-                    })
+                    );
                     // Remove columns that are already in the schema
-                    newColumns = newColumns.filter(newColumn => !this.schema.columns.some(column => column.django_import_field_name == newColumn.django_import_field_name))
+                    newColumns = newColumns.filter(
+                        (newColumn) =>
+                            !this.schema.columns.some(
+                                (column) =>
+                                    column.django_import_field_name ==
+                                    newColumn.django_import_field_name
+                            )
+                    );
 
                     if (newColumns.length == 0) {
                         swal.fire({
@@ -1442,14 +1654,16 @@ export default {
                             icon: 'info',
                             confirmButtonText: 'OK',
                             customClass: {
-                                confirmButton: 'btn btn-primary'
-                            }
-                        })
-                        return
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        return;
                     }
 
                     if (onlyMandatory) {
-                        newColumns = newColumns.filter(column => !column.xlsx_data_validation_allow_blank)
+                        newColumns = newColumns.filter(
+                            (column) => !column.xlsx_data_validation_allow_blank
+                        );
                     }
 
                     if (newColumns.length == 0) {
@@ -1459,80 +1673,111 @@ export default {
                             icon: 'info',
                             confirmButtonText: 'OK',
                             customClass: {
-                                confirmButton: 'btn btn-primary'
-                            }
-                        })
-                        return
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        return;
                     }
 
-                    let selectedContentType = this.selectedColumn.django_import_content_type;
-                    this.schema.columns.splice(this.selectedColumnIndex, 1)
-                    this.selectedColumn = null
-                    this.newColumn = null
-                    this.addEditMode = false
+                    let selectedContentType =
+                        this.selectedColumn.django_import_content_type;
+                    this.schema.columns.splice(this.selectedColumnIndex, 1);
+                    this.selectedColumn = null;
+                    this.newColumn = null;
+                    this.addEditMode = false;
 
                     let lastColumnIndex = this.schema.columns.length;
-                    if (this.schema.columns.filter(column => column.django_import_content_type == selectedContentType).length > 0) {
-                        let lastColumn = this.schema.columns.findLast(column => column.django_import_content_type == selectedContentType)
-                        lastColumnIndex = this.schema.columns.indexOf(lastColumn) + 1
+                    if (
+                        this.schema.columns.filter(
+                            (column) =>
+                                column.django_import_content_type ==
+                                selectedContentType
+                        ).length > 0
+                    ) {
+                        let lastColumn = this.schema.columns.findLast(
+                            (column) =>
+                                column.django_import_content_type ==
+                                selectedContentType
+                        );
+                        lastColumnIndex =
+                            this.schema.columns.indexOf(lastColumn) + 1;
                     }
 
                     for (let i = 0; i < newColumns.length; i++) {
-                        this.schema.columns.splice(lastColumnIndex + i, 0, newColumns[i])
+                        this.schema.columns.splice(
+                            lastColumnIndex + i,
+                            0,
+                            newColumns[i]
+                        );
                     }
-                    this.applyOrderToColumns()
+                    this.applyOrderToColumns();
 
-                    this.save()
-                    this.addEditMode = false
+                    this.save();
+                    this.addEditMode = false;
                 } else {
                     if (this.selectedColumn) {
-                        this.$refs['django-import-model'].focus()
+                        this.$refs['django-import-model'].focus();
                     }
                 }
-            })
+            });
         },
         applyOrderToColumns() {
             this.schema.columns.forEach((column, index) => {
-                column.order = index
-            })
+                column.order = index;
+            });
         },
         selectColumn(column) {
             if (column.django_import_content_type) {
                 this.selectedContentType = this.djangoContentTypes.filter(
-                    djangoContentType => djangoContentType.id == column.django_import_content_type
-                )[0]
+                    (djangoContentType) =>
+                        djangoContentType.id ==
+                        column.django_import_content_type
+                )[0];
                 if (column.django_import_field_name) {
-                    this.selectedField = this.selectedContentType.model_fields.filter(
-                        modelField => modelField.name == column.django_import_field_name
-                    )[0]
-                    if (this.selectedField.lookup_field_options && !this.selectedField.lookup_field_options.includes(column.django_lookup_field_name)) {
-                        this.customLookupField = true
+                    this.selectedField =
+                        this.selectedContentType.model_fields.filter(
+                            (modelField) =>
+                                modelField.name ==
+                                column.django_import_field_name
+                        )[0];
+                    if (
+                        this.selectedField.lookup_field_options &&
+                        !this.selectedField.lookup_field_options.includes(
+                            column.django_lookup_field_name
+                        )
+                    ) {
+                        this.customLookupField = true;
                         if (column.django_lookup_field_name) {
-                            this.previousCustomLookupField = column.django_lookup_field_name
+                            this.previousCustomLookupField =
+                                column.django_lookup_field_name;
                         }
                     }
                 }
             }
-            this.selectedColumn = column
-            this.selectedColumnIndex = this.schema.columns.indexOf(column)
-            this.addEditMode = true
+            this.selectedColumn = column;
+            this.selectedColumnIndex = this.schema.columns.indexOf(column);
+            this.addEditMode = true;
             if (this.selectedColumn.id && column.django_import_field_name) {
-                this.showDjangoImportFieldSelect = true
+                this.showDjangoImportFieldSelect = true;
             }
             this.$nextTick(() => {
                 this.enablePopovers();
-                this.$refs['django-import-model'].focus()
-            })
+                this.$refs['django-import-model'].focus();
+            });
         },
         cancelAddingColumn(column) {
-            this.schema.columns = this.schema.columns.filter(col => col !== column)
-            this.selectedColumn = null
-            this.selectedColumnIndex = null
-            this.addEditMode = false
-            this.showDjangoImportFieldSelect = false
+            this.schema.columns = this.schema.columns.filter(
+                (col) => col !== column
+            );
+            this.selectedColumn = null;
+            this.selectedColumnIndex = null;
+            this.addEditMode = false;
+            this.showDjangoImportFieldSelect = false;
         },
         removeColumn(column) {
-            let columnTitle = column.xlsx_column_header_name ? `Are you sure you want to delete column: ${column.xlsx_column_header_name}?` : `Are you sure you want to delete this column?`
+            let columnTitle = column.xlsx_column_header_name
+                ? `Are you sure you want to delete column: ${column.xlsx_column_header_name}?`
+                : `Are you sure you want to delete this column?`;
             swal.fire({
                 title: `Delete Column ${column.xlsx_column_header_name}`,
                 text: columnTitle,
@@ -1542,44 +1787,48 @@ export default {
                 cancelButtonText: 'Cancel',
                 customClass: {
                     confirmButton: 'btn btn-primary',
-                    cancelButton: 'btn btn-secondary me-2'
+                    cancelButton: 'btn btn-secondary me-2',
                 },
-                reverseButtons: true
+                reverseButtons: true,
             }).then((result) => {
                 if (result.isConfirmed) {
-                    this.schema.columns = this.schema.columns.filter(column => column !== this.selectedColumn)
-                    this.selectedColumn = null
-                    this.addEditMode = false
-                    this.applyOrderToColumns()
+                    this.schema.columns = this.schema.columns.filter(
+                        (column) => column !== this.selectedColumn
+                    );
+                    this.selectedColumn = null;
+                    this.addEditMode = false;
+                    this.applyOrderToColumns();
                     if (column.id) {
-                        this.save()
+                        this.save();
                     }
                     this.fetchContentTypes();
                 } else {
                     if (this.selectedColumn) {
-                        this.$refs['django-import-model'].focus()
+                        this.$refs['django-import-model'].focus();
                     }
                 }
-            })
+            });
         },
         addTag(event) {
             if (event.key === 'Enter') {
                 if (this.schema.tags.includes(event.target.value)) {
-                    event.target.value = ''
-                    return
+                    event.target.value = '';
+                    return;
                 }
-                this.schema.tags.push(event.target.value)
+                this.schema.tags.push(event.target.value);
                 this.save();
-                event.target.value = ''
+                event.target.value = '';
             }
         },
         removeTag(index) {
-            this.schema.tags.splice(index, 1)
+            this.schema.tags.splice(index, 1);
             this.save();
         },
         validate() {
             this.validatingSchema = true;
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/validate/`)
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/validate/`
+            )
                 .then(async (response) => {
                     const data = await response.json();
                     swal.fire({
@@ -1588,92 +1837,115 @@ export default {
                         icon: 'success',
                         confirmButtonText: 'OK',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
-                        }
-                    })
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
                 })
-                .catch(error => {
+                .catch((error) => {
                     let errors = null;
                     if (Object.hasOwn(error, 'data')) {
-                        errors = error.data
+                        errors = error.data;
                     } else if (Object.hasOwn(error, 'body')) {
-                        errors = error.body
+                        errors = error.body;
                     }
-                    let error_message_string = 'Something went wrong :-('
+                    let error_message_string = 'Something went wrong :-(';
                     if (errors instanceof Object) {
-                        error_message_string = ''
+                        error_message_string = '';
                         for (let i = 0; i < errors.length; i++) {
-                            let error_message = errors[i].error_message ? errors[i].error_message : errors[i]
-                            error_message_string += `<li class="mb-2">${error_message}</li>`
+                            let error_message = errors[i].error_message
+                                ? errors[i].error_message
+                                : errors[i];
+                            error_message_string += `<li class="mb-2">${error_message}</li>`;
                         }
-                        console.log(error_message_string)
+                        console.log(error_message_string);
                     } else if (typeof errors === 'string') {
-                        error_message_string = errors
+                        error_message_string = errors;
                     }
-                    console.error(error_message_string)
+                    console.error(error_message_string);
                     swal.fire({
                         title: 'Schema Validation Failed',
                         html: error_message_string,
                         icon: 'error',
                         confirmButtonText: 'OK',
                         customClass: {
-                            confirmButton: 'btn btn-primary'
-                        }
-                    })
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
                 })
                 .finally(() => {
                     this.validatingSchema = false;
-                })
+                });
         },
         save() {
             // If there is a column with no django_import_content_type or django_import_field_name, remove it
-            if (this.schema.columns.some(column => !column.django_import_content_type || !column.django_import_field_name)) {
-                this.schema.columns = this.schema.columns.filter(column => column.django_import_content_type && column.django_import_field_name)
-                this.selectedColumn = null
-                this.selectedColumnIndex = null
-                this.addEditMode = false
+            if (
+                this.schema.columns.some(
+                    (column) =>
+                        !column.django_import_content_type ||
+                        !column.django_import_field_name
+                )
+            ) {
+                this.schema.columns = this.schema.columns.filter(
+                    (column) =>
+                        column.django_import_content_type &&
+                        column.django_import_field_name
+                );
+                this.selectedColumn = null;
+                this.selectedColumnIndex = null;
+                this.addEditMode = false;
             }
             // If there is a lookup filter with no filter_field_name, remove it
-            this.schema.columns.forEach(column => {
+            this.schema.columns.forEach((column) => {
                 if (column.lookup_filters) {
-                    column.lookup_filters = column.lookup_filters.filter(filter => filter.filter_field_name)
+                    column.lookup_filters = column.lookup_filters.filter(
+                        (filter) => filter.filter_field_name
+                    );
                 }
-            })
+            });
 
             this.saving = true;
             this.errors = null;
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/`, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(this.schema)
-            })
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/`,
+                {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(this.schema),
+                }
+            )
                 .then(async (response) => {
                     const data = await response.json();
                     this.saving = false;
-                    this.schema = Object.assign({}, data)
+                    this.schema = Object.assign({}, data);
                     if (this.addEditMode) {
-                        this.selectedColumn = this.schema.columns[this.selectedColumnIndex]
+                        this.selectedColumn =
+                            this.schema.columns[this.selectedColumnIndex];
                     }
                 })
-                .catch(error => {
+                .catch((error) => {
                     this.saving = false;
-                    this.errors = error.data
-                    console.error(error)
-                })
+                    this.errors = error.data;
+                    console.error(error);
+                });
         },
         saveAndExit() {
-            this.save()
-            this.$router.push(`/internal/occurrence-report/bulk_import_schema/`)
+            this.save();
+            this.$router.push(
+                `/internal/occurrence-report/bulk_import_schema/`
+            );
         },
         copySchema(id) {
-            fetch(`${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+            fetch(
+                `${api_endpoints.occurrence_report_bulk_import_schemas}${id}/copy/`,
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
                 }
-            })
+            )
                 .then(async (response) => {
                     const data = await response.json();
                     if (response.status === 201) {
@@ -1682,22 +1954,26 @@ export default {
                             text: 'Schema copied successfully',
                             icon: 'success',
                             showConfirmButton: false,
-                            timer: 1500
-                        })
-                        this.$router.push(`/internal/occurrence-report/bulk_import_schema/${data.id}`)
-                        this.fetchBulkImportSchema()
+                            timer: 1500,
+                        });
+                        this.$router.push(
+                            `/internal/occurrence-report/bulk_import_schema/${data.id}`
+                        );
+                        this.fetchBulkImportSchema();
                     }
                 })
-                .catch(error => {
-                    console.error(error)
-                })
+                .catch((error) => {
+                    console.error(error);
+                });
         },
         enablePopovers() {
             // enable all bootstrap 5 popovers
-            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+            var popoverTriggerList = [].slice.call(
+                document.querySelectorAll('[data-bs-toggle="popover"]')
+            );
             popoverTriggerList.map(function (popoverTriggerEl) {
-                return new bootstrap.Popover(popoverTriggerEl)
-            })
+                return new bootstrap.Popover(popoverTriggerEl);
+            });
         },
         stringToRGBAColor(str) {
             if (!str) {
@@ -1707,10 +1983,8 @@ export default {
             for (let i = 0; i < str.length; i++) {
                 hash = str.charCodeAt(i) + ((hash << 5) - hash);
             }
-            let c = (hash & 0x00FFFFFF)
-                .toString(16)
-                .toUpperCase();
-            let color_hash = '#' + "00000".substring(0, 6 - c.length) + c;
+            let c = (hash & 0x00ffffff).toString(16).toUpperCase();
+            let color_hash = '#' + '00000'.substring(0, 6 - c.length) + c;
             // Consvert to RGB
             let r = parseInt(color_hash.slice(1, 3), 16);
             let g = parseInt(color_hash.slice(3, 5), 16);
@@ -1718,66 +1992,75 @@ export default {
             return `rgba(${r}, ${g}, ${b}, 0.1)`;
         },
         classesForRow(index, column, selectedColumn) {
-            let classes = selectedColumn == column ? 'active bg-success' : ''
+            let classes = selectedColumn == column ? 'active bg-success' : '';
             let next_index = index + 1;
             if (next_index > this.schema.columns.length - 1) {
-                return classes
+                return classes;
             }
-            let next_column = this.schema.columns[next_index]
-            if (next_column.django_import_content_type != column.django_import_content_type) {
-                classes += ' border-bottom border-secondary last-row-for-model'
+            let next_column = this.schema.columns[next_index];
+            if (
+                next_column.django_import_content_type !=
+                column.django_import_content_type
+            ) {
+                classes += ' border-bottom border-secondary last-row-for-model';
             }
-            return classes
+            return classes;
         },
         excelValidationType() {
             if (this.selectedColumn.is_emailuser_column) {
-                return 'None'
+                return 'None';
             }
-            return this.selectedField.xlsx_validation_type ? this.selectedField.xlsx_validation_type : 'None'
+            return this.selectedField.xlsx_validation_type
+                ? this.selectedField.xlsx_validation_type
+                : 'None';
         },
         addLookupFilter() {
             if (!this.selectedColumn.lookup_filters) {
-                this.selectedColumn.lookup_filters = []
+                this.selectedColumn.lookup_filters = [];
             }
             this.selectedColumn.lookup_filters.push({
                 id: null,
                 schema_column: this.selectedColumn.id,
                 filter_field_name: '',
                 filter_type: 'exact',
-                values: []
-            })
+                values: [],
+            });
         },
         removeLookupFilter(column, index) {
-            let lookup_filter_id = column.lookup_filters[index].id
-            column.lookup_filters.splice(index, 1)
+            let lookup_filter_id = column.lookup_filters[index].id;
+            column.lookup_filters.splice(index, 1);
             if (lookup_filter_id) {
-                this.save()
+                this.save();
             }
         },
         lookupFilterFieldChanged(lookupFilter) {
             if (lookupFilter.values.length == 0) {
                 lookupFilter.values.push({
                     id: null,
-                    filter_value: ''
-                })
+                    filter_value: '',
+                });
             } else {
-                lookupFilter.values[0].filter_value = ''
+                lookupFilter.values[0].filter_value = '';
             }
-            this.save()
+            this.save();
         },
         lookupFilterValueChanged() {
-            this.save()
+            this.save();
         },
         disableMainFieldsetInputs() {
-            document.querySelectorAll('fieldset#main-schema-fieldset input').forEach(input => {
-                input.disabled = true
-            })
+            document
+                .querySelectorAll('fieldset#main-schema-fieldset input')
+                .forEach((input) => {
+                    input.disabled = true;
+                });
         },
         enableMainFieldsetInputs() {
-            document.querySelectorAll('fieldset#main-schema-fieldset input').forEach(input => {
-                input.disabled = false
-            })
-        }
+            document
+                .querySelectorAll('fieldset#main-schema-fieldset input')
+                .forEach((input) => {
+                    input.disabled = false;
+                });
+        },
     },
     onRouteEnter() {
         this.fetchBulkImportSchema();
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue
index b6f032e4..fef35242 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -353,7 +353,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue
index a6bad237..4e0e0ee6 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/community_occurrence_report_history.vue
@@ -51,7 +51,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -364,7 +364,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue b/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
index ad7eb87e..cf0d4b6d 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/dashboard.vue
@@ -323,6 +323,7 @@ export default {
         this.fetchProfile();
     },
     mounted: function () {
+        // eslint-disable-next-line no-undef
         chevron_toggle.init();
     },
     methods: {
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue
index abb47809..bd14d00a 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_conservation_threat_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -353,7 +353,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue
index 7e4f9054..dada5baa 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_contact_detail_history.vue
@@ -46,7 +46,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -398,7 +398,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue
index 3b4b49e1..953dbf81 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_document_history.vue
@@ -54,7 +54,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -419,7 +419,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue
index c464b095..cc20b203 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_site_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -404,7 +404,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue
index 89e7430d..8bae7947 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occ_tenure_history.vue
@@ -46,7 +46,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -439,7 +439,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
index 14b1dbb4..85914d5f 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
@@ -281,7 +281,6 @@ export default {
         );
     },
     data: function () {
-        let vm = this;
         return {
             occurrence: null,
             form: null,
@@ -483,7 +482,7 @@ export default {
                 }
             );
         },
-        save_exit: async function (e) {
+        save_exit: async function () {
             let vm = this;
             var missing_data = vm.can_submit('');
             if (missing_data != true) {
@@ -509,8 +508,7 @@ export default {
                 }
             });
         },
-        save_before_submit: async function (e) {
-            //console.log('save before submit');
+        save_before_submit: async function () {
             let vm = this;
             vm.saveError = false;
 
@@ -523,7 +521,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {
+                async () => {
                     //return true;
                 },
                 (err) => {
@@ -544,7 +542,7 @@ export default {
             );
             return result;
         },
-        can_submit: function (check_action) {
+        can_submit: function () {
             let vm = this;
             let blank_fields = [];
             if (
@@ -603,11 +601,11 @@ export default {
             }).then(
                 async (swalresult) => {
                     if (swalresult.isConfirmed) {
-                        let result = await vm.save_before_submit();
+                        await vm.save_before_submit();
                         if (!vm.saveError) {
                             let payload = new Object();
                             Object.assign(payload, vm.occurrence);
-                            helpers.add_endpoint_json(
+                            const submit_url = helpers.add_endpoint_json(
                                 api_endpoints.occurrence,
                                 vm.occurrence.id + '/submit'
                             );
@@ -638,7 +636,7 @@ export default {
                         }
                     }
                 },
-                (error) => {
+                () => {
                     vm.submitOccurrence = false;
                 }
             );
@@ -657,14 +655,13 @@ export default {
             vm.combine_key++;
         },
         activateOccurrence: async function () {
-            let vm = this;
             await fetch(`/api/occurrence/${this.occurrence.id}/activate.json`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
             }).then(
-                async (response) => {
+                async () => {
                     swal.fire({
                         title: 'Activated',
                         text: 'Occurrence has been Activated',
@@ -672,7 +669,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then(async (swalresult) => {
+                    }).then(async () => {
                         this.$router.go(this.$router.currentRoute);
                     });
                 },
@@ -690,7 +687,6 @@ export default {
             );
         },
         lockOccurrence: async function () {
-            let vm = this;
             await fetch(
                 `/api/occurrence/${this.occurrence.id}/lock_occurrence.json`,
                 {
@@ -700,7 +696,7 @@ export default {
                     },
                 }
             ).then(
-                async (response) => {
+                async () => {
                     swal.fire({
                         title: 'Locked',
                         text: 'Occurrence has been Locked',
@@ -708,7 +704,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then(async (swalresult) => {
+                    }).then(async () => {
                         this.$router.go(this.$router.currentRoute);
                     });
                 },
@@ -726,7 +722,6 @@ export default {
             );
         },
         unlockOccurrence: async function () {
-            let vm = this;
             await fetch(
                 `/api/occurrence/${this.occurrence.id}/unlock_occurrence.json`,
                 {
@@ -736,7 +731,7 @@ export default {
                     },
                 }
             ).then(
-                async (response) => {
+                async () => {
                     swal.fire({
                         title: 'Unlocked',
                         text: 'Occurrence has been Unlocked',
@@ -744,7 +739,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then(async (swalresult) => {
+                    }).then(async () => {
                         this.$router.go(this.$router.currentRoute);
                     });
                 },
@@ -785,7 +780,7 @@ export default {
                             },
                         }
                     ).then(
-                        async (response) => {
+                        async () => {
                             swal.fire({
                                 title: 'Closed',
                                 text: 'Occurrence has been Closed',
@@ -793,7 +788,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then(async (swalresult) => {
+                            }).then(async () => {
                                 vm.$router.push({
                                     name: 'internal-occurrence-dash',
                                 });
@@ -815,7 +810,6 @@ export default {
             });
         },
         reopenOccurrence: async function () {
-            let vm = this;
             swal.fire({
                 title: 'Reopen',
                 text: 'Are you sure you want to reopen this Occurrence?',
@@ -838,7 +832,7 @@ export default {
                             },
                         }
                     ).then(
-                        async (response) => {
+                        async () => {
                             swal.fire({
                                 title: 'Reopened',
                                 text: 'Occurrence has been Reopened',
@@ -846,7 +840,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then(async (swalresult) => {
+                            }).then(async () => {
                                 this.$router.go(this.$router.currentRoute);
                             });
                         },
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
index 5b224c5c..3ad5eed6 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
@@ -1026,7 +1026,7 @@ export default {
                     },
                 }
             ).then(
-                (response) => {
+                () => {
                     swal.fire({
                         title: 'Combined',
                         text: 'Selected Occurrences have been combined.',
@@ -1034,7 +1034,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((swalresult) => {
+                    }).then(() => {
                         vm.$router.go();
                     });
                 },
@@ -1601,13 +1601,13 @@ export default {
                     vm.selectedAddOccurrence = e.params.data;
                     vm.addOccurrence();
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occurrence_name_lookup-results"]'
                     );
                     searchField[0].focus();
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.selectedAddOccurrence = null;
                 });
         },
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
index 3bc6873f..edaa5463 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
@@ -224,12 +224,12 @@ export default {
                     }
                 }
             );
-            vm.$refs.contacts_datatable.vmDataTable.on('draw', function (e) {
+            vm.$refs.contacts_datatable.vmDataTable.on('draw', function () {
                 helpers.enablePopovers();
             });
             vm.$refs.contacts_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
index 7fa1669e..9ee60871 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
@@ -105,14 +105,14 @@ export default {
                     },
                     {
                         data: 'description',
-                        render: function (value, type, full) {
+                        render: function (value, type) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return type == 'export' ? value : result;
                         },
                     },
                     {
                         data: 'uploaded_date',
-                        mRender: function (data, type, full) {
+                        mRender: function (data) {
                             return data != '' && data != null
                                 ? moment(data).format('DD/MM/YYYY HH:mm')
                                 : '';
@@ -188,12 +188,12 @@ export default {
                     }
                 }
             );
-            vm.$refs.documents_datatable.vmDataTable.on('draw', function (e) {
+            vm.$refs.documents_datatable.vmDataTable.on('draw', function () {
                 helpers.enablePopovers();
             });
             vm.$refs.documents_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
index 7af7d7d4..a8a9a842 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
@@ -166,7 +166,7 @@ export default {
                         break;
                     }
                 }
-                for (var i = 0; i < vm.selectedOccurrences.length; i++) {
+                for (i = 0; i < vm.selectedOccurrences.length; i++) {
                     if (vm.selectedOccurrences[i].id == id) {
                         vm.selectedOccurrences.splice(i, 1);
                         break;
@@ -240,7 +240,7 @@ export default {
             );
             vm.$refs.occurrences_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
index c35fc758..744c5373 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
@@ -247,15 +247,12 @@ export default {
                     }
                 }
             );
-            vm.$refs.sites_datatable.vmDataTable.on('draw', function (e) {
+            vm.$refs.sites_datatable.vmDataTable.on('draw', function () {
+                helpers.enablePopovers();
+            });
+            vm.$refs.sites_datatable.vmDataTable.on('childRow.dt', function () {
                 helpers.enablePopovers();
             });
-            vm.$refs.sites_datatable.vmDataTable.on(
-                'childRow.dt',
-                function (e, settings) {
-                    helpers.enablePopovers();
-                }
-            );
         },
     },
 };
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
index bd3250a5..c9c9f8e8 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
@@ -237,12 +237,12 @@ export default {
                     }
                 }
             );
-            vm.$refs.tenures_datatable.vmDataTable.on('draw', function (e) {
+            vm.$refs.tenures_datatable.vmDataTable.on('draw', function () {
                 helpers.enablePopovers();
             });
             vm.$refs.tenures_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
index 801ce285..d7787351 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
@@ -99,7 +99,7 @@ export default {
                     },
                     {
                         data: 'date_observed',
-                        mRender: function (data, type, full) {
+                        mRender: function (data) {
                             return data != '' && data != null
                                 ? moment(data).format('DD/MM/YYYY HH:mm')
                                 : '';
@@ -116,7 +116,7 @@ export default {
                     },
                     {
                         data: 'comment',
-                        render: function (value, type, full) {
+                        render: function (value, type) {
                             let result = helpers.dtPopover(value, 30, 'hover');
                             return type == 'export' ? value : result;
                         },
@@ -274,12 +274,12 @@ export default {
                     }
                 }
             );
-            vm.$refs.threats_datatable.vmDataTable.on('draw', function (e) {
+            vm.$refs.threats_datatable.vmDataTable.on('draw', function () {
                 helpers.enablePopovers();
             });
             vm.$refs.threats_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
index b2816aec..597009b8 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
@@ -78,7 +78,8 @@
                 />
 
                 <Submission
-:submitter_first_name="submitter_first_name" :submitter_last_name="submitter_last_name"
+                    :submitter_first_name="submitter_first_name"
+                    :submitter_last_name="submitter_last_name"
                     :lodgement_date="occurrence_report.lodgement_date"
                     :is_new_contributor="occurrence_report.is_new_contributor"
                     class="mb-3"
@@ -96,10 +97,14 @@
                         </div>
                         <template v-if="with_approver">
                             <select
-ref="assigned_officer" v-model="occurrence_report.assigned_approver"
-                                :disabled="!occurrence_report.can_user_approve" class="form-select mb-2">
+                                ref="assigned_officer"
+                                v-model="occurrence_report.assigned_approver"
+                                :disabled="!occurrence_report.can_user_approve"
+                                class="form-select mb-2"
+                            >
                                 <option
-v-for="member in occurrence_report.allowed_assessors" :value="member.id"
+                                    v-for="member in occurrence_report.allowed_assessors"
+                                    :value="member.id"
                                     :selected="
                                         member.id ==
                                         occurrence_report.assigned_approver
@@ -110,16 +115,29 @@ v-for="member in occurrence_report.allowed_assessors" :value="member.id"
                                 </option>
                             </select>
                             <a
-v-if="with_approver && occurrence_report.assigned_approver != occurrence_report.current_assessor.id && occurrence_report.assessor_mode.assessor_can_assess"
-                                class="actionBtn float-end" role="button" @click.prevent="assignRequestUser()">Assign to
-                            >
+                                v-if="
+                                    with_approver &&
+                                    occurrence_report.assigned_approver !=
+                                        occurrence_report.current_assessor.id &&
+                                    occurrence_report.assessor_mode
+                                        .assessor_can_assess
+                                "
+                                class="actionBtn float-end"
+                                role="button"
+                                @click.prevent="assignRequestUser()"
+                                >Assign to me
+                            </a>
                         </template>
                         <template v-else>
                             <select
-ref="assigned_officer" v-model="occurrence_report.assigned_officer"
-                                :disabled="!occurrence_report.can_user_assess" class="form-select mb-2">
+                                ref="assigned_officer"
+                                v-model="occurrence_report.assigned_officer"
+                                :disabled="!occurrence_report.can_user_assess"
+                                class="form-select mb-2"
+                            >
                                 <option
-v-for="member in occurrence_report.allowed_assessors" :value="member.id"
+                                    v-for="member in occurrence_report.allowed_assessors"
+                                    :value="member.id"
                                     :selected="
                                         member.id ==
                                         occurrence_report.current_assessor.id
@@ -130,9 +148,20 @@ v-for="member in occurrence_report.allowed_assessors" :value="member.id"
                                 </option>
                             </select>
                             <a
-v-if="(with_assessor || with_referral || unlocked) && occurrence_report.assigned_officer != occurrence_report.current_assessor.id && occurrence_report.assessor_mode.assessor_can_assess"
-                                class="actionBtn float-end" role="button" @click.prevent="assignRequestUser()">Assign to
-                            >
+                                v-if="
+                                    (with_assessor ||
+                                        with_referral ||
+                                        unlocked) &&
+                                    occurrence_report.assigned_officer !=
+                                        occurrence_report.current_assessor.id &&
+                                    occurrence_report.assessor_mode
+                                        .assessor_can_assess
+                                "
+                                class="actionBtn float-end"
+                                role="button"
+                                @click.prevent="assignRequestUser()"
+                                >Assign to me
+                            </a>
                         </template>
                     </div>
                     <div
@@ -154,11 +183,15 @@ v-if="(with_assessor || with_referral || unlocked) && occurrence_report.assigned
                                         >Comments</label
                                     >
                                     <textarea
-ref="referral_text" v-model="referral_text" class="form-control"
+                                        ref="referral_text"
+                                        v-model="referral_text"
+                                        class="form-control"
                                         name="referral_text"
                                     ></textarea>
                                     <a
-v-if="canAction" class="actionBtn float-end mt-2" role="button"
+                                        v-if="canAction"
+                                        class="actionBtn float-end mt-2"
+                                        role="button"
                                         @click.prevent="sendReferral()"
                                         >Send</a
                                     >
@@ -166,12 +199,15 @@ v-if="canAction" class="actionBtn float-end mt-2" role="button"
                             </template>
                             <template v-else>
                                 <span
-v-if="canAction" disabled class="actionBtn text-primary float-end"
+                                    v-if="canAction"
+                                    disabled
+                                    class="actionBtn text-primary float-end"
                                     @click.prevent="sendReferral()"
                                 >
                                     Sending Referral&nbsp;
                                     <span
-class="spinner-border spinner-border-sm" role="status"
+                                        class="spinner-border spinner-border-sm"
+                                        role="status"
                                         aria-hidden="true"
                                     ></span>
                                     <span class="visually-hidden"
@@ -213,7 +249,9 @@ class="spinner-border spinner-border-sm" role="status"
                                         <td>Pending</td>
                                         <td class="text-center">
                                             <a
-role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
+                                                role="button"
+                                                data-bs-toggle="popover"
+                                                data-bs-trigger="hover focus"
                                                 :data-bs-content="
                                                     'Send a reminder to ' +
                                                     external_referee_invite.full_name
@@ -230,7 +268,9 @@ role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
                                                 ></i>
                                             </a>
                                             <a
-role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
+                                                role="button"
+                                                data-bs-toggle="popover"
+                                                data-bs-trigger="hover focus"
                                                 :data-bs-content="
                                                     'Retract the external referee invite sent to ' +
                                                     external_referee_invite.full_name
@@ -253,7 +293,8 @@ role="button" data-bs-toggle="popover" data-bs-trigger="hover focus"
                         </div>
                     </div>
                     <div
-v-if="display_referral_actions &&
+                        v-if="
+                            display_referral_actions &&
                             isAssignedOfficer &&
                             occurrence_report.latest_referrals &&
                             occurrence_report.latest_referrals.length > 0
@@ -305,7 +346,9 @@ v-if="display_referral_actions &&
                                                 "
                                             >
                                                 <a
-v-if="canAction" role="button" data-bs-toggle="popover"
+                                                    v-if="canAction"
+                                                    role="button"
+                                                    data-bs-toggle="popover"
                                                     data-bs-trigger="hover"
                                                     :data-bs-content="
                                                         'Send a reminder to ' +
@@ -321,7 +364,9 @@ v-if="canAction" role="button" data-bs-toggle="popover"
                                                     ></i>
                                                 </a>
                                                 <a
-role="button" data-bs-toggle="popover" data-bs-trigger="hover"
+                                                    role="button"
+                                                    data-bs-toggle="popover"
+                                                    data-bs-trigger="hover"
                                                     :data-bs-content="
                                                         'Recall the referral request sent to ' +
                                                         r.referral['fullname']
@@ -363,7 +408,8 @@ role="button" data-bs-toggle="popover" data-bs-trigger="hover"
                             </table>
                             <ShowAllReferrals
                                 :occurrence_report_obj="occurrence_report"
-                                :can-action="canAction" :is-finalised="occurrence_report.finalised"
+                                :can-action="canAction"
+                                :is-finalised="occurrence_report.finalised"
                                 :referral_url="referralListURL"
                                 @refresh-from-response="refreshFromResponse"
                             />
@@ -375,52 +421,68 @@ role="button" data-bs-toggle="popover" data-bs-trigger="hover"
                         </div>
                         <div class="text-center">
                             <button
-v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-4"
+                                v-if="with_assessor"
+                                style="width: 80%"
+                                class="btn btn-primary mb-4"
                                 @click.prevent="amendmentRequest()"
                             >
                                 Request Amendment
                             </button>
                             <button
-v-if="with_approver || unlocked" style="width:80%;" class="btn btn-primary mb-4"
+                                v-if="with_approver || unlocked"
+                                style="width: 80%"
+                                class="btn btn-primary mb-4"
                                 @click.prevent="backToAssessor()"
                             >
                                 Back to Assessor
                             </button>
 
                             <button
-v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-2"
+                                v-if="with_assessor"
+                                style="width: 80%"
+                                class="btn btn-primary mb-2"
                                 @click.prevent="proposeApprove"
                             >
                                 Propose Approve
                             </button>
                             <button
-v-if="with_assessor" style="width:80%;" class="btn btn-primary mb-4"
+                                v-if="with_assessor"
+                                style="width: 80%"
+                                class="btn btn-primary mb-4"
                                 @click.prevent="proposeDecline"
                             >
                                 Propose Decline
                             </button>
 
                             <button
-v-if="display_approve_button" style="width:80%;" class="btn btn-primary mb-4"
+                                v-if="display_approve_button"
+                                style="width: 80%"
+                                class="btn btn-primary mb-4"
                                 @click.prevent="approve()"
                             >
                                 Approve
                             </button>
                             <button
-v-if="display_decline_button" style="width:80%;" class="btn btn-primary mb-4"
+                                v-if="display_decline_button"
+                                style="width: 80%"
+                                class="btn btn-primary mb-4"
                                 @click.prevent="decline()"
                             >
                                 Decline
                             </button>
 
                             <button
-v-if="approved" style="width:80%;" class="btn btn-primary mb-4"
+                                v-if="approved"
+                                style="width: 80%"
+                                class="btn btn-primary mb-4"
                                 @click.prevent="unlock()"
                             >
                                 Unlock
                             </button>
                             <button
-v-if="unlocked" style="width:80%;" class="btn btn-primary mb-4"
+                                v-if="unlocked"
+                                style="width: 80%"
+                                class="btn btn-primary mb-4"
                                 @click.prevent="lock()"
                             >
                                 Lock
@@ -432,7 +494,8 @@ v-if="unlocked" style="width:80%;" class="btn btn-primary mb-4"
                         class="card-body border-top text-center"
                     >
                         <button
-style="width:80%;" class="btn btn-primary mb-1"
+                            style="width: 80%"
+                            class="btn btn-primary mb-1"
                             @click.prevent="copyOccurrenceReport()"
                         >
                             <i class="bi bi-copy me-1"></i> Copy
@@ -445,13 +508,20 @@ style="width:80%;" class="btn btn-primary mb-1"
             </div>
             <div class="col-md-9">
                 <form
-:action="occurrence_report_form_url" method="post" name="occurrence_report"
+                    :action="occurrence_report_form_url"
+                    method="post"
+                    name="occurrence_report"
                     enctype="multipart/form-data"
                 >
                     <ProposalOccurrenceReport
-v-if="occurrence_report" id="OccurrenceReportStart"
-                        ref="occurrence_report" :occurrence_report_obj="occurrence_report" :can-edit-status="false" :is_external="false"
-                        :is_internal="true" @refresh-from-response="refreshFromResponse"
+                        v-if="occurrence_report"
+                        id="OccurrenceReportStart"
+                        ref="occurrence_report"
+                        :occurrence_report_obj="occurrence_report"
+                        :can-edit-status="false"
+                        :is_external="false"
+                        :is_internal="true"
+                        @refresh-from-response="refreshFromResponse"
                         @refresh-occurrence-report="refreshOccurrenceReport()"
                         @save-occurrence-report="save_before_submit()"
                     >
@@ -474,23 +544,29 @@ v-if="occurrence_report" id="OccurrenceReportStart"
                         >
                             <div class="container">
                                 <button
-class="btn btn-primary me-2 pull-left" style="margin-top:5px;"
+                                    class="btn btn-primary me-2 pull-left"
+                                    style="margin-top: 5px"
                                     @click.prevent="returnToDashboard"
                                 >
                                     Return to Dashboard
                                 </button>
                                 <div
-v-if="occurrence_report.internal_application && occurrence_report.can_user_edit"
+                                    v-if="
+                                        occurrence_report.internal_application &&
+                                        occurrence_report.can_user_edit
+                                    "
                                     class="col-md-6 text-end"
                                 >
                                     <button
-v-if="savingOccurrenceReport" class="btn btn-primary me-2"
+                                        v-if="savingOccurrenceReport"
+                                        class="btn btn-primary me-2"
                                         style="margin-top: 5px"
                                         disabled
                                     >
                                         Save and Continue&nbsp;
                                         <span
-class="spinner-border spinner-border-sm" role="status"
+                                            class="spinner-border spinner-border-sm"
+                                            role="status"
                                             aria-hidden="true"
                                         ></span>
                                         <span class="visually-hidden"
@@ -498,20 +574,28 @@ class="spinner-border spinner-border-sm" role="status"
                                         >
                                     </button>
                                     <button
-v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                        :disabled="saveExitOccurrenceReport || submitOccurrenceReport"
-                                        @click.prevent="save()">Save
-                                        Save and Continue
+                                        v-else
+                                        class="btn btn-primary me-2"
+                                        style="margin-top: 5px"
+                                        :disabled="
+                                            saveExitOccurrenceReport ||
+                                            submitOccurrenceReport
+                                        "
+                                        @click.prevent="save()"
+                                    >
+                                        Save Save and Continue
                                     </button>
 
                                     <button
-v-if="saveExitOccurrenceReport" class="btn btn-primary me-2"
+                                        v-if="saveExitOccurrenceReport"
+                                        class="btn btn-primary me-2"
                                         style="margin-top: 5px"
                                         disabled
                                     >
                                         Save and Exit&nbsp;
                                         <span
-class="spinner-border spinner-border-sm" role="status"
+                                            class="spinner-border spinner-border-sm"
+                                            role="status"
                                             aria-hidden="true"
                                         ></span>
                                         <span class="visually-hidden"
@@ -519,20 +603,28 @@ class="spinner-border spinner-border-sm" role="status"
                                         >
                                     </button>
                                     <button
-v-else class="btn btn-primary me-2" style="margin-top:5px;"
-                                        :disabled="savingOccurrenceReport || submitOccurrenceReport"
-                                        @click.prevent="save_exit()">Save
-                                        Save and Exit
+                                        v-else
+                                        class="btn btn-primary me-2"
+                                        style="margin-top: 5px"
+                                        :disabled="
+                                            savingOccurrenceReport ||
+                                            submitOccurrenceReport
+                                        "
+                                        @click.prevent="save_exit()"
+                                    >
+                                        Save Save and Exit
                                     </button>
 
                                     <button
-v-if="submitOccurrenceReport" class="btn btn-primary"
+                                        v-if="submitOccurrenceReport"
+                                        class="btn btn-primary"
                                         style="margin-top: 5px"
                                         disabled
                                     >
                                         Submit&nbsp;
                                         <span
-class="spinner-border spinner-border-sm" role="status"
+                                            class="spinner-border spinner-border-sm"
+                                            role="status"
                                             aria-hidden="true"
                                         ></span>
                                         <span class="visually-hidden"
@@ -540,16 +632,30 @@ class="spinner-border spinner-border-sm" role="status"
                                         >
                                     </button>
                                     <button
-v-else class="btn btn-primary" style="margin-top:5px;"
-                                        :disabled="saveExitOccurrenceReport || savingOccurrenceReport"
-                                        @click.prevent="submit()">Submit</button>
+                                        v-else
+                                        class="btn btn-primary"
+                                        style="margin-top: 5px"
+                                        :disabled="
+                                            saveExitOccurrenceReport ||
+                                            savingOccurrenceReport
+                                        "
+                                        @click.prevent="submit()"
+                                    >
+                                        Submit
+                                    </button>
                                 </div>
                                 <div
-v-else-if="(occurrence_report.assessor_mode.has_assessor_mode || occurrence_report.assessor_mode.has_unlocked_mode)"
+                                    v-else-if="
+                                        occurrence_report.assessor_mode
+                                            .has_assessor_mode ||
+                                        occurrence_report.assessor_mode
+                                            .has_unlocked_mode
+                                    "
                                     class="col-md-6 text-end"
                                 >
                                     <button
-v-if="savingOccurrenceReport" class="btn btn-primary"
+                                        v-if="savingOccurrenceReport"
+                                        class="btn btn-primary"
                                         style="margin-top: 5px"
                                         disabled
                                     >
@@ -564,7 +670,9 @@ v-if="savingOccurrenceReport" class="btn btn-primary"
                                         >
                                     </button>
                                     <button
-v-else class="btn btn-primary" style="margin-top:5px;"
+                                        v-else
+                                        class="btn btn-primary"
+                                        style="margin-top: 5px"
                                         @click.prevent="save()"
                                     >
                                         Save Changes
@@ -578,11 +686,13 @@ v-else class="btn btn-primary" style="margin-top:5px;"
         </div>
 
         <AmendmentRequest
-ref="amendment_request" :occurrence_report_id="occurrence_report.id"
+            ref="amendment_request"
+            :occurrence_report_id="occurrence_report.id"
             @refresh-from-response="refreshFromResponse"
         ></AmendmentRequest>
         <BackToAssessor
-ref="back_to_assessor" :occurrence_report_id="occurrence_report.id"
+            ref="back_to_assessor"
+            :occurrence_report_id="occurrence_report.id"
             :occurrence_report_number="
                 occurrence_report.occurrence_report_number
             "
@@ -590,7 +700,8 @@ ref="back_to_assessor" :occurrence_report_id="occurrence_report.id"
         >
         </BackToAssessor>
         <ProposeAppprove
-ref="propose_approve" :occurrence_report="occurrence_report"
+            ref="propose_approve"
+            :occurrence_report="occurrence_report"
             :occurrence_report_number="
                 occurrence_report.occurrence_report_number
             "
@@ -600,7 +711,8 @@ ref="propose_approve" :occurrence_report="occurrence_report"
         >
         </ProposeAppprove>
         <ProposeDecline
-ref="propose_decline" :occurrence_report_id="occurrence_report.id"
+            ref="propose_decline"
+            :occurrence_report_id="occurrence_report.id"
             :occurrence_report_number="
                 occurrence_report.occurrence_report_number
             "
@@ -609,7 +721,9 @@ ref="propose_decline" :occurrence_report_id="occurrence_report.id"
         </ProposeDecline>
 
         <Decline
-v-if="display_decline_button" ref="decline" :occurrence_report_id="occurrence_report.id"
+            v-if="display_decline_button"
+            ref="decline"
+            :occurrence_report_id="occurrence_report.id"
             :occurrence_report_number="
                 occurrence_report.occurrence_report_number
             "
@@ -618,7 +732,8 @@ v-if="display_decline_button" ref="decline" :occurrence_report_id="occurrence_re
         >
         </Decline>
         <Approve
-v-if="display_approve_button && occurrence_report.approval_details" ref="approve"
+            v-if="display_approve_button && occurrence_report.approval_details"
+            ref="approve"
             :occurrence_report_id="occurrence_report.id"
             :occurrence_report_number="
                 occurrence_report.occurrence_report_number
@@ -628,7 +743,9 @@ v-if="display_approve_button && occurrence_report.approval_details" ref="approve
         >
         </Approve>
         <InviteExternalReferee
-ref="inviteExternalReferee" :pk="occurrence_report.id" model="occurrence_report"
+            ref="inviteExternalReferee"
+            :pk="occurrence_report.id"
+            model="occurrence_report"
             :email="external_referee_email"
             @external-referee-invite-sent="externalRefereeInviteSent"
         />
@@ -700,7 +817,7 @@ export default {
             DATE_TIME_FORMAT: 'DD/MM/YYYY HH:mm:ss',
             department_users: null,
             external_referee_email: '',
-        }
+        };
     },
     computed: {
         csrf_token: function () {
@@ -870,9 +987,9 @@ export default {
         discardOCRProposal: function () {
             let vm = this;
             swal.fire({
-                title: "Discard Report",
-                text: "Are you sure you want to discard this report?",
-                icon: "question",
+                title: 'Discard Report',
+                text: 'Are you sure you want to discard this report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Discard Report',
                 customClass: {
@@ -880,40 +997,48 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(api_endpoints.discard_ocr_proposal(vm.occurrence_report.id), {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then((response) => {
-                            swal.fire({
-                                title: 'Discarded',
-                                text: 'Your report has been discarded',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            api_endpoints.discard_ocr_proposal(
+                                vm.occurrence_report.id
+                            ),
+                            {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                            vm.$router.push({
-                                name: 'internal-species-communities-dash'
-                            });
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                            }
+                        ).then(
+                            () => {
+                                swal.fire({
+                                    title: 'Discarded',
+                                    text: 'Your report has been discarded',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.$router.push({
+                                    name: 'internal-species-communities-dash',
+                                });
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                () => {}
+            );
         },
         unlock: function () {
             let vm = this;
             swal.fire({
-                title: "Unlock Report",
-                text: "Are you sure you want to unlock this approved report?",
-                icon: "question",
+                title: 'Unlock Report',
+                text: 'Are you sure you want to unlock this approved report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Unlock Report',
                 customClass: {
@@ -921,38 +1046,44 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(`/api/occurrence_report/${vm.occurrence_report.id}/unlock_occurrence_report.json`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then(async (response) => {
-                            swal.fire({
-                                title: 'Unlocked',
-                                text: 'The approved occurrence report has been unlocked for editing',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            `/api/occurrence_report/${vm.occurrence_report.id}/unlock_occurrence_report.json`,
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                            vm.occurrence_report = await response.json();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                            }
+                        ).then(
+                            async (response) => {
+                                swal.fire({
+                                    title: 'Unlocked',
+                                    text: 'The approved occurrence report has been unlocked for editing',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.occurrence_report = await response.json();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                () => {}
+            );
         },
         lock: function () {
             let vm = this;
             swal.fire({
-                title: "Lock Report",
-                text: "Are you sure you want to lock this approved report?",
-                icon: "question",
+                title: 'Lock Report',
+                text: 'Are you sure you want to lock this approved report?',
+                icon: 'question',
                 showCancelButton: true,
                 confirmButtonText: 'Lock Report',
                 customClass: {
@@ -960,31 +1091,37 @@ export default {
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(`/api/occurrence_report/${vm.occurrence_report.id}/lock_occurrence_report.json`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    })
-                        .then(async (response) => {
-                            swal.fire({
-                                title: 'Locked',
-                                text: 'The approved occurrence report has been locked from editing',
-                                icon: 'success',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            `/api/occurrence_report/${vm.occurrence_report.id}/lock_occurrence_report.json`,
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
                                 },
-                            });
-                            vm.occurrence_report = await response.json();
-                        }, (error) => {
-                            console.log(error);
-                        });
-                }
-            }, (error) => {
-
-            });
+                            }
+                        ).then(
+                            async (response) => {
+                                swal.fire({
+                                    title: 'Locked',
+                                    text: 'The approved occurrence report has been locked from editing',
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                });
+                                vm.occurrence_report = await response.json();
+                            },
+                            (error) => {
+                                console.log(error);
+                            }
+                        );
+                    }
+                },
+                () => {}
+            );
         },
         amendmentRequest: function () {
             this.$refs.amendment_request.isModalOpen = true;
@@ -1001,22 +1138,22 @@ export default {
         returnToDashboard: function () {
             let vm = this;
             vm.$router.push({
-                name: 'internal-occurrence-dash'
+                name: 'internal-occurrence-dash',
             });
         },
         save: async function () {
             let vm = this;
-            var missing_data = await vm.can_submit("");
+            var missing_data = await vm.can_submit('');
             vm.isSaved = false;
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.savingOccurrenceReport = true;
@@ -1040,71 +1177,77 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-                swal.fire({
-                    title: "Saved",
-                    text: "Your changes have been saved",
-                    icon: "success",
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingOccurrenceReport = false;
-                vm.isSaved = true;
-                vm.occurrence_report = await response.json();
-                vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.setLoadingMap(
-                    false
-                );
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Save Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                vm.savingOccurrenceReport = false;
-                vm.isSaved = false;
-                vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.setLoadingMap(
-                    false
-                );
-            });
+            }).then(
+                async (response) => {
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Your changes have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingOccurrenceReport = false;
+                    vm.isSaved = true;
+                    vm.occurrence_report = await response.json();
+                    vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.setLoadingMap(
+                        false
+                    );
+                },
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Save Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.savingOccurrenceReport = false;
+                    vm.isSaved = false;
+                    vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.setLoadingMap(
+                        false
+                    );
+                }
+            );
         },
-        save_exit: async function (e) {
+        save_exit: async function () {
             let vm = this;
-            var missing_data = await vm.can_submit("");
+            var missing_data = await vm.can_submit('');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before saving",
+                    title: 'Please fix following errors before saving',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 return false;
             }
             vm.saveExitOccurrenceReport = true;
             await vm.save().then(() => {
                 if (vm.isSaved === true) {
                     vm.$router.push({
-                        name: 'internal-occurrence-dash'
+                        name: 'internal-occurrence-dash',
                     });
-                }
-                else {
+                } else {
                     vm.saveExitOccurrenceReport = false;
                 }
             });
         },
-        save_before_submit: async function (e) {
+        save_before_submit: async function () {
             let vm = this;
             vm.saveError = false;
 
             // add map geometry to the occurrence_report
-            if (vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map) {
-                vm.occurrence_report.ocr_geometry = vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.getJSONFeatures();
+            if (
+                vm.$refs.occurrence_report.$refs.ocr_location.$refs
+                    .component_map
+            ) {
+                vm.occurrence_report.ocr_geometry =
+                    vm.$refs.occurrence_report.$refs.ocr_location.$refs.component_map.getJSONFeatures();
             }
 
             let payload = { proposal: vm.occurrence_report };
@@ -1114,177 +1257,228 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(async (response) => {
-
-            }, err => {
-                var errorText = helpers.apiVueResourceError(err);
-                swal.fire({
-                    title: 'Submit Error',
-                    text: errorText,
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                })
-                vm.submitOccurrenceReport = false;
-                vm.saveError = true;
-            });
+            }).then(
+                async () => {},
+                (err) => {
+                    var errorText = helpers.apiVueResourceError(err);
+                    swal.fire({
+                        title: 'Submit Error',
+                        text: errorText,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.submitOccurrenceReport = false;
+                    vm.saveError = true;
+                }
+            );
             return result;
         },
         can_submit: async function (check_action) {
             let vm = this;
-            let blank_fields = []
-            if (vm.occurrence_report.group_type == 'flora' || vm.occurrence_report.group_type == 'fauna') {
-                if (vm.occurrence_report.species_id == null || vm.occurrence_report.species_id == '') {
-                    blank_fields.push(' Scientific Name is missing')
+            let blank_fields = [];
+            if (
+                vm.occurrence_report.group_type == 'flora' ||
+                vm.occurrence_report.group_type == 'fauna'
+            ) {
+                if (
+                    vm.occurrence_report.species_id == null ||
+                    vm.occurrence_report.species_id == ''
+                ) {
+                    blank_fields.push(' Scientific Name is missing');
                 }
-            }
-            else {
-                if (vm.occurrence_report.community_id == null || vm.occurrence_report.community_id == '') {
-                    blank_fields.push(' Community Name is missing')
+            } else {
+                if (
+                    vm.occurrence_report.community_id == null ||
+                    vm.occurrence_report.community_id == ''
+                ) {
+                    blank_fields.push(' Community Name is missing');
                 }
             }
             if (check_action == 'submit') {
-                await vm.save_before_submit()
+                await vm.save_before_submit();
 
-                if (!vm.occurrence_report.submitter_information.submitter_category) {
-                    blank_fields.push(' Please select a submitter category')
+                if (
+                    !vm.occurrence_report.submitter_information
+                        .submitter_category
+                ) {
+                    blank_fields.push(' Please select a submitter category');
                 }
 
                 if (!vm.occurrence_report.observation_date) {
-                    blank_fields.push(' Please enter the observation date')
+                    blank_fields.push(' Please enter the observation date');
                 }
 
-                if (!vm.occurrence_report.number_of_observers || vm.occurrence_report.number_of_observers == 0) {
-                    blank_fields.push(' Please add the details for at least one observer')
+                if (
+                    !vm.occurrence_report.number_of_observers ||
+                    vm.occurrence_report.number_of_observers == 0
+                ) {
+                    blank_fields.push(
+                        ' Please add the details for at least one observer'
+                    );
                 }
 
-                if (!vm.occurrence_report.location || !vm.occurrence_report.location.location_description) {
-                    blank_fields.push(' Please enter the location description')
+                if (
+                    !vm.occurrence_report.location ||
+                    !vm.occurrence_report.location.location_description
+                ) {
+                    blank_fields.push(' Please enter the location description');
                 }
                 let ocr_geometry = vm.occurrence_report.ocr_geometry;
                 if (typeof ocr_geometry == 'string') {
-                    ocr_geometry = JSON.parse(ocr_geometry)
+                    ocr_geometry = JSON.parse(ocr_geometry);
                 }
-                if (!Array.isArray(ocr_geometry.features) || ocr_geometry.features.length == 0) {
-                    blank_fields.push(' Please add at least one location on the map')
+                if (
+                    !Array.isArray(ocr_geometry.features) ||
+                    ocr_geometry.features.length == 0
+                ) {
+                    blank_fields.push(
+                        ' Please add at least one location on the map'
+                    );
                 }
             }
             if (blank_fields.length == 0) {
                 return true;
-            }
-            else {
+            } else {
                 return blank_fields;
             }
         },
         submit: async function () {
             let vm = this;
 
-            var missing_data = await vm.can_submit("submit");
+            var missing_data = await vm.can_submit('submit');
             if (missing_data != true) {
                 swal.fire({
-                    title: "Please fix following errors before submitting",
+                    title: 'Please fix following errors before submitting',
                     text: missing_data,
                     icon: 'error',
                     customClass: {
                         confirmButton: 'btn btn-primary',
                     },
-                })
+                });
                 //vm.paySubmitting=false;
                 return false;
             }
 
             vm.submitOccurrenceReport = true;
             swal.fire({
-                title: "Submit Occurrece Report",
-                text: "Are you sure you want to submit this occurrence report?",
-                icon: "question",
+                title: 'Submit Occurrece Report',
+                text: 'Are you sure you want to submit this occurrence report?',
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "submit",
+                confirmButtonText: 'submit',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then(async (swalresult) => {
-                if (swalresult.isConfirmed) {
-                    let result = await vm.save_before_submit()
-                    if (!vm.saveError) {
-                        let payload = new Object();
-                        Object.assign(payload, vm.occurrence_report);
-                        fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, vm.occurrence_report.id + '/submit'), {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(payload),
-                        }).then(async (response) => {
-                            vm.occurrence = await response.json();
-                            vm.$router.push({
-                                name: 'internal-occurrence-dash'
-                            });
-                        }, err => {
-                            swal.fire({
-                                title: 'Submit Error',
-                                text: helpers.apiVueResourceError(err),
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
+            }).then(
+                async (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        await vm.save_before_submit();
+                        if (!vm.saveError) {
+                            let payload = new Object();
+                            Object.assign(payload, vm.occurrence_report);
+                            fetch(
+                                helpers.add_endpoint_json(
+                                    api_endpoints.occurrence_report,
+                                    vm.occurrence_report.id + '/submit'
+                                ),
+                                {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(payload),
+                                }
+                            ).then(
+                                async (response) => {
+                                    vm.occurrence = await response.json();
+                                    vm.$router.push({
+                                        name: 'internal-occurrence-dash',
+                                    });
                                 },
-                            });
-                            vm.submitOccurrenceReport = false;
-                        });
+                                (err) => {
+                                    swal.fire({
+                                        title: 'Submit Error',
+                                        text: helpers.apiVueResourceError(err),
+                                        icon: 'error',
+                                        customClass: {
+                                            confirmButton: 'btn btn-primary',
+                                        },
+                                    });
+                                    vm.submitOccurrenceReport = false;
+                                }
+                            );
+                        }
                     }
+                    vm.submitOccurrenceReport = false;
+                },
+                () => {
+                    vm.submitOccurrenceReport = false;
                 }
-                vm.submitOccurrenceReport = false;
-            }, (error) => {
-                vm.submitOccurrenceReport = false;
-            });
+            );
         },
         copyOccurrenceReport: function () {
             swal.fire({
-                title: "Copy Occurrence Report",
+                title: 'Copy Occurrence Report',
                 text: `Are you sure you want to make a copy of occurrence report ${this.occurrence_report.occurrence_report_number}?`,
-                icon: "question",
+                icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: "Copy Occurrence Report",
+                confirmButtonText: 'Copy Occurrence Report',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary me-2',
                 },
                 reverseButtons: true,
-            }).then((swalresult) => {
-                if (swalresult.isConfirmed) {
-                    fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, this.occurrence_report.id + '/copy'), {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    }).then(async (response) => {
-                        const ocr_copy = await response.json();
-                        swal.fire({
-                            title: 'Copied',
-                            text: `The occurrence report has been copied to ${ocr_copy.occurrence_report_number}. When you click OK, the new occurrence report will open in a new window.`,
-                            icon: 'success',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                            didClose: () => {
-                                const routeData = this.$router.resolve({
-                                    name: 'internal-occurrence-report-detail',
-                                    params: { occurrence_report_id: ocr_copy.id },
-                                    query: { action: 'edit' }
+            }).then(
+                (swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        fetch(
+                            helpers.add_endpoint_json(
+                                api_endpoints.occurrence_report,
+                                this.occurrence_report.id + '/copy'
+                            ),
+                            {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                            }
+                        ).then(
+                            async (response) => {
+                                const ocr_copy = await response.json();
+                                swal.fire({
+                                    title: 'Copied',
+                                    text: `The occurrence report has been copied to ${ocr_copy.occurrence_report_number}. When you click OK, the new occurrence report will open in a new window.`,
+                                    icon: 'success',
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                    },
+                                    didClose: () => {
+                                        const routeData = this.$router.resolve({
+                                            name: 'internal-occurrence-report-detail',
+                                            params: {
+                                                occurrence_report_id:
+                                                    ocr_copy.id,
+                                            },
+                                            query: { action: 'edit' },
+                                        });
+                                        window.open(routeData.href, '_blank');
+                                    },
                                 });
-                                window.open(routeData.href, '_blank');
+                            },
+                            (error) => {
+                                console.log(error);
                             }
-                        });
-                    }, (error) => {
-                        console.log(error);
-                    });
+                        );
+                    }
+                },
+                (error) => {
+                    console.log(error);
                 }
-            }, (error) => {
-                console.log(error);
-            });
+            );
         },
         refreshFromResponse: async function (response) {
             let vm = this;
@@ -1306,60 +1500,78 @@ export default {
         },
         sendReferral: function () {
             let vm = this;
-            let formData = new FormData(vm.form);
             vm.sendingReferral = true;
-            let data = { 'email': vm.selected_referral, 'text': vm.referral_text };
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/send_referral')), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-            }).then(async (response) => {
-                const data = await response.json();
-                vm.sendingReferral = false;
-                vm.original_occurrence_report = helpers.copyObject(data);
-                vm.occurrence_report = data;
-                swal.fire({
-                    title: 'Referral Sent',
-                    text: `The referral has been sent to ${vm.selected_referral}`,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-                $(vm.$refs.department_users).val(null).trigger("change");
-                vm.selected_referral = '';
-                vm.referral_text = '';
-            }, (error) => {
-                console.log(error);
-                swal.fire({
-                    title: 'Referral Error',
-                    text: helpers.apiVueResourceError(error),
-                    icon: 'error',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
+            let data = { email: vm.selected_referral, text: vm.referral_text };
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report.id + '/send_referral'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                });
-                vm.sendingReferral = false;
-            });
+                    body: JSON.stringify(data),
+                }
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.sendingReferral = false;
+                    vm.original_occurrence_report = helpers.copyObject(data);
+                    vm.occurrence_report = data;
+                    swal.fire({
+                        title: 'Referral Sent',
+                        text: `The referral has been sent to ${vm.selected_referral}`,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    $(vm.$refs.department_users).val(null).trigger('change');
+                    vm.selected_referral = '';
+                    vm.referral_text = '';
+                },
+                (error) => {
+                    console.log(error);
+                    swal.fire({
+                        title: 'Referral Error',
+                        text: helpers.apiVueResourceError(error),
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.sendingReferral = false;
+                }
+            );
         },
         remindReferral: function (r) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/remind')).then(async (response) => {
-                const data = await response.json();
-                vm.original_occurrence_report = helpers.copyObject(data);
-                vm.occurrence_report = data;
-                swal.fire({
-                    title: 'Referral Reminder',
-                    text: 'A reminder has been sent to ' + vm.department_users.find(d => d.id == r.referral.id).name,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.ocr_referrals,
+                    r.id + '/remind'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.original_occurrence_report = helpers.copyObject(data);
+                    vm.occurrence_report = data;
+                    swal.fire({
+                        title: 'Referral Reminder',
+                        text:
+                            'A reminder has been sent to ' +
+                            vm.department_users.find(
+                                (d) => d.id == r.referral.id
+                            ).name,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Referral Reminder Error',
                         text: helpers.apiVueResourceError(error),
@@ -1368,26 +1580,37 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         recallReferral: function (r) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/recall')).then(async (response) => {
-                const data = await response.json();
-                vm.original_occurrence_report = helpers.copyObject(data);
-                vm.occurrence_report = data;
-                $('.popover').hide();
-                vm.enablePopovers();
-                swal.fire({
-                    title: 'Referral Recall',
-                    text: 'The referral has been recalled from ' + vm.department_users.find(d => d.id == r.referral.id).name,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.ocr_referrals,
+                    r.id + '/recall'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.original_occurrence_report = helpers.copyObject(data);
+                    vm.occurrence_report = data;
+                    $('.popover').hide();
+                    vm.enablePopovers();
+                    swal.fire({
+                        title: 'Referral Recall',
+                        text:
+                            'The referral has been recalled from ' +
+                            vm.department_users.find(
+                                (d) => d.id == r.referral.id
+                            ).name,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Referral Recall Error',
                         text: helpers.apiVueResourceError(error),
@@ -1396,26 +1619,37 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         resendReferral: function (r) {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.ocr_referrals, r.id + '/resend')).then(async (response) => {
-                const data = await response.json();
-                vm.original_occurrence_report = helpers.copyObject(data);
-                vm.occurrence_report = data;
-                $('.popover').hide();
-                vm.enablePopovers();
-                swal.fire({
-                    title: 'Referral Resent',
-                    text: 'The referral has been resent to ' + vm.department_users.find(d => d.id == r.referral.id).name,
-                    icon: 'success',
-                    customClass: {
-                        confirmButton: 'btn btn-primary',
-                    },
-                });
-            },
-                error => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.ocr_referrals,
+                    r.id + '/resend'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
+                    vm.original_occurrence_report = helpers.copyObject(data);
+                    vm.occurrence_report = data;
+                    $('.popover').hide();
+                    vm.enablePopovers();
+                    swal.fire({
+                        title: 'Referral Resent',
+                        text:
+                            'The referral has been resent to ' +
+                            vm.department_users.find(
+                                (d) => d.id == r.referral.id
+                            ).name,
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                },
+                (error) => {
                     swal.fire({
                         title: 'Referral Resent Error',
                         text: helpers.apiVueResourceError(error),
@@ -1424,101 +1658,104 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         fetchDeparmentUsers: function () {
             let vm = this;
-            fetch(api_endpoints.department_users).then(async (response) => {
-                vm.department_users = await response.json();
-            }, (error) => {
-                console.log(error);
-            })
+            fetch(api_endpoints.department_users).then(
+                async (response) => {
+                    vm.department_users = await response.json();
+                },
+                (error) => {
+                    console.log(error);
+                }
+            );
         },
         initialiseReferreeSelect: function () {
             let vm = this;
-            $(vm.$refs.department_users).select2({
-                minimumInputLength: 2,
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Search for Referree",
-                ajax: {
-                    url: api_endpoints.users_api + '/get_referees/',
-                    dataType: 'json',
-                    data: function (params) {
-                        var query = {
-                            term: params.term,
-                            type: 'public',
-                        }
-                        return query;
-                    },
-                    processResults: function (data, params) {
-                        if (Object.keys(data.results).length == 0) {
-                            swal.fire({
-                                title: 'No Referee Found',
-                                text: 'Would you like to invite a new external referee to the system?',
-                                icon: 'warning',
-                                showCancelButton: true,
-                                reverseButtons: true,
-                                confirmButtonText: 'Yes',
-                                cancelButtonText: 'No',
-                                buttonsStyling: false,
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                    cancelButton: 'btn btn-secondary me-2',
-                                },
-                            }).then(async (result) => {
-                                if (result.isConfirmed) {
-                                    vm.external_referee_email =
-                                        params.term;
-                                    vm.$refs.inviteExternalReferee.isModalOpen = true;
-                                    $(vm.$refs.referees).select2(
-                                        'close'
-                                    );
-                                }
-                            });
-                        }
-                        return data;
+            $(vm.$refs.department_users)
+                .select2({
+                    minimumInputLength: 2,
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Search for Referree',
+                    ajax: {
+                        url: api_endpoints.users_api + '/get_referees/',
+                        dataType: 'json',
+                        data: function (params) {
+                            var query = {
+                                term: params.term,
+                                type: 'public',
+                            };
+                            return query;
+                        },
+                        processResults: function (data, params) {
+                            if (Object.keys(data.results).length == 0) {
+                                swal.fire({
+                                    title: 'No Referee Found',
+                                    text: 'Would you like to invite a new external referee to the system?',
+                                    icon: 'warning',
+                                    showCancelButton: true,
+                                    reverseButtons: true,
+                                    confirmButtonText: 'Yes',
+                                    cancelButtonText: 'No',
+                                    buttonsStyling: false,
+                                    customClass: {
+                                        confirmButton: 'btn btn-primary',
+                                        cancelButton: 'btn btn-secondary me-2',
+                                    },
+                                }).then(async (result) => {
+                                    if (result.isConfirmed) {
+                                        vm.external_referee_email = params.term;
+                                        vm.$refs.inviteExternalReferee.isModalOpen = true;
+                                        $(vm.$refs.referees).select2('close');
+                                    }
+                                });
+                            }
+                            return data;
+                        },
                     },
-                },
-            })
-                .on("select2:select", function (e) {
+                })
+                .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.selected_referral = data;
                     vm.$nextTick(() => {
                         vm.$refs.referral_text.focus();
                     });
                 })
-                .on("select2:unselect", function (e) {
-                    var selected = $(e.currentTarget);
+                .on('select2:unselect', function () {
                     vm.selected_referral = null;
-                })
+                });
         },
         externalRefereeInviteSent: function (response) {
             let vm = this;
             vm.refreshFromResponse(response);
-            $(vm.$refs.referees).val(null).trigger("change");
+            $(vm.$refs.referees).val(null).trigger('change');
             vm.enablePopovers();
             vm.selected_referral = '';
             vm.referral_text = '';
         },
         remindExternalReferee: function (external_referee_invite) {
-            let vm = this;
             fetch(
                 helpers.add_endpoint_join(
                     api_endpoints.ocr_external_referee_invites,
                     `/${external_referee_invite.id}/remind/`
-                ), {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
                 }
-            }).then((response) => {
-                swal.fire({
-                    title: 'Reminder Email Sent',
-                    text: `A reminder email was successfully sent to ${external_referee_invite.full_name} (${external_referee_invite.email}).`,
-                    icon: 'success',
-                });
-            })
+            )
+                .then(() => {
+                    swal.fire({
+                        title: 'Reminder Email Sent',
+                        text: `A reminder email was successfully sent to ${external_referee_invite.full_name} (${external_referee_invite.email}).`,
+                        icon: 'success',
+                    });
+                })
                 .catch((error) => {
                     console.error(`Error sending reminder. ${error}`);
                 });
@@ -1543,14 +1780,15 @@ export default {
                         helpers.add_endpoint_join(
                             api_endpoints.ocr_external_referee_invites,
                             `/${external_referee_invite.id}/retract/`
-                        ), {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    }
+                        ),
+                        {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                        }
                     )
-                        .then((response) => {
+                        .then(() => {
                             this.refreshOccurrenceReport();
                             swal.fire({
                                 title: 'External Referee Invite Retracted',
@@ -1573,34 +1811,36 @@ export default {
         initialiseAssignedOfficerSelect: function (reinit = false) {
             let vm = this;
             if (reinit) {
-                $(vm.$refs.assigned_officer).data('select2') ? $(vm.$refs.assigned_officer).select2('destroy') : '';
+                $(vm.$refs.assigned_officer).data('select2')
+                    ? $(vm.$refs.assigned_officer).select2('destroy')
+                    : '';
             }
             // Assigned officer select
-            $(vm.$refs.assigned_officer).select2({
-                "theme": "bootstrap-5",
-                allowClear: true,
-                placeholder: "Unassigned"
-            }).
-                on("select2:select", function (e) {
+            $(vm.$refs.assigned_officer)
+                .select2({
+                    theme: 'bootstrap-5',
+                    allowClear: true,
+                    placeholder: 'Unassigned',
+                })
+                .on('select2:select', function (e) {
                     var selected = $(e.currentTarget);
                     if (vm.with_approver) {
                         vm.occurrence_report.assigned_approver = selected.val();
-                    }
-                    else {
+                    } else {
                         vm.occurrence_report.assigned_officer = selected.val();
                     }
                     vm.assignTo();
-                }).on("select2:unselecting", function (e) {
+                })
+                .on('select2:unselecting', function () {
                     var self = $(this);
                     setTimeout(() => {
                         self.select2('close');
                     }, 0);
-                }).on("select2:unselect", function (e) {
-                    var selected = $(e.currentTarget);
+                })
+                .on('select2:unselect', function () {
                     if (vm.with_approver) {
                         vm.occurrence_report.assigned_approver = null;
-                    }
-                    else {
+                    } else {
                         vm.occurrence_report.assigned_officer = null;
                     }
                     vm.assignTo();
@@ -1609,11 +1849,14 @@ export default {
         updateAssignedOfficerSelect: function () {
             let vm = this;
             if (vm.with_approver) {
-                $(vm.$refs.assigned_officer).val(vm.occurrence_report.assigned_approver);
+                $(vm.$refs.assigned_officer).val(
+                    vm.occurrence_report.assigned_approver
+                );
                 $(vm.$refs.assigned_officer).trigger('change');
-            }
-            else {
-                $(vm.$refs.assigned_officer).val(vm.occurrence_report.assigned_officer);
+            } else {
+                $(vm.$refs.assigned_officer).val(
+                    vm.occurrence_report.assigned_officer
+                );
                 $(vm.$refs.assigned_officer).trigger('change');
             }
         },
@@ -1622,46 +1865,45 @@ export default {
             let unassign = true;
             let data = {};
             if (vm.with_approver) {
-                unassign = vm.occurrence_report.assigned_approver != null && vm.occurrence_report.assigned_approver != 'undefined' ? false : true;
-                data = { 'assessor_id': vm.occurrence_report.assigned_approver };
-            }
-            else {
-                unassign = vm.occurrence_report.assigned_officer != null && vm.occurrence_report.assigned_officer != 'undefined' ? false : true;
-                data = { 'assessor_id': vm.occurrence_report.assigned_officer };
+                unassign =
+                    vm.occurrence_report.assigned_approver != null &&
+                    vm.occurrence_report.assigned_approver != 'undefined'
+                        ? false
+                        : true;
+                data = { assessor_id: vm.occurrence_report.assigned_approver };
+            } else {
+                unassign =
+                    vm.occurrence_report.assigned_officer != null &&
+                    vm.occurrence_report.assigned_officer != 'undefined'
+                        ? false
+                        : true;
+                data = { assessor_id: vm.occurrence_report.assigned_officer };
             }
             if (!unassign) {
-                fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/assign_to')), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(data),
-                }).then(async (response) => {
-                    const data = await response.json();
-                    vm.occurrence_report = data;
-                    vm.original_occurrence_report = helpers.copyObject(data);
-                    vm.updateAssignedOfficerSelect();
-                }, (error) => {
-                    vm.occurrence_report = helpers.copyObject(vm.original_occurrence_report)
-                    vm.updateAssignedOfficerSelect();
-                    swal.fire({
-                        title: 'Application Error',
-                        text: helpers.apiVueResourceError(error),
-                        icon: 'error',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.occurrence_report,
+                        vm.occurrence_report.id + '/assign_to'
+                    ),
+                    {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
                         },
-                    });
-                });
-            }
-            else {
-                fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/unassign')))
-                    .then(async (response) => {
+                        body: JSON.stringify(data),
+                    }
+                ).then(
+                    async (response) => {
+                        const data = await response.json();
                         vm.occurrence_report = data;
-                        vm.original_occurrence_report = helpers.copyObject(data);
+                        vm.original_occurrence_report =
+                            helpers.copyObject(data);
                         vm.updateAssignedOfficerSelect();
-                    }, (error) => {
-                        vm.occurrence_report = helpers.copyObject(vm.original_occurrence_report)
+                    },
+                    (error) => {
+                        vm.occurrence_report = helpers.copyObject(
+                            vm.original_occurrence_report
+                        );
                         vm.updateAssignedOfficerSelect();
                         swal.fire({
                             title: 'Application Error',
@@ -1671,21 +1913,59 @@ export default {
                                 confirmButton: 'btn btn-primary',
                             },
                         });
-                    });
+                    }
+                );
+            } else {
+                fetch(
+                    helpers.add_endpoint_json(
+                        api_endpoints.occurrence_report,
+                        vm.occurrence_report.id + '/unassign'
+                    )
+                ).then(
+                    async () => {
+                        vm.occurrence_report = data;
+                        vm.original_occurrence_report =
+                            helpers.copyObject(data);
+                        vm.updateAssignedOfficerSelect();
+                    },
+                    (error) => {
+                        vm.occurrence_report = helpers.copyObject(
+                            vm.original_occurrence_report
+                        );
+                        vm.updateAssignedOfficerSelect();
+                        swal.fire({
+                            title: 'Application Error',
+                            text: helpers.apiVueResourceError(error),
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                    }
+                );
             }
         },
         assignRequestUser: function () {
             let vm = this;
-            fetch(helpers.add_endpoint_json(api_endpoints.occurrence_report, (vm.occurrence_report.id + '/assign_request_user')))
-                .then(async (response) => {
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report.id + '/assign_request_user'
+                )
+            ).then(
+                async (response) => {
+                    const data = await response.json();
                     vm.occurrence_report = data;
                     vm.original_occurrence_report = helpers.copyObject(data);
                     vm.updateAssignedOfficerSelect();
                     vm.$nextTick(() => {
                         vm.initialiseReferreeSelect();
                     });
-                }, (error) => {
-                    vm.occurrence_report = helpers.copyObject(vm.original_occurrence_report)
+                },
+                (error) => {
+                    vm.occurrence_report = helpers.copyObject(
+                        vm.original_occurrence_report
+                    );
                     vm.updateAssignedOfficerSelect();
                     swal.fire({
                         title: 'Application Error',
@@ -1695,7 +1975,8 @@ export default {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                });
+                }
+            );
         },
         proposeDecline: function () {
             this.save_before_submit();
@@ -1710,18 +1991,20 @@ export default {
                 $(function () {
                     $('[data-bs-toggle="popover"]').each(function () {
                         new bootstrap.Popover(this);
-                    })
-                })
+                    });
+                });
             });
         },
         fetchOccurrenceReport: function (id) {
             let vm = this;
-            fetch(`/api/occurrence_report/${id}/`).then(async (response) => {
-                vm.occurrence_report = await response.json();
-            },
-                err => {
+            fetch(`/api/occurrence_report/${id}/`).then(
+                async (response) => {
+                    vm.occurrence_report = await response.json();
+                },
+                (err) => {
                     console.log(err);
-                });
+                }
+            );
         },
         refreshOccurrenceReport: function () {
             this.fetchOccurrenceReport(this.$route.params.occurrence_report_id);
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
index b3885a08..f74f1de4 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
@@ -254,7 +254,7 @@ export default {
                 drawCallback: function () {
                     helpers.enablePopovers();
                 },
-                initComplete: function (settings, json) {
+                initComplete: function () {
                     helpers.enablePopovers();
                     // another option to fix the responsive table overflow css on tab switch
                     setTimeout(function () {
@@ -291,7 +291,6 @@ export default {
             this.$refs.site_detail.isModalOpen = true;
         },
         editSite: function (id) {
-            let vm = this;
             this.$refs.site_detail.site_id = id;
             this.$refs.site_detail.site_action = 'edit';
             fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(
@@ -305,7 +304,6 @@ export default {
             this.$refs.site_detail.isModalOpen = true;
         },
         viewSite: function (id) {
-            let vm = this;
             this.$refs.site_detail.site_id = id;
             this.$refs.site_detail.site_action = 'view';
             fetch(helpers.add_endpoint_json(api_endpoints.occ_site, id)).then(
@@ -350,7 +348,7 @@ export default {
                                 },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The Site has been discarded',
@@ -358,7 +356,7 @@ export default {
                                     customClass: {
                                         confirmButton: 'btn btn-primary',
                                     },
-                                }).then((result) => {
+                                }).then(() => {
                                     vm.updatedSites();
                                 });
                             },
@@ -368,7 +366,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         reinstateSite: function (id) {
@@ -385,7 +383,7 @@ export default {
                     },
                 }
             ).then(
-                (response) => {
+                () => {
                     swal.fire({
                         title: 'Reinstated',
                         text: 'The Site has been reinstated',
@@ -393,7 +391,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((result) => {
+                    }).then(() => {
                         vm.updatedSites();
                     });
                 },
@@ -466,7 +464,7 @@ export default {
             );
             vm.$refs.occurrence_site_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue
index 705632e2..f2f88a6f 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_datatable.vue
@@ -501,7 +501,7 @@ export default {
             );
             vm.$refs.occurrence_tenure_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
index 966850aa..b9fc257c 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_approve.vue
@@ -179,7 +179,7 @@ export default {
                             body: JSON.stringify(vm.approve),
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Occurrence Report Successfully Approved',
                                 text: `Occurrence Report: ${vm.occurrence_report_number} has been successfully approved.`,
@@ -241,13 +241,13 @@ export default {
                     vm.approve.occurrence_id = e.params.data.id;
                     vm.approve.occurrence_name = e.params.data.text;
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occurrence_name_lookup_approve-results"]'
                     );
                     searchField[0].focus();
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.approve.occurrence_id = null;
                     vm.approve.occurrence_name = null;
                 });
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue
index 6034062a..97e747ac 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_conservation_threat_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -353,7 +353,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
index 92f767a5..b06e7f09 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_decline.vue
@@ -75,7 +75,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -148,7 +147,7 @@ export default {
                             body: JSON.stringify(vm.decline),
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Occurrence Report Successfully Declined',
                                 text: `Occurrence Report ${vm.occurrence_report_number} has been successfully declined. The proponent has been notified via email.`,
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue
index 1e592400..0c53baf2 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_document_history.vue
@@ -54,7 +54,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -429,7 +429,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue
index fc73a0c5..faa6bde4 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_observer_detail_history.vue
@@ -46,7 +46,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -378,7 +378,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
index 9af5aa65..36701ea9 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
@@ -324,7 +324,7 @@ export default {
                             body: JSON.stringify(vm.propose_approve),
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Proposal to Approve Successful',
                                 text: `Your proposal to approve occurrence report ${vm.occurrence_report_number} has been successfully submitted.`,
@@ -332,7 +332,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then((result) => {
+                            }).then(() => {
                                 vm.$router.go();
                             });
                         },
@@ -391,13 +391,13 @@ export default {
                     vm.propose_approve.occurrence_id = e.params.data.id;
                     vm.propose_approve.occurrence_name = e.params.data.text;
                 })
-                .on('select2:open', function (e) {
+                .on('select2:open', function () {
                     const searchField = $(
                         '[aria-controls="select2-occurrence_name_lookup_propose_approve-results"]'
                     );
                     searchField[0].focus();
                 })
-                .on('select2:unselect', function (e) {
+                .on('select2:unselect', function () {
                     vm.propose_approve.occurrence_id = null;
                     vm.propose_approve.occurrence_name = null;
                 });
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
index 12473ec8..c8c4cf26 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_decline.vue
@@ -71,7 +71,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -142,7 +141,7 @@ export default {
                             body: JSON.stringify(vm.propose_decline),
                         }
                     ).then(
-                        (response) => {
+                        () => {
                             swal.fire({
                                 title: 'Proposal to Decline Successful',
                                 text: `Your proposal to decline occurrence report ${vm.occurrence_report_number} has been successfully submitted.`,
@@ -150,7 +149,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then((result) => {
+                            }).then(() => {
                                 vm.$router.go();
                             });
                         },
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
index 1da96bb3..e4aacb52 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/referral.vue
@@ -181,7 +181,7 @@ export default {
                 to.params.referral_id
             )
         ).then(
-            async (reponse) => {
+            async (response) => {
                 const data = await response.json();
                 next(async (vm) => {
                     vm.referral = data;
@@ -264,7 +264,7 @@ export default {
                 },
                 body: JSON.stringify(payload),
             }).then(
-                async (response) => {
+                async () => {
                     swal.fire({
                         title: 'Saved',
                         text: 'Your changes have been saved',
@@ -279,7 +279,7 @@ export default {
                         ocr_location.incrementComponentMapKey();
                     });
                 },
-                (err) => {
+                () => {
                     vm.savingOccurrenceReport = false;
                     component_map.setLoadingMap(false);
                 }
@@ -329,7 +329,7 @@ export default {
                             },
                             body: JSON.stringify(payload),
                         }).then(
-                            async (response) => {
+                            async () => {
                                 fetch(
                                     helpers.add_endpoint_json(
                                         api_endpoints.ocr_referrals,
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue
index 2a360871..279cc744 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -366,7 +366,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue
index c136e2ec..94b376f6 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/species_occurrence_report_history.vue
@@ -51,7 +51,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -458,7 +458,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
index 998de272..b2ce44b1 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
@@ -64,12 +64,10 @@
 </template>
 
 <script>
-//import $ from 'jquery'
-
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 
-import { helpers, api_endpoints } from '@/utils/hooks.js';
+import { helpers } from '@/utils/hooks.js';
 export default {
     name: 'AmendmentRequest',
     components: {
@@ -164,8 +162,7 @@ export default {
                 },
                 body: JSON.stringify(amendment),
             }).then(
-                (response) => {
-                    //vm.$parent.loading.splice('processing contact',1);
+                () => {
                     swal(
                         'Sent',
                         'An email has been sent to proponent with the request to amend this Proposal',
@@ -173,7 +170,6 @@ export default {
                     );
                     vm.amendingProposal = true;
                     vm.close();
-                    //vm.$emit('refreshFromResponse',response);
                     fetch(
                         `/api/proposal/${vm.proposal_id}/internal_proposal.json`
                     ).then(
@@ -200,7 +196,7 @@ export default {
         },
         formatText: function (text) {
             let s = text.replace(/\n/g, '<br/>');
-            s = s.replace(/[\u2018|\u2019|\u201A]/g, "\'");
+            s = s.replace(/[\u2018|\u2019|\u201A]/g, "'");
             // smart double quotes
             s = s.replace(/[\u201C|\u201D|\u201E]/g, '"');
             // ellipsis
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue
index 3e19738f..9d3ca9c6 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/community_document_history.vue
@@ -54,7 +54,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -418,7 +418,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue
index 6aa931ad..08215ade 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/community_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -380,7 +380,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
index e877c339..365ad987 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/community_rename.vue
@@ -60,7 +60,9 @@
                 </div>
                 <div class="row">
                     <FormSection
-v-if="new_community" :form-collapse="false" label="New Community Taxonomy Information"
+                        v-if="new_community"
+                        :form-collapse="false"
+                        label="New Community Taxonomy Information"
                         Index="new-community"
                     >
                         <form
@@ -106,8 +108,16 @@ v-if="new_community" :form-collapse="false" label="New Community Taxonomy Inform
                                 >
                                 <div class="col-sm-6">
                                     <textarea
-id="community_name" ref="community_name" v-model="new_community.taxonomy_details.community_name" class="form-control"
-                                        rows="1" placeholder="" />
+                                        id="community_name"
+                                        ref="community_name"
+                                        v-model="
+                                            new_community.taxonomy_details
+                                                .community_name
+                                        "
+                                        class="form-control"
+                                        rows="1"
+                                        placeholder=""
+                                    />
                                 </div>
                             </div>
                             <div class="row mb-3">
@@ -119,10 +129,16 @@ id="community_name" ref="community_name" v-model="new_community.taxonomy_details
                                 >
                                 <div class="col-sm-6">
                                     <input
-id="community_migrated_id" ref="community_migrated_id" v-model="new_community.taxonomy_details.community_migrated_id"
+                                        id="community_migrated_id"
+                                        ref="community_migrated_id"
+                                        v-model="
+                                            new_community.taxonomy_details
+                                                .community_migrated_id
+                                        "
                                         type="text"
                                         class="form-control"
-                                        placeholder="" />
+                                        placeholder=""
+                                    />
                                 </div>
                             </div>
                             <div class="row mb-3">
@@ -131,12 +147,23 @@ id="community_migrated_id" ref="community_migrated_id" v-model="new_community.ta
                                 >
                                 <div class="col-sm-6">
                                     <textarea
-id="community_description" v-model="new_community.taxonomy_details.community_description" class="form-control" rows="2"
-                                        placeholder="" />
+                                        id="community_description"
+                                        v-model="
+                                            new_community.taxonomy_details
+                                                .community_description
+                                        "
+                                        class="form-control"
+                                        rows="2"
+                                        placeholder=""
+                                    />
                                 </div>
                                 <div class="col-sm-3">
                                     <button
-v-if="species_community_original.taxonomy_details.community_description"
+                                        v-if="
+                                            species_community_original
+                                                .taxonomy_details
+                                                .community_description
+                                        "
                                         class="btn btn-primary w-100"
                                         @click.prevent="
                                             new_community.taxonomy_details.community_description =
@@ -156,12 +183,21 @@ v-if="species_community_original.taxonomy_details.community_description"
                                 >
                                 <div class="col-sm-6">
                                     <textarea
-id="community_previous_name" v-model="new_community.taxonomy_details.previous_name" class="form-control"
-                                        placeholder="" />
+                                        id="community_previous_name"
+                                        v-model="
+                                            new_community.taxonomy_details
+                                                .previous_name
+                                        "
+                                        class="form-control"
+                                        placeholder=""
+                                    />
                                 </div>
                                 <div class="col-sm-3">
                                     <button
-v-if="species_community_original.taxonomy_details.previous_name"
+                                        v-if="
+                                            species_community_original
+                                                .taxonomy_details.previous_name
+                                        "
                                         class="btn btn-primary w-100"
                                         @click.prevent="
                                             new_community.taxonomy_details.previous_name =
@@ -181,12 +217,22 @@ v-if="species_community_original.taxonomy_details.previous_name"
                                 >
                                 <div class="col-sm-6">
                                     <textarea
-id="name_authority" v-model="new_community.taxonomy_details.name_authority" rows="1" class="form-control"
-                                        placeholder="" />
+                                        id="name_authority"
+                                        v-model="
+                                            new_community.taxonomy_details
+                                                .name_authority
+                                        "
+                                        rows="1"
+                                        class="form-control"
+                                        placeholder=""
+                                    />
                                 </div>
                                 <div class="col-sm-3">
                                     <button
-v-if="species_community_original.taxonomy_details.name_authority"
+                                        v-if="
+                                            species_community_original
+                                                .taxonomy_details.name_authority
+                                        "
                                         class="btn btn-primary w-100"
                                         @click.prevent="
                                             new_community.taxonomy_details.name_authority =
@@ -206,12 +252,21 @@ v-if="species_community_original.taxonomy_details.name_authority"
                                 >
                                 <div class="col-sm-6">
                                     <textarea
-id="community_comment" v-model="new_community.taxonomy_details.name_comments" class="form-control"
-                                        placeholder="" />
+                                        id="community_comment"
+                                        v-model="
+                                            new_community.taxonomy_details
+                                                .name_comments
+                                        "
+                                        class="form-control"
+                                        placeholder=""
+                                    />
                                 </div>
                                 <div class="col-sm-3">
                                     <button
-v-if="species_community_original.taxonomy_details.name_comments"
+                                        v-if="
+                                            species_community_original
+                                                .taxonomy_details.name_comments
+                                        "
                                         class="btn btn-primary w-100"
                                         @click.prevent="
                                             new_community.taxonomy_details.name_comments =
@@ -230,8 +285,13 @@ v-if="species_community_original.taxonomy_details.name_comments"
                                 <div class="col-sm-9">
                                     <button
                                         class="btn btn-primary float-end mt-2"
-                                        :disabled="!new_community.taxonomy_details.community_name || !new_community.taxonomy_details.community_migrated_id"
-                                        @click.prevent="finaliseRenameCommunity"><i
+                                        :disabled="
+                                            !new_community.taxonomy_details
+                                                .community_name ||
+                                            !new_community.taxonomy_details
+                                                .community_migrated_id
+                                        "
+                                        @click.prevent="finaliseRenameCommunity"
                                     >
                                         <i class="bi bi-check2-circle"></i>
                                         Finalise Rename Community<template
@@ -259,11 +319,15 @@ v-if="species_community_original.taxonomy_details.name_comments"
                         <div>
                             <div class="col-md-12">
                                 <FormSpeciesCommunities
-v-if="species_community_original" id="rename_community"
+                                    v-if="species_community_original"
+                                    id="rename_community"
                                     ref="rename_community"
                                     :species_community_original="
                                         species_community_original
-                                    " :species_community="species_community_original"
+                                    "
+                                    :species_community="
+                                        species_community_original
+                                    "
                                     :is_internal="true"
                                     :is_readonly="true"
                                     :rename_species="true"
@@ -277,10 +341,16 @@ v-if="species_community_original" id="rename_community"
                 </div>
             </div>
             <template #footer>
-<div >
-                <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
-            </div>
-</template>
+                <div>
+                    <button
+                        type="button"
+                        class="btn btn-secondary"
+                        @click="close"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </template>
         </modal>
     </div>
 </template>
@@ -330,13 +400,17 @@ export default {
         isModalOpen: function (val) {
             if (val) {
                 this.$nextTick(() => {
-                    this.new_community = structuredClone(this.species_community_original);
+                    this.new_community = structuredClone(
+                        this.species_community_original
+                    );
                     this.new_community.id = null;
                     this.new_community.community_number = '';
                     this.new_community.taxonomy_details.community_id = null;
                     this.new_community.taxonomy_details.community_name = null;
-                    this.new_community.taxonomy_details.community_migrated_id = null;
-                    this.new_community.taxonomy_details.previous_name = this.species_community_original.taxonomy_details.community_name;
+                    this.new_community.taxonomy_details.community_migrated_id =
+                        null;
+                    this.new_community.taxonomy_details.previous_name =
+                        this.species_community_original.taxonomy_details.community_name;
                     this.$nextTick(() => {
                         this.$refs.community_name.focus();
                     });
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue
index d9f336ec..a193b829 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/conservation_threat_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -350,7 +350,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue b/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
index a223c08a..2d72fd81 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/dashboard.vue
@@ -156,6 +156,7 @@ export default {
         this.fetchProfile();
     },
     mounted: function () {
+        // eslint-disable-next-line no-undef
         chevron_toggle.init();
     },
     methods: {
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
index f20f17ec..4a71ce31 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
@@ -212,7 +212,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             updatingPublishing: false,
             isModalOpen: false,
@@ -305,7 +304,7 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then((swalresult) => {
+                    }).then(() => {
                         vm.close();
                     });
                 },
@@ -385,7 +384,6 @@ export default {
             this.close();
         },
         close: function () {
-            let vm = this;
             this.isModalOpen = false;
             this.errors = false;
         },
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
index 261ddfe2..13d1a9d1 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
@@ -348,7 +348,7 @@ export default {
         },
         combine_into_species_scientific_name: function () {
             return this.new_combine_species.scientific_name
-                ? vm.new_combine_species.scientific_name
+                ? this.new_combine_species.scientific_name
                 : '';
         },
     },
@@ -409,7 +409,7 @@ export default {
                     body: JSON.stringify(payload),
                 }
             ).then(
-                async (response) => {
+                async () => {
                     return true;
                 },
                 (err) => {
@@ -508,8 +508,7 @@ export default {
                             //---save and submit the new combine species
                             let new_species = vm.new_combine_species;
                             //-- save new species before submit
-                            let result =
-                                await vm.save_before_submit(new_species);
+                            await vm.save_before_submit(new_species);
                             if (!vm.saveError) {
                                 vm.finalise_combine_loading = true;
 
@@ -564,7 +563,6 @@ export default {
                 });
         },
         removeSpecies: function (species_id) {
-            let vm = this;
             try {
                 // In this case we are allowing a http DELETE call to remove the species
                 fetch(api_endpoints.remove_species_proposal(species_id), {
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index f26812bb..5e6e8716 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -841,11 +841,9 @@ export default {
                 vm.uploadingImage = true;
                 let data = new FormData();
                 data.append('speciesCommunitiesImage', imageFile);
-
+                var api_url = api_endpoints.species;
                 if (this.species_community.group_type == 'community') {
-                    var api_url = api_endpoints.community;
-                } else {
-                    var api_url = api_endpoints.species;
+                    api_url = api_endpoints.community;
                 }
                 fetch(
                     helpers.add_endpoint_json(
@@ -894,7 +892,6 @@ export default {
             this.$refs.reinstateImage.isModalOpen = true;
         },
         reopen: async function () {
-            let vm = this;
             swal.fire({
                 title: 'Reopen',
                 text: 'Are you sure you want to reopen this record?',
@@ -922,7 +919,7 @@ export default {
                             },
                         }
                     ).then(
-                        async (response) => {
+                        async () => {
                             swal.fire({
                                 title: 'Reopened',
                                 text: 'Record has been reopened',
@@ -930,7 +927,7 @@ export default {
                                 customClass: {
                                     confirmButton: 'btn btn-primary',
                                 },
-                            }).then(async (swalresult) => {
+                            }).then(async () => {
                                 this.$router.go(this.$router.currentRoute);
                             });
                         },
@@ -950,11 +947,9 @@ export default {
             });
         },
         reinstateImage: function (image) {
-            let vm = this;
+            var api_url = api_endpoints.species;
             if (this.species_community.group_type == 'community') {
-                var api_url = api_endpoints.community;
-            } else {
-                var api_url = api_endpoints.species;
+                api_url = api_endpoints.community;
             }
             fetch(
                 helpers.add_endpoint_json(
@@ -1008,10 +1003,9 @@ export default {
         },
         discardImage: async function () {
             let vm = this;
+            var api_url = api_endpoints.species;
             if (this.species_community.group_type == 'community') {
-                var api_url = api_endpoints.community;
-            } else {
-                var api_url = api_endpoints.species;
+                api_url = api_endpoints.community;
             }
 
             if (vm.speciesCommunitiesImage == null) {
@@ -1096,7 +1090,7 @@ export default {
                                 },
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 swal.fire({
                                     title: 'Discarded',
                                     text: 'The proposal has been discarded',
@@ -1115,7 +1109,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         save: async function () {
@@ -1183,7 +1177,7 @@ export default {
                 }
             );
         },
-        save_exit: async function (e) {
+        save_exit: async function () {
             let vm = this;
             var missing_data = vm.can_submit('');
             if (missing_data != true) {
@@ -1209,7 +1203,7 @@ export default {
                 }
             });
         },
-        save_before_submit: async function (e) {
+        save_before_submit: async function () {
             //console.log('save before submit');
             let vm = this;
             vm.saveError = false;
@@ -1228,7 +1222,7 @@ export default {
                     'Content-Type': 'application/json',
                 },
             }).then(
-                async (response) => {
+                async () => {
                     //return true;
                 },
                 (err) => {
@@ -1356,7 +1350,7 @@ export default {
                 .then(
                     async (swalresult) => {
                         if (swalresult.isConfirmed) {
-                            let result = await vm.save_before_submit();
+                            await vm.save_before_submit();
                             if (!vm.saveError) {
                                 let payload = new Object();
                                 Object.assign(payload, vm.species_community);
@@ -1425,16 +1419,15 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(
-                async (response) => {},
-                (err) => {}
-            );
+            });
         },
         refreshFromResponse: async function (response) {
             let vm = this;
             const data = await response.json();
             vm.species_community = helpers.copyObject(data);
-            vm.species_community_original = copyObject(vm.species_community);
+            vm.species_community_original = helpers.copyObject(
+                vm.species_community
+            );
         },
         refreshSpeciesCommunity: function () {
             let vm = this;
@@ -1678,7 +1671,7 @@ export default {
                 }
             );
         },
-        onImageLoad: function (e) {
+        onImageLoad: function () {
             this.downloadingImage = false;
         },
     },
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue
index ad45abfd..dee66b7c 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_document_history.vue
@@ -54,7 +54,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -418,7 +418,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue
index 58d3c358..1a5fc889 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_history.vue
@@ -48,7 +48,7 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints, constants, utils } from '@/utils/hooks.js';
+import { helpers, api_endpoints, constants } from '@/utils/hooks.js';
 import datatable from '@/utils/vue/datatable.vue';
 import DisplayHistory from '../../common/display_history.vue';
 import { v4 as uuid } from 'uuid';
@@ -462,7 +462,7 @@ export default {
             );
             vm.$refs.history_datatable.vmDataTable.on(
                 'childRow.dt',
-                function (e, settings) {
+                function () {
                     helpers.enablePopovers();
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
index 3b13b5a7..15c3e2cc 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
@@ -148,7 +148,6 @@ export default {
             this.errors = false;
         },
         removeSpecies: function (species_id) {
-            let vm = this;
             try {
                 // In this case we are allowing a http DELETE call to remove the species
                 fetch(api_endpoints.remove_species_proposal(species_id), {
@@ -179,7 +178,7 @@ export default {
                     body: JSON.stringify(payload),
                 }
             ).then(
-                async (response) => {
+                async () => {
                     return true;
                 },
                 (err) => {
@@ -245,8 +244,7 @@ export default {
                             //---save and submit the new rename species
                             let new_species = vm.new_rename_species;
                             //-- save new species before submit
-                            let result =
-                                await vm.save_before_submit(new_species);
+                            await vm.save_before_submit(new_species);
                             if (!vm.saveError) {
                                 // add the parent species to the new species object
                                 new_species.parent_species =
@@ -290,7 +288,7 @@ export default {
                         }
                         vm.submitSpeciesRename = false;
                     },
-                    (error) => {
+                    () => {
                         vm.submitSpeciesRename = false;
                     }
                 );
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
index db821a0d..f138b78a 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
@@ -393,7 +393,7 @@ export default {
                     body: JSON.stringify(payload),
                 }
             ).then(
-                async (response) => {
+                async () => {
                     return true;
                 },
                 (err) => {
@@ -556,7 +556,7 @@ export default {
                         vm.submitSpeciesSplit = false;
                     }
                 },
-                (error) => {
+                () => {
                     vm.submitSpeciesSplit = false;
                 }
             );
@@ -595,8 +595,6 @@ export default {
             );
         },
         removeSpecies: function (species_id) {
-            let vm = this;
-
             try {
                 // In this case we are allowing a http DELETE call to remove the species
                 fetch(api_endpoints.remove_species_proposal(species_id), {
diff --git a/boranga/frontend/boranga/src/components/internal/users/manage.vue b/boranga/frontend/boranga/src/components/internal/users/manage.vue
index 3e38228c..7b78ba95 100644
--- a/boranga/frontend/boranga/src/components/internal/users/manage.vue
+++ b/boranga/frontend/boranga/src/components/internal/users/manage.vue
@@ -659,7 +659,6 @@ export default {
         },
     },
     mounted: function () {
-        let vm = this;
         this.personal_form = document.forms.personal_form;
     },
     methods: {
@@ -669,10 +668,6 @@ export default {
             if (vm.user.residential_address == null) {
                 vm.user.residential_address = {};
             }
-            let params = '?';
-            params += '&first_name=' + vm.user.first_name;
-            params += '&last_name=' + vm.user.last_name;
-            //params += '&dob=' + vm.user.dob;
             if (vm.user.first_name == '' || vm.user.last_name == '') {
                 let error_msg = 'Please ensure all fields are filled in.';
                 swal({
@@ -699,7 +694,7 @@ export default {
                     body: JSON.stringify(vm.user),
                 }
             ).then(
-                (response) => {
+                () => {
                     swal({
                         title: 'Update Personal Details',
                         html: 'User personal details has been successfully updated.',
@@ -844,7 +839,7 @@ export default {
                                 body: JSON.stringify({ user_id: vm.user.id }),
                             }
                         ).then(
-                            (response) => {
+                            () => {
                                 fetch(
                                     helpers.add_endpoint_json(
                                         api_endpoints.users,
@@ -875,10 +870,10 @@ export default {
                                             'success'
                                         );
                                     },
-                                    (error) => {}
+                                    () => {}
                                 );
                             },
-                            (error) => {
+                            () => {
                                 swal(
                                     'Unlink',
                                     'There was an error unlinking the user from ' +
@@ -890,7 +885,7 @@ export default {
                         );
                     }
                 },
-                (error) => {}
+                () => {}
             );
         },
         readFileID: function () {
@@ -935,7 +930,7 @@ export default {
                         body: data,
                     }
                 ).then(
-                    (response) => {
+                    () => {
                         vm.uploadingID = false;
                         vm.uploadedID = null;
                         swal({
diff --git a/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js b/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js
index ad9b56f6..ce195425 100755
--- a/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js
+++ b/boranga/frontend/boranga/src/utils/responsive_datatable_helper.js
@@ -203,7 +203,7 @@ ResponsiveDatatablesHelper.prototype.initBreakpoints = function () {
         // Copy the sorted breakpoint array into the breakpoints object using the
         // name as the key.
         this.breakpoints = {};
-        var i, l;
+        var l;
         for (i = 0, l = breakpointsSorted.length; i < l; i++) {
             this.breakpoints[breakpointsSorted[i].name] = breakpointsSorted[i];
         }
@@ -239,13 +239,13 @@ ResponsiveDatatablesHelper.prototype.initBreakpoints = function () {
             var dataHide = col.attr('data-hide');
             if (dataHide !== undefined) {
                 var splitBreakingPoints = dataHide.split(/,\s*/);
-                for (var i = 0; i < splitBreakingPoints.length; i++) {
+                for (i = 0; i < splitBreakingPoints.length; i++) {
                     var bp = splitBreakingPoints[i];
                     if (bp === 'always') {
                         // A column with an 'always' breakpoint is always hidden.
                         // Loop through all breakpoints and add it to each except the
                         // default breakpoint.
-                        for (var prop in this.breakpoints) {
+                        for (prop in this.breakpoints) {
                             if (this.breakpoints[prop].name !== 'default') {
                                 this.breakpoints[prop].columnsToHide.push(
                                     this.columnIndexes[index]
@@ -374,7 +374,7 @@ ResponsiveDatatablesHelper.prototype.respond = function () {
         });
     } else {
         this.tableElement.removeClass('has-columns-hidden');
-        $('tr.row-detail', this.tableElement).each(function (event) {
+        $('tr.row-detail', this.tableElement).each(function () {
             ResponsiveDatatablesHelper.prototype.hideRowDetail(
                 that,
                 $(this).prev()
@@ -394,7 +394,7 @@ ResponsiveDatatablesHelper.prototype.showHideColumns = function () {
     }
 
     // Hide columns that may have been previously shown.
-    for (var i = 0, l = this.columnsHiddenIndexes.length; i < l; i++) {
+    for (i = 0, l = this.columnsHiddenIndexes.length; i < l; i++) {
         this.api.column(this.columnsHiddenIndexes[i]).visible(false);
     }
 
@@ -711,7 +711,6 @@ ResponsiveDatatablesHelper.prototype.setState = function () {
         ).length;
 
         if (d1 + d2 > 0) {
-            var tt;
             var value = {
                 columnIndexes: this.columnIndexes, // array
                 columnsHiddenIndexes: this.columnsHiddenIndexes, // array
diff --git a/boranga/frontend/boranga/src/utils/vue/datatable.vue b/boranga/frontend/boranga/src/utils/vue/datatable.vue
index 695add05..372e0b72 100755
--- a/boranga/frontend/boranga/src/utils/vue/datatable.vue
+++ b/boranga/frontend/boranga/src/utils/vue/datatable.vue
@@ -53,15 +53,9 @@ export default {
     methods: {
         initEvents: function () {
             let vm = this;
-            var responsiveHelper;
-            var breakpointDefinition = {
-                //bootstrap grid values
-                tablet: 992,
-                phone: 768,
-            };
             var options = Object.assign(vm.dtOptions);
             vm.vmDataTable = $(vm.table).DataTable(options);
-            $(vm.table).resize(function (e) {
+            $(vm.table).resize(function () {
                 vm.vmDataTable.draw(true);
             });
         },

From dc7c85a7b47296604fbaeab073aa8668b42fbc99 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 11 Dec 2024 17:10:09 +0800
Subject: [PATCH 055/138] Resolve invalid syntax.

---
 .../components/internal/occurrence/bulk_import_schema_list.vue   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
index 183657d3..030e812c 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema_list.vue
@@ -113,7 +113,6 @@
                                             )"
                                             :key="tag"
                                             class="badge bg-info fs-6 me-2"
-                                            >{{ tag
                                             >{{ tag }}</span
                                         >
                                         <span

From b99931ba25015ad1455466aa4ef016f163e2173f Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 10:11:16 +0800
Subject: [PATCH 056/138] Remove unused component.

---
 .../species_communities/related_items.vue     | 110 ------------------
 1 file changed, 110 deletions(-)
 delete mode 100644 boranga/frontend/boranga/src/components/common/species_communities/related_items.vue

diff --git a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue b/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
deleted file mode 100644
index 037e8f60..00000000
--- a/boranga/frontend/boranga/src/components/common/species_communities/related_items.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template lang="html">
-    <div id="userInfo" class="row">
-        <div class="col-sm-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">
-                        Related Items <small></small>
-                        <a
-                            class="panelClicker"
-                            :href="'#' + lBody"
-                            data-toggle="collapse"
-                            data-parent="#userInfo"
-                            expanded="true"
-                            :aria-controls="lBody"
-                        >
-                            <span
-                                class="glyphicon glyphicon-chevron-up pull-right"
-                            ></span>
-                        </a>
-                    </h3>
-                </div>
-                <div :id="lBody" class="panel-body collapse in">
-                    <div class="">
-                        <div class="form-horizontal col-sm-12 borderDecoration">
-                            <div class="form-group">
-                                <div class="row">
-                                    <div class="col-sm-3">
-                                        <label
-                                            class="control-label pull-left"
-                                            for="Name"
-                                            >Some related items data</label
-                                        >
-                                    </div>
-                                    <div
-                                        class="col-sm-9"
-                                        style="
-                                            margin-bottom: 5px;
-                                            width: 53% !important;
-                                        "
-                                    >
-                                        <input
-                                            type="text"
-                                            class="form-control"
-                                            name="Some species data"
-                                            placeholder=""
-                                            :disabled="
-                                                species_community.readonly
-                                            "
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    components: {},
-    props: {
-        species_community: {
-            type: Object,
-            required: true,
-        },
-    },
-    data: function () {
-        let vm = this;
-        return {
-            pBody: 'pBody' + vm._uid,
-            lBody: 'lBody' + vm._uid,
-            iBody: 'iBody' + vm._uid,
-            mBody: 'mBody' + vm._uid,
-            oBody: 'oBody' + vm._uid,
-            cBody: 'cBody' + vm._uid,
-            dBody: 'dBody' + vm._uid,
-            values: null,
-            datepickerOptions: {
-                format: 'DD/MM/YYYY',
-                showClear: true,
-                useCurrent: false,
-                keepInvalid: true,
-                allowInputToggle: true,
-            },
-        };
-    },
-};
-</script>
-
-<style lang="css" scoped>
-/*ul, li {
-        zoom:1;
-        display: inline;
-    }*/
-fieldset.scheduler-border {
-    border: 1px groove #ddd !important;
-    padding: 0 1.4em 1.4em 1.4em !important;
-    margin: 0 0 1.5em 0 !important;
-    -webkit-box-shadow: 0px 0px 0px 0px #000;
-    box-shadow: 0px 0px 0px 0px #000;
-}
-legend.scheduler-border {
-    width: inherit; /* Or auto */
-    padding: 0 10px; /* To give a bit of padding on the left and right */
-    border-bottom: none;
-}
-</style>

From 90ac22317ebed463bd37c3ee6c215baa4311d226 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 10:11:26 +0800
Subject: [PATCH 057/138] Remove unused end points.

---
 boranga/frontend/boranga/src/api.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/boranga/frontend/boranga/src/api.js b/boranga/frontend/boranga/src/api.js
index 4c25f021..7f2b5ed7 100644
--- a/boranga/frontend/boranga/src/api.js
+++ b/boranga/frontend/boranga/src/api.js
@@ -4,15 +4,11 @@ var group_type_fauna = 'fauna';
 var group_type_community = 'community';
 
 export default {
-    access_types: '/api/access_types.json',
-    activity_matrix: '/api/activity_matrix.json',
     amendment_request: '/api/amendment_request.json',
     application_types: '/api/application_types.json',
     approvals: '/api/approvals.json',
-    assessments: '/api/assessments.json',
     community_documents: '/api/community_documents.json',
     community: '/api/community',
-    compliances: '/api/compliances.json',
     conservation_status_documents: '/api/conservation_status_documents.json',
     conservation_status: '/api/conservation_status',
     content_types: '/api/content_types/',
@@ -26,7 +22,6 @@ export default {
     help_text_entries: '/api/help_text_entries',
     lookup_schema_types:
         '/api/occurrence_report_bulk_import_schema_columns/get_lookup_filter_types/',
-    marine_treeview: '/api/marine_treeview',
     occurrence_report_bulk_imports: '/api/occurrence_report_bulk_imports/',
     occurrence_report_bulk_import_schemas:
         '/api/occurrence_report_bulk_import_schemas/',
@@ -55,7 +50,6 @@ export default {
     submitter_categories: '/api/submitter_categories',
     taxonomy: '/api/taxonomy',
     threat: '/api/threat.json',
-    trails: '/api/trails.json',
     users_api: '/api/users',
     users: '/api/users.json',
 
@@ -79,8 +73,6 @@ export default {
     community_filter_dict: '/api/community_filter_dict',
     community_id_lookup: '/api/community_id_lookup',
     community_name_lookup: '/api/community_name_lookup',
-    compliances_paginated_external:
-        '/api/compliance_paginated/compliances_external/?format=datatables',
     conservation_status_paginated_external:
         '/api/conservation_status_paginated/conservation_status_external?format=datatables',
     conservation_status_referred_to_me:
@@ -150,10 +142,6 @@ export default {
     occurrence_tenure_purpose_lookup:
         '/api/occurrence_tenure_paginated/occurrence_tenure_purpose_lookup',
 
-    // Pending - need to create viewsets for the below when working on search filters for OR dashboard
-    or_status_lookup: '/api/or_status_lookup',
-    or_submitted_from_lookup: '/api/or_submitted_from_lookup',
-
     //conservation Status profile page list of value dict
     species_display: '/api/species_display',
     community_display: '/api/community_display',
@@ -161,7 +149,6 @@ export default {
 
     filter_list: '/api/proposal/filter_list.json',
     filter_list_approvals: '/api/approvals/filter_list.json',
-    filter_list_compliances: '/api/compliances/filter_list.json',
     filter_list_referrals: '/api/referrals/filter_list.json',
     filter_list_district_proposals: '/api/district_proposals/filter_list.json',
     filter_list_cs_referrals: '/api/cs_referrals/filter_list.json',

From 7b0868155a3141857fb33c40241b727f2a8f15cd Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 10:29:44 +0800
Subject: [PATCH 058/138] Replace old ._uid with function call that generates a
 uuid. It's recommended to not refer to the vue internals such as _uid in
 application code not to mention that _uid doesn't actually exist anymore.

---
 .../common/species_communities/species_documents.vue      | 5 +++--
 .../common/species_communities/species_threats.vue        | 8 +++++---
 .../boranga/src/components/common/table_related_items.vue | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
index dd58d404..7ee70670 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_documents.vue
@@ -50,6 +50,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '../add_document.vue';
@@ -86,8 +87,8 @@ export default {
         return {
             uuid: 0,
             speciesDocumentHistoryId: null,
-            documentBody: 'documentBody' + vm._uid,
-            panelBody: 'species-documents-' + vm._uid,
+            documentBody: 'documentBody' + uuid(),
+            panelBody: 'species-documents-' + uuid(),
             values: null,
             species_document_url: api_endpoints.species_documents,
             documents_headers: [
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
index 5929e44f..f3d32b59 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
@@ -153,6 +153,8 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
+
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from './add_threat.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -203,9 +205,9 @@ export default {
         return {
             uuid: 0,
             conservationThreatHistoryId: null,
-            threatBody: 'threatBody' + vm.uid,
-            occThreatBody: 'occThreatBody' + vm.uid,
-            panelBody: 'species-threats-' + vm.uid,
+            threatBody: 'threatBody' + uuid(),
+            occThreatBody: 'occThreatBody' + uuid(),
+            panelBody: 'species-threats-' + uuid(),
             values: null,
             threat_url: api_endpoints.threat,
 
diff --git a/boranga/frontend/boranga/src/components/common/table_related_items.vue b/boranga/frontend/boranga/src/components/common/table_related_items.vue
index 99cd02b5..82b2f844 100644
--- a/boranga/frontend/boranga/src/components/common/table_related_items.vue
+++ b/boranga/frontend/boranga/src/components/common/table_related_items.vue
@@ -68,7 +68,7 @@ export default {
     },
     data() {
         return {
-            datatable_id: uuid(),
+            datatable_id: 'related-items-' + uuid(),
             related_type_filter_list: [],
             filterRelatedType: 'all',
         };

From 48d6bf5fac967eef9b24225c7d7ecb1056f65909 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 10:36:07 +0800
Subject: [PATCH 059/138] Hide default datatables loading graphic (as we have a
 bootstrap spinner instead).

---
 boranga/frontend/boranga/src/utils/vue/datatable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/utils/vue/datatable.vue b/boranga/frontend/boranga/src/utils/vue/datatable.vue
index 372e0b72..ba5d19aa 100755
--- a/boranga/frontend/boranga/src/utils/vue/datatable.vue
+++ b/boranga/frontend/boranga/src/utils/vue/datatable.vue
@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style lang="css">
-div.dataTables_processing div {
+div.dt-processing div {
     display: none;
 }
 

From 5f8179abd45d7c3ae00e72696a2fba1cca736687 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 11:26:44 +0800
Subject: [PATCH 060/138] Replace references to ._uid with a call that
 generates a uuid.

---
 .../common/communities_dashboard.vue          |  4 ++--
 .../conservation_status/community_status.vue  |  6 +++---
 .../conservation_status/cs_documents.vue      |  5 +++--
 .../conservation_status/cs_more_referrals.vue |  5 +++--
 ...onservation_status_community_dashboard.vue |  4 ++--
 .../conservation_status_fauna_dashboard.vue   |  4 ++--
 .../conservation_status_flora_dashboard.vue   |  4 ++--
 .../cs_community_referrals_dashboard.vue      |  4 ++--
 .../cs_external_referrals_dashboard.vue       |  4 ++--
 .../common/cs_fauna_referrals_dashboard.vue   |  4 ++--
 .../common/cs_flora_referrals_dashboard.vue   |  4 ++--
 .../common/occurrence/occ_documents.vue       |  3 ++-
 .../common/occurrence/occ_habitat.vue         | 11 +++++-----
 .../common/occurrence/occ_observation.vue     |  9 +++++----
 .../common/occurrence/occ_threats.vue         |  5 +++--
 .../occurrence/occurrence_report_profile.vue  |  8 ++++----
 .../common/occurrence/ocr_documents.vue       |  3 ++-
 .../common/occurrence/ocr_habitat.vue         | 11 +++++-----
 .../common/occurrence/ocr_more_referrals.vue  |  5 +++--
 .../common/occurrence/ocr_observation.vue     |  9 +++++----
 .../common/occurrence/ocr_threats.vue         |  5 +++--
 .../common/occurrence/species_occurrence.vue  |  8 ++++----
 .../common/occurrence_community_dashboard.vue |  4 ++--
 .../common/occurrence_fauna_dashboard.vue     |  4 ++--
 .../common/occurrence_flora_dashboard.vue     |  4 ++--
 .../occurrence_report_community_dashboard.vue |  4 ++--
 .../occurrence_report_fauna_dashboard.vue     |  4 ++--
 .../occurrence_report_flora_dashboard.vue     |  4 ++--
 .../ocr_external_referrals_dashboard.vue      |  4 ++--
 .../common/ocr_referrals_dashboard.vue        |  4 ++--
 .../community_documents.vue                   |  3 ++-
 .../community_occ_threats.vue                 |  5 +++--
 .../species_communities/community_profile.vue |  4 ++--
 .../species_communities/community_threats.vue |  5 +++--
 .../species_combine/add_combine_species.vue   |  6 +++---
 .../species_combine_documents.vue             |  5 +++--
 .../species_combine_profile.vue               |  9 +++++----
 .../species_combine_threats.vue               |  5 +++--
 .../species_occ_threats.vue                   |  5 +++--
 .../species_communities/species_profile.vue   | 17 ++++++++--------
 .../species_split/species_split_documents.vue |  5 +++--
 .../species_split/species_split_profile.vue   |  9 +++++----
 .../species_split/species_split_threats.vue   |  5 +++--
 .../common/species_fauna_dashboard.vue        |  4 ++--
 .../common/species_flora_dashboard.vue        |  4 ++--
 .../conservation_status_proposal_table.vue    |  4 ++--
 .../occurrence/occurrence_report_table.vue    |  4 ++--
 .../components/form_conservation_status.vue   |  8 ++++----
 .../src/components/form_occurrence.vue        | 20 +++++++++----------
 .../src/components/form_occurrence_report.vue | 16 +++++++--------
 .../src/components/form_species_combine.vue   |  8 ++++----
 .../components/form_species_communities.vue   | 10 +++++-----
 .../src/components/form_species_split.vue     | 10 +++++-----
 .../boranga/src/components/forms/select.vue   |  4 ++--
 .../components/internal/meetings/cs_queue.vue |  6 +++---
 .../internal/meetings/meetings_datatable.vue  |  5 ++---
 .../components/internal/meetings/minutes.vue  |  5 +++--
 .../occurrence/occurrence_combine.vue         | 14 ++++++-------
 .../occurrence_combine_contacts.vue           |  3 ++-
 .../occurrence_combine_documents.vue          |  3 ++-
 .../occurrence_combine_selection.vue          |  3 ++-
 .../occurrence/occurrence_combine_sites.vue   |  3 ++-
 .../occurrence/occurrence_combine_tenures.vue |  3 ++-
 .../occurrence/occurrence_combine_threats.vue |  3 ++-
 .../occurrence/occurrence_site_datatable.vue  |  4 ++--
 .../species_communities/species_combine.vue   |  6 +++---
 .../species_communities/species_rename.vue    |  6 +++---
 .../species_communities/species_split.vue     |  6 +++---
 .../src/components/internal/users/manage.vue  | 13 ++++++------
 69 files changed, 222 insertions(+), 193 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
index 95828b0e..4ff7370a 100644
--- a/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/communities_dashboard.vue
@@ -231,6 +231,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -328,9 +329,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'communities-datatable-' + vm._uid,
+            datatable_id: 'communities-datatable-' + uuid(),
             communityHistoryId: null,
             // selected values for filtering
             filterCommunityMigratedId: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
index e8082ca0..4feb42de 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
@@ -1439,6 +1439,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import CollapsibleComponent from '@/components/forms/collapsible_component.vue';
 import { api_endpoints } from '@/utils/hooks';
@@ -1469,10 +1470,9 @@ export default {
     },
     emits: ['saveConservationStatus'],
     data: function () {
-        let vm = this;
         return {
-            community_name_lookup: 'community_name_lookup' + vm._uid,
-            select_community_name: 'select_community_name' + vm._uid,
+            community_name_lookup: 'community_name_lookup' + uuid(),
+            select_community_name: 'select_community_name' + uuid(),
             isShowComment: false,
             cs_profile_dict: {},
             wa_legislative_lists: [],
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
index c8288851..d3e0aba8 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_documents.vue
@@ -50,6 +50,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import ViewDocument from '@/components/common/view_document.vue';
@@ -83,8 +84,8 @@ export default {
         return {
             uuid: 0,
             conservationStatusDocumentHistoryId: null,
-            documentBody: 'documentBody' + vm._uid,
-            panelBody: 'conservation-status-documents-' + vm._uid,
+            documentBody: 'documentBody' + uuid(),
+            panelBody: 'conservation-status-documents-' + uuid(),
             values: null,
             cs_document_url: api_endpoints.conservation_status_documents,
             documents_headers: [
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
index 89821042..5af5d231 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/cs_more_referrals.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
@@ -255,8 +256,8 @@ export default {
             myDefaultAllowList.table = [];
 
             let vm = this;
-            let table_id = 'cs-more-referrals-table' + vm._uid;
-            let popover_name = 'popover-' + vm._uid;
+            let table_id = 'cs-more-referrals-table' + uuid();
+            let popover_name = 'popover-' + uuid();
             let my_content =
                 '<table id="' +
                 table_id +
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
index fb5eee9c..7af03053 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_community_dashboard.vue
@@ -327,6 +327,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -469,9 +470,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'cs-communities-datatable-' + vm._uid,
+            datatable_id: 'cs-communities-datatable-' + uuid(),
             communityConservationStatusHistoryId: null,
             communityHistoryId: null,
             listHistoryId: null,
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
index 2dbff2b5..2d2e37de 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_fauna_dashboard.vue
@@ -353,6 +353,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -510,9 +511,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'species_fauna_cs-datatable-' + vm._uid,
+            datatable_id: 'species_fauna_cs-datatable-' + uuid(),
             speciesConservationStatusHistoryId: null,
             speciesHistoryId: null,
             listHistoryId: null,
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
index bbd2a0b4..3cd8039f 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status_flora_dashboard.vue
@@ -352,6 +352,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -510,9 +511,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'species_flora_cs-datatable-' + vm._uid,
+            datatable_id: 'species_flora_cs-datatable-' + uuid(),
             speciesConservationStatusHistoryId: null,
             speciesHistoryId: null,
             listHistoryId: null,
diff --git a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
index 7fa57244..b1e7925d 100644
--- a/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_community_referrals_dashboard.vue
@@ -65,6 +65,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -118,9 +119,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'cs-communities-ref-datatable-' + vm._uid,
+            datatable_id: 'cs-communities-ref-datatable-' + uuid(),
 
             filterCSRefCommunityMigratedId: sessionStorage.getItem(
                 this.filterCSRefCommunityMigratedId_cache
diff --git a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
index 10f98ce7..bfeaba62 100644
--- a/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_external_referrals_dashboard.vue
@@ -66,6 +66,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
@@ -99,9 +100,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'cs_external_ref-datatable-' + vm._uid,
+            datatable_id: 'cs_external_ref-datatable-' + uuid(),
 
             filterCSRefFloraScientificName: sessionStorage.getItem(
                 this.filterCSRefFloraScientificName_cache
diff --git a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
index ae3d74e3..8d95c88d 100644
--- a/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_fauna_referrals_dashboard.vue
@@ -100,6 +100,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
@@ -156,9 +157,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'species_fauna_cs_ref-datatable-' + vm._uid,
+            datatable_id: 'species_fauna_cs_ref-datatable-' + uuid(),
 
             filterCSRefFaunaScientificName: sessionStorage.getItem(
                 this.filterCSRefFaunaScientificName_cache
diff --git a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
index b4b2b615..a533e9cb 100644
--- a/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/cs_flora_referrals_dashboard.vue
@@ -101,6 +101,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
@@ -167,9 +168,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'species_flora_cs_ref-datatable-' + vm._uid,
+            datatable_id: 'species_flora_cs_ref-datatable-' + uuid(),
 
             filterCSRefFloraScientificName: sessionStorage.getItem(
                 this.filterCSRefFloraScientificName_cache
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
index 7293c181..9f0451d0 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_documents.vue
@@ -46,6 +46,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '@/components/common/add_document.vue';
@@ -81,7 +82,7 @@ export default {
         return {
             uuid: 0,
             occurenceDocumentHistoryId: null,
-            panelBody: 'occ-documents-' + vm._uid,
+            panelBody: 'occ-documents-' + uuid(),
             values: null,
             occ_document_url: api_endpoints.occurrence_documents,
             documents_headers: [
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
index 743680c4..86af5cb8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_habitat.vue
@@ -944,6 +944,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
 import RelatedSpecies from '@/components/common/occurrence/occ_related_species_table.vue';
@@ -973,11 +974,11 @@ export default {
     data: function () {
         let vm = this;
         return {
-            habitatCompositionBody: 'habitatCompositionBody' + vm._uid,
-            habitatConditionBody: 'habitatConditionBody' + vm._uid,
-            vegetationStructureBody: 'vegetationStructureBody' + vm._uid,
-            fireHistoryBody: 'fireHistoryBody' + vm._uid,
-            associatedSpeciesBody: 'associatedSpeciesBody' + vm._uid,
+            habitatCompositionBody: 'habitatCompositionBody' + uuid(),
+            habitatConditionBody: 'habitatConditionBody' + uuid(),
+            vegetationStructureBody: 'vegetationStructureBody' + uuid(),
+            fireHistoryBody: 'fireHistoryBody' + uuid(),
+            associatedSpeciesBody: 'associatedSpeciesBody' + uuid(),
             //---to show fields related to Fauna
             isFauna: vm.occurrence_obj.group_type === 'fauna' ? true : false,
             //----list of values dictionary
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
index 89699a6c..a6dd10a2 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_observation.vue
@@ -580,6 +580,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import PlantCount from './plant_count.vue';
 import AnimalObservation from './animal_observation.vue';
@@ -611,10 +612,10 @@ export default {
     data: function () {
         let vm = this;
         return {
-            observationDetailBody: 'observationDetailBody' + vm._uid,
-            plantCountBody: 'plantCountBody' + vm._uid,
-            animalObsBody: 'animalObsBody' + vm._uid,
-            identificationBody: 'identificationBody' + vm._uid,
+            observationDetailBody: 'observationDetailBody' + uuid(),
+            plantCountBody: 'plantCountBody' + uuid(),
+            animalObsBody: 'animalObsBody' + uuid(),
+            identificationBody: 'identificationBody' + uuid(),
             //---to show fields related to Fauna
             isFauna: vm.occurrence_obj.group_type === 'fauna' ? true : false,
             isFlora: vm.occurrence_obj.group_type === 'flora' ? true : false,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
index 750da884..0bcacae2 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
@@ -175,6 +175,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import ExistingThreat from '@/components/common/occurrence/occ_ocr_existing_threats.vue';
@@ -210,8 +211,8 @@ export default {
             uuid: 0,
             occConservationThreatHistoryId: null,
             showExisting: false,
-            threatBody: 'threatBody' + vm._uid,
-            panelBody: 'species-threats-' + vm._uid,
+            threatBody: 'threatBody' + uuid(),
+            panelBody: 'species-threats-' + uuid(),
             values: null,
             occ_threat_url: api_endpoints.occ_threat,
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
index 231d4b97..6f572e17 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occurrence_report_profile.vue
@@ -339,10 +339,10 @@ export default {
         let vm = this;
         return {
             uuid: null,
-            scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
-            select_scientific_name: 'select_scientific_name' + vm._uid,
-            community_name_lookup: 'community_name_lookup' + vm._uid,
-            select_community_name: 'select_community_name' + vm._uid,
+            scientific_name_lookup: 'scientific_name_lookup' + uuid(),
+            select_scientific_name: 'select_scientific_name' + uuid(),
+            community_name_lookup: 'community_name_lookup' + uuid(),
+            select_community_name: 'select_community_name' + uuid(),
             isFauna:
                 vm.occurrence_report_obj.group_type === 'fauna' ? true : false,
             isCommunity:
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
index 1c1cc7de..25a01f2d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_documents.vue
@@ -50,6 +50,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import ViewDocument from '@/components/common/view_document.vue';
@@ -91,7 +92,7 @@ export default {
         return {
             uuid: 0,
             occurenceReportDocumentHistoryId: null,
-            panelBody: 'ocr-documents-' + vm._uid,
+            panelBody: 'ocr-documents-' + uuid(),
             values: null,
             ocr_document_url: api_endpoints.occurrence_report_documents,
             documents_headers: [
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
index 63900ce8..825250d9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_habitat.vue
@@ -887,6 +887,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import RelatedSpecies from '@/components/common/occurrence/ocr_related_species_table.vue';
 import { api_endpoints, helpers } from '@/utils/hooks';
@@ -914,11 +915,11 @@ export default {
     data: function () {
         let vm = this;
         return {
-            habitatCompositionBody: 'habitatCompositionBody' + vm._uid,
-            habitatConditionBody: 'habitatConditionBody' + vm._uid,
-            vegetationStructureBody: 'vegetationStructureBody' + vm._uid,
-            fireHistoryBody: 'fireHistoryBody' + vm._uid,
-            associatedSpeciesBody: 'associatedSpeciesBody' + vm._uid,
+            habitatCompositionBody: 'habitatCompositionBody' + uuid(),
+            habitatConditionBody: 'habitatConditionBody' + uuid(),
+            vegetationStructureBody: 'vegetationStructureBody' + uuid(),
+            fireHistoryBody: 'fireHistoryBody' + uuid(),
+            associatedSpeciesBody: 'associatedSpeciesBody' + uuid(),
             //---to show fields related to Fauna
             isFauna:
                 vm.occurrence_report_obj.group_type === 'fauna' ? true : false,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
index 24c25d16..046a29bd 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_more_referrals.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import { constants, api_endpoints, helpers } from '@/utils/hooks';
 
 export default {
@@ -242,8 +243,8 @@ export default {
             myDefaultAllowList.table = [];
 
             let vm = this;
-            let table_id = 'ocr-more-referrals-table' + vm._uid;
-            let popover_name = 'popover-' + vm._uid;
+            let table_id = 'ocr-more-referrals-table' + uuid();
+            let popover_name = 'popover-' + uuid();
             let my_content =
                 '<table id="' +
                 table_id +
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
index c89eb183..9aa51420 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_observation.vue
@@ -553,6 +553,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import PlantCount from './plant_count.vue';
 import AnimalObservation from './animal_observation.vue';
@@ -582,10 +583,10 @@ export default {
     data: function () {
         let vm = this;
         return {
-            observationDetailBody: 'observationDetailBody' + vm._uid,
-            plantCountBody: 'plantCountBody' + vm._uid,
-            animalObsBody: 'animalObsBody' + vm._uid,
-            identificationBody: 'identificationBody' + vm._uid,
+            observationDetailBody: 'observationDetailBody' + uuid(),
+            plantCountBody: 'plantCountBody' + uuid(),
+            animalObsBody: 'animalObsBody' + uuid(),
+            identificationBody: 'identificationBody' + uuid(),
             //---to show fields related to Fauna
             isFauna:
                 vm.occurrence_report_obj.group_type === 'fauna' ? true : false,
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
index 112bab53..c1f6e733 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
@@ -142,6 +142,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -178,8 +179,8 @@ export default {
         return {
             uuid: 0,
             ocrConservationThreatHistoryId: null,
-            threatBody: 'threatBody' + vm._uid,
-            panelBody: 'species-threats-' + vm._uid,
+            threatBody: 'threatBody' + uuid(),
+            panelBody: 'species-threats-' + uuid(),
             values: null,
             ocr_threat_url: api_endpoints.ocr_threat,
 
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
index ec1f30e9..5c1b2473 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/species_occurrence.vue
@@ -174,6 +174,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import ContactDatatable from './contact_datatable.vue';
 import RelatedReports from '@/components/common/occurrence/occ_related_ocr_table.vue';
@@ -193,11 +194,10 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
-            select_scientific_name: 'select_scientific_name' + vm._uid,
-            select_wild_status: 'select_wild_status' + vm._uid,
+            scientific_name_lookup: 'scientific_name_lookup' + uuid(),
+            select_scientific_name: 'select_scientific_name' + uuid(),
+            select_wild_status: 'select_wild_status' + uuid(),
             common_name: null,
             occ_profile_dict: {},
             wild_status_list: [],
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
index 7c8d4b64..22eab61c 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_community_dashboard.vue
@@ -89,6 +89,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -156,11 +157,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             occurrenceHistoryId: null,
-            datatable_id: 'occurrence-community-datatable-' + vm._uid,
+            datatable_id: 'occurrence-community-datatable-' + uuid(),
 
             // selected values for filtering
             filterOCCCommunityOccurrenceName: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
index ee0e173f..7401a45a 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_fauna_dashboard.vue
@@ -91,6 +91,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -163,11 +164,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             occurrenceHistoryId: null,
-            datatable_id: 'occurrence-fauna-datatable-' + vm._uid,
+            datatable_id: 'occurrence-fauna-datatable-' + uuid(),
 
             // selected values for filtering
             filterOCCFaunaOccurrenceName: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
index bbe7d1c9..fae74e0d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_flora_dashboard.vue
@@ -91,6 +91,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -163,11 +164,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             occurrenceHistoryId: null,
-            datatable_id: 'occurrence-flora-datatable-' + vm._uid,
+            datatable_id: 'occurrence-flora-datatable-' + uuid(),
 
             // selected values for filtering
             filterOCCFloraOccurrenceName: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
index e5e92737..befdafa7 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_community_dashboard.vue
@@ -139,6 +139,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -226,11 +227,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             occurrenceReportHistoryId: null,
-            datatable_id: 'community_ocr-datatable-' + vm._uid,
+            datatable_id: 'community_ocr-datatable-' + uuid(),
 
             // selected values for filtering
             filterOCRCommunityOccurrence: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
index 0a47258b..1a7bd3e9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_fauna_dashboard.vue
@@ -140,6 +140,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -227,11 +228,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             occurrenceReportHistoryId: null,
-            datatable_id: 'species_fauna_ocr-datatable-' + vm._uid,
+            datatable_id: 'species_fauna_ocr-datatable-' + uuid(),
 
             // selected values for filtering
             filterOCRFaunaOccurrence: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
index 13d764d0..a33f0bbd 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence_report_flora_dashboard.vue
@@ -141,6 +141,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -233,11 +234,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             occurrenceReportHistoryId: null,
-            datatable_id: 'species_flora_or-datatable-' + vm._uid,
+            datatable_id: 'species_flora_or-datatable-' + uuid(),
 
             // selected values for filtering
             filterOCRFloraOccurrence: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
index 9f9dbde4..fac14f54 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_external_referrals_dashboard.vue
@@ -66,6 +66,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 
@@ -99,9 +100,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'ocr_external_ref-datatable-' + vm._uid,
+            datatable_id: 'ocr_external_ref-datatable-' + uuid(),
 
             filterCSRefFloraScientificName: sessionStorage.getItem(
                 this.filterCSRefFloraScientificName_cache
diff --git a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
index 85bdfd81..b63ec876 100644
--- a/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/ocr_referrals_dashboard.vue
@@ -88,6 +88,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -148,11 +149,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             occurrenceReportHistoryId: null,
-            datatable_id: 'species_flora_ocr_referrals_datatable_' + vm._uid,
+            datatable_id: 'species_flora_ocr_referrals_datatable_' + uuid(),
             filterOCRReferralsOccurrence: sessionStorage.getItem(
                 this.filterOCRReferralsOccurrence_cache
             )
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
index b400dc66..29d5befc 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_documents.vue
@@ -45,6 +45,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import alert from '@vue-utils/alert.vue';
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '../add_document.vue';
@@ -81,7 +82,7 @@ export default {
         return {
             uuid: 0,
             communityDocumentHistoryId: null,
-            panelBody: 'community-documents-' + vm._uid,
+            panelBody: 'community-documents-' + uuid(),
             values: null,
             community_document_url: api_endpoints.community_documents,
             documents_headers: [
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
index 734f4383..c766e148 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_occ_threats.vue
@@ -143,6 +143,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import ConservationThreatHistory from '../../internal/occurrence/occ_conservation_threat_history.vue';
@@ -169,8 +170,8 @@ export default {
             uuid: 0,
             occConservationThreatHistoryId: null,
             showExisting: false,
-            threatBody: 'threatBody' + vm._uid,
-            panelBody: 'community-threats-' + vm._uid,
+            threatBody: 'threatBody' + uuid(),
+            panelBody: 'community-threats-' + uuid(),
             values: null,
             occ_threat_url: api_endpoints.occ_threat,
 
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
index 1c7103ab..df579d32 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_profile.vue
@@ -974,6 +974,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import BasicConservationStatus from './basic_conservation_status.vue';
 import HelpText from '@/components/common/help_text.vue';
@@ -1005,10 +1006,9 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             updatingPublishing: false,
-            conservationStatusBody: 'conservationStatusBody' + vm._uid,
+            conservationStatusBody: 'conservationStatusBody' + uuid(),
             species_list: [],
             community_profile_dict: {},
             post_fire_habitatat_interactions_list: [],
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
index 4dc24e62..9acdad76 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
@@ -154,6 +154,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from './add_threat.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -203,9 +204,9 @@ export default {
         return {
             uuid: 0,
             conservationThreatHistoryId: null,
-            panelBody: 'community-threats-' + vm._uid,
+            panelBody: 'community-threats-' + uuid(),
             values: null,
-            occThreatBody: 'occThreatBody' + vm._uid,
+            occThreatBody: 'occThreatBody' + uuid(),
             threat_url: api_endpoints.threat,
 
             filterThreatCategory: 'all',
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
index 75c9616e..95aa9983 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import { helpers, api_endpoints } from '@/utils/hooks.js';
@@ -64,7 +65,6 @@ export default {
         alert,
     },
     data: function () {
-        let vm = this;
         return {
             isModalOpen: false,
             form: null,
@@ -72,8 +72,8 @@ export default {
             errorString: '',
             species_list: [],
             combineSpeciesId: null,
-            scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
-            select_scientific_name: 'select_scientific_name' + vm._uid,
+            scientific_name_lookup: 'scientific_name_lookup' + uuid(),
+            select_scientific_name: 'select_scientific_name' + uuid(),
         };
     },
     computed: {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
index ee709367..9956b5c9 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_documents.vue
@@ -44,6 +44,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { constants, api_endpoints, helpers } from '@/utils/hooks';
@@ -68,8 +69,8 @@ export default {
         let vm = this;
         return {
             uuid: 0,
-            documentBody: 'documentBody' + vm._uid,
-            panelBody: 'species-combine-documents-' + vm._uid,
+            documentBody: 'documentBody' + uuid(),
+            panelBody: 'species-combine-documents-' + uuid(),
             values: null,
             // to store all the documents of original on first load.
             original_species_documents: [],
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
index 86772b7b..9503d7e0 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_profile.vue
@@ -1682,6 +1682,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { api_endpoints } from '@/utils/hooks';
 export default {
@@ -1720,10 +1721,10 @@ export default {
                 'select_breeding_period_readonly' + vm.species_community.id,
             select_regions: 'select_regions' + vm.species_community.id,
             select_districts: 'select_districts' + vm.species_community.id,
-            taxonBody: 'taxonBody' + vm._uid,
-            distributionBody: 'distributionBody' + vm._uid,
-            conservationBody: 'conservationBody' + vm._uid,
-            generalBody: 'generalBody' + vm._uid,
+            taxonBody: 'taxonBody' + uuid(),
+            distributionBody: 'distributionBody' + uuid(),
+            conservationBody: 'conservationBody' + uuid(),
+            generalBody: 'generalBody' + uuid(),
             //---to show fields related to Fauna
             isFauna: vm.species_community.group_type === 'fauna' ? true : false,
             //----list of values dictionary
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
index e4795b79..cb6afce5 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/species_combine_threats.vue
@@ -40,6 +40,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { constants, api_endpoints, helpers } from '@/utils/hooks';
@@ -64,8 +65,8 @@ export default {
         let vm = this;
         return {
             uuid: 0,
-            threatBody: 'threatBody' + vm._uid,
-            panelBody: 'species-combine-threats-' + vm._uid,
+            threatBody: 'threatBody' + uuid(),
+            panelBody: 'species-combine-threats-' + uuid(),
             values: null,
             // to store all the documents of original on first load.
             original_species_threats: [],
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
index 33ffd5ef..cc279cca 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_occ_threats.vue
@@ -143,6 +143,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import ThreatDetail from '@/components/common/species_communities/add_threat.vue';
 import ConservationThreatHistory from '../../internal/occurrence/occ_conservation_threat_history.vue';
@@ -169,8 +170,8 @@ export default {
             uuid: 0,
             occConservationThreatHistoryId: null,
             showExisting: false,
-            threatBody: 'threatBody' + vm._uid,
-            panelBody: 'species-threats-' + vm._uid,
+            threatBody: 'threatBody' + uuid(),
+            panelBody: 'species-threats-' + uuid(),
             values: null,
             occ_threat_url: api_endpoints.occ_threat,
 
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
index 96233249..662afd41 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
@@ -1240,6 +1240,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import BasicConservationStatus from './basic_conservation_status.vue';
 import HelpText from '@/components/common/help_text.vue';
@@ -1287,14 +1288,14 @@ export default {
                 allowInputToggle: true,
             },
             updatingPublishing: false,
-            scientific_name_lookup: 'scientific_name_lookup' + vm._uid,
-            select_scientific_name: 'select_scientific_name' + vm._uid,
-            select_flowering_period: 'select_flowering_period' + vm._uid,
-            taxonBody: 'taxonBody' + vm._uid,
-            distributionBody: 'distributionBody' + vm._uid,
-            conservationStatusBody: 'conservationStatusBody' + vm._uid,
-            conservationBody: 'conservationBody' + vm._uid,
-            generalBody: 'generalBody' + vm._uid,
+            scientific_name_lookup: 'scientific_name_lookup' + uuid(),
+            select_scientific_name: 'select_scientific_name' + uuid(),
+            select_flowering_period: 'select_flowering_period' + uuid(),
+            taxonBody: 'taxonBody' + uuid(),
+            distributionBody: 'distributionBody' + uuid(),
+            conservationStatusBody: 'conservationStatusBody' + uuid(),
+            conservationBody: 'conservationBody' + uuid(),
+            generalBody: 'generalBody' + uuid(),
             //---to show fields related to Fauna
             isFauna: vm.species_community.group_type === 'fauna' ? true : false,
             //----list of values dictionary
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
index 703b59cb..e6eac633 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_documents.vue
@@ -44,6 +44,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { constants, api_endpoints, helpers } from '@/utils/hooks';
@@ -68,8 +69,8 @@ export default {
         let vm = this;
         return {
             uuid: 0,
-            documentBody: 'documentBody' + vm._uid,
-            panelBody: 'species-split-documents-' + vm._uid,
+            documentBody: 'documentBody' + uuid(),
+            panelBody: 'species-split-documents-' + uuid(),
             values: null,
             // to store all the documents of original on first load.
             original_species_documents: [],
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
index dc404582..3c2991ac 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_profile.vue
@@ -1699,6 +1699,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { api_endpoints } from '@/utils/hooks';
 export default {
@@ -1741,10 +1742,10 @@ export default {
             select_districts_read_only:
                 'select_districts_read_only' + vm.species_community.id,
             select_districts: 'select_districts' + vm.species_community.id,
-            taxonBody: 'taxonBody' + vm._uid,
-            distributionBody: 'distributionBody' + vm._uid,
-            conservationBody: 'conservationBody' + vm._uid,
-            generalBody: 'generalBody' + vm._uid,
+            taxonBody: 'taxonBody' + uuid(),
+            distributionBody: 'distributionBody' + uuid(),
+            conservationBody: 'conservationBody' + uuid(),
+            generalBody: 'generalBody' + uuid(),
             //---to show fields related to Fauna
             isFauna: vm.species_community.group_type === 'fauna' ? true : false,
             //----list of values dictionary
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
index 3afc32a1..6f613d28 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_split/species_split_threats.vue
@@ -41,6 +41,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import { constants, api_endpoints, helpers } from '@/utils/hooks';
@@ -65,8 +66,8 @@ export default {
         let vm = this;
         return {
             uuid: 0,
-            threatBody: 'threatBody' + vm._uid,
-            panelBody: 'species-split-threats-' + vm._uid,
+            threatBody: 'threatBody' + uuid(),
+            panelBody: 'species-split-threats-' + uuid(),
             values: null,
             // to store all the documents of original on first load.
             original_species_threats: [],
diff --git a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
index 38627ed8..ed168733 100644
--- a/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_fauna_dashboard.vue
@@ -279,6 +279,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -396,11 +397,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             speciesHistoryId: null,
-            datatable_fauna_id: 'species_fauna-datatable-' + vm._uid,
+            datatable_fauna_id: 'species_fauna-datatable-' + uuid(),
 
             //Profile to check if user has access to process Proposal
 
diff --git a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
index 33eb01c5..980d6f79 100755
--- a/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
+++ b/boranga/frontend/boranga/src/components/common/species_flora_dashboard.vue
@@ -279,6 +279,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -396,11 +397,10 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
             uuid: 0,
             speciesHistoryId: null,
-            datatable_id: 'species_flora-datatable-' + vm._uid,
+            datatable_id: 'species_flora-datatable-' + uuid(),
 
             // selected values for filtering
             filterFloraScientificName: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
index ea0db255..4d71082f 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_table.vue
@@ -107,6 +107,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -171,9 +172,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'conservation_status-datatable-' + vm._uid,
+            datatable_id: 'conservation_status-datatable-' + uuid(),
 
             // selected values for filtering
             filterCSGroupType: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
index 94a62824..8443b446 100644
--- a/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
+++ b/boranga/frontend/boranga/src/components/external/occurrence/occurrence_report_table.vue
@@ -107,6 +107,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -161,9 +162,8 @@ export default {
         },
     },
     data() {
-        let vm = this;
         return {
-            datatable_id: 'ocuurrence-report-datatable-' + vm._uid,
+            datatable_id: 'ocuurrence-report-datatable-' + uuid(),
 
             // selected values for filtering
             filterOCRGroupType: sessionStorage.getItem(
diff --git a/boranga/frontend/boranga/src/components/form_conservation_status.vue b/boranga/frontend/boranga/src/components/form_conservation_status.vue
index a949753c..e5021442 100644
--- a/boranga/frontend/boranga/src/components/form_conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/form_conservation_status.vue
@@ -150,6 +150,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import SubmitterInformation from '@/components/common/submitter_information.vue';
 import SpeciesStatus from '@/components/common/conservation_status/species_status.vue';
 import CommunityStatus from '@/components/common/conservation_status/community_status.vue';
@@ -188,13 +189,12 @@ export default {
     },
     emits: ['saveConservationStatus'],
     data: function () {
-        let vm = this;
         return {
             values: null,
             reloadcount: 0,
-            statusBody: 'statusBody' + vm._uid,
-            documentBody: 'documentBody' + vm._uid,
-            relatedItemBody: 'relatedItemBody' + vm._uid,
+            statusBody: 'statusBody' + uuid(),
+            documentBody: 'documentBody' + uuid(),
+            relatedItemBody: 'relatedItemBody' + uuid(),
         };
     },
     computed: {
diff --git a/boranga/frontend/boranga/src/components/form_occurrence.vue b/boranga/frontend/boranga/src/components/form_occurrence.vue
index e0cc377b..200db803 100644
--- a/boranga/frontend/boranga/src/components/form_occurrence.vue
+++ b/boranga/frontend/boranga/src/components/form_occurrence.vue
@@ -213,6 +213,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import OCCLocations from '@/components/common/occurrence/occ_locations.vue';
 import OCCHabitat from '@/components/common/occurrence/occ_habitat.vue';
 import OCCObservation from '@/components/common/occurrence/occ_observation.vue';
@@ -257,19 +258,18 @@ export default {
     },
     emits: ['refreshFromResponse'],
     data: function () {
-        let vm = this;
         return {
             values: null,
             reloadcount: 0,
-            locationBody: 'locationBody' + vm._uid,
-            habitatBody: 'habitatBody' + vm._uid,
-            observationBody: 'observationBody' + vm._uid,
-            threatBody: 'threatBody' + vm._uid,
-            documentBody: 'documentBody' + vm._uid,
-            relatedItemBody: 'relatedItemBody' + vm._uid,
-            reportBody: 'reportBody' + vm._uid,
-            sitesBody: 'sitesBody' + vm._uid,
-            occurrenceBody: 'occurrenceBody' + vm._uid,
+            locationBody: 'locationBody' + uuid(),
+            habitatBody: 'habitatBody' + uuid(),
+            observationBody: 'observationBody' + uuid(),
+            threatBody: 'threatBody' + uuid(),
+            documentBody: 'documentBody' + uuid(),
+            relatedItemBody: 'relatedItemBody' + uuid(),
+            reportBody: 'reportBody' + uuid(),
+            sitesBody: 'sitesBody' + uuid(),
+            occurrenceBody: 'occurrenceBody' + uuid(),
         };
     },
     computed: {
diff --git a/boranga/frontend/boranga/src/components/form_occurrence_report.vue b/boranga/frontend/boranga/src/components/form_occurrence_report.vue
index d8c88cb9..dda04c60 100644
--- a/boranga/frontend/boranga/src/components/form_occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/form_occurrence_report.vue
@@ -190,6 +190,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import OCRLocation from '@/components/common/occurrence/ocr_location.vue';
 import OCRHabitat from '@/components/common/occurrence/ocr_habitat.vue';
 import OCRObservation from '@/components/common/occurrence/ocr_observation.vue';
@@ -240,18 +241,17 @@ export default {
         'saveOccurrenceReport',
     ],
     data: function () {
-        let vm = this;
         return {
             values: null,
             reloadcount: 0,
             threatsKey: 0,
-            occurrenceReportBody: 'occurrenceReportBody' + vm._uid,
-            locationBody: 'locationBody' + vm._uid,
-            habitatBody: 'habitatBody' + vm._uid,
-            observationBody: 'observationBody' + vm._uid,
-            threatBody: 'threatBody' + vm._uid,
-            documentBody: 'documentBody' + vm._uid,
-            relatedItemBody: 'relatedItemBody' + vm._uid,
+            occurrenceReportBody: 'occurrenceReportBody' + uuid(),
+            locationBody: 'locationBody' + uuid(),
+            habitatBody: 'habitatBody' + uuid(),
+            observationBody: 'observationBody' + uuid(),
+            threatBody: 'threatBody' + uuid(),
+            documentBody: 'documentBody' + uuid(),
+            relatedItemBody: 'relatedItemBody' + uuid(),
         };
     },
     computed: {
diff --git a/boranga/frontend/boranga/src/components/form_species_combine.vue b/boranga/frontend/boranga/src/components/form_species_combine.vue
index 3031c85e..cb6ad88b 100644
--- a/boranga/frontend/boranga/src/components/form_species_combine.vue
+++ b/boranga/frontend/boranga/src/components/form_species_combine.vue
@@ -109,6 +109,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import SpeciesProfile from '@/components/common/species_communities/species_combine/species_combine_profile.vue';
 import SpeciesDocuments from '@/components/common/species_communities/species_combine/species_combine_documents.vue';
 import SpeciesThreats from '@/components/common/species_communities/species_combine/species_combine_threats.vue';
@@ -138,11 +139,10 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            profileBody: 'profileBody' + vm._uid,
-            documentBody: 'documentBody' + vm._uid,
-            threatBody: 'threatBody' + vm._uid,
+            profileBody: 'profileBody' + uuid(),
+            documentBody: 'documentBody' + uuid(),
+            threatBody: 'threatBody' + uuid(),
             values: null,
             reloadcount: 0,
         };
diff --git a/boranga/frontend/boranga/src/components/form_species_communities.vue b/boranga/frontend/boranga/src/components/form_species_communities.vue
index 7699da2b..085ec23e 100755
--- a/boranga/frontend/boranga/src/components/form_species_communities.vue
+++ b/boranga/frontend/boranga/src/components/form_species_communities.vue
@@ -171,6 +171,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import Species from '@/components/common/species_communities/species_profile.vue';
 import Community from '@/components/common/species_communities/community_profile.vue';
 import SpeciesDocuments from '@/components/common/species_communities/species_documents.vue';
@@ -216,12 +217,11 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            profileBody: 'profileBody' + vm._uid,
-            documentBody: 'documentBody' + vm._uid,
-            threatBody: 'threatBody' + vm._uid,
-            relatedItemBody: 'relatedItemBody' + vm._uid,
+            profileBody: 'profileBody' + uuid(),
+            documentBody: 'documentBody' + uuid(),
+            threatBody: 'threatBody' + uuid(),
+            relatedItemBody: 'relatedItemBody' + uuid(),
             values: null,
             reloadcount: 0,
         };
diff --git a/boranga/frontend/boranga/src/components/form_species_split.vue b/boranga/frontend/boranga/src/components/form_species_split.vue
index e54a2afa..d09a80e6 100644
--- a/boranga/frontend/boranga/src/components/form_species_split.vue
+++ b/boranga/frontend/boranga/src/components/form_species_split.vue
@@ -103,6 +103,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import SpeciesProfile from '@/components/common/species_communities/species_split/species_split_profile.vue';
 import SpeciesDocuments from '@/components/common/species_communities/species_split/species_split_documents.vue';
 import SpeciesThreats from '@/components/common/species_communities/species_split/species_split_threats.vue';
@@ -132,12 +133,11 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            profileBody: 'profileBody' + vm._uid,
-            documentBody: 'documentBody' + vm._uid,
-            threatBody: 'threatBody' + vm._uid,
-            relatedItemBody: 'relatedItemBody' + vm._uid,
+            profileBody: 'profileBody' + uuid(),
+            documentBody: 'documentBody' + uuid(),
+            threatBody: 'threatBody' + uuid(),
+            relatedItemBody: 'relatedItemBody' + uuid(),
             values: null,
             reloadcount: 0,
             document_selection: null,
diff --git a/boranga/frontend/boranga/src/components/forms/select.vue b/boranga/frontend/boranga/src/components/forms/select.vue
index 2eebddc2..10c6eb18 100755
--- a/boranga/frontend/boranga/src/components/forms/select.vue
+++ b/boranga/frontend/boranga/src/components/forms/select.vue
@@ -160,6 +160,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import Comment from './comment.vue';
 import HelpText from './help_text.vue';
 import HelpTextUrl from './help_text_url.vue';
@@ -193,10 +194,9 @@ export default {
         readonly: Boolean,
     },
     data: function () {
-        let vm = this;
         return {
             selected: this.isMultiple ? [] : '',
-            selectid: 'select' + vm._uid,
+            selectid: 'select' + uuid(),
             multipleSelected: [],
             showingComment: false,
         };
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index 8bbe6478..8936dfc8 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -29,8 +29,8 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import { api_endpoints, constants, helpers } from '@/utils/hooks';
-
 import datatable from '@/utils/vue/datatable.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
 import AgendaModal from './agenda_datatable.vue';
@@ -51,8 +51,8 @@ export default {
     data: function () {
         let vm = this;
         return {
-            csQueueBody: 'csQueueBody' + vm._uid,
-            datatable_id: 'cs-queue-datatable-' + vm._uid,
+            csQueueBody: 'csQueueBody' + uuid(),
+            datatable_id: 'cs-queue-datatable-' + uuid(),
             cs_queue_headers: [
                 'Order',
                 'Number',
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
index c5eb320e..476a2973 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
@@ -106,8 +106,8 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import { api_endpoints, constants, helpers } from '@/utils/hooks';
-
 import datatable from '@/utils/vue/datatable.vue';
 import CollapsibleFilters from '@/components/forms/collapsible_component.vue';
 import moment from 'moment';
@@ -150,9 +150,8 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            datatable_id: 'meetings-datatable-' + vm._uid,
+            datatable_id: 'meetings-datatable-' + uuid(),
 
             filterFromMeetingStartDate: sessionStorage.getItem(
                 this.filterFromMeetingStartDate_cache
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
index 3d5f95ac..1cecd184 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
@@ -46,6 +46,7 @@
     </div>
 </template>
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import DocumentDetail from '@/components/common/add_document.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -75,8 +76,8 @@ export default {
         return {
             uuid: 0,
             minutesHistoryId: null,
-            minutesBody: 'minutesBody' + vm._uid,
-            panelBody: 'meeting-minutes' + vm._uid,
+            minutesBody: 'minutesBody' + uuid(),
+            panelBody: 'meeting-minutes' + uuid(),
             values: null,
             minutes_url: api_endpoints.minutes,
             minutes_headers: [
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
index 3ad5eed6..b4743fc4 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
@@ -875,6 +875,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FormSection from '@/components/forms/section_toggle.vue';
@@ -905,7 +906,6 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             occ_form_key: 0,
             contact_table_key: 0,
@@ -913,12 +913,12 @@ export default {
             threat_table_key: 0,
             site_table_key: 0,
             tenure_table_key: 0,
-            locationBody: 'locationBody' + vm._uid,
-            habitatBody: 'habitatBody' + vm._uid,
-            observationBody: 'observationBody' + vm._uid,
-            threatBody: 'threatBody' + vm._uid,
-            documentBody: 'documentBody' + vm._uid,
-            occurrenceBody: 'occurrenceBody' + vm._uid,
+            locationBody: 'locationBody' + uuid(),
+            habitatBody: 'habitatBody' + uuid(),
+            observationBody: 'observationBody' + uuid(),
+            threatBody: 'threatBody' + uuid(),
+            documentBody: 'documentBody' + uuid(),
+            occurrenceBody: 'occurrenceBody' + uuid(),
             isModalOpen: false,
             selectedOccurrences: [this.main_occurrence_obj],
             selectedOccurrenceIds: [this.main_occurrence_obj.id],
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
index edaa5463..c6000537 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_contacts.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import { constants, helpers } from '@/utils/hooks';
 
@@ -35,7 +36,7 @@ export default {
     data: function () {
         let vm = this;
         return {
-            panelBody: 'contact-combine-select-' + vm._uid,
+            panelBody: 'contact-combine-select-' + uuid(),
             checkedContactNames: [],
             contacts_headers: [
                 'Occurrence',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
index 9ee60871..1a56c20f 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_documents.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import { constants, helpers } from '@/utils/hooks';
 
@@ -35,7 +36,7 @@ export default {
     data: function () {
         let vm = this;
         return {
-            panelBody: 'document-combine-select-' + vm._uid,
+            panelBody: 'document-combine-select-' + uuid(),
             documents_headers: [
                 'Occurrence',
                 'Number',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
index a8a9a842..7f86e20d 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_selection.vue
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import { constants, api_endpoints, helpers } from '@/utils/hooks';
 import SectionModal from '@/components/common/occurrence/occ_section_modal.vue';
@@ -107,7 +108,7 @@ export default {
 
         return {
             tableKey: 0,
-            panelBody: 'occ-combine-select-' + vm._uid,
+            panelBody: 'occ-combine-select-' + uuid(),
             sectionTypeFormatted: null,
             sectionObj: null,
             sectionOCCId: null,
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
index 744c5373..fd4649f1 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_sites.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import { constants, helpers } from '@/utils/hooks';
 
@@ -35,7 +36,7 @@ export default {
     data: function () {
         let vm = this;
         return {
-            panelBody: 'site-combine-select-' + vm._uid,
+            panelBody: 'site-combine-select-' + uuid(),
             checkedSiteNames: [],
             sites_headers: [
                 'Occurrence',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
index c9c9f8e8..273e5f79 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_tenures.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import { constants, helpers } from '@/utils/hooks';
 
@@ -35,7 +36,7 @@ export default {
     data: function () {
         let vm = this;
         return {
-            panelBody: 'tenure-combine-select-' + vm._uid,
+            panelBody: 'tenure-combine-select-' + uuid(),
             checkedTenureNames: [],
             tenures_headers: [
                 'Occurrence',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
index d7787351..852d24e1 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine_threats.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@vue-utils/datatable.vue';
 import { constants, helpers } from '@/utils/hooks';
 
@@ -36,7 +37,7 @@ export default {
         let vm = this;
         return {
             checkedOriginalReports: [],
-            panelBody: 'threat-combine-select-' + vm._uid,
+            panelBody: 'threat-combine-select-' + uuid(),
             threats_headers: [
                 'Occurrence',
                 'Number',
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
index f74f1de4..9658e333 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import datatable from '@/utils/vue/datatable.vue';
 import SiteDetail from '@/components/internal/occurrence/add_site.vue';
 import OCCSiteHistory from '../../internal/occurrence/occ_site_history.vue';
@@ -58,12 +59,11 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
             uuid: 0,
             occSiteHistoryId: null,
             occ_site_url: api_endpoints.occ_site,
-            datatable_id: 'occurrence-site-datatable-' + vm._uid,
+            datatable_id: 'occurrence-site-datatable-' + uuid(),
             headers: [
                 'Site Number',
                 'Site Name',
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
index 13d1a9d1..e5797ba0 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_combine.vue
@@ -280,6 +280,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FileField2 from '@/components/forms/filefield.vue';
@@ -312,10 +313,9 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            newSpeciesBody: 'newSpeciesBody' + vm._uid,
-            speciesBody: 'speciesBody' + vm._uid,
+            newSpeciesBody: 'newSpeciesBody' + uuid(),
+            speciesBody: 'speciesBody' + uuid(),
             speciesCombineFormKey: 0,
             new_combine_species: null,
             new_combine_species_display: '',
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
index 15c3e2cc..3965f9be 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
@@ -74,6 +74,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FileField2 from '@/components/forms/filefield.vue';
@@ -98,10 +99,9 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            newSpeciesBody: 'newSpeciesBody' + vm._uid,
-            speciesBody: 'speciesBody' + vm._uid,
+            newSpeciesBody: 'newSpeciesBody' + uuid(),
+            speciesBody: 'speciesBody' + uuid(),
             new_rename_species: null,
             submitSpeciesRename: false,
             isModalOpen: false,
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
index f138b78a..26218bd0 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_split.vue
@@ -272,6 +272,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FileField2 from '@/components/forms/filefield.vue';
@@ -301,10 +302,9 @@ export default {
         },
     },
     data: function () {
-        let vm = this;
         return {
-            originalBody: 'originalBody' + vm._uid,
-            species2Body: 'species2Body' + vm._uid,
+            originalBody: 'originalBody' + uuid(),
+            species2Body: 'species2Body' + uuid(),
             species_community_original: null,
             submitSpeciesSplit: false,
             isModalOpen: false,
diff --git a/boranga/frontend/boranga/src/components/internal/users/manage.vue b/boranga/frontend/boranga/src/components/internal/users/manage.vue
index 7b78ba95..7cd72204 100644
--- a/boranga/frontend/boranga/src/components/internal/users/manage.vue
+++ b/boranga/frontend/boranga/src/components/internal/users/manage.vue
@@ -558,6 +558,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
 import { api_endpoints, helpers } from '@/utils/hooks';
 import datatable from '@vue-utils/datatable.vue';
 import CommsLogs from '@common-utils/comms_logs.vue';
@@ -602,12 +603,12 @@ export default {
     data() {
         let vm = this;
         return {
-            adBody: 'adBody' + vm._uid,
-            pdBody: 'pdBody' + vm._uid,
-            cdBody: 'cdBody' + vm._uid,
-            odBody: 'odBody' + vm._uid,
-            idBody: 'idBody' + vm._uid,
-            dTab: 'dTab' + vm._uid,
+            adBody: 'adBody' + uuid(),
+            pdBody: 'pdBody' + uuid(),
+            cdBody: 'cdBody' + uuid(),
+            odBody: 'odBody' + uuid(),
+            idBody: 'idBody' + uuid(),
+            dTab: 'dTab' + uuid(),
             user: {
                 residential_address: {},
                 borangacompliance_organisations: [],

From 1c60dcecafc40b8ab3b27d5f52858555a52a9592 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 11:27:24 +0800
Subject: [PATCH 061/138] Remove unused code.

---
 boranga/frontend/boranga/src/utils/vue/datatable.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/boranga/frontend/boranga/src/utils/vue/datatable.vue b/boranga/frontend/boranga/src/utils/vue/datatable.vue
index ba5d19aa..4a4be809 100755
--- a/boranga/frontend/boranga/src/utils/vue/datatable.vue
+++ b/boranga/frontend/boranga/src/utils/vue/datatable.vue
@@ -42,12 +42,9 @@ export default {
             vmDataTable: null,
         };
     },
-    computed: {},
     mounted: function () {
         let vm = this;
         vm.table = $('#' + vm.id);
-        //$.fn.dataTable.ext.errMode = 'throw';
-        //$.fn.dataTable.ext.classes.sPageButton = 'page-link page-item';
         vm.initEvents();
     },
     methods: {

From cb588442b1ab5c23e40a5462b207ea513fab32d7 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 12:02:53 +0800
Subject: [PATCH 062/138] Only show submission panel if there is a submitter
 and there is a lodgement date.

---
 .../internal/species_communities/species_communities.vue  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index 5e6e8716..e3d592fc 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -703,9 +703,11 @@ export default {
             }
         },
         canSeeSubmission: function () {
-            //return this.proposal && (this.proposal.processing_status != 'With Assessor (Requirements)' && this.proposal.processing_status != 'With Approver' && !this.isFinalised)
-            //return this.proposal && (this.proposal.processing_status != 'With Assessor (Requirements)')
-            return true;
+            return (
+                this.proposal &&
+                this.proposal.submitter &&
+                this.proposal.processing_status != 'Draft'
+            );
         },
         hasUserEditMode: function () {
             return this.species_community &&

From 0d578fe69706fd90003b976646e8f79e3e0da414 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 12:04:48 +0800
Subject: [PATCH 063/138] Remove scoped attribute from style block as in Vue 3
 scoped styles are not inherited by the content inside a slot.

---
 .../boranga/src/components/forms/collapsible_component.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/forms/collapsible_component.vue b/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
index 5f44e6e8..9cc72e1a 100644
--- a/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
+++ b/boranga/frontend/boranga/src/components/forms/collapsible_component.vue
@@ -97,7 +97,7 @@ export default {
 };
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
 .toggle_filters_wrapper {
     background: #efefee;
     padding: 0.5em;

From 308728b64bc3fdf24e3f20f1902e995de4297af1 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 12:05:00 +0800
Subject: [PATCH 064/138] Only show submission panel if there is a submitter
 and there is a lodgement date.

---
 .../internal/species_communities/species_communities.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index e3d592fc..be9fc9fb 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -704,9 +704,9 @@ export default {
         },
         canSeeSubmission: function () {
             return (
-                this.proposal &&
-                this.proposal.submitter &&
-                this.proposal.processing_status != 'Draft'
+                this.species_community &&
+                this.species_community.submitter &&
+                this.species_community.lodgement_date
             );
         },
         hasUserEditMode: function () {

From 8ea048254cb64ac77bcfc12378d4e73aa59d39c4 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 12:05:23 +0800
Subject: [PATCH 065/138] Add some margin to the top and bottom of the
 datatable.

---
 boranga/frontend/boranga/src/utils/vue/datatable.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/boranga/frontend/boranga/src/utils/vue/datatable.vue b/boranga/frontend/boranga/src/utils/vue/datatable.vue
index 4a4be809..d4e47bc1 100755
--- a/boranga/frontend/boranga/src/utils/vue/datatable.vue
+++ b/boranga/frontend/boranga/src/utils/vue/datatable.vue
@@ -97,6 +97,11 @@ td {
     word-wrap: break-word;
 }
 
+table.dataTable {
+    margin-top: 8px;
+    margin-bottom: 8px !important;
+}
+
 table.table-bordered.dataTable tbody th,
 table.table-bordered.dataTable tbody td {
     border-bottom-width: 0;

From 1db7ecf69d9b300f83f0b4d85cbadbbd3e966f51 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 13:52:04 +0800
Subject: [PATCH 066/138] Add in missing rollup input.

---
 boranga/frontend/boranga/vite.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/boranga/frontend/boranga/vite.config.js b/boranga/frontend/boranga/vite.config.js
index 47027cca..bd6f2014 100644
--- a/boranga/frontend/boranga/vite.config.js
+++ b/boranga/frontend/boranga/vite.config.js
@@ -59,6 +59,9 @@ export default defineConfig({
         publicPath: '/static/boranga_vue/',
         sourcemap: true,
         rollupOptions: {
+            input: {
+                main: path.resolve(__dirname, 'src/main.js'),
+            },
             output: {
                 entryFileNames: 'js/[name].js',
                 chunkFileNames: 'js/[name].js',

From f28512dfa383d53bf65349db41ddd6a6d9cf231f Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 14:54:18 +0800
Subject: [PATCH 067/138] Change remove action for threats to discard (which is
 what it should be called).

---
 .../src/components/common/occurrence/occ_threats.vue | 12 ++++++------
 .../src/components/common/occurrence/ocr_threats.vue |  6 +++---
 .../common/species_communities/community_threats.vue | 12 ++++++------
 .../common/species_communities/species_threats.vue   | 12 ++++++------
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
index 0bcacae2..6c6189b3 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_threats.vue
@@ -231,7 +231,7 @@ export default {
 
             threat_status_filter_list: [
                 { id: 'active', name: 'Active' },
-                { id: 'removed', name: 'Removed' },
+                { id: 'removed', name: 'Discarded' },
             ],
 
             threats_headers: [
@@ -454,7 +454,7 @@ export default {
                                 links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
                                 if (!vm.isReadOnly) {
                                     links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
-                                    links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
+                                    links += `<a href='#' data-discard-threat='${full.id}'>Discard</a><br>`;
                                 }
                             } else {
                                 links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
@@ -659,11 +659,11 @@ export default {
         discardThreat: function (id) {
             let vm = this;
             swal.fire({
-                title: 'Remove Threat',
-                text: 'Are you sure you want to remove this Threat?',
+                title: 'Discard Threat',
+                text: 'Are you sure you want to discard this Threat?',
                 icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: 'Remove Threat',
+                confirmButtonText: 'Discard Threat',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
@@ -685,7 +685,7 @@ export default {
                             () => {
                                 swal.fire({
                                     title: 'Discarded',
-                                    text: 'Your threat has been removed',
+                                    text: 'Your threat has been discarded',
                                     icon: 'success',
                                     customClass: {
                                         confirmButton: 'btn btn-primary',
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
index c1f6e733..a3e7af08 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_threats.vue
@@ -197,7 +197,7 @@ export default {
 
             threat_status_filter_list: [
                 { id: 'active', name: 'Active' },
-                { id: 'removed', name: 'Removed' },
+                { id: 'removed', name: 'Discarded' },
             ],
 
             threats_headers: [
@@ -391,7 +391,7 @@ export default {
                                 if (full.visible) {
                                     links += `<a href='#${full.id}' data-view-threat='${full.id}'>View</a><br/>`;
                                     links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
-                                    links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
+                                    links += `<a href='#' data-discard-threat='${full.id}'>Discard</a><br>`;
                                 } else {
                                     links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
                                 }
@@ -602,7 +602,7 @@ export default {
                             () => {
                                 swal.fire({
                                     title: 'Discarded',
-                                    text: 'Your threat has been removed',
+                                    text: 'Your threat has been discarded',
                                     icon: 'success',
                                     customClass: {
                                         confirmButton: 'btn btn-primary',
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
index 9acdad76..5e8f82cd 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/community_threats.vue
@@ -222,7 +222,7 @@ export default {
 
             threat_status_filter_list: [
                 { id: 'active', name: 'Active' },
-                { id: 'removed', name: 'Removed' },
+                { id: 'removed', name: 'Discarded' },
             ],
 
             threats_headers: [
@@ -413,7 +413,7 @@ export default {
                                 if (!vm.is_readonly) {
                                     if (full.visible) {
                                         links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
-                                        links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
+                                        links += `<a href='#' data-discard-threat='${full.id}'>Discard</a><br>`;
                                     } else {
                                         links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
                                     }
@@ -618,13 +618,13 @@ export default {
                     ' Doing so will make the Species Record Private';
             }
             swal.fire({
-                title: 'Remove Threat',
+                title: 'Discard Threat',
                 text:
-                    'Are you sure you want to remove this Threat?' +
+                    'Are you sure you want to discard this Threat?' +
                     public_message,
                 icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: 'Remove Threat',
+                confirmButtonText: 'Discard Threat',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
@@ -646,7 +646,7 @@ export default {
                             () => {
                                 swal.fire({
                                     title: 'Discarded',
-                                    text: 'Your threat has been removed',
+                                    text: 'Your threat has been discarded',
                                     icon: 'success',
                                     customClass: {
                                         confirmButton: 'btn btn-primary',
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
index f3d32b59..c2ec48cf 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_threats.vue
@@ -224,7 +224,7 @@ export default {
 
             threat_status_filter_list: [
                 { id: 'active', name: 'Active' },
-                { id: 'removed', name: 'Removed' },
+                { id: 'removed', name: 'Discarded' },
             ],
 
             threats_headers: [
@@ -415,7 +415,7 @@ export default {
                                 if (!vm.is_readonly) {
                                     if (full.visible) {
                                         links += `<a href='#${full.id}' data-edit-threat='${full.id}'>Edit</a><br/>`;
-                                        links += `<a href='#' data-discard-threat='${full.id}'>Remove</a><br>`;
+                                        links += `<a href='#' data-discard-threat='${full.id}'>Discard</a><br>`;
                                     } else {
                                         links += `<a href='#' data-reinstate-threat='${full.id}'>Reinstate</a><br>`;
                                     }
@@ -621,13 +621,13 @@ export default {
             }
 
             swal.fire({
-                title: 'Remove Threat',
+                title: 'Discard Threat',
                 text:
-                    'Are you sure you want to remove this Threat?' +
+                    'Are you sure you want to discard this Threat?' +
                     public_message,
                 icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: 'Remove Threat',
+                confirmButtonText: 'Discard Threat',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',
@@ -649,7 +649,7 @@ export default {
                             () => {
                                 swal.fire({
                                     title: 'Discarded',
-                                    text: 'Your threat has been removed',
+                                    text: 'Your threat has been discarded',
                                     icon: 'success',
                                     customClass: {
                                         confirmButton: 'btn btn-primary',

From be5df3db9aca10e3fc9f71c28777d8a9066c1e10 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 15:03:59 +0800
Subject: [PATCH 068/138] Fix the comms log file upload processing.

---
 boranga/components/conservation_status/api.py | 10 ++++++----
 boranga/components/meetings/api.py            |  9 +++++----
 boranga/components/occurrence/api.py          | 20 +++++++++----------
 .../components/species_and_communities/api.py | 20 +++++++++----------
 .../src/components/common/add_comm_log.vue    |  8 ++++++--
 5 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/boranga/components/conservation_status/api.py b/boranga/components/conservation_status/api.py
index 6b727b8c..f9ac59d3 100644
--- a/boranga/components/conservation_status/api.py
+++ b/boranga/components/conservation_status/api.py
@@ -1455,11 +1455,13 @@ def add_comms_log(self, request, *args, **kwargs):
         serializer = ConservationStatusLogEntrySerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
         comms = serializer.save()
-        for f in request.FILES:
+
+        # Save the files
+        for f in request.FILES.getlist("files"):
             document = comms.documents.create()
-            document.check_file(request.FILES[f])
-            document.name = str(request.FILES[f])
-            document._file = request.FILES[f]
+            document.check_file(f)
+            document.name = str(f)
+            document._file = f
             document.save()
 
         return Response(serializer.data)
diff --git a/boranga/components/meetings/api.py b/boranga/components/meetings/api.py
index 7a22149f..16c2f614 100644
--- a/boranga/components/meetings/api.py
+++ b/boranga/components/meetings/api.py
@@ -511,11 +511,11 @@ def add_comms_log(self, request, *args, **kwargs):
         comms = serializer.save()
 
         # Save the files
-        for f in request.FILES:
+        for f in request.FILES.getlist("files"):
             document = comms.documents.create()
-            document.check_file(request.FILES[f])
-            document.name = str(request.FILES[f])
-            document._file = request.FILES[f]
+            document.check_file(f)
+            document.name = str(f)
+            document._file = f
             document.save()
 
         return Response(serializer.data)
@@ -647,6 +647,7 @@ def update(self, request, *args, **kwargs):
         return Response(serializer.data)
 
     def create(self, request, *args, **kwargs):
+        logger.debug(request.data)
         serializer = SaveMinutesSerializer(data=json.loads(request.data.get("data")))
         serializer.is_valid(raise_exception=True)
         instance = serializer.save(no_revision=True)
diff --git a/boranga/components/occurrence/api.py b/boranga/components/occurrence/api.py
index 4bf8e183..45b75b99 100644
--- a/boranga/components/occurrence/api.py
+++ b/boranga/components/occurrence/api.py
@@ -1791,14 +1791,14 @@ def add_comms_log(self, request, *args, **kwargs):
         serializer = OccurrenceReportLogEntrySerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
         comms = serializer.save()
+
         # Save the files
-        for f in request.FILES:
+        for f in request.FILES.getlist("files"):
             document = comms.documents.create()
-            document.check_file(request.FILES[f])
-            document.name = str(request.FILES[f])
-            document._file = request.FILES[f]
+            document.check_file(f)
+            document.name = str(f)
+            document._file = f
             document.save()
-        # End Save Documents
 
         return Response(serializer.data)
 
@@ -3930,14 +3930,14 @@ def add_comms_log(self, request, *args, **kwargs):
         serializer = OccurrenceLogEntrySerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
         comms = serializer.save()
+
         # Save the files
-        for f in request.FILES:
+        for f in request.FILES.getlist("files"):
             document = comms.documents.create()
-            document.check_file(request.FILES[f])
-            document.name = str(request.FILES[f])
-            document._file = request.FILES[f]
+            document.check_file(f)
+            document.name = str(f)
+            document._file = f
             document.save()
-        # End Save Documents
 
         return Response(serializer.data)
 
diff --git a/boranga/components/species_and_communities/api.py b/boranga/components/species_and_communities/api.py
index 58d57d8c..c7700a48 100755
--- a/boranga/components/species_and_communities/api.py
+++ b/boranga/components/species_and_communities/api.py
@@ -1708,14 +1708,14 @@ def add_comms_log(self, request, *args, **kwargs):
         serializer = SpeciesLogEntrySerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
         comms = serializer.save()
+
         # Save the files
-        for f in request.FILES:
+        for f in request.FILES.getlist("files"):
             document = comms.documents.create()
-            document.check_file(request.FILES[f])
-            document.name = str(request.FILES[f])
-            document._file = request.FILES[f]
+            document.check_file(f)
+            document.name = str(f)
+            document._file = f
             document.save()
-        # End Save Documents
 
         return Response(serializer.data)
 
@@ -2183,14 +2183,14 @@ def add_comms_log(self, request, *args, **kwargs):
         serializer = CommunityLogEntrySerializer(data=request.data)
         serializer.is_valid(raise_exception=True)
         comms = serializer.save()
+
         # Save the files
-        for f in request.FILES:
+        for f in request.FILES.getlist("files"):
             document = comms.documents.create()
-            document.check_file(request.FILES[f])
-            document.name = str(request.FILES[f])
-            document._file = request.FILES[f]
+            document.check_file(f)
+            document.name = str(f)
+            document._file = f
             document.save()
-        # End Save Documents
 
         return Response(serializer.data)
 
diff --git a/boranga/frontend/boranga/src/components/common/add_comm_log.vue b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
index 34cf2a48..b4872510 100755
--- a/boranga/frontend/boranga/src/components/common/add_comm_log.vue
+++ b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
@@ -239,7 +239,9 @@ export default {
         return {
             isModalOpen: false,
             form: null,
-            comms: {},
+            comms: {
+                type: '',
+            },
             state: 'proposed_approval',
             addingComms: false,
             validation_form: null,
@@ -339,11 +341,13 @@ export default {
             let vm = this;
             vm.errors = false;
             let comms = new FormData(vm.form);
+            for (let i = 0; i < vm.files.length; i++) {
+                comms.append('files', vm.files[i].file);
+            }
             vm.addingComms = true;
             fetch(vm.url, {
                 method: 'POST',
                 body: comms,
-                'Content-Type': 'application/json',
             }).then(
                 () => {
                     vm.addingComms = false;

From 8dc2556173cda4ae94afc452feecff258c1b0765 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 15:05:33 +0800
Subject: [PATCH 069/138] Fix posting of form data with fetch.

---
 .../src/components/common/add_document.vue        | 10 ++--------
 .../common/occurrence/add_contact_detail.vue      | 10 ++--------
 .../common/occurrence/add_observer_detail.vue     | 10 ++--------
 .../occurrence/occ_ocr_existing_threats.vue       |  6 ------
 .../common/occurrence/occ_related_ocr_table.vue   |  3 ---
 .../common/species_communities/add_threat.vue     | 15 +++++++--------
 6 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/add_document.vue b/boranga/frontend/boranga/src/components/common/add_document.vue
index 9af92aef..12a4c38e 100644
--- a/boranga/frontend/boranga/src/components/common/add_document.vue
+++ b/boranga/frontend/boranga/src/components/common/add_document.vue
@@ -498,10 +498,7 @@ export default {
                 formData.append('data', JSON.stringify(documentObj));
                 fetch(helpers.add_endpoint_json(vm.url, documentObj.id), {
                     method: 'PUT',
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                    body: JSON.stringify(formData),
+                    body: formData,
                 }).then(
                     () => {
                         vm.updatingDocument = false;
@@ -519,10 +516,7 @@ export default {
                 formData.append('data', JSON.stringify(documentObj));
                 fetch(vm.url, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        body: JSON.stringify(formData),
-                    },
+                    body: formData,
                 }).then(
                     () => {
                         vm.addingDocument = false;
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
index b6dbc51e..d6324d38 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
@@ -286,10 +286,7 @@ export default {
                 formData.append('data', JSON.stringify(contactObj));
                 fetch(helpers.add_endpoint_json(vm.url, contactObj.id), {
                     method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
+                    body: formData,
                 }).then(
                     () => {
                         vm.updatingContact = false;
@@ -307,10 +304,7 @@ export default {
                 formData.append('data', JSON.stringify(contactObj));
                 fetch(vm.url, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
+                    body: formData,
                 }).then(
                     () => {
                         vm.addingContact = false;
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
index 8728f410..2fd75415 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
@@ -338,10 +338,7 @@ export default {
                 formData.append('data', JSON.stringify(observerObj));
                 fetch(helpers.add_endpoint_json(vm.url, observerObj.id), {
                     method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
+                    body: formData,
                 }).then(
                     () => {
                         vm.updatingObserver = false;
@@ -358,10 +355,7 @@ export default {
                 formData.append('data', JSON.stringify(observerObj));
                 fetch(vm.url, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
+                    body: formData,
                 }).then(
                     () => {
                         vm.addingObserver = false;
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
index 6093afae..385091a8 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_ocr_existing_threats.vue
@@ -308,23 +308,17 @@ export default {
             let threatObj = JSON.parse(JSON.stringify(newThreatObj));
             let formData = new FormData();
 
-            vm.addingThreat = true;
             formData.append('data', JSON.stringify(threatObj));
             fetch(vm.occ_threat_url, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
                 body: formData,
             }).then(
                 () => {
-                    vm.addingThreat = false;
                     vm.refreshFromResponse();
                     vm.$parent.updatedThreats();
                 },
                 (error) => {
                     vm.errors = true;
-                    vm.addingThreat = false;
                     vm.errorString = helpers.apiVueResourceError(error);
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
index d9c2c567..51e2ff4e 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
@@ -333,9 +333,6 @@ export default {
                 {
                     method: 'POST',
                     body: formData,
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
                 }
             ).then(
                 async (response) => {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
index 0a0657f9..c107ae92 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
@@ -477,6 +477,11 @@
                                             v-model="threatObj.date_observed"
                                             :disabled="isReadOnly"
                                             type="date"
+                                            :max="
+                                                new Date()
+                                                    .toISOString()
+                                                    .split('T')[0]
+                                            "
                                             class="form-control"
                                             name="date_observed"
                                         />
@@ -674,10 +679,7 @@ export default {
                 formData.append('data', JSON.stringify(threatObj));
                 fetch(helpers.add_endpoint_json(vm.url, threatObj.id), {
                     method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
+                    body: formData,
                 }).then(
                     () => {
                         vm.updatingThreat = false;
@@ -695,10 +697,7 @@ export default {
                 formData.append('data', JSON.stringify(threatObj));
                 fetch(vm.url, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
+                    body: formData,
                 }).then(
                     () => {
                         vm.addingThreat = false;

From d48990dcdab77aaa466429009a75c503d72fc876 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 15:06:09 +0800
Subject: [PATCH 070/138] Minor improvement in naming.

---
 .../common/occurrence/occ_related_species_table.vue         | 6 +++---
 .../common/occurrence/ocr_related_species_table.vue         | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
index fa946ae3..4d8f9b4d 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_species_table.vue
@@ -117,7 +117,7 @@ export default {
                 render: function (row, type, full) {
                     let links = '';
                     if (!vm.isReadOnly) {
-                        links += `<a href='#' data-discard-species='${full.id}'>Remove</a><br>`;
+                        links += `<a href='#' data-remove-related-species='${full.id}'>Remove</a><br>`;
                     }
                     return links;
                 },
@@ -288,10 +288,10 @@ export default {
             let vm = this;
             vm.$refs.related_species_datatable.vmDataTable.on(
                 'click',
-                'a[data-discard-species]',
+                'a[data-remove-related-species]',
                 function (e) {
                     e.preventDefault();
-                    var id = $(this).attr('data-discard-species');
+                    var id = $(this).attr('data-remove-related-species');
                     vm.removeRelatedSpecies(id);
                 }
             );
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
index 841193ce..3b67c329 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_related_species_table.vue
@@ -117,7 +117,7 @@ export default {
                 render: function (row, type, full) {
                     let links = '';
                     if (!vm.isReadOnly) {
-                        links += `<a href='#' data-discard-species='${full.id}'>Remove</a><br>`;
+                        links += `<a href='#' data-remove-related-species='${full.id}'>Remove</a><br>`;
                     }
                     return links;
                 },
@@ -300,10 +300,10 @@ export default {
             let vm = this;
             vm.$refs.related_species_datatable.vmDataTable.on(
                 'click',
-                'a[data-discard-species]',
+                'a[data-remove-related-species]',
                 function (e) {
                     e.preventDefault();
-                    var id = $(this).attr('data-discard-species');
+                    var id = $(this).attr('data-remove-related-species');
                     vm.removeRelatedSpecies(id);
                 }
             );

From ad09d6bc8c47434de7145c4e8d8f9892054958f3 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 15:06:20 +0800
Subject: [PATCH 071/138] Remove dead code.

---
 .../boranga/src/components/internal/meetings/meeting.vue        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
index c89f18c7..210185b4 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
@@ -612,8 +612,6 @@ export default {
             } else {
                 return blank_fields;
             }
-            //to count if records exists in the minutes table
-            // vm.$refs.minutes.$refs.minutes_datatable.vmDataTable.rows().count();
         },
         isFutureMeeting: function () {
             let vm = this;

From a52cc033510abf63307aac1f83cbb4fe119c56b4 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 15:06:32 +0800
Subject: [PATCH 072/138] Minor improvement in naming.

---
 .../boranga/src/components/internal/meetings/minutes.vue      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
index 1cecd184..330a3164 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/minutes.vue
@@ -11,7 +11,7 @@
                         <button
                             type="button"
                             class="btn btn-primary mb-2"
-                            @click.prevent="newDocument"
+                            @click.prevent="addMinutes"
                         >
                             <i class="fa-solid fa-circle-plus"></i>
                             Add Minutes
@@ -260,7 +260,7 @@ export default {
         });
     },
     methods: {
-        newDocument: function () {
+        addMinutes: function () {
             let vm = this;
             this.$refs.document_detail.document_id = '';
             var new_document_another = {

From ac81cfc339a9b0496e026edde67405d9be8035c7 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 15:36:48 +0800
Subject: [PATCH 073/138] Minor form data fix. More work to do here.

---
 .../boranga/src/components/common/component_map.vue         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index ce94e6b8..57e0f272 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -4705,16 +4705,14 @@ export default {
             }
         },
         validate_map_docs: function () {
-            var formData = new FormData();
             var vm = this;
-            formData.append('csrfmiddlewaretoken', vm.csrf_token);
-            vm.isValidating = true;
+            var formData = new FormData();
             vm.errorString = '';
             const options = {
                 method: 'POST',
                 body: formData,
-                'content-type': 'application/json',
             };
+            vm.isValidating = true;
             fetch(
                 helpers.add_endpoint_join(
                     api_endpoints.occurrence_report,

From 11743b08e701f6efbb05bb2efe3119f7f7c670e8 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 15:37:04 +0800
Subject: [PATCH 074/138] Minor duplicate text fix.

---
 .../internal/conservation_status/conservation_status.vue      | 4 ++--
 .../boranga/src/components/internal/meetings/meeting.vue      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index 5ebbacc6..317a0af4 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -126,7 +126,7 @@
                                             class="float-end"
                                             role="button"
                                             @click.prevent="assignRequestUser()"
-                                            >Assign >Assign to me</a
+                                            >Assign to me</a
                                         >
                                     </template>
                                     <template
@@ -166,7 +166,7 @@
                                             class="float-end"
                                             role="button"
                                             @click.prevent="assignRequestUser()"
-                                            >Assign >Assign to me</a
+                                            >Assign to me</a
                                         >
                                     </template>
                                 </div>
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
index 210185b4..7269f1ad 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meeting.vue
@@ -198,7 +198,7 @@
                                                     "
                                                     @click.prevent="save()"
                                                 >
-                                                    Save and Save and Continue
+                                                    Save and Continue
                                                 </button>
 
                                                 <button
@@ -228,7 +228,7 @@
                                                     "
                                                     @click.prevent="save_exit()"
                                                 >
-                                                    Save and Save and Exit
+                                                    Save and Exit
                                                 </button>
                                             </div>
                                             <div

From b6e5a5703792da311d67e54a17997fba872e1acd Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 16:17:37 +0800
Subject: [PATCH 075/138] Add confirmation prompt when creating a new meeting.

---
 .../internal/meetings/meetings_datatable.vue  | 66 ++++++++++++-------
 1 file changed, 41 insertions(+), 25 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
index 476a2973..4b778ba8 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
@@ -486,32 +486,48 @@ export default {
             this.$refs.meetings_datatable.vmDataTable.clear().draw();
         },
         createMeeting: async function () {
-            let newMeetingId = null;
-            try {
-                const createUrl = api_endpoints.meeting + '/';
-                let payload = new Object();
-                payload.meeting_type = 'meeting';
-                let response = await fetch(createUrl, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(payload),
-                });
-                let savedMeeting = await response.json();
-                if (savedMeeting) {
-                    newMeetingId = savedMeeting.id;
-                }
-                this.$router.push({
-                    name: 'internal-meetings',
-                    params: { meeting_id: newMeetingId },
-                });
-            } catch (err) {
-                console.log(err);
-                if (this.is_internal) {
-                    return err;
+            swal.fire({
+                title: `Add Meeting`,
+                text: 'Are you sure you want to add a new meeting?',
+                icon: 'question',
+                showCancelButton: true,
+                confirmButtonText: 'Add Meeting',
+                reverseButtons: true,
+                customClass: {
+                    confirmButton: 'btn btn-primary',
+                    cancelButton: 'btn btn-secondary',
+                },
+            }).then(async (swalresult) => {
+                if (swalresult.isConfirmed) {
+                    let newMeetingId = null;
+                    try {
+                        swal.fire;
+                        const createUrl = api_endpoints.meeting + '/';
+                        let payload = new Object();
+                        payload.meeting_type = 'meeting';
+                        let response = await fetch(createUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(payload),
+                        });
+                        let savedMeeting = await response.json();
+                        if (savedMeeting) {
+                            newMeetingId = savedMeeting.id;
+                        }
+                        this.$router.push({
+                            name: 'internal-meetings',
+                            params: { meeting_id: newMeetingId },
+                        });
+                    } catch (err) {
+                        console.log(err);
+                        if (this.is_internal) {
+                            return err;
+                        }
+                    }
                 }
-            }
+            });
         },
         discardMeeting: function (meeting_id) {
             let vm = this;

From 5b5cd65c95fb8f77f40f9ecb43d9ddb25a8b425f Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 12 Dec 2024 16:28:27 +0800
Subject: [PATCH 076/138] Change submit button to be 'activate' instead.

---
 .../species_communities/species_communities.vue        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index be9fc9fb..ba575ec3 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -459,7 +459,7 @@
                                                     style="margin-top: 5px"
                                                     disabled
                                                 >
-                                                    Submit
+                                                    Activate
                                                     <span
                                                         class="spinner-border spinner-border-sm"
                                                         role="status"
@@ -480,7 +480,7 @@
                                                     "
                                                     @click.prevent="submit()"
                                                 >
-                                                    Submit
+                                                    Activate
                                                 </button>
                                             </div>
                                             <div
@@ -1338,11 +1338,11 @@ export default {
 
             vm.submitSpeciesCommunity = true;
             swal.fire({
-                title: 'Submit',
-                text: 'Are you sure you want to submit this application?',
+                title: 'Activate Record',
+                text: 'Are you sure you want to activate this record?',
                 icon: 'question',
                 showCancelButton: true,
-                confirmButtonText: 'submit',
+                confirmButtonText: 'Activate',
                 customClass: {
                     confirmButton: 'btn btn-primary',
                     cancelButton: 'btn btn-secondary',

From 41b102beaacc7109e941c215cc83cea44ecd4c1d Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 08:52:48 +0800
Subject: [PATCH 077/138] Fix swal box shadow.

---
 boranga/static/boranga/css/base.css | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/boranga/static/boranga/css/base.css b/boranga/static/boranga/css/base.css
index f5bb403a..c8131488 100755
--- a/boranga/static/boranga/css/base.css
+++ b/boranga/static/boranga/css/base.css
@@ -132,16 +132,11 @@ body {
 .popover {
     max-width: 100%;
 }
-/* .swal2-confirm{
-    border: 0 !important;
-    border-radius: 0.25em !important;
-    background: initial !important;
-    background-color: rgb(48, 133, 214) !important;
-    color: #fff !important;
-    font-size: 1em !important;
-    box-shadow: None !important;
 
-} */
+.swal2-confirm:focus {
+    box-shadow:0 0 0 3px rgba(48, 133, 214, 0.7) !important;
+}
+
 .btn-primary{
     color: #fff !important;
     background-color: #226fbb !important;

From 4e73441d5df285e5faf26da761be0371ff85c73e Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 09:19:02 +0800
Subject: [PATCH 078/138] Fix bug where saveConservationStatus was emitting
 before the select2 selection was populated.

---
 .../components/common/conservation_status/species_status.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
index 9b45dd96..c00ca467 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
@@ -1874,7 +1874,7 @@ export default {
             this.isShowComment = updatedShowComment;
         },
         saveConservationStatus: function (e) {
-            if (e.target.classList.contains('input.select2-search__field')) {
+            if (e.target.className.includes('select2-')) {
                 // We will emit this save from the select 2 event instead
                 // as it requires some time to populate the selected value
                 // and we don't want to save the conservation status before the

From e9e6c417f7a59e341c0db72c7f067075a0d91351 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 09:28:18 +0800
Subject: [PATCH 079/138] Remove debug logging.

---
 .../boranga/src/components/common/submitter_information.vue   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/submitter_information.vue b/boranga/frontend/boranga/src/components/common/submitter_information.vue
index fe299fc3..f913dfba 100644
--- a/boranga/frontend/boranga/src/components/common/submitter_information.vue
+++ b/boranga/frontend/boranga/src/components/common/submitter_information.vue
@@ -296,9 +296,7 @@ export default {
                 body: JSON.stringify(this.submitter_information),
             })
                 .then((response) => response.json())
-                .then((data) => {
-                    console.log(data);
-                })
+                .then(() => {})
                 .catch((error) => {
                     console.log(error);
                 });

From 41f3970a685b4ab24de9b7d4e616bfc95a3194b1 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 09:47:37 +0800
Subject: [PATCH 080/138] Neaten CS submit page.

---
 .../conservation_status_proposal_submit.vue   | 115 +++++++-----------
 1 file changed, 42 insertions(+), 73 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
index 8afd6775..5ea595cd 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal_submit.vue
@@ -2,82 +2,55 @@
     <div class="container">
         <div class="row">
             <div class="col-sm-12">
-                <div class="row">
-                    <div
-                        v-if="isCSProposal"
-                        class="col-sm-offset-3 col-sm-6 borderDecoration"
-                    >
-                        <div
-                            v-if="
-                                conservation_status_obj.group_type ==
-                                application_type_flora
-                            "
-                        >
-                            <strong
-                                >Your flora conservation status proposal has
-                                been successfully submitted.</strong
-                            >
-                            <br />
-                        </div>
-                        <div
-                            v-else-if="
-                                conservation_status_obj.group_type ==
-                                application_type_fauna
-                            "
-                        >
-                            <strong
-                                >Your fauna conservation status proposal has
-                                been successfully submitted.</strong
-                            >
-                            <br />
-                        </div>
-                        <div
-                            v-else-if="
-                                conservation_status_obj.group_type ==
-                                application_type_community
-                            "
-                        >
+                <div class="row justify-content-center">
+                    <div v-if="isCSProposal" class="col-9 p-3 border rounded">
+                        <h3>
+                            Conservation Status Proposal Submitted Successfully
+                        </h3>
+                        <div class="mb-3">
                             <strong
-                                >Your community conservation status proposal has
-                                been successfully submitted.</strong
+                                >Your
+                                {{ conservation_status_obj.group_type }}
+                                conservation status proposal has been
+                                received.</strong
                             >
-                            <br />
                         </div>
-                        <table>
+
+                        <table class="table table-sm w-50 mb-4">
                             <tbody>
                                 <tr>
                                     <td><strong>Proposal Number:</strong></td>
                                     <td>
-                                        <strong>{{
+                                        {{
                                             conservation_status_obj.conservation_status_number
-                                        }}</strong>
+                                        }}
                                     </td>
                                 </tr>
                                 <tr>
                                     <td><strong>Date/Time:</strong></td>
                                     <td>
-                                        <strong>
-                                            {{
-                                                formatDate(
-                                                    conservation_status_obj.lodgement_date
-                                                )
-                                            }}</strong
-                                        >
+                                        {{
+                                            formatDate(
+                                                conservation_status_obj.lodgement_date
+                                            )
+                                        }}
                                     </td>
                                 </tr>
                             </tbody>
                         </table>
-                        <br />
-                        <label
-                            >You will receive a notification email if there is
+
+                        <p>
+                            You will receive a notification email if there is
                             any incomplete information or documents missing from
-                            the proposal.</label
-                        >
+                            the proposal.
+                        </p>
+
                         <router-link
                             :to="{ name: 'external-conservation_status-dash' }"
                             style="margin-top: 15px"
                             class="btn btn-primary"
-                            >Back to home</router-link
+                            >Return to Conservation Status
+                            Dashboard</router-link
                         >
                     </div>
                     <div
@@ -92,7 +65,8 @@
                             :to="{ name: 'external-conservation_status-dash' }"
                             style="margin-top: 15px"
                             class="btn btn-primary"
-                            >Back to home</router-link
+                            >Reutrn to Conservation Status
+                            Dashboard</router-link
                         >
                     </div>
                 </div>
@@ -103,12 +77,14 @@
 <script>
 import { api_endpoints } from '@/utils/hooks';
 export default {
-    beforeRouteEnter: function (to, from, next) {
-        next((vm) => {
-            vm.conservation_status_obj = to.params.conservation_status_obj;
-            console.log(vm.conservation_status_obj);
-        });
-    },
+    // beforeRouteEnter: function (to, from, next) {
+    //     next((vm) => {
+    //         vm.conservation_status_obj = JSON.parse(
+    //             JSON.stringify(window.history.state.conservation_status_obj)
+    //         );
+    //         console.log(vm.conservation_status_obj);
+    //     });
+    // },
     data: function () {
         return {
             conservation_status_obj: {},
@@ -131,9 +107,11 @@ export default {
             return api_endpoints.group_type_community;
         },
     },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.new_cs_proposal;
+    created: function () {
+        Object.assign(
+            this.conservation_status_obj,
+            JSON.parse(window.history.state.conservation_status_obj)
+        );
     },
     methods: {
         formatDate: function (data) {
@@ -142,12 +120,3 @@ export default {
     },
 };
 </script>
-
-<style lang="css" scoped>
-.borderDecoration {
-    border: 1px solid;
-    border-radius: 5px;
-    padding: 50px;
-    margin-top: 70px;
-}
-</style>

From 9ca3616ed20541db10bae5c1075bbc4789712e14 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 09:48:05 +0800
Subject: [PATCH 081/138] Fix issues with saving and submitting an external CS
 proposal.

---
 .../conservation_status_proposal.vue          | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
index 29ad89de..69f6615e 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
@@ -473,26 +473,26 @@ export default {
         save_before_submit: async function () {
             let vm = this;
             vm.saveError = false;
-
-            let payload = new Object();
-            Object.assign(payload, vm.conservation_status_obj);
-            const result = await fetch(vm.cs_proposal_form_url, payload).then(
+            await fetch(vm.cs_proposal_form_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(vm.conservation_status_obj),
+            }).then(
                 async () => {},
                 (err) => {
-                    var errorText = helpers.apiVueResourceError(err);
+                    vm.saveError = true;
                     swal.fire({
-                        title: 'Submit Error',
-                        text: errorText,
+                        title: 'Save Error',
+                        text: helpers.apiVueResourceError(err),
                         icon: 'error',
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
                     });
-                    vm.paySubmitting = false;
-                    vm.saveError = true;
                 }
             );
-            return result;
         },
         setdata: function (readonly) {
             this.cs_proposal_readonly = readonly;
@@ -636,23 +636,31 @@ export default {
                     if (result.isConfirmed) {
                         await vm.save_before_submit();
                         if (!vm.saveError) {
-                            let payload = new Object();
-                            Object.assign(payload, vm.conservation_status_obj);
                             fetch(
                                 helpers.add_endpoint_json(
                                     api_endpoints.conservation_status,
                                     vm.conservation_status_obj.id + '/submit'
                                 ),
-                                payload
+                                {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify(
+                                        vm.conservation_status_obj
+                                    ),
+                                }
                             ).then(
                                 async (response) => {
                                     vm.conservation_status_obj =
                                         await response.json();
                                     vm.$router.push({
                                         name: 'submit_cs_proposal',
-                                        params: {
+                                        state: {
                                             conservation_status_obj:
-                                                vm.conservation_status_obj,
+                                                JSON.stringify(
+                                                    vm.conservation_status_obj
+                                                ),
                                         },
                                     });
                                 },

From 0a4a2a69ef176011b2a316f3b2cd0b09df6f316b Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 10:33:00 +0800
Subject: [PATCH 082/138] Adjust permissions for help text entries.

---
 boranga/components/main/api.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/boranga/components/main/api.py b/boranga/components/main/api.py
index 68d54de2..b7200adc 100755
--- a/boranga/components/main/api.py
+++ b/boranga/components/main/api.py
@@ -32,9 +32,9 @@ class HelpTextEntryViewSet(viewsets.ReadOnlyModelViewSet):
     def get_queryset(self):
         qs = super().get_queryset()
         if not self.request.user.is_authenticated:
-            qs = qs.filter(authenticated_users_only=False, internal_users_only=False)
+            return qs.exclude(authenticated_users_only=True, internal_users_only=True)
         if not helpers.is_internal(self.request):
-            qs = qs.filter(authenticated_users_only=False)
+            return qs.exclude(internal_users_only=True)
         return qs
 
 

From c341708cc51d76b6f954c08872ddb0ade933adf8 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 10:36:08 +0800
Subject: [PATCH 083/138] Adjust permissions for help text entries.

---
 boranga/components/main/api.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/boranga/components/main/api.py b/boranga/components/main/api.py
index b7200adc..bfdb289d 100755
--- a/boranga/components/main/api.py
+++ b/boranga/components/main/api.py
@@ -32,7 +32,9 @@ class HelpTextEntryViewSet(viewsets.ReadOnlyModelViewSet):
     def get_queryset(self):
         qs = super().get_queryset()
         if not self.request.user.is_authenticated:
-            return qs.exclude(authenticated_users_only=True, internal_users_only=True)
+            return qs.exclude(authenticated_users_only=True).exclude(
+                internal_users_only=True
+            )
         if not helpers.is_internal(self.request):
             return qs.exclude(internal_users_only=True)
         return qs

From b6a5246da775c48c56beb02af06c038a4a3ad58d Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 12:15:06 +0800
Subject: [PATCH 084/138] Fix set_mode by passing in map component instance.
 Add some property and null checking to layer handling code that was causing
 some errors (e.g. I think tile layers didn't have a getSource method).

---
 .../src/components/common/component_map.vue   | 51 +++++++++----------
 .../src/components/common/map_functions.js    |  4 +-
 2 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 57e0f272..4da82e33 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -775,7 +775,7 @@
                                     ? 'optional-layers-button-active'
                                     : 'optional-layers-button',
                             ]"
-                            @click="set_mode('measure')"
+                            @click="callSetMode('measure')"
                         >
                             <img
                                 class="svg-icon"
@@ -812,7 +812,7 @@
                                             ? ''
                                             : 'disabled',
                                     ]"
-                                    @click="set_mode('draw', 'Polygon')"
+                                    @click="callSetMode('draw', 'Polygon')"
                                 >
                                     <img
                                         class="svg-icon"
@@ -843,7 +843,7 @@
                                             ? ''
                                             : 'disabled',
                                     ]"
-                                    @click="set_mode('draw', 'Point')"
+                                    @click="callSetMode('draw', 'Point')"
                                 >
                                     <img
                                         class="svg-icon"
@@ -905,7 +905,7 @@
                                     ? ''
                                     : 'disabled',
                             ]"
-                            @click="set_mode('transform')"
+                            @click="callSetMode('transform')"
                         >
                             <img
                                 class="svg-icon"
@@ -1291,7 +1291,7 @@
                                     ? 'optional-layers-button-active'
                                     : 'optional-layers-button',
                             ]"
-                            @click="set_mode('info')"
+                            @click="callSetMode('info')"
                         >
                             <img
                                 class="svg-icon"
@@ -2051,7 +2051,6 @@ export default {
                 endpoint,
                 '/' + obj_id + '/process_shapefile_document/'
             );
-            console.log({ url });
             return url;
         },
         canUndoAction: function () {
@@ -2410,7 +2409,6 @@ export default {
         console.log('Map created');
     },
     mounted: function () {
-        console.log('mounted()');
         let vm = this;
         vm.setLoadingMap(true);
 
@@ -2436,6 +2434,9 @@ export default {
         });
     },
     methods: {
+        callSetMode: function (mode, subMode = null) {
+            this.set_mode(this, mode, subMode);
+        },
         setLoadingMap(loading = false) {
             console.log('set loading-map', loading);
             this.loadingMap = loading;
@@ -2472,7 +2473,6 @@ export default {
             const features = [];
             selectedFeatures.forEach((f) => {
                 const feature = f.clone();
-                console.log(feature.getProperties());
                 feature.unset('model');
                 features.push(feature);
             });
@@ -2485,7 +2485,6 @@ export default {
             );
         },
         displayAllFeatures: function (features) {
-            console.log('in displayAllFeatures()');
             let vm = this;
             if (vm.map) {
                 if (
@@ -2849,7 +2848,6 @@ export default {
                 formatConstructors: [GeoJSON],
             });
             vm.dragAndDrop.on('addfeatures', function (event) {
-                console.log('dragAndDrop addfeatures', event);
                 let features = event.features;
                 let source = vm.layerSources[vm.defaultQueryLayerName];
                 for (let i = 0, ii = features.length; i < ii; i++) {
@@ -2886,13 +2884,12 @@ export default {
                 evt.preventDefault();
             });
             vm.map.getViewport().addEventListener('drop', function (evt) {
-                console.log('drag: drop', evt);
                 // Prevent default behavior (Prevent file from being opened)
                 evt.preventDefault();
                 vm.processDatatransferEvent(evt);
             });
 
-            vm.set_mode('layer');
+            vm.callSetMode('layer');
             vm.setBaseLayer('street');
         },
         initialiseMeasurementLayer: function () {
@@ -3070,7 +3067,7 @@ export default {
                         if (vm.canUndoDrawnVertex) {
                             vm.undoredo_forSketch.undo();
                         } else {
-                            vm.set_mode('layer');
+                            vm.callSetMode('layer');
                         }
                     } else {
                         return false;
@@ -3133,7 +3130,6 @@ export default {
             return proposals;
         },
         initialiseBaseLayers: function (tileLayers) {
-            console.log('initialiseBaseLayers()');
             this.tileLayerMapbox = new TileLayer({
                 title: 'Mapbox Streets',
                 type: 'base',
@@ -3260,10 +3256,10 @@ export default {
                                 // A bit clunky but this makes it so when switching editing modes the feature selection styles get properly set
                                 const mode = this.mode;
                                 const subMode = this.submode;
-                                this.set_mode('layer');
-                                this.set_mode(mode, subMode);
+                                this.callSetMode('layer');
+                                this.callSetMode(mode, subMode);
                             } else {
-                                this.set_mode('layer');
+                                this.callSetMode('layer');
                             }
 
                             // Toggle on this layer's editing
@@ -4654,7 +4650,7 @@ export default {
             const feature = this.drawPolygonsForModel.finishDrawing();
             this.setLoadingMap(false);
             if (this.mode == 'draw' && this.selectedFeatureIds.length == 0) {
-                this.set_mode('layer');
+                this.callSetMode('layer');
             }
         },
         /**
@@ -4764,15 +4760,14 @@ export default {
 
             const mapLayers = this.map.getLayers();
             mapLayers.getArray().map((layer) => {
-                // Not all types of layer have a getSource method
-                try {
-                    layer.getSource().getFeatures();
-                    layers.push(layer);
-                } catch (error) {
-                    //
-                    console.log(error);
+                if (Object.prototype.hasOwnProperty.call(layer, 'getSource')) {
+                    const source = layer.getSource();
+                    if (source) {
+                        source.getFeatures(); // Trigger the loading of the features
+                        layers.push(layer);
+                    }
                 }
-            }, layers);
+            });
 
             return layers;
         },
@@ -4782,7 +4777,9 @@ export default {
         getMapFeatures: function () {
             const features = [];
             this.getLayersWithFeatures().map((layer) => {
-                features.push(...layer.getSource().getFeatures());
+                if (Object.prototype.hasOwnProperty.call(layer, 'getSource')) {
+                    features.push(...layer.getSource().getFeatures());
+                }
             });
 
             return features;
diff --git a/boranga/frontend/boranga/src/components/common/map_functions.js b/boranga/frontend/boranga/src/components/common/map_functions.js
index a32c334d..ebdfbbc4 100644
--- a/boranga/frontend/boranga/src/components/common/map_functions.js
+++ b/boranga/frontend/boranga/src/components/common/map_functions.js
@@ -181,7 +181,7 @@ export async function queryLayerAtPoint(map_component, layer, coordinate) {
  * @param {string} mode The mode to set the map to (layer, draw, measure)
  * @param {string=} subMode The submode to set the map to (e.g. draw: 'Polygon', 'Point')
  */
-export function set_mode(mode, subMode = null) {
+export function set_mode(map_component, mode, subMode = null) {
     if (!this.map.getTargetElement()) {
         console.warn(
             'Map not initialized in set_mode function. Returning false.'
@@ -206,7 +206,7 @@ export function set_mode(mode, subMode = null) {
     this.measuring = false;
     this.informing = false;
     this.transforming = false;
-    this.errorMessageProperty(null);
+    map_component.errorMessageProperty(null);
     this.overlay(undefined);
     this.map.getTargetElement().style.cursor = 'default';
     this.transformSetActive(false);

From 0fb12bfc88ddb0d84a8b796a70963fc400028b76 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 13 Dec 2024 12:16:37 +0800
Subject: [PATCH 085/138] Fix reference to undefined (not doing to use
 'box_view' for now.

---
 .../common/conservation_status/community_status.vue       | 8 +++++++-
 .../common/conservation_status/species_status.vue         | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
index 4feb42de..ce11aa0d 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/community_status.vue
@@ -1382,7 +1382,13 @@
                                                 </h6>
                                             </div>
                                         </div>
-                                        <template v-if="ref.box_view">
+                                        <template
+                                            v-if="
+                                                referral_comments_boxes &&
+                                                referral_comments_boxes.length >
+                                                    0
+                                            "
+                                        >
                                             <div
                                                 v-for="ref in referral_comments_boxes"
                                                 class="row mb-3"
diff --git a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
index c00ca467..f4f36fbe 100644
--- a/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
+++ b/boranga/frontend/boranga/src/components/common/conservation_status/species_status.vue
@@ -1412,7 +1412,13 @@
                                                     </h6>
                                                 </div>
                                             </div>
-                                            <template v-if="ref.box_view">
+                                            <template
+                                                v-if="
+                                                    referral_comments_boxes &&
+                                                    referral_comments_boxes.length >
+                                                        0
+                                                "
+                                            >
                                                 <div
                                                     v-for="ref in referral_comments_boxes"
                                                     class="row mb-3"

From a4ef5c32fa7d2776212204f2c403d9577a75a573 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 11:11:55 +0800
Subject: [PATCH 086/138] Fix action url href.

---
 boranga/components/conservation_status/models.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/components/conservation_status/models.py b/boranga/components/conservation_status/models.py
index 3bc73ace..c67e27b0 100644
--- a/boranga/components/conservation_status/models.py
+++ b/boranga/components/conservation_status/models.py
@@ -1949,7 +1949,7 @@ def as_related_item(self):
             descriptor=self.related_item_descriptor,
             status=self.related_item_status,
             action_url=str(
-                f"<a href=/internal/conservation_status/{self.id} "
+                f"<a href=/internal/conservation-status/{self.id} "
                 f'target="_blank">View <i class="bi bi-box-arrow-up-right"></i></a>'
             ),
         )

From cdb24e0c2cd44d2c2a313b1b11b95a448a937684 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 14:19:45 +0800
Subject: [PATCH 087/138] Add parks bg banner to front end assets folder so
 it's available to the vue application without having to collectstatic.

---
 .../boranga/src/assets/parks-bg-banner.gif      | Bin 0 -> 16147 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 boranga/frontend/boranga/src/assets/parks-bg-banner.gif

diff --git a/boranga/frontend/boranga/src/assets/parks-bg-banner.gif b/boranga/frontend/boranga/src/assets/parks-bg-banner.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9cad62c594eef68b8986290a90a775a08862c38e
GIT binary patch
literal 16147
zcmaL8XIK;6*Ec#Xg^)n#0V$yxdgw*KAs`(LRYbr5p-Bq}h=@A$qGCWq1k`|tRHdmX
zmH>i)s8~=`ybah88+I)B&FlS~=l{It!+FmBFthibRcEhR*S>yxjjOwhwM_(o;{wwT
zfNk!mW6^|f#chL3q2<o2X1m5rvWJYa2EEFs-1puz+J4n@-%V!DsD0t2Zu(`Nv`dV1
zp<epswFP5(nS<uL$9?!yc6nnqc@xeh*Immd-S*rt-Z5ged&IH$hF*ryEN9rcWKuir
zl3vCY#@5TGJBC-MU(w$-q?2}8lXp>zchR}@rdH}jP2PZ3>ZR3NuV|-U)K0ymv-PrO
z%7Av-<<(m+>1GVBE1g_dHtAA!Q)lZHr{e1dnO9b)UD8Myu)rq#58P2-5fAoe)14#I
zBmUg&)@Jb{q7tIh>5<W~@yYfY9|o>y(BrxG8XGLUnch67=(u>d?6heAY@dLr?1U&A
zuEtsix?PrSRuV5MIz57(m6Vvg)i%psBZ8X}8EyNg|L?T12K~QC(i7}89RGbl|5v9|
zN?J7C!iZ@Y#k4e`Tbdi0m@{q6Z4Bt9OcSQDiK#Ku%Fu*qYhh)}G@<`@)A*w;jT>X@
z=j`&|y8evpHR96KdA7#J+qP{p+Gb{yk``-hVq;@t%rrGNH8uQ0VYqdBa(YCTVe(eZ
z|449--Wrt_&r6R_Nv8iRF(NW0Bi&x(kEQ>Q3rW2H5u3c#=)c@Cib_c`&Whj}n;0?w
zb?HBZ-roQJq)AEtL%lWKFZ%!5`~N9;YruA1w6S0G)|8C2sOUfBn*XZe**c{~N2I5u
z1*D`T{^u>S<5JR7w#KFK=uZ9?Mke$P@yXnjZCn3~-rL*OJ$Y+-L~>NLyR*H<9|=bB
z@myOQ^L1uU7G}<7j_aIEOxBsPEX_=v&CJ$Wn3*}TEG$g^!|R+9m5~&koc<qP?*HXo
z_rLP~8wyFhKboDR)8aFuxh`obN%a46**5-vw}th;%KL9#?*DF!)BnnA{KpvMe;4-u
zwb1{W`V&3>cK;`A{|x>o@S~IeM0?twum)HD`TO^;pFftrfBX97^QVtXAKt%v`)2X=
z!mF1ro<EzP6FvRw$?W4t4`&|SpT2kZ&h4pNH*ZW{pBNvzHac>3cxX^~<?^MA0~gNs
zpF4Y|ueYbW>-4G4j`p_JmXpmVnvOR%2#y^+QeRhlxaLsx!Kwq575x3>`}XcBD=jH5
zDlEv)%f)u@+L^N>dwbTl%#8G{X{o%F<fO!eE%9-&G11(p$Oz8n@UYNLAsd4?1O*28
z`}wlh`*?eKdbqo}x~y|{VmYE~9qjGa*xFcISz4Hzng02tj0_F*^>i7lb+olKHPq>9
zsw&E>loV+S@^Z2=(o$4O2?|-9Bt|6QaR>~70HFQ@`Ezvu41j;zpL_@4SI}cTHv^^p
zV@+w}iMGesuTI=%Z&WDh5M6theMQ9UuQaT?6=!yHB6;BHlJ$U7=i_&uF7CSZ;mzx9
zxp}??g+;|BrDc2e?knHVuc$mwb+GzS&EeX*`Xfh=2^t#R{DVRwTUy)NJ33FD?&|L8
z?K{&EADxP2DjdIjML0M#e05~>+SvHS^~oDm6cs(9+}Y{-4`v=ddOZ6ij7tm(xODTy
z%U27p7vH>n_x{6@;Dq?SzrKB6{_*qIZ*D^R^La64w=Th8K2b(5bh(vezl*BrQSa70
zuV5+`0C2~;k6+tQcPdkM?-`d>{%X(`I^J{Q`bLOqKz$%+x>0Anb#ZpQ_hjYD0o~0c
z6_37_DFbu(XXr#<>)n&=<1QEIH(I9KgL{LJL)y=j!~KTKR6NgiY|NlYBhwRSJ0G8;
z-s<>4`quGeAnWtur5z1Ud4@b#T-7UUUh#Ay^e$|&zx&y>7k3~duk$@Gt{2^yOzcfi
zett{fv`5wZ`OxOc7XS9}q>6;<^QCVpkN#Z_y?fm6o)OGEeCESbVZML5O8Ms_vtv$4
z9R9`g3wTDM=P{p4KRq7QMLqCcytv~4q(jP5JNBKG{$}BB`{t)1-m4xyk2hmh6hNQ7
zWMyZXIlqYczdquY_r$-IixcG%C1Q(GGl(S{vfP+Vr`?BYs7~O#I;dJGkvX$cN)jt#
z%$I0=^T$UH@LtV%lNbVZl2LdgO2jb$M`<0Pf4=;X7JGg_ir3{@nPi*@gY`bSQDG}p
zUx4HtG=z$iWqB+yH#Xa;h{bDpeyA*z`Mic(9Uo&6%{>X_aBTgD@jhp%FSLU0SZVKc
zO~hVNe{X;I^4R*4?Jord@>^Q;W9ZFNby#NP&{1bL;7F-P(G!w7!V&~Av0QwuPU*;4
zXlbh6(xwpGa-MPg7|R#f=fW02$S&K;c(Jp({Je4}CYI1Hl<!#uT{^PmZTFatr!rKg
z8h`CjPo_r!bjV`}C92P!8zk|R8h{gnMLWi1r@DNLTE?5(SKeP3mp_b8Oi7n_tBleW
zv5uN8J#qt0`lenZSL7WX&(6ymxU1Z*sl;7)Yx#C*n7U)m$jJ1odI|lD<uFSA>BD@b
zdH5(ghlu0{g<_#f9i}?ZgBl<SaaV)SljaX*DI;;gIVSDy{Xi?#f}>b^5Rq(Xzii>v
z_36%Kemk$*($(<my?{+zJfNW^z>8_}0M;t&YaJeVU<qZV$aipt6^P21qe7|9$d}oA
zFR2^mfv-Bh|CMw62ZrCw;b34&lqMjCpIQRjl$U^h1)BAg2hL30{rihr^mx$I`fcxj
z{3S<50UBaWceJGSi-bhQEXO?Jp4}0`h3>0;D~y-@8}2-Sj(vas>%&`!DGX8Wr=pff
zKRpk(S(ym{iTm08hFpW%)b}$oY2dJM+lRluqmR(xFKdayT)1;{FCZpK14cnY{d*j+
zhL<AVdp~yn&g<32pvp2p763BlfJAyO42m!!mA8+~6Ty<!N8jS<gGM<Rq7#xI`z4m?
zNLk9KlN(BI5^7+o2$t)>6YyOyjNSk~!oY`J81|yI$t?)D`qg?t@UC>J7$s|Dm{T2%
z>h~iK7w|~2LJ>Jf1Z!l~BXOK72cK&cQ|9NgYyk`P?2mgmlOA4`GdQq@FTV5(P)w=-
zq^5*eBpm~t+56%Cl`dv&>hOrp;1z={Ch85O<8*@i*dYT90BJ(<0J;`0%>mRFBK1v~
zPAZ5H*WpySq%6o+i{l`==0VUuS$qj*7r({pgkF>{D9#Z;3CfR&fS~^`0}S7}NeD--
z76$==sytC>r2PXHC!<J0F9yq(c97CJ#Z3l;z_$L0Eg`*pXjw>9=1oe*VTU7840fhN
zsvS4PHJAdU?TX@JLX$dao}<AP%mN~cc(g>CfmP)Jifs!hy4Z{olty=K5#r@*o`DWL
zFDYvvyR~J`T19l@$2$?>TvOOPGXE-WuS{dhR4yoAj1l-BBBDb5S1ND277T*oD{;Zs
z69RtTx=a1iY>kV=C1Ph(tgG;728Me+Hg!tMtnQiCN&5l1gK#5I-p$leK=@eFmH@Ie
zLnNuS1Z;62Yv%AbsQl&_m2ICEzpe*g^y@pWJ7a#5x33*2`~gS-LI4hq!<z%w$qN`l
z)<#jqR=Z+VI)I6(e9__sZV12#(p4y+%)T1nCIm1u;lt;P!Eyhz8lQaL5$F15fUL|x
zHV((>$x{JoWzNyi8V#FuUHNdqH`u5Tby&UOvdz&-;KV94Ze%Lt%nZM;Loi!w_t@!5
zz1;b!eMTO)T=NOc6gemuqd17pGUJ2|y>gDYBw>Eg1!KAIdsj*&n7n?f>?uf%hrujG
z{Gc{HE&rgAUd_5<xf}U4KPg?<!*v)Tz4O3$;XIhhe9Ba&w@Umiw84o0vQ~f`kq!{t
zIQhdTfF>eSX#L_)8JPw&5NJFDdEx97doKA_VE5kG#1>r1GT7yf1H<W0N%@Xfdtd0d
zeaN0GvBltfT_{N~ffJt+47N>Sk25ij(jHLRI!h<%t<FB$rXSZimj0H3u^_Nt9auxl
z&Anwa{khQU$km^@6gL2SVp)Mm%&_n-ylX}VC}fwlz#Hac!)5d<^_~ec@+y{rBc3Mx
zb7}HJUavhgJpufTwxK*4MzA}T1EB8`R|cv<As?uWq+&P;LH<uM4ndOsQBqF`igf^h
zB_~6Vv~%=*t3c84$-~T}tiqEUf6k0qR#W_VfbmN3<)L>hK<Md1pi47>u1uOd50DNJ
zK-(pRmg9#&X*aCg+^#`O-0-iG0O6#gpJP{HSYppm`t7At_zjVFBez*oV)A{?3JDHv
zCtohhRjdLj=4H7>LB9ag=PZ{iQkxn)a*&rhFpW!`Nb%5f<FK`^!lO(e>)JyllT=HC
z_wHj=r_xnI@7GR<`FyUm@@momv=v0+5rli0MKJ|>P$K`L-i|&9rz%wFH-yB#xIn!I
z)c~Fs9@wSuLegaRtObAN1AVARXR^fRuSB13J>MyS(&^&5{JrmW4g}XIe;tCHG0-Zn
zPh5-WI6c5#0Gm#WYqa!450wAao$$AYnCPd4K1x10KKquxKj*2Q@ba5TY%p=XJ0OU4
zn2}3(FV7Aas>i)D9X&VcZ-EMjMd_Plb=A6Z+VyZt3BEi<@yc75-v5fp?^_XGwSPLu
zg@hMv{!t{0$Ei!cPadRBofEJ4Y}v9Y_h(4G#;QuL{2Y!baXRk2Oy$uZ@2{=jB?XE;
zOk2;Ad`^P&4Lfqf_~?<OU$Cw5k-?#rA^E=ewM{AYKQ`cj#{@i=zDxQ*_-hM%&v*OK
zT#aFQQYLH$2k%;u4bIhQ1W&xmu3d*eArtN(ze!REViC5Ut2cjHmxEtQZAI7GjgZ8I
zK0TbQJ`6J-OY^kKZ8kL#pT~c?lX8?zS{<9qvMz|#uzAP{3B3l^SZyK(fz(&H?z8EV
z05<X*P%I%$T;;Z~lh2@d>zXYV%gL7_^79+wZm@!O(u0PYse*L{$t_0m*shjTo_SQk
z46qrWo;+va*=y;V_zgCvC(tZ_yf|lO*EVTQy^Pgak$i9;PW-`13UN7UGfh0bpCSij
z9%iap-v&~aOJ9GoYwrfq7#0#7EP@KW?*(8W!kms3YlDG7pr#;?mci|~28RSoPD<lf
zX20fyPv!NpF=tl((`w18dy-#th<a!CW>SIY9Cd3@LlC_0B;@oED|?I<`kDb}`~4#@
zAmy`XyQ`BT8hz+Yv4S(uX>Ko1hw5I$N-mZ3j=CRphLo`#w6DefIDm*cwo<)%+4zGc
z;iD~}k}z)X%edqvaF=NBmzNuLj}x_*Of=`5?$=ZlrvbVcWj0t!ZM(sXWy&TFs8ARr
zDa`gb37^$Yqwy0yI&GrrKt^m%=hc`s0<`FyPh!4{7zcj*9MB!bi3v;Ye&6p>y6tyA
zNet6cSgIO&nP0(D-&rZP){L}aJCVUNwrPNHtreVBRs2*1L!t5q&u<09;`DuY9#RKD
zW~G~}Q|1iL8jpWCiqph^v%y{?Fd)x{B)`ST^D9$laMzuoJFZm&Rn9~#*d;w#a|r~N
zpa&<wFVPOtv4HOFRW&Dew+SGcbnPy`gB#NTNR#>dwsvc&n1vtm<dc{VTfY#{UgIdY
zS+TlbS49i0o~F9XH>8IH`Nk%P+dm#?;Z<%O$9-OQ(8LbCNASvBQI;IQj=#ZOyXvjK
z*Y4Fe!Ow8c&Vc380WR02)2&3gYs--;@Q_%b(^rb_?ZYjNB=IQ#1SlY%8MI{aJqYiD
zK^xAi0TZhObnEu9O<7d9L7=@CgYa!K0~K}DGWrUQx&{%}oyAIem*TsZ_P0Rw&L1IT
zHn_7$QI1^}+69wkli0Mp&HR{9dNRmonOyJ&d4L^fL*q*bUIGe!SSwF}=At75_bey1
z0Ey_rTjOO<wblkq$2?sM@qclA$tEztToJ3#xyw1hUBKl);QBnswX3#!XmvGa>daFw
z78n=O&C4*z;~AVXB(t+&pH#@n{0fje4$6Co=S5RaSc)6G#_3wyr2iy|@u8s?4K3<`
z=MQ+>SGZut&hCEWjnYHwMsd2qd$wmB57yjF{s!sBfPPKsQglf9oF|Q)Af3Nmo(`(4
z15~f!XiJtR>Um+*wK?Z-28y05Wmaj?>FeWJrT!ynY$t@V6=DdQH{Mw-%dA*G)#1Yf
zw$4MR6>;CXiMXZaQqeIMzr)kyWTw)oAzzRy2JEmEFWVws*iTa80~Vw#Cci2I-T$2j
z=ySk^&!ls$lFwQj)@<`tW>$p>xZ~SH!kEw@?H0DxHjO2qBeN;18k*E>i{ql^UE3~g
zNV8-D-iz)w#jH-NK&4UKtJw0hKO2<?wqgeYyScD#>fRTcK-E^GNLsJuFWe|eb(0uw
z(nH`S==AIY8BExT4Uv}A3h0KVJZO)w(*c8S>YbF-I~7o;1fkW^yi>loy`4NaWeysn
zh==)rG_z_&jt=RSg*R?3ecT0qJ#acKK{oG@_sM&E4E16?te~7=P@f+gE^5@;)AdOc
zWE1QU{D2rg%Z>O+`Y6TnQ9aycslf}RQK5=->#tGH=vTYnHGok;{5?MCd=9sX9f+v|
zox?qwMLp4dZci;K;{KAmyHAALB8(_)uU{RLTZm*Ps4<KLnZk;ZeXE>^Uraz9Cg}SM
zA@L9T3Ut@M>9qq@3PaA^Z<p2;qPBuFUHnt0F+i7kS-5@kX<?ZnziTZWQX3_~030PQ
zmAnT~6kTc&RO>lH#!SUefs#32ak2%V?)kv%galnaD|=1HnYgys2_S9TdMzQe5*7%?
zeFt^Bc4-1IkLy?Z1#B1zgt9yhgy_}>us(DDNF_k40;tiT7-xOf0l;V}UM1*kei4{Z
zm2r9#_S6MW?*e|cGDbtRSMvuh=r{ZFOd04^55BJR8@N8r^!gs;da8iI9`T(-JQ9hu
zpR~B$Ykp;4;*h1J^<!t>kd)BVGjf;b2HZkgNH_D@#}9yUt5Ub@Y1#ai^!50mFRRLf
z8ZH}iYIf=;eUVKINN?Aif^|g>SgO$6dC#j+oVOLkUD{!QL7`SPYxs~o6CwzQdMzDp
zZ3PnVTSvbH^o0-x1NKue1BDeA&aV}MQ~7`zJK3581_RIvZ4y7_1{AN8p)7$o;o9}D
z;TuY|xUSl%N62cbYEWcnlRHrs>$uX6h*BXW|Kchh6#5!@^z%fZ!6kPlIPnu<0ILs2
zDg>BRM$Fzcs2E$zYk7N-q`QjWY7NYLu0PEL^ifENYgN;!Un_vmoq=Eh485a()W*Jx
z*Eqtn^6G&362#WtyxYp&va6f2I!m!@;=L0E5{{jkupm~UnwaxRO@Kj%)#!tgBA|WN
z_GkyJu8>Bo!xij+6ac`82QAS6!>$RY=&nPTA6W#2q^WiP&}n`RlSR$W{EOjw2$`?%
z>WPdSAY-$=4<;rzebVx{j@(wptyl<vu@F-nyVHpct3QKfP*Zm@ZmkR)m;*(;gS|VE
zjmo(7L(1Af^LAg{=eIWtc2a)GUpB9TbS6lf1nE0$);8wdg866He4mNnH0fg2c=Lz*
zweZPRjU}Yk{C$)IM{og$LZ{zQ=I>^DGz-nsJr4X0(WVl@IDowfI{o~VB(-TR6B2u9
zk$oN9{==OsgiNtPtuBZ$1*@VsEzT+#w3C58;N_{``=s~JMwrTh+6`bsDr_d`bG-zr
zPibFkzZgK7cIpC+*wA-h?V28N6?#xnqjo&>;KmyWl{er-zA^t+i|BE~feje4|8k|m
zm#_EfFm)MJXk}&J1DVo+)G$QUfEe{WU@zU9_Z{(G64|QH6spWCJ}T)DTn^<!8msZo
zkIO3q))M<#|G6F}PCq>L8aMtLmtFgC{j%K=6}%)LQZH#qaZ3O621hj%Kj4jT>?iG^
z>^w~e6Js9s3NEX;`tXPUU@~4qpK)j9p^gJU@y}~S6#hC6<C(BJ?}@(#(mo5NT$=dj
zhZ<EH)<ORYe5=7@89ta7=>V|fjR|!sY{Z6_I;TwlF!bSoPe<qaPV=lG<8=qrWYL?e
z_@?8buW3Wm0Z$Me;ZxcvBuYiynXN4YtbY9VSRi@Eg$Iqbi?rErAh~ZH0Q)8(I$hc;
z`Q-v<PQ^N5-=)XXEWv$udf$^RB2Pibi{EpB>hqJQNV8*S@;s{5#z<a^JswsW$&)p>
z0)F-DOWU?R3&U<bM^XXydw|}R`}x`0_YGy~+gv5Y^Lo+Is`;O<PIEZ$YJK3_`xgB!
zD6s7PG#?dXI?2<sd=5g!D6pwKX!0AN&zx*ega}g*?G9u?g-zJ7?0OMF_{4q+8k?A~
z$6l&;K`E?PGVBpEz9tJbR5><zI1kdt4Aps%31(<Q)%;xvnM7(jP@&WAhHsy!9VqXZ
zwN)z!e;wF4ed6fk;mZR)hBqH8tE#i1A&Es7gGDE*s&nF(z?`oRBD0nKpBP5iOPO6r
z-{r6EyZTn<1{BlodGZG|%$^#qAglP_`o@uM`*b5f%EjAnv9(>5Rr9;!PVr~m_le;f
z5MK}jxm(v8J0y4<auXN6d;0uRTTD$0c8kEgW*7dxMF=tlsfjV~YhOQqgl3$H^ZNE{
zN4xNxzR*o!4v<s+70zym_=P*A<=(lt-=#qB={KmvqdwqF=nM<&_<c`n7RogJ7&!YU
zr77!7LHbiKS(hd@zk~Ft_hirq|HL=fNJADvHR(J^mn~AqASU|R5Uu;2c9X?{g6E-7
zKZwcyl;Qz?x;3#ViR@M4`p?wlxXYIL3hWxHxRoYn!o^osA85tdgbi+po4Ih<kG_eU
zwl&0O?DD&-P4+iJTZ|Pg1Km#hkZ8m@AK4rq;Mq4XnkDtcDUD89QjTm))%}^F$svaI
zGZ%MH@Aba^fd`CirS*3Gd(@PWl#;qNW83x}J9p>i7Z#W9*|)#qz`;X@>y8|2$iQhO
z!;wkyT$My_l3ygjAQHw~$G|Po7N#>vcm&yn?~&RypRg8>=O}2I|3jD|(XQuq<aV1b
zn4v7S+%%wLPKmFv&Upt6@Bz9wY`o_pUfC@o7p4SXFkK3%U^yFX?IBvbb?2d-05b$K
z<Ij&=+DNpfX2m<zUm(eaUj&5D^7g|Rt6*uRy9rmO%HX=`vIT`?MZ>c{1@z%9lD+n<
z(9XQ(b$e8q)w0%85PKhWw`E6g4|kN*=X;}(*ey3&wqA$6jPcw%_Ovh<hk3qH(6qcs
zSt9l<$|aQHGwRjKY7>?jGD6?l6vjy%UZ1w*-o_@5`(9s?mzQ<Jud95S)h?^Mk2I~9
zo({rfdbGZ6+h={K$7?W@VXfnlCZTQ9MHqQQF>I!}r(N=U6Zq=($qlFfVZm}=8%GYU
zJ+^D-ukRmUJ-Bjg_lnx8q(PAuEL}2!<s)wDb>Nnt4SAqT7cn<KQe6mT{#6=_A?BzM
z4@9@Rs^xzfM`2i0_d+F)T>Ao*UUBA>3`!E|%tJZhGuP;VL)L2o;%Bf#kjTlNQlLm!
z^Z&rwEx=W^0`f<#jb)7|^5lZ1BHT72Jizl<oRs>>&C<e8g$$KRfFTZORbJoV794?T
zSMrkemO@$vJ5~J_8p=9P_2?Pkm+h{%^<`tn@v}D<8wwy<fqv;d5;Nj7l^v&U=>7d|
zL#LQWTmyohouLy(FRxK=^9W_kNw%|F)Xl6dgBwe49bFzKk!UhENHQdJ4zr~*8f^V!
z!GgRSdE)w|Vv+ua;`VQ~@^hsHFFK19w^*xp>jvnT=RK=r01#`J|2r$SZ1150jj4m>
z{8{L=g`eZmzcpsotwb(=dz7|$fK~OCXfz|rKN%;;$2EVsHCL=&9z0*Fduk@~hryEW
zh}xZoF(q*qwl9H_Iks9}<x6QLYx|7WU=hju9+;1lnEFIWH9!?HSakQ=tJ(yy;&r^7
zJH-XZRp=N1C_`p(V%F3-0fHYZt~;>lw>q|Z!_5)w^!08I2K3~LO}3x^QXyXv)PGn>
z#hM7*2q9w;&%))Iy@T<Q-B=TpTdSQ<G8M%etLe;4=-Eq|?ZK^o$Y>wXn$7;LcV)ts
zn+H#r>f_x88!r|qRa>jyqXuDvcW<_nKs+sEhD@1tP?Id2xU6yurx2V^FOtWO0Oi^~
z`ydi$<uoyCqdwg}A~;2T>{1o?$v&>NSMv<LC^>&%7{QI<qR!3gU=d%E16OS;n_mQ?
z@}=*D9eSd?I3ohwnW=-sC9u46=X2-Jb?Xx)t$)|C#Ho&}WcL<tkEPLu=rl*M+D7{i
z=Vx#xHI9^Ie!j{Vku@5SD=W87=V>rHMjir>sW=n-JWK6_P5WUo##pK;#>=C_YJU(|
z#;V8r@uq;ySG1_djo?zGBe}=TdkZCk@01n+!oe^gY3(*GakU~iKm>oK0)-c<n-lnM
zYRZ7HB*sy8@HUH})_|+l6Mzzv6)H+&IKXd7%krg$uH5;J4~v}h4)FvLmSZbeO*lPY
z6&1l$B1R1E$|LZv>YE0G6k9ED`r|lRwq;@?iwR$E5HLgI?gj2W13AkIm`rO&2^|3@
z*MC!QmyKtjxg3O)uSPE1J{C;J@;GJlJ1>47#D_BTsZ|_eb;<Rhy{;f`VPb=S)&sdn
zL7{Cuz3$=hyzP5G7w~%8@hy-7asg)~OLqk0X(P$$!*#Stk;JZk)nDJx(tGs+Lh=lJ
zS-1_l5!y(}AIp>dD<f~``z?}W_H@Gh$yNFV$zpzk;pelzUJ^^LI<7)-(&tTeNtRbN
zX<NK@_pKcSayarTrR$&qtvp#C9n`G3Lvm_tlr4C+=k@X}#g%OnO_ItCP`ri>T&~#<
z&PXYrt|@US=@00<;iRfY6+)yt=W;n5fN;l^w56|)sf4tO{)8x*>C`s*kw60gtRS<O
z>0=^K<YSb3AueZZJGH-Z77eO&_9)zBK?-@fPw&sUgm4Zb{c&tV;?f^r9gUX;u=O%s
zS_uJY(pz>dQFRKIpArFzGw!5dItba7<BVvz*3w<$vH`i`N45;=oc5F3)GW|DJaHhN
z>UsrcaG-(`j~7M<Hw_k`QW<$5vIMAj9|Z948d1t#F$eGS0@HpI@U*}^mx4NGah4BA
z8k8v)CV#fl#*ipkb{;bhY}nVY1NT*~+>q|SYrTUXv&=uRiWu<H$^?4~*!Vtqv#5_R
z;W5_kK29K6n`4)Jk>#`V?DSK2k8SE&o%w}RxHHXcry&Q8Ht-;(_(b@sW_;YUrmbs3
zQ`M-&*^m2D>!ZTxLV(kwcr8-hU&;VQ<Tp0taVwmTr6$rL>SLHAtdz^4tBH*PHcHYP
z%_BCdNyJ5#N@z*!txxr`**ikskIx5N6ahWuH<Hqyq|7It0UC;K&a}w;`xcx$|D@W&
zi*5UrTc?_PO2+t`OoMC8-H`0Ph4fXIv@&N6ooQXz`goI#n-CEwDN5Z$phI59t&Ym5
zkYhmyrDzy_|8bDwBEl3_`hJ3hu6pq}QJxwN@MZ8*#Dk`EWrI)oMsIXvn!UJSC&$@z
zRr|e3gut^muB_^=JeeE{5EY!)AXm%>Ns;Wf%m@W3o#iLd^r=E6FYAj9#6g*Y*rR&n
z(Z;H!CY3LIqaS(tcF5n}j0=Z}Yt{`>w6SC9<?!Vw_0_W(Q%)Th&ZOjM=bqoR3@zW3
zyQ0`{8ulPU_%3TJF@2u|?uf3+>K>UZ;W+(Wy9DPrw3$*f1N^APx${W0fuG8U`d9Yf
zf81&?*>?n7fY(EJtn<7o*qc*N{={4@xzE3d1&*mVRL7HAE;b;*nb)>=UT-+IXr?`W
z{6<4i#YRPqGe?Z}t;9=L0CZ#N3jRVA4j=dCFhRqz<IONc5DBOIYoE8hi6YEV{c#-?
zAfSRyLjrTqfe(TuXwtWuXUgtFU?%6MvN^v|Dpvhkh=JfPZ3+bCr(QnzhanFI-*KUe
zfJ2cYHC-m470nER_o8_7tU;KqAELA*#HCx^`;hm95xMz<uR2lZt#u$wbJnwz;pZJ?
z$5!8qo~WKZ>KJB}pXBDq!TtLCTL$_yjF`9sXM?`NWFEX1Bgep1QsSQ(JOzdRc2YI*
zMdp00RrWf;3~G9|G`&w~{p~}Itmab*37J}bJ2Hd3K)3p>ix3x%bznygBvQRr?@~1y
z8e7p8*YJ{59&B(+KELbuMd?AY`D-?)W*E!Mn%UJDd2{3Jh!2@>mwbw_lPxEUCom`r
zC0)dQOT_I)s!UYt^2>y8V~+h1t9dLh?%>TYU`&bD)R&0G&|B(7aX?4Qgf!M3GZcHY
z0Pw@`JUv{;SnQTa0EyQ~_HeHDxxo>2PL_P`e_kAytISbX&xskk@2FbsQNZ(1ztB>m
zN}=qGL4r6)WD_JI_|W4B5JiA99S&Vor3zdi09K}}8VFBca4SdR-N~=JW9Aq^82t7o
z8Z&oi3%I<c@y1_^I8%D^ln!8kA<_l7j@)9hJ5tp=9W26;F&tZjn_1!GR9EA8H*nz`
zoa}1@fyslP&r@wrvM1-kmPyb7$jB0wjcMR2i{JnZ@DYLRYkC;PGgM^I{~9C-bPcre
z7xqDZn(OZXINlUeGv08v6BjBJZV`x;aP%+lIoKR8q`_2647`wJMiL+rqJX#1Auctf
znRBe>hB(Bg;v>R{4ZwnK*gslpbU@*#6UAWUm``O`(+F}`_xUXS>78}PZMZcaY=O(o
zV?W&`7f=$S4!Dl|9MvBBM!BTwR8u})-$BoABv?Q%37wzxd>is;c(L<6`j<ZG8{<_)
zj%WM;yo4~mW)b)U0>*fI{ahqW@sRpcP#U8%XXRzw%ZPGpk$T1_ksDd~Z7TMHPYE6?
zd0yErVwVJrLgsWWH%yz`c0+pT#KOxDafA4rv5qf;Wr;$iWeH7$a<a+;2_=Cv7G<@@
z#Kav)PiQ!z4oK+AY#RFbcCq(tbNAah*^#u^f;?CPg#pY|bDmM#1+~n{Ma{u4M*-U;
zDR&6Knil3AJtr4TV#^j2(Rd<S>71Z+>?2rz+aM03w0HZCvG6R<zEh2Mw}vYF?&2>x
zBg!1R?jc~(5yE45jtF<rxl)y`>ny_cr64ZY32PT0Ws$))jKC3y`8GLGF|CQYZ#s<>
zbrE1IfR#A?qdHFB7(!a16BggXMgn^!44*@<qtSC4Bbf%##-EaK*>Iqb^iJ-Q)gq^k
z*+AiaI)=3ASvX}+(D6Q#elY^GE^+IBt`Qt=Zt7{JgaAX?eXa^1680K#>KRVc6n9x2
z7P5|dRAki#Nf<S(Yi|@w!$?;J$X{4(*C+2eSvlF4_URG^@4onaG+$rpXfW3R`JC>F
zadd+)AQ5$VVk$3>!51WAE-xh1mLoC5Pk`vUkXOiAL>ZAMONc0$?#h-qd5_sfJ)rJK
z_sF@cUS6cl&5M_Y-ZQoWzjNiaP{M44<|hxeM8UP$#MeVNW2;DbpZPCU$r|*}I0#c1
zaklAP@$!;*y_U#9YF<hkCwXu^;Q0upfOntfn>|p3ktqZOF(7~IgR^e(^?W*+<F`%3
z@Y{Dng8pfWkH;F(Mm*dngJWG++_*;vslsuw<vX9NoZBmd^*J|WaD6he5kk-fP`KOJ
z=K$Pib8xgE#g7@dU=)cHfjXJE=e?R!Y_F`Bpwij)OyNB)2>iT>rwxI;cR(m79-)^r
zg~}tQtY1Fy00*glN#L5vL@dHruR`TtanH?gpE|t{V9=)<F6-EVZj(Pt=)m{WyP98<
zf&wfc9r3aNCckf!4mRMNAA&4c{d9M6@^d*Ny(X_G{pO3oU2xLwD7@DSW-3eCnM2tn
z;AkoidpV(I8V$B3o>`;%K9uh~{|0b&xaCV<s>=7&uK@<{9079x7Py>2o1|e*`K&3<
zCr@g6iJ{ZfPV!f~*Rf^!4jAM%&hpP#!<xSEmKu2OdTpHg{lu=8(Kw-m;@@xS{cVX$
zGMZT*S&t_0{be*Ux~s?cy=l%q1tp5Zr<OiBHiwVh@KG?0UIh4OZW|%)+yn1ExvhEF
z1W60W4KR{_5b|5+UisIpP6gL4<6+v+>hRkq97LLNd0Qm`bpwQjR_I^_{F~bnJn&IF
zgvLiJa1Qj%*DF<U_frjmRwcP}HgW)EKqHciaD<;pTXD=4jIb2gXZ}sEk(F`vIr!2n
z%1H>wa|l5k!sS0O@H`kNN+>_Y%EWKneG4QDac=0RvI)?L1`uPt`(*b2RR(ZBTbW_r
zMV5f`kl}$$T&v)@DI56??Rh6SHj8G(0A`j#GL0k7%dgW=7pHI0&l^8x@YX8txcl)}
zR*f2AHTr<fd!ur(Ejy}^7uKF1?<cOMdR<$Wq?>l0h3!2vR2!*Vts$MN@}pvXgS~vS
zkNUYv!ylFYi>g=s2&NcNuEVf|V)TS5oU3vESnE+eSLOAsg0}0)XZ#M2ZFlllb2tbG
zbS`~y9LtHxl&lC?@lZ`GnD$V3;}=P<>WIa!&|M*s8i2~=%Uq9f+n&0ZK3sli1H<(y
z`7Jk+lnQNh7eXBd@I_E2pH(_M!2(c%kK~q%gMbgKka=28o37&WkzmVRec1&Lco5C0
zNJ$sffmiXtoaV-tK&GHm^m3ys)@MXZ{zn2|^%57loceP*Rer{xt-}7sUB&#<1msKZ
z^Z`6~2+HEzx0a7m6MCJ3D&1<LcF^y01b2;I8#)N3UYM;d-bdIn^NlJj*SL4!Z+xXQ
z2a&*v%{bta9?s|1pQ?~xcf$_;If1{BZ%PNVeRryr*14DNyCR(Hsd~oiaZQokB{4_T
z_=F4+a8Nm-_)NS2mArXhJZ7b<?2@+UdhA)iI_CT<qZ!ZSlT}9-+&j)u_;*j#k7^_B
zG=CP|@+hl5?Rc{8Gb#G^9^E?GklacWn_i0@z1nzr(V*&EN0^90Zs-~3RrOMm8~=_(
z5?xAa-#gxCx-RbZ`;k`IvHj4d?KdhL&t`0N+4ZAUb!*M$QMb!+$gJW$zZey!bJp6A
zrOSRkwaHA$)RQkC#&*Q%(C<d=@w%afskA-1UXto}#y`G1BbKxWHb`oFvnB4h3&XN;
zkAVnw`;|_i!;2lti-YekH$!B4OYa<PdRB0lTde#O7oGsH1jXrsg{#h`8$Im}i*cb!
zO^z4VGi!%V&*O@cw8K}t(eYk_Dq6utkx3~2$7d{>ve{p$z+c$BPKY!8TIqG@qk|Cg
zX<5j*8>Mg$=WrX(rD;?*e=zbqGdgg)D%fGz240fEtGXk7tKyxOteQ*Pd(+ECvT+%(
z^n|qyNj=O~_erg%)L!7!6TzmJweGuz#bqC#>ZJ|6xAlB8a|)(P`W;V)n7W?Dlvx(@
z@+-;F{{F~#-?9X$suMkwOFgfOdgXTBR=ng;!i|}8As}=G`@@Km)|%UccMMQeK|?+h
zqnw_K9sNvgeRv_EZo`kB(oD2AVPGV>DdN6?yNA_b7&!Z44*dDpJ?;GAB%oP3@+6bP
z-uB_%aPmFLmD}UGLvs7c(kJ;>pP0%#R0nMpwjV6&seW1E7gSFOG<dUj>pOphO6QU}
zEkW;4Wt5Pebwl)>@H?Z-Xdgl2Ih>7c9d8)b=BQ_)iVvIaPUX7D2F7)=HkW!2nS}o6
zFc~t*QG7a|YBa9D%a}P4spOcWC?>+3#O)(6LSn1`3uioA{LJ&KfCi_qc#+@-xKssS
z)1*Vzhoej7ldt;Sn|SzWt+=TQfRqP9#B?N5K!^m?aL4uLPpav+P2B!A@ys=V_K;Fi
zMZI~U{ED~<>#Y@C`{~ct;G1^3cPXzOnPEQCH(&go7zt1Qn1et5O0Q_$_0=L7L7^!=
z%&crhv{7Q`d$seh(%<htI(#@3kr0xynkXpMKLRut#8*2*;n;+;NUgCP9~X0f19ADe
z-@VVDjSu`7<LP~p{OB*)y`+k|Ou4A~p`DErpYM6V9b+kfO~f{aos<AfN{=wr3nI2Y
zjLiflCI(|`w>>%*=2fi-AARzz?QiKb2V71$)|(COrE-+|t-id9`wnr`3%(_ABU|EZ
zwp$E=T#-&_1)5NR%Q>K+hW@F|`(nU}`j`=$jUHLQe=8e95cBUtcT<JEB6V8ck<?X(
zZXH*7We^7tvs(jBk7bW#cd<V>dP)U1%I*28MBJfY-ZHM#$Tck<{GqN0=@N=Xl@$Dn
zWS$YKp<)g0^`TqKAgWXvqSREPRmO=!7&^ArP5u4#g5aav+Tie*qm$gT1%2Gi?4w7M
z`$K>B{bUNWYbTQ%ncQmS4(>Nm&xK^}{hG$?_wvX1N2Rwl?menp+(`X=v`W_bfw1Tv
zS%1=}reEGGeLaKeB|zDIwT%AJ>$mPcc>MI)Gc)#u<-{6c-oX_5U>;ub&VXQ^FkB>|
z#@fqB)fg$0H;$ZaN!7eouDUjlted7aUa7Ob(QD&JxER@`N5j<fgaDug1jhw8u;{CF
z9dfLf2B9fgIDDZ*(^c31#D=}28yorvclEuy%?q<Lu-gjC{Yr5R&Q(&_O7Js;qf}LZ
zlaQb1j$yG_?izem*-UL<JgL=tv$N8Yg+!xznX;W9*YUQv6c>`BIdh7M(#o{OF3vDO
zkluqJOKqMA0oG?#Nq9WKN@Vd80F9nkl>10In~yod!V-exB|MQc2NnTp()Pi*&oQEW
zwpI>b>ls?98dyd<pB%O(^X=@ubji&HZp#YxY-+_IH1btJves_wbHF5^w6H^&*_Hn{
z|GPo9H4_V9$>j}^3WY+5vIfls0SRIT3IK?Rpsw+jPUPb0_k%U|Xuqt{C{mvX5K=t=
zlkf57#rBL8h{TX5C}*GLxq1%E+M=I5tjh?>Utx(c`lfvJsiBcW+Q!v+9>yco&ssX(
zrVqI~s|+6Q6SK?AAHvIcu~G0;j{mTZOhH$9#p`<*zb-|opfGFh%%2lA0uecRbcgCa
zN1RqFx<}BvAQj5n-B#r%NWAU0Kv^5WiQ|>}g|wbH6j|HaT$iR-fk^X2#cGN*c&Aut
zs%Q!l2T*{54w7Waq1tlSI=te~1a5%e3N|Qfj>#7Xp3}2nVS_&{5}a&l89>+e@l;o3
zwYN*ToP6&A3@>I~bw4mD`V1@FN%U0+Fr7`?qe45oAPo&WYNW=seT<>h0%i1pymIKb
zVW=Q@w2-L8TLJ)}gGT`0v)opOU|nUNkXoU<G(<ADW)6k*s|bgJ=T+B50E9{3!|?kw
zol-4Ls_-<tnDO?>?uQv0p43|vTbX4(KLI$ArvHvDy!xQKE01dYr<^Wor2zxPHMJZ!
z<h_ZmKuFvZOMt3foFkE9@Fk=gH(I$gnDD1WHR3u!g0BXCJNu1zNqzKj$bgG_X7Z@M
zn{<@!p{5`6dzShkPtfA3NUUb{@`C2GVJ_q$t{vQytM3mT9XGoktZQT1V({bqL8I(O
zwEBr4e3&#>qIk<D#s>!BQ*55ZT+X~iEX6uyiX}eZz#If#)W;tA(Da2E^SJklB3mEF
zG~Pe=l?hy$+kR($Wf<&L7Udta`xcic{sNtPSiQRb+Is8#rn1<w)#+gnv1dm@V&m*P
z6fv-$xnKaMx2X>=41Va!hZKI_#JzG<JHnn)*|jvhTc-<ano$snM>6y4F6823K!;u2
zNJvR}&J_aM)Jhf!Al*6ELBv0T2=S*$6NH@4xkJbshIg)fp9>0~up@_TkZKIy8)-CT
zjp@1MPLLQ21ZixK?#EK6s~v?0&P}a@m4Z>IZ-k1_fIR^Z)i=*-8>Dr6rc|~}TwT;Y
z?Mlx>ipD$>mT}m(oumMLpp4_pV@fR)!x9|Hty-yq`-~F2yv(5ZmZ)0LjRk!Cp-ysG
zw^GuD2*Gtb996Bm5Lr8Hvp-`9NUt_KQVPaenVrZQ8$Nd+<C?vzNr+_iOCxDF0B3B*
z2mFMH?7bMmeX;zTp-Y%CT_?s!1WATZwJ)O!0HePYXFvzn_LadUd~bE4=<v2nCQ_m*
zXHsK7o-jEPR$AjilD4AwV?*wTt%VjLzL$2G3S4YzN5tr8saFT2$Y=p^jHP`soJK;t
z>1dU+!g`wbFl}O~?y1{%G0#bkV7SFm>_T@Qg(1i|HFali@+%2kjrle`dpB?-|1#J5
zIL;<`-A9qtNp~h+`bvT>C^sWstHkrUyZm~4*3UI~>7{L{j68VY*_yx=)>k_%&KT18
zNJXPCw&j&C0opUQR;*TdjM{~X8}MNFhH18ZlN%4R02QwOsrdfdDjxGF;G<oj9eSn>
z99F28s1=?5TSFbcdWOHMBSXsy4G_CM!FRin*R5^SzWlyzB3|0ES7{LSWHa<YSq(rr
z7;~a>;8kQaNP1w7x|b!_t}I^c@zGOR!`J6x;)xAV<OC^w&(#N?v~luG48Ke?HMIqT
zk_P7iTEmDTp0gU}W3*y78to!|!?-DFIQhD4`jJG^T#j>C3@a~*<f1e9aW7&JWsF{Y
zM~xd(kkfGSA)i1UAId#Y3V()0of6_F#Bz1Cc}%4R!3rc696aDQoGY1=Wc!zLE*ynd
z4Sba7qgbvdbt>qr5!1qk+rY9pDa@maK8fqecV)Qnk9{Xk$5f({1qHf=CAa@zddv-%
zH7ucC!%^UvbZ+bXl#)$Qk;OCbg8p##4l{`~iv1qasYhods7L4B38)l~M7@JC>9pDz
zUn|a1X=cNAoJ8m#IZlAlyac3=7YkUegXG&s1dVsuQm;b$rerNz6+S30fEG&mlthl#
zGwW*zow+|fIQc~7U#M;Q1BhUH6M<{gNRjli>y^c)8&xe@J(CvwUC-bg)_twd8eFWq
zoi0ZRxD&Xk3!;4iphG&Gz~SCJ<=~)$<155l;k_Y3SYrtRTekdt(^j`A;4`6AyCEt=
z8gqSuA$7dhDmqJVA`Aj#)k|_&@ejpAj$$~&F~$xf`?#Q(GiwaS9Ep>5B){~&RfM>w
zy=waJ5>}DAbZUqMP@2D+NZM&wgA;4+d|2%2OgQx8t>p4_(HctxT>1Ht(!FW;a;PJT
zZE~nT<bc!h$;JAINu;jy4Chnmbv=4MiINjkM_#%=<}t1iK>YJ7LWSr&7>r2>hI7}O
zMDO+MkfcnG9eVTV23V#=-q5s{cx+JI=2>B$#`1{rwigv<AHI6+biR79@JVoF$qXpT
z7Urwaw-WIJ$AkjF__J1bpu7NFxoyz}TX;I+ss4X9!K3vnQ=;j)hrED|bVWVcK|6ce
zVD^ktzSKny*}*t`*Bhh!hcsbsfVh)X4A}(SSPYcJDUgFiPGlP$#xw$CFQ}R@1u0Yc
zy9UMo+IW}aY7u^ZQJk`CIW0T`l$M~QAQ|98p(0oo!_Bi=G%b!1mhr#8erPwlcR3FH
z6<5wMt(w!2ZDFJzdFg5v+68%}*Y47-86|mfUX<7i0SXZ#{X7lz+ElLmI0gb3pd?ty
zK;clVNv>c%{@}bL2k{Ugeu8<qRjo(x>jOpgoTvEty={fJ4Ej)OB1x>KRBUX2HC4E|
z@Zht008zQMV!l+B8+`EFb`d^EwMH07$#Ivwcng-I`p2&_6bxI{2sd`pe+38)gzy)J
z66`jGcuh;EVO;kD+&YhR`>Q^v@(F9=h<oTJDiH5jR?cI!OnVK;QbdQZtvRvrwpOuG
zg^ZRIUh0Ur^gC=vC|Goluz{^IK*IrXsM@C>EyPVL08h9&dNauvLOfL)NM}W)ZrNia
zNRb-L&*r=*=`AgyO6EhwSZC4`A_LORR3SL;B|ewZ3lV3R_$SyD#k&pqHwlUC(P`lk
z*&Hxh86^^r4zwuBbrm9Z7;+UShlcAb`cBQ#H>Xw(blp*Cx<llIOP1W#3sc(Oa&2Y%
z?_x5$Mnu7Gbhvdrr2AV$1vFr?HiMGmMYZZhQOfh=KCG<&&tBV8As)TV7`b)icuVO~
zOUr5Y!Q&t7IYF2F|G{ANs|@K;Zgk0gB%&_l#6cu+{|Xs95~t)ymRx%e1(y$qlQBDB
z{n|>dd&oh2E!XU)#KjX_&kN5zhqT&Gh~1=(oj8M%`s+SSscGMH6Ym1ZRVX_wkX$po
z>4hZX1)TpO5YNd64`Qd{bH!0K*q60wxy1Ghi!v$sH+>wMd!+qVDfD4&ZD-x`7dL@<
z*{_QNf-gj9Q3{rt5MZ|giUJ#uYsb_1zq&*#f`h`p$0H9@W9gV0a&3j(H44%Lw+SLH
zHbi+xZ~obG`2COY0lOHf{_C(-1)O`#=mxp&-6OW|%O_LEYPUa%I|cZKK;Xy2C%ZR&
zljE{q-%&eTJs_)go~!U-yPAKuzs6XBMyQT%wX){MdOZk3gg^(A(DB8K*g>ExQl5+#
zQQrcE5t9lv*Qm4Ma%@LA0g&X3m+dQ~F7M4)4v8LZf{(^#-xmc|5SHwx0diQU!NKf1
zC*3t3w|$ij8+su?smS!J-K2x(FL5_Oak>A*-loOnU9KgIly<(a^(+5VbbHXoh#&2<
z5I8qEImMBhM5V~9!nZGcxCnb3J>G87oY%-``=RP4G5DmfdL=<OCW_|5D<Xa{DY8y-
zRMldIX`Q^(a-G0^u-n3MXD}fxAeT=X+!+8~72K`Fd*4pSOLc)VO>qZ9S`o{Iz@5T_
zY4L}$UmwbguPJ+7QyG7_C&cFRqlDVmwJcG5la8q2+V9t@dM48&7txQGT)$a_p=r&m
z7p)dLtW{&v+e_|xpTb7ij$56>x5w0EW8TNUVaFXPpe$P=olzILrFqL@bJ~`?e<W%%
zx3pxxKGEIOQo99rR`|Ytu}!Dt&oLjZ<=UD+LUd(_f6{Swk!!UJy`^W%>7R?Ip@c5d
zn=a{uZlyQf8VNmmZ+c7<dTrnIvJ(0{-t_q;oC$ezCNe?x?3OoY(-O{Qzd4te&|mhZ
LzdVEr0BimaE!RL)

literal 0
HcmV?d00001


From 041adfcc313ba588dd15612a3f8862c2688c28dc Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 14:20:02 +0800
Subject: [PATCH 088/138] Fix issues with split species.

---
 .../src/components/form_species_split.vue      | 18 +++++++++---------
 .../species_communities.vue                    | 17 ++++++++++-------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/form_species_split.vue b/boranga/frontend/boranga/src/components/form_species_split.vue
index d09a80e6..c4bba51b 100644
--- a/boranga/frontend/boranga/src/components/form_species_split.vue
+++ b/boranga/frontend/boranga/src/components/form_species_split.vue
@@ -155,15 +155,15 @@ export default {
         related_items_filter_list_url: function () {
             return '/api/species/filter_list.json';
         },
-        mounted: function () {
-            let vm = this;
-            vm.form = document.forms.new_species;
-        },
-        methods: {
-            //----function to resolve datatable exceeding beyond the div
-            tabClicked: function () {
-                this.reloadcount = this.reloadcount + 1;
-            },
+    },
+    mounted: function () {
+        let vm = this;
+        vm.form = document.forms.new_species;
+    },
+    methods: {
+        //----function to resolve datatable exceeding beyond the div
+        tabClicked: function () {
+            this.reloadcount = this.reloadcount + 1;
         },
     },
 };
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index ba575ec3..718c684f 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -1480,15 +1480,16 @@ export default {
                 const createUrl = api_endpoints.species + '/';
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id;
-                let savedSpecies = await fetch(createUrl, {
+                let response = await fetch(createUrl, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify(payload),
                 });
+                const savedSpecies = await response.json();
                 if (savedSpecies) {
-                    newSpeciesId1 = savedSpecies.body.id;
+                    newSpeciesId1 = savedSpecies.id;
                     fetch(
                         `/api/species/${newSpeciesId1}/internal_species.json`
                     ).then(
@@ -1519,15 +1520,16 @@ export default {
                 const createUrl = api_endpoints.species + '/';
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id;
-                let savedSpecies = await fetch(createUrl, {
+                let response = await fetch(createUrl, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify(payload),
                 });
+                const savedSpecies = await response.json();
                 if (savedSpecies) {
-                    newSpeciesId2 = savedSpecies.body.id;
+                    newSpeciesId2 = savedSpecies.id;
                     fetch(
                         `/api/species/${newSpeciesId2}/internal_species.json`
                     ).then(
@@ -1572,7 +1574,7 @@ export default {
                     body: JSON.stringify(payload),
                 });
                 if (savedSpecies) {
-                    newSpeciesId = savedSpecies.body.id;
+                    newSpeciesId = savedSpecies.id;
                     fetch(
                         `/api/species/${newSpeciesId}/internal_species.json`
                     ).then(
@@ -1601,11 +1603,12 @@ export default {
         },
         renameSpecies: async function () {
             let rename_species_obj = null;
-            let newRenameSpecies = await fetch(
+            let response = await fetch(
                 `/api/species/${this.species_community.id}/rename_deep_copy.json`
             );
+            const newRenameSpecies = await response.json();
             if (newRenameSpecies) {
-                rename_species_obj = newRenameSpecies.body.species_obj;
+                rename_species_obj = newRenameSpecies.species_obj;
                 this.$refs.species_rename.new_rename_species =
                     rename_species_obj;
                 this.$refs.species_rename.isModalOpen = true;

From 128fc8cec584634b1f5398720fd6aefb925f93c5 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 14:37:49 +0800
Subject: [PATCH 089/138] Fix issues with combining species.

---
 .../internal/species_communities/species_communities.vue       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
index 718c684f..9e36ab33 100755
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_communities.vue
@@ -1566,13 +1566,14 @@ export default {
                 const createUrl = api_endpoints.species + '/';
                 let payload = new Object();
                 payload.group_type_id = this.species_community.group_type_id;
-                let savedSpecies = await fetch(createUrl, {
+                let response = await fetch(createUrl, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify(payload),
                 });
+                const savedSpecies = await response.json();
                 if (savedSpecies) {
                     newSpeciesId = savedSpecies.id;
                     fetch(

From 73ee6f46e6b8d965b316ca461aa7efee2d003a40 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 14:38:21 +0800
Subject: [PATCH 090/138] Fix missing scientific name when species is readonly.

---
 .../components/common/species_communities/species_profile.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
index 662afd41..1ba6ce56 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_profile.vue
@@ -24,7 +24,9 @@
                     <input
                         v-else
                         id="taxon_name_id"
-                        v-model="species_community.scientific_name"
+                        v-model="
+                            species_community.taxonomy_details.scientific_name
+                        "
                         :disabled="true"
                         type="text"
                         class="form-control"

From 88b1bf4dc4ca9ff11dabd04c6aed3025810eb0aa Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 15:26:27 +0800
Subject: [PATCH 091/138] Fix issue with CS request amendment.

---
 .../conservation_status/conservation_status_proposal.vue       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
index 69f6615e..7533000e 100644
--- a/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
+++ b/boranga/frontend/boranga/src/components/external/conservation_status/conservation_status_proposal.vue
@@ -267,7 +267,8 @@ export default {
                                     '/amendment_request'
                             )
                         ).then(
-                            async () => {
+                            async (response) => {
+                                const data = await response.json();
                                 vm.setAmendmentData(data);
                             },
                             (err) => {

From 43148f220f697e4b4b6443491024b9d2ab1b7686 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 16:26:36 +0800
Subject: [PATCH 092/138] Fix small issues with agenda datatable.

---
 .../boranga/src/components/internal/meetings/cs_queue.vue  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
index 8936dfc8..59c8cce5 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/cs_queue.vue
@@ -117,7 +117,10 @@ export default {
                         orderable: false,
                     },
                     {
-                        data: null,
+                        data: 'id',
+                        mRender: function (data, type, full, meta) {
+                            return meta.row + 1;
+                        },
                     },
                     {
                         data: 'group_type',
@@ -180,7 +183,7 @@ export default {
                     },
                     { responsivePriority: 2, targets: -2 },
                 ],
-                order: [[1, 'desc']],
+                order: [[1, 'asc']],
                 searching: true,
                 processing: true,
                 drawCallback: function () {

From fd4374c089c2c506280a537ead53ad2d4a2ce9ed Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 16:43:45 +0800
Subject: [PATCH 093/138] Replace  calls that were accidentally left in.

---
 .../common/occurrence/occ_locations.vue       | 94 +++++++++---------
 .../common/occurrence/ocr_location.vue        | 98 +++++++++----------
 2 files changed, 95 insertions(+), 97 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
index ba34b4ab..5606a9da 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -782,55 +782,53 @@ export default {
             payload.site_geometry =
                 vm.$refs.component_map.getJSONFeatures('site_layer');
 
-            vm.$http
-                .post(
-                    helpers.add_endpoint_json(
-                        api_endpoints.occurrence,
-                        vm.occurrence_obj.id + '/update_location_details'
-                    ),
-                    JSON.stringify(payload),
-                    {
-                        emulateJSON: true,
-                    }
-                )
-                .then(
-                    async (response) => {
-                        vm.updatingLocationDetails = false;
-                        vm.occurrence_obj.location = await response.json();
-                        swal.fire({
-                            title: 'Saved',
-                            text: 'Location details have been saved',
-                            icon: 'success',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        }).then(() => {
-                            if (
-                                vm.occurrence_obj.processing_status ==
-                                'Unlocked'
-                            ) {
-                                vm.$router.go();
-                            }
-                        });
-                        vm.incrementComponentMapKey();
-                        vm.refreshDatatables();
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence,
+                    vm.occurrence_obj.id + '/update_location_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                    (error) => {
-                        var text = helpers.apiVueResourceError(error);
-                        swal.fire({
-                            title: 'Error',
-                            text:
-                                'Location details cannot be saved because of the following error: ' +
-                                text,
-                            icon: 'error',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        });
-                        vm.updatingLocationDetails = false;
-                        vm.$refs.component_map.setLoadingMap(false);
-                    }
-                );
+                    body: JSON.stringify(payload),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingLocationDetails = false;
+                    vm.occurrence_obj.location = await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Location details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then(() => {
+                        if (vm.occurrence_obj.processing_status == 'Unlocked') {
+                            vm.$router.go();
+                        }
+                    });
+                    vm.incrementComponentMapKey();
+                    vm.refreshDatatables();
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Location details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingLocationDetails = false;
+                    vm.$refs.component_map.setLoadingMap(false);
+                }
+            );
         },
         incrementComponentMapKey: function () {
             this.uuid_component_map = uuid();
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
index eb0b68df..7196c585 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/ocr_location.vue
@@ -687,55 +687,55 @@ export default {
                 vm.$refs.component_map.setLoadingMap(true);
             }
 
-            vm.$http
-                .post(
-                    helpers.add_endpoint_json(
-                        api_endpoints.occurrence_report,
-                        vm.occurrence_report_obj.id + '/update_location_details'
-                    ),
-                    JSON.stringify(payload),
-                    {
-                        emulateJSON: true,
-                    }
-                )
-                .then(
-                    async (response) => {
-                        vm.updatingLocationDetails = false;
-                        vm.occurrence_report_obj.location =
-                            await response.json();
-                        swal.fire({
-                            title: 'Saved',
-                            text: 'Location details have been saved',
-                            icon: 'success',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        }).then(() => {
-                            if (
-                                vm.occurrence_report_obj.processing_status ==
-                                'Unlocked'
-                            ) {
-                                vm.$router.go();
-                            }
-                        });
-                        vm.$refs.component_map.forceToRefreshMap();
+            fetch(
+                helpers.add_endpoint_json(
+                    api_endpoints.occurrence_report,
+                    vm.occurrence_report_obj.id + '/update_location_details'
+                ),
+                {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                    (error) => {
-                        var text = helpers.apiVueResourceError(error);
-                        swal.fire({
-                            title: 'Error',
-                            text:
-                                'Location details cannot be saved because of the following error: ' +
-                                text,
-                            icon: 'error',
-                            customClass: {
-                                confirmButton: 'btn btn-primary',
-                            },
-                        });
-                        vm.updatingLocationDetails = false;
-                        vm.$refs.component_map.setLoadingMap(false);
-                    }
-                );
+                    body: JSON.stringify(payload),
+                }
+            ).then(
+                async (response) => {
+                    vm.updatingLocationDetails = false;
+                    vm.occurrence_report_obj.location = await response.json();
+                    swal.fire({
+                        title: 'Saved',
+                        text: 'Location details have been saved',
+                        icon: 'success',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    }).then(() => {
+                        if (
+                            vm.occurrence_report_obj.processing_status ==
+                            'Unlocked'
+                        ) {
+                            vm.$router.go();
+                        }
+                    });
+                    vm.$refs.component_map.forceToRefreshMap();
+                },
+                (error) => {
+                    var text = helpers.apiVueResourceError(error);
+                    swal.fire({
+                        title: 'Error',
+                        text:
+                            'Location details cannot be saved because of the following error: ' +
+                            text,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    vm.updatingLocationDetails = false;
+                    vm.$refs.component_map.setLoadingMap(false);
+                }
+            );
         },
         incrementComponentMapKey: function () {
             this.uuid = uuid();
@@ -793,7 +793,7 @@ export default {
 </script>
 
 <style lang="css" scoped>
-/* @import 'vue-select/dist/vue-select.css'; */
+@import 'vue-select/dist/vue-select.css';
 
 /*ul, li {
         zoom:1;

From 8e9e23f1f778348174a4e77fa0f96d35fb89f603 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 16 Dec 2024 16:47:12 +0800
Subject: [PATCH 094/138] Fix text duplication.

---
 .../internal/conservation_status/conservation_status.vue      | 4 ++--
 .../src/components/internal/occurrence/bulk_import_schema.vue | 2 +-
 .../src/components/internal/occurrence/occurrence_report.vue  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index 317a0af4..b9609f1e 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -824,7 +824,7 @@
                                                     "
                                                     @click.prevent="save()"
                                                 >
-                                                    Save Save and Continue
+                                                    Save and Continue
                                                 </button>
 
                                                 <button
@@ -856,7 +856,7 @@
                                                     "
                                                     @click.prevent="save_exit()"
                                                 >
-                                                    Save Save and Exit
+                                                    Save and Exit
                                                 </button>
 
                                                 <button
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index 480fdbc7..58fc020e 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -1222,7 +1222,7 @@
                             :disabled="saving"
                             @click.prevent="saveAndExit()"
                         >
-                            Save Save and Exit
+                            Save and Exit
                             <template v-if="saving"
                                 ><span
                                     class="spinner-border spinner-border-sm ms-2"
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
index 597009b8..b2eecf01 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
@@ -583,7 +583,7 @@
                                         "
                                         @click.prevent="save()"
                                     >
-                                        Save Save and Continue
+                                        Save and Continue
                                     </button>
 
                                     <button
@@ -612,7 +612,7 @@
                                         "
                                         @click.prevent="save_exit()"
                                     >
-                                        Save Save and Exit
+                                        Save and Exit
                                     </button>
 
                                     <button

From ff81c91550e57b4f80621f7024d9523d99495695 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 09:49:47 +0800
Subject: [PATCH 095/138] Remove invalid reference.

---
 .../src/components/common/occurrence/occ_locations.vue        | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
index 5606a9da..54be86d7 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_locations.vue
@@ -615,10 +615,6 @@ export default {
             return api_endpoints.occurrence + 'buffer_geometries/';
         },
         isReadOnly: function () {
-            //override for split reports
-            if (this.is_readonly) {
-                return this.is_readonly;
-            }
             return this.occurrence_obj.readonly;
         },
         csrf_token: function () {

From e868e20965c6c1a1a21c2463dc09fbb35aed11d8 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 10:22:59 +0800
Subject: [PATCH 096/138] Make cc_email field allow blank.

---
 boranga/components/occurrence/serializers.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/components/occurrence/serializers.py b/boranga/components/occurrence/serializers.py
index fa68814c..fdb370cf 100644
--- a/boranga/components/occurrence/serializers.py
+++ b/boranga/components/occurrence/serializers.py
@@ -2489,7 +2489,7 @@ class ProposeApproveSerializer(serializers.Serializer):
     occurrence_id = serializers.IntegerField(allow_null=True)
     new_occurrence_name = serializers.CharField(allow_blank=True)
     details = serializers.CharField()
-    cc_email = serializers.CharField(required=False, allow_null=True)
+    cc_email = serializers.CharField(required=False, allow_blank=True, allow_null=True)
 
 
 class SaveOccurrenceSerializer(serializers.ModelSerializer):

From 847b573ae7c2c63b0f19d825d4c88c311c52a022 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 10:38:57 +0800
Subject: [PATCH 097/138] Fix bug loading occurrence combine documents.

---
 boranga/components/occurrence/api.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/components/occurrence/api.py b/boranga/components/occurrence/api.py
index 45b75b99..d31ea295 100644
--- a/boranga/components/occurrence/api.py
+++ b/boranga/components/occurrence/api.py
@@ -3131,7 +3131,7 @@ def combine_documents_lookup(self, request, *args, **kwargs):
             occ_ids = json.loads(request.POST.get("occurrence_ids"))
             documents = OccurrenceDocument.objects.filter(
                 occurrence__id__in=occ_ids
-            ).filter(visible=True)
+            ).filter(active=True)
 
             values_list = list(
                 documents.values(

From 043d8c5e3dfa9c513aae3f661e2eb2e15626a026 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 10:39:26 +0800
Subject: [PATCH 098/138] Change modal header url to reference front end asset.

---
 boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue b/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
index a27a5597..75ea8893 100755
--- a/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
+++ b/boranga/frontend/boranga/src/utils/vue/bootstrap-modal.vue
@@ -195,7 +195,7 @@ export default {
     background-color: #226fbb;
     color: #fff;
     background: #3580ca
-        url('../../../../../../staticfiles/img/parks-bg-banner.gif') repeat-x
+        url('/static/boranga_vue/src/assets/parks-bg-banner.gif') repeat-x
         center bottom;
 }
 

From 9f5ae239d1e806307455bb7a59b8a367544cba23 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 10:40:17 +0800
Subject: [PATCH 099/138] Correct error handling when submitting propose
 approve ocr form.

---
 .../internal/occurrence/ocr_propose_approve.vue           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
index 36701ea9..aab49bf8 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/ocr_propose_approve.vue
@@ -208,7 +208,7 @@ export default {
                 create_new_occurrence: false,
                 new_occurrence_name: '',
                 details: '',
-                cc_email: '',
+                cc_email: null,
             },
             errorString: '',
         };
@@ -324,7 +324,11 @@ export default {
                             body: JSON.stringify(vm.propose_approve),
                         }
                     ).then(
-                        () => {
+                        async (response) => {
+                            if (!response.ok) {
+                                vm.errorString = await response.json();
+                                return;
+                            }
                             swal.fire({
                                 title: 'Proposal to Approve Successful',
                                 text: `Your proposal to approve occurrence report ${vm.occurrence_report_number} has been successfully submitted.`,

From 494c90dfae55f8358e5aea1e750633232690c8c8 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 10:49:17 +0800
Subject: [PATCH 100/138] Make cc_email field allow blank.

---
 boranga/components/occurrence/serializers.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/components/occurrence/serializers.py b/boranga/components/occurrence/serializers.py
index fdb370cf..08f37512 100644
--- a/boranga/components/occurrence/serializers.py
+++ b/boranga/components/occurrence/serializers.py
@@ -2478,7 +2478,7 @@ def save(self, *args, **kwargs):
 
 class ProposeDeclineSerializer(serializers.Serializer):
     reason = serializers.CharField()
-    cc_email = serializers.CharField(required=False, allow_null=True)
+    cc_email = serializers.CharField(required=False, allow_blank=True, allow_null=True)
 
 
 class BackToAssessorSerializer(serializers.Serializer):

From 827f261b23604e3bb6cd1ad6c40ed91c0a262462 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 11:42:56 +0800
Subject: [PATCH 101/138] Adjust null check as was leeting null ref through.

---
 .../src/components/common/occurrence/occ_related_ocr_table.vue  | 2 +-
 .../internal/occurrence/occurrence_site_datatable.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
index 51e2ff4e..3ec60360 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/occ_related_ocr_table.vue
@@ -347,7 +347,7 @@ export default {
             );
         },
         adjust_table_width: function () {
-            if (this.$refs.related_ocr_datatable !== undefined) {
+            if (this.$refs.related_ocr_datatable) {
                 this.$refs.related_ocr_datatable.vmDataTable.columns
                     .adjust()
                     .responsive.recalc();
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
index 9658e333..cd834041 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_site_datatable.vue
@@ -272,7 +272,7 @@ export default {
     methods: {
         adjust_table_width: function () {
             let vm = this;
-            if (vm.$refs.occurrence_site_datatable !== undefined) {
+            if (vm.$refs.occurrence_site_datatable) {
                 vm.$refs.occurrence_site_datatable.vmDataTable.columns
                     .adjust()
                     .responsive.recalc();

From f113578e46b6057a1af44dc2666924c396fcc30d Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 14:57:42 +0800
Subject: [PATCH 102/138] Fix error handling with fetch.

---
 .../internal/occurrence/add_site.vue          | 60 ++++++++-----------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
index 486fcf03..c2af15e5 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/add_site.vue
@@ -10,7 +10,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="siteForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <alert
@@ -334,7 +334,6 @@ export default {
             updatingSite: false,
             validation_form: null,
             type: '1',
-            errors: false,
             errorString: '',
             successString: '',
             success: false,
@@ -343,10 +342,6 @@ export default {
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             var action = this.site_action;
             if (typeof action === 'string' && action.length > 0) {
@@ -408,8 +403,7 @@ export default {
             this.siteObj = {
                 related_occurrence_reports: [],
             };
-            this.errors = false;
-            $('.has-error').removeClass('has-error');
+            this.errorString = '';
         },
         reinitialiseOCRLookup: function () {
             let vm = this;
@@ -440,7 +434,7 @@ export default {
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let siteObj = JSON.parse(JSON.stringify(vm.siteObj));
             let formData = new FormData();
 
@@ -449,43 +443,39 @@ export default {
                 formData.append('data', JSON.stringify(siteObj));
                 fetch(helpers.add_endpoint_json(vm.url, siteObj.id), {
                     method: 'PUT',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
-                }).then(
-                    () => {
-                        vm.updatingSite = false;
+                    body: formData,
+                })
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.$parent.updatedSites();
                         vm.close();
-                    },
-                    (error) => {
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
+                    })
+                    .finally(() => {
                         vm.updatingSite = false;
-                    }
-                );
+                    });
             } else {
                 vm.addingSite = true;
                 formData.append('data', JSON.stringify(siteObj));
                 fetch(vm.url, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData),
-                }).then(
-                    () => {
-                        vm.addingSite = false;
+                    body: formData,
+                })
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.close();
                         vm.$parent.updatedSites();
-                    },
-                    (error) => {
-                        vm.errors = true;
+                    })
+                    .finally(() => {
                         vm.addingSite = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
+                    });
             }
         },
     },

From 3d669ef13859072cac65cc25421d01fe1fde78be Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 17 Dec 2024 15:14:09 +0800
Subject: [PATCH 103/138] Fix error handling for Active occurrence.

---
 .../internal/occurrence/occurrence.vue        | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
index 85914d5f..d43111a7 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
@@ -660,31 +660,30 @@ export default {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-            }).then(
-                async () => {
-                    swal.fire({
-                        title: 'Activated',
-                        text: 'Occurrence has been Activated',
-                        icon: 'success',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
-                        },
-                    }).then(async () => {
-                        this.$router.go(this.$router.currentRoute);
-                    });
-                },
-                (err) => {
-                    var errorText = helpers.apiVueResourceError(err);
+            }).then(async (response) => {
+                const data = await response.json();
+                if (!response.ok) {
                     swal.fire({
                         title: 'Activate Error',
-                        text: errorText,
+                        text: data,
                         icon: 'error',
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
                     });
+                    return;
                 }
-            );
+                swal.fire({
+                    title: 'Activated',
+                    text: 'Occurrence has been Activated',
+                    icon: 'success',
+                    customClass: {
+                        confirmButton: 'btn btn-primary',
+                    },
+                }).then(async () => {
+                    this.$router.go(this.$router.currentRoute);
+                });
+            });
         },
         lockOccurrence: async function () {
             await fetch(

From 4cc3cfcd04b538ee1e87d554af7088dce131a93e Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 10:30:07 +0800
Subject: [PATCH 104/138] Add some exception handling for missing point
 coordinates.

---
 boranga/components/occurrence/api.py | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/boranga/components/occurrence/api.py b/boranga/components/occurrence/api.py
index d31ea295..1fd76746 100644
--- a/boranga/components/occurrence/api.py
+++ b/boranga/components/occurrence/api.py
@@ -5,6 +5,7 @@
 from io import BytesIO
 
 from django.contrib.gis.geos import GEOSGeometry
+from django.contrib.gis.geos.error import GEOSException
 from django.core.cache import cache
 from django.db import models, transaction
 from django.db.models import CharField, Q, Value
@@ -5737,9 +5738,18 @@ def update(self, request, *args, **kwargs):
     def create(self, request, *args, **kwargs):
 
         data = json.loads(request.data.get("data"))
-        point_data = "POINT({} {})".format(data["point_coord1"], data["point_coord2"])
+        try:
+            point_data = "POINT({} {})".format(
+                data["point_coord1"], data["point_coord2"]
+            )
+        except KeyError:
+            raise serializers.ValidationError("Please enter a point coordinate")
+
+        try:
+            original_geom = GEOSGeometry(point_data, srid=data["datum"])
+        except GEOSException:
+            raise serializers.ValidationError("Please enter a valid point coordinate")
 
-        original_geom = GEOSGeometry(point_data, srid=data["datum"])
         geom = GEOSGeometry(point_data, srid=data["datum"])
         geom.transform(4326)
 

From 66c59997ea71e02003d1c28e247db6f18cf6bb8e Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 10:30:40 +0800
Subject: [PATCH 105/138] Add some exception handling for missing point
 coordinates.

---
 boranga/components/meetings/api.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/boranga/components/meetings/api.py b/boranga/components/meetings/api.py
index 16c2f614..bef5ba3e 100644
--- a/boranga/components/meetings/api.py
+++ b/boranga/components/meetings/api.py
@@ -647,7 +647,6 @@ def update(self, request, *args, **kwargs):
         return Response(serializer.data)
 
     def create(self, request, *args, **kwargs):
-        logger.debug(request.data)
         serializer = SaveMinutesSerializer(data=json.loads(request.data.get("data")))
         serializer.is_valid(raise_exception=True)
         instance = serializer.save(no_revision=True)

From bcff71572e008826747908111922daf80def8b06 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 10:31:32 +0800
Subject: [PATCH 106/138] Add more accurate exception message from geoserver if
 available.

---
 boranga/components/spatial/utils.py | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/boranga/components/spatial/utils.py b/boranga/components/spatial/utils.py
index d2017384..4bbee3d2 100644
--- a/boranga/components/spatial/utils.py
+++ b/boranga/components/spatial/utils.py
@@ -104,6 +104,7 @@ def intersect_geometry_with_layer(
         .groupdict()
         .get("request_path", None)
     )
+
     if request_path:
         try:
             proxy = Proxy.objects.get(active=True, request_path=request_path)
@@ -125,13 +126,27 @@ def intersect_geometry_with_layer(
         res = requests.post(geoserver_url.url, params=params)
 
     if res.reason != "OK":
+        basic_error_message = (
+            f"Failed to intersect geometry with layer {intersect_layer_name}."
+        )
+        root = ET.fromstring(res._content, ET.XMLParser(encoding="utf-8"))
+        namespace = root.tag.split("}")[0] + "}"
+        exception = root.find(f".//{namespace}Exception")
+        if exception is None:
+            raise serializers.ValidationError(
+                f"{basic_error_message}. {res.reason}: {res.text}"
+            )
+        exception_code = exception.attrib.get("exceptionCode")
+        exception_text = root.find(f".//{namespace}ExceptionText")
+
         raise serializers.ValidationError(
-            f"Failed to intersect geometry with layer {intersect_layer_name}. Reason: {res.reason}"
+            f"{basic_error_message}. {exception_code}: {exception_text.text}"
         )
 
     if result_type == "hits":
         # resultType hits returns text/xml
         return res.text
+
     return res.json()
 
 

From f422e66d0d3cf6c1a231d980e1fac1922541d512 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 10:32:59 +0800
Subject: [PATCH 107/138] Fix Occurrence error handling with fetch.

---
 .../internal/occurrence/occurrence.vue        | 46 +++++++++----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
index d43111a7..15a5f841 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
@@ -444,31 +444,12 @@ export default {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(payload),
-            }).then(
-                async (response) => {
-                    const data = await response.json();
-                    swal.fire({
-                        title: 'Saved',
-                        text: 'Your changes have been saved',
-                        icon: 'success',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
-                        },
-                    });
-                    vm.savingOccurrence = false;
-                    vm.isSaved = true;
-                    vm.refreshFromResponse(data);
-                    vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(
-                        false
-                    );
-                    vm.$refs.occurrence.$refs.occ_location.incrementComponentMapKey();
-                    vm.$refs.occurrence.$refs.occ_location.refreshDatatables();
-                },
-                (err) => {
-                    var errorText = helpers.apiVueResourceError(err);
+            }).then(async (response) => {
+                const data = await response.json();
+                if (!response.ok) {
                     swal.fire({
                         title: 'Save Error',
-                        text: errorText,
+                        text: data,
                         icon: 'error',
                         customClass: {
                             confirmButton: 'btn btn-primary',
@@ -479,8 +460,25 @@ export default {
                     vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(
                         false
                     );
+                    return;
                 }
-            );
+                swal.fire({
+                    title: 'Saved',
+                    text: 'Your changes have been saved',
+                    icon: 'success',
+                    customClass: {
+                        confirmButton: 'btn btn-primary',
+                    },
+                });
+                vm.savingOccurrence = false;
+                vm.isSaved = true;
+                vm.refreshFromResponse(data);
+                vm.$refs.occurrence.$refs.occ_location.$refs.component_map.setLoadingMap(
+                    false
+                );
+                vm.$refs.occurrence.$refs.occ_location.incrementComponentMapKey();
+                vm.$refs.occurrence.$refs.occ_location.refreshDatatables();
+            });
         },
         save_exit: async function () {
             let vm = this;

From 5faaf1e833df5abfceaa5343c9a57c048bb7d902 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 10:33:39 +0800
Subject: [PATCH 108/138] Remove call to source.getFeatures which seemed to be
 causing some issues.

---
 boranga/frontend/boranga/src/components/common/component_map.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 4da82e33..8b0ce978 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -4763,7 +4763,6 @@ export default {
                 if (Object.prototype.hasOwnProperty.call(layer, 'getSource')) {
                     const source = layer.getSource();
                     if (source) {
-                        source.getFeatures(); // Trigger the loading of the features
                         layers.push(layer);
                     }
                 }

From d47e9efdafa3e299c17bda23a65e13aad5590129 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 14:40:16 +0800
Subject: [PATCH 109/138] Remove unused file.

---
 .../src/components/common/add_contact.vue     | 287 ------------------
 1 file changed, 287 deletions(-)
 delete mode 100755 boranga/frontend/boranga/src/components/common/add_contact.vue

diff --git a/boranga/frontend/boranga/src/components/common/add_contact.vue b/boranga/frontend/boranga/src/components/common/add_contact.vue
deleted file mode 100755
index 69c88fe8..00000000
--- a/boranga/frontend/boranga/src/components/common/add_contact.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template lang="html">
-    <div id="add-contact">
-        <modal :title="title()" large @ok="ok()" @cancel="cancel()">
-            <form class="form-horizontal" name="addContactForm">
-                <div class="row">
-                    <alert v-if="showError" type="danger"
-                        ><strong>{{ errorString }}</strong></alert
-                    >
-                    <div class="col-lg-12">
-                        <div class="row">
-                            <div class="form-group">
-                                <label
-                                    class="col-md-2 control-label pull-left"
-                                    for="Name"
-                                    >Given Name(s):
-                                </label>
-                                <div class="col-md-10">
-                                    <input
-                                        v-model="contact.first_name"
-                                        type="text"
-                                        class="form-control"
-                                        name="name"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="form-group">
-                                <label
-                                    class="col-md-2 control-label pull-left"
-                                    for="Name"
-                                    >Surname:
-                                </label>
-                                <div class="col-md-10">
-                                    <input
-                                        v-model="contact.last_name"
-                                        type="text"
-                                        class="form-control"
-                                        name="name"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="form-group">
-                                <label
-                                    class="col-md-2 control-label pull-left"
-                                    for="Phone"
-                                    >Phone:
-                                </label>
-                                <div class="col-md-10">
-                                    <input
-                                        v-model="contact.phone_number"
-                                        type="text"
-                                        class="form-control"
-                                        name="phone"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="form-group">
-                                <label
-                                    class="col-md-2 control-label pull-left"
-                                    for="Mobile"
-                                    >Mobile:
-                                </label>
-                                <div class="col-md-10">
-                                    <input
-                                        v-model="contact.mobile_number"
-                                        type="text"
-                                        class="form-control"
-                                        name="mobile"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="form-group">
-                                <label
-                                    class="col-md-2 control-label pull-left"
-                                    for="Fax"
-                                    >Fax:
-                                </label>
-                                <div class="col-md-10">
-                                    <input
-                                        v-model="contact.fax_number"
-                                        type="text"
-                                        class="form-control"
-                                        name="fax"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="form-group">
-                                <label
-                                    class="col-md-2 control-label pull-left"
-                                    for="Email"
-                                    >Email:
-                                </label>
-                                <div class="col-md-10">
-                                    <input
-                                        v-model="contact.email"
-                                        type="text"
-                                        class="form-control"
-                                        name="email"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </modal>
-    </div>
-</template>
-
-<script>
-import modal from '@vue-utils/bootstrap-modal.vue';
-import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints } from '@/utils/hooks.js';
-export default {
-    name: 'AddOrganisationContact',
-    components: {
-        modal,
-        alert,
-    },
-    props: {
-        org_id: {
-            type: Number,
-        },
-    },
-    data: function () {
-        return {
-            isModalOpen: false,
-            form: null,
-            contact: {},
-            errors: false,
-            errorString: '',
-            successString: '',
-            success: false,
-        };
-    },
-    computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.addContactForm;
-        vm.addFormValidations();
-    },
-    methods: {
-        ok: function () {
-            let vm = this;
-            if ($(vm.form).valid()) {
-                vm.sendData();
-            }
-        },
-        cancel: function () {},
-        title: function () {
-            let vm = this;
-            if (vm.contact.id) {
-                return 'Update Contact';
-            }
-            return 'Add Contact';
-        },
-        close: function () {
-            this.isModalOpen = false;
-            this.contact = {};
-            this.errors = false;
-            this.form.reset();
-        },
-        fetchContact: function (id) {
-            let vm = this;
-            fetch(api_endpoints.contact(id)).then(
-                async (response) => {
-                    vm.contact = await response.json();
-                    vm.isModalOpen = true;
-                },
-                (error) => {
-                    console.log(error);
-                }
-            );
-        },
-        sendData: function () {
-            let vm = this;
-            vm.errors = false;
-            if (vm.contact.id) {
-                let contact = vm.contact;
-                fetch(
-                    helpers.add_endpoint_json(
-                        api_endpoints.organisation_contacts,
-                        contact.id
-                    ),
-                    {
-                        method: 'PUT',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(contact),
-                    }
-                ).then(
-                    () => {
-                        vm.$parent.refreshDatatable();
-                        vm.close();
-                    },
-                    (error) => {
-                        console.log(error);
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
-            } else {
-                let contact = JSON.parse(JSON.stringify(vm.contact));
-                contact.organisation = vm.org_id;
-                contact.user_status = 'contact_form';
-                fetch(api_endpoints.organisation_contacts, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        body: JSON.stringify(contact),
-                    },
-                }).then(
-                    () => {
-                        vm.close();
-                        vm.$parent.addedContact();
-                    },
-                    (error) => {
-                        console.log(error);
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
-            }
-        },
-        addFormValidations: function () {
-            let vm = this;
-            $(vm.form).validate({
-                rules: {
-                    arrival: 'required',
-                    departure: 'required',
-                    campground: 'required',
-                    campsite: {
-                        required: {
-                            depends: function () {
-                                return vm.campsites.length > 0;
-                            },
-                        },
-                    },
-                },
-                messages: {
-                    arrival: 'field is required',
-                    departure: 'field is required',
-                    campground: 'field is required',
-                    campsite: 'field is required',
-                },
-                showErrors: function (errorMap, errorList) {
-                    $.each(this.validElements(), function (index, element) {
-                        var $element = $(element);
-                        $element
-                            .attr('data-original-title', '')
-                            .parents('.form-group')
-                            .removeClass('has-error');
-                    });
-                    // destroy tooltips on valid elements
-                    $('.' + this.settings.validClass).tooltip('destroy');
-                    // add or update tooltips
-                    for (var i = 0; i < errorList.length; i++) {
-                        var error = errorList[i];
-                        $(error.element)
-                            .tooltip({
-                                trigger: 'focus',
-                            })
-                            .attr('data-original-title', error.message)
-                            .parents('.form-group')
-                            .addClass('has-error');
-                    }
-                },
-            });
-        },
-    },
-};
-</script>

From 39fccebc83fb9488c83821e227621c76ee4de9f3 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 15:30:59 +0800
Subject: [PATCH 110/138] Update error handling code.

---
 .../src/components/common/add_comm_log.vue    | 31 +++----
 .../src/components/common/add_document.vue    | 48 +++++-----
 .../src/components/common/help_text.vue       | 33 ++++---
 .../common/occurrence/add_contact_detail.vue  | 50 +++++-----
 .../common/occurrence/add_observer_detail.vue | 36 ++++----
 .../common/species_communities/add_threat.vue | 54 +++++------
 .../species_combine/add_combine_species.vue   | 88 ++++++++----------
 .../conservation_status/amendment_request.vue | 74 +++++++--------
 .../proposal_propose_delist.vue               | 33 +++----
 .../proposal_proposed_decline.vue             | 33 +++----
 .../internal/meetings/agenda_datatable.vue    |  9 --
 .../internal/occurrence/amendment_request.vue | 49 +++++-----
 .../occurrence/occurrence_tenure_modal.vue    | 21 +----
 .../species_communities/make_public.vue       | 92 +++++++------------
 14 files changed, 281 insertions(+), 370 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/add_comm_log.vue b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
index b4872510..1cd35953 100755
--- a/boranga/frontend/boranga/src/components/common/add_comm_log.vue
+++ b/boranga/frontend/boranga/src/components/common/add_comm_log.vue
@@ -10,7 +10,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="commsForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div class="col-sm-12">
@@ -222,7 +222,6 @@
 <script>
 import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
-import { helpers } from '@/utils/hooks.js';
 export default {
     name: 'AddComms',
     components: {
@@ -245,7 +244,6 @@ export default {
             state: 'proposed_approval',
             addingComms: false,
             validation_form: null,
-            errors: false,
             errorString: '',
             successString: '',
             success: false,
@@ -264,12 +262,6 @@ export default {
             ],
         };
     },
-    computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-    },
     watch: {
         isModalOpen: function (val) {
             let vm = this;
@@ -326,7 +318,7 @@ export default {
             let vm = this;
             this.isModalOpen = false;
             this.comms = {};
-            this.errors = false;
+            this.errorString = '';
             $('.has-error').removeClass('has-error');
             let file_length = vm.files.length;
             this.files = [];
@@ -339,7 +331,7 @@ export default {
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let comms = new FormData(vm.form);
             for (let i = 0; i < vm.files.length; i++) {
                 comms.append('files', vm.files[i].file);
@@ -348,17 +340,16 @@ export default {
             fetch(vm.url, {
                 method: 'POST',
                 body: comms,
-            }).then(
-                () => {
+            }).then(async (response) => {
+                const data = await response.json();
+                if (!response.ok) {
                     vm.addingComms = false;
-                    vm.close();
-                },
-                (error) => {
-                    vm.errors = true;
-                    vm.addingComms = false;
-                    vm.errorString = helpers.apiVueResourceError(error);
+                    vm.errorString = data;
+                    return;
                 }
-            );
+                vm.addingComms = false;
+                vm.close();
+            });
         },
         addFormValidations: function () {
             let vm = this;
diff --git a/boranga/frontend/boranga/src/components/common/add_document.vue b/boranga/frontend/boranga/src/components/common/add_document.vue
index 12a4c38e..6428fbc9 100644
--- a/boranga/frontend/boranga/src/components/common/add_document.vue
+++ b/boranga/frontend/boranga/src/components/common/add_document.vue
@@ -10,7 +10,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="documentForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div class="col-sm-12">
@@ -354,7 +354,6 @@ export default {
             updatingDocument: false,
             validation_form: null,
             type: '1',
-            errors: false,
             errorString: '',
             successString: '',
             success: false,
@@ -363,10 +362,6 @@ export default {
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         showSubmitterCanAccess: function () {
             return (
                 this.is_internal &&
@@ -474,12 +469,11 @@ export default {
             this.documentObj = {};
             this.$refs.filefield.files = [{ file: null, name: '' }];
             this.$refs.filefield.reset_files();
-            this.errors = false;
             $('.has-error').removeClass('has-error');
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let documentObj = JSON.parse(JSON.stringify(vm.documentObj));
             let formData = new FormData();
 
@@ -499,36 +493,40 @@ export default {
                 fetch(helpers.add_endpoint_json(vm.url, documentObj.id), {
                     method: 'PUT',
                     body: formData,
-                }).then(
-                    () => {
-                        vm.updatingDocument = false;
+                })
+                    .then(async (response) => {
+                        let data = await response.json();
+                        if (response.status !== 200) {
+                            vm.errorString = data;
+                            return;
+                        }
+
                         vm.$parent.updatedDocuments();
                         vm.close();
-                    },
-                    (error) => {
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
+                    })
+                    .finally(() => {
                         vm.updatingDocument = false;
-                    }
-                );
+                    });
             } else {
                 vm.addingDocument = true;
                 formData.append('data', JSON.stringify(documentObj));
                 fetch(vm.url, {
                     method: 'POST',
                     body: formData,
-                }).then(
-                    () => {
+                })
+                    .then(async (response) => {
+                        let data = await response.json();
+                        if (response.status !== 200) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.addingDocument = false;
                         vm.close();
                         vm.$parent.updatedDocuments();
-                    },
-                    (error) => {
-                        vm.errors = true;
+                    })
+                    .finally(() => {
                         vm.addingDocument = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
+                    });
             }
         },
     },
diff --git a/boranga/frontend/boranga/src/components/common/help_text.vue b/boranga/frontend/boranga/src/components/common/help_text.vue
index 3b9e237a..39cf154b 100644
--- a/boranga/frontend/boranga/src/components/common/help_text.vue
+++ b/boranga/frontend/boranga/src/components/common/help_text.vue
@@ -75,26 +75,25 @@ export default {
         fetchHelpText: function () {
             let vm = this;
             if (!vm.helpTextEntry) {
-                fetch(`${api_endpoints.help_text_entries}/${vm.section_id}/`)
-                    .then(async (response) => {
-                        vm.helpTextEntry = await response.json();
+                fetch(
+                    `${api_endpoints.help_text_entries}/${vm.section_id}/`
+                ).then(async (response) => {
+                    const data = await response.json();
+                    if (!response.ok) {
+                        this.errorText = data;
+                        return;
+                    }
+                    vm.helpTextEntry = data;
+                    this.$nextTick(() => {
                         this.$nextTick(() => {
-                            this.$nextTick(() => {
-                                if (vm.helpTextEntry.icon_with_popover) {
-                                    var helpTextEntryElement =
-                                        document.getElementById(
-                                            this.section_id
-                                        );
-                                    new bootstrap.Popover(helpTextEntryElement);
-                                }
-                            });
+                            if (vm.helpTextEntry.icon_with_popover) {
+                                var helpTextEntryElement =
+                                    document.getElementById(this.section_id);
+                                new bootstrap.Popover(helpTextEntryElement);
+                            }
                         });
-                    })
-                    .catch(async (response) => {
-                        const data = await response.json();
-                        console.log(data.detail);
-                        this.errorText = data.detail;
                     });
+                });
             }
         },
     },
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
index d6324d38..3be48e56 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_contact_detail.vue
@@ -14,7 +14,7 @@
                         name="contactDetailForm"
                         novalidate
                     >
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div class="col-sm-12">
@@ -220,7 +220,6 @@ export default {
             updatingContact: false,
             validation_form: null,
             type: '1',
-            errors: false,
             errorString: '',
             successString: '',
             success: false,
@@ -228,10 +227,6 @@ export default {
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             var action = this.contact_detail_action;
             if (typeof action === 'string' && action.length > 0) {
@@ -272,12 +267,12 @@ export default {
         close: function () {
             this.isModalOpen = false;
             this.contactObj = {};
-            this.errors = false;
+            this.errorString = '';
             $('.has-error').removeClass('has-error');
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let contactObj = JSON.parse(JSON.stringify(vm.contactObj));
             let formData = new FormData();
 
@@ -287,36 +282,40 @@ export default {
                 fetch(helpers.add_endpoint_json(vm.url, contactObj.id), {
                     method: 'PUT',
                     body: formData,
-                }).then(
-                    () => {
+                })
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.updatingContact = false;
                         vm.$parent.updatedContactDetails();
                         vm.close();
-                    },
-                    (error) => {
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
+                    })
+                    .finally(() => {
                         vm.updatingContact = false;
-                    }
-                );
+                    });
             } else {
                 vm.addingContact = true;
                 formData.append('data', JSON.stringify(contactObj));
                 fetch(vm.url, {
                     method: 'POST',
                     body: formData,
-                }).then(
-                    () => {
+                })
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.addingContact = false;
                         vm.$parent.updatedContactDetails();
                         vm.close();
-                    },
-                    (error) => {
-                        vm.errors = true;
+                    })
+                    .finally(() => {
                         vm.addingContact = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
+                    });
             }
         },
         clearForm: function () {
@@ -330,6 +329,9 @@ export default {
 </script>
 
 <style lang="css">
+.error {
+    color: red;
+}
 .modal-input-row {
     margin-bottom: 20px;
 }
diff --git a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
index 2fd75415..2a0c5cb9 100644
--- a/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
+++ b/boranga/frontend/boranga/src/components/common/occurrence/add_observer_detail.vue
@@ -339,34 +339,38 @@ export default {
                 fetch(helpers.add_endpoint_json(vm.url, observerObj.id), {
                     method: 'PUT',
                     body: formData,
-                }).then(
-                    () => {
-                        vm.updatingObserver = false;
+                })
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.$parent.updatedObserverDetails();
                         vm.close();
-                    },
-                    (error) => {
-                        vm.errorString = helpers.apiVueResourceError(error);
+                    })
+                    .finally(() => {
                         vm.updatingObserver = false;
-                    }
-                );
+                    });
             } else {
                 vm.addingObserver = true;
                 formData.append('data', JSON.stringify(observerObj));
                 fetch(vm.url, {
                     method: 'POST',
                     body: formData,
-                }).then(
-                    () => {
-                        vm.addingObserver = false;
+                })
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.$parent.updatedObserverDetails();
                         vm.close();
-                    },
-                    (error) => {
+                    })
+                    .finally(() => {
                         vm.addingObserver = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
+                    });
             }
         },
         populateWithSubmitterInformation: function () {
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
index c107ae92..097d80d2 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/add_threat.vue
@@ -10,7 +10,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="threatForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <alert
@@ -593,20 +593,10 @@ export default {
             potential_threat_onset_list: [],
             addingThreat: false,
             updatingThreat: false,
-            validation_form: null,
-            type: '1',
-            errors: false,
             errorString: '',
-            successString: '',
-            success: false,
-            validDate: false,
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             var action = this.threat_action;
             if (typeof action === 'string' && action.length > 0) {
@@ -661,12 +651,12 @@ export default {
         close: function () {
             this.isModalOpen = false;
             this.threatObj = {};
-            this.errors = false;
+            this.errorString = '';
             $('.has-error').removeClass('has-error');
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             vm.threatObj.date_observed =
                 vm.threatObj.date_observed == ''
                     ? null
@@ -680,36 +670,38 @@ export default {
                 fetch(helpers.add_endpoint_json(vm.url, threatObj.id), {
                     method: 'PUT',
                     body: formData,
-                }).then(
-                    () => {
-                        vm.updatingThreat = false;
+                })
+                    .then(async (response) => {
+                        let data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.$parent.updatedThreats();
                         vm.close();
-                    },
-                    (error) => {
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
+                    })
+                    .finally(() => {
                         vm.updatingThreat = false;
-                    }
-                );
+                    });
             } else {
                 vm.addingThreat = true;
                 formData.append('data', JSON.stringify(threatObj));
                 fetch(vm.url, {
                     method: 'POST',
                     body: formData,
-                }).then(
-                    () => {
-                        vm.addingThreat = false;
+                })
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.close();
                         vm.$parent.updatedThreats();
-                    },
-                    (error) => {
-                        vm.errors = true;
+                    })
+                    .finally(() => {
                         vm.addingThreat = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
+                    });
             }
         },
     },
diff --git a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
index 95aa9983..b2e5cf00 100644
--- a/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
+++ b/boranga/frontend/boranga/src/components/common/species_communities/species_combine/add_combine_species.vue
@@ -11,7 +11,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="addSpeciesToCombine">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div>
@@ -68,7 +68,6 @@ export default {
         return {
             isModalOpen: false,
             form: null,
-            errors: false,
             errorString: '',
             species_list: [],
             combineSpeciesId: null,
@@ -80,10 +79,6 @@ export default {
         csrf_token: function () {
             return helpers.getCookie('csrftoken');
         },
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             return 'Select Species To Combine';
         },
@@ -109,53 +104,50 @@ export default {
         },
         close: function () {
             this.isModalOpen = false;
-            this.errors = false;
+            this.errorString = '';
         },
         addSpeciesToCombineList: function () {
             let vm = this;
-            try {
-                fetch(
-                    `/api/species/${vm.combineSpeciesId}/internal_species.json`
-                ).then(
-                    async (response) => {
-                        const data = await response.json();
-                        let species_obj = data.species_obj;
-                        // user should not able select the same ID if already exists in the array to combine
-                        let hasSpecies = false;
-                        for (const species of vm.$parent
-                            .original_species_combine_list) {
-                            if (species.id === species_obj.id) {
-                                hasSpecies = true;
-                            }
-                        }
-                        if (hasSpecies == true) {
-                            swal.fire({
-                                title: 'Please fix following errors',
-                                text: 'Species To combine already exists',
-                                icon: 'error',
-                                customClass: {
-                                    confirmButton: 'btn btn-primary',
-                                },
-                            });
-                        } else {
-                            vm.$parent.original_species_combine_list.push(
-                                species_obj
-                            ); //--temp species_obj
-                            $(vm.$refs[vm.scientific_name_lookup])
-                                .val(null)
-                                .trigger('change');
-                        }
-                    },
-                    (err) => {
-                        console.log(err);
+            fetch(
+                `/api/species/${vm.combineSpeciesId}/internal_species.json`
+            ).then(async (response) => {
+                const data = await response.json();
+                if (!response.ok) {
+                    swal.fire({
+                        title: 'Please fix following errors',
+                        text: data,
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                    return;
+                }
+                let species_obj = data.species_obj;
+                // user should not able select the same ID if already exists in the array to combine
+                let hasSpecies = false;
+                for (const species of vm.$parent
+                    .original_species_combine_list) {
+                    if (species.id === species_obj.id) {
+                        hasSpecies = true;
                     }
-                );
-            } catch (err) {
-                console.log(err);
-                if (this.is_internal) {
-                    return err;
                 }
-            }
+                if (hasSpecies == true) {
+                    swal.fire({
+                        title: 'Please fix following errors',
+                        text: 'Species To combine already exists',
+                        icon: 'error',
+                        customClass: {
+                            confirmButton: 'btn btn-primary',
+                        },
+                    });
+                } else {
+                    vm.$parent.original_species_combine_list.push(species_obj); //--temp species_obj
+                    $(vm.$refs[vm.scientific_name_lookup])
+                        .val(null)
+                        .trigger('change');
+                }
+            });
             this.close();
         },
         initialiseScientificNameLookup: function () {
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
index bed197cc..15918779 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
@@ -11,7 +11,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div class="col-sm-12">
@@ -122,16 +122,11 @@ export default {
                 cs_amendment_request_documents: [],
             },
             reason_choices: {},
-            errors: false,
             errorString: '',
             validation_form: null,
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         delete_url: function () {
             return this.amendment.id
                 ? '/api/cs_amendment_request/' +
@@ -168,7 +163,7 @@ export default {
                 reason_id: null,
                 conservation_status: this.conservation_status_id,
             };
-            this.errors = false;
+            this.errorString = '';
             $(this.$refs.reason).val(null).trigger('change');
             $('.has-error').removeClass('has-error');
 
@@ -187,7 +182,7 @@ export default {
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let amendment = JSON.parse(JSON.stringify(vm.amendment));
             let formData = new FormData();
             var files = vm.$refs.filefield.files;
@@ -210,38 +205,39 @@ export default {
                 headers: {
                     'Content-Type': 'multipart/form-data',
                 },
-            }).then(
-                () => {
-                    swal.fire({
-                        title: 'Sent',
-                        text: 'An email has been sent to proponent with the request to amend this Proposal',
-                        icon: 'success',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
-                        },
-                    });
-                    vm.amendingProposal = true;
-                    vm.close();
-                    //vm.$emit('refreshFromResponse',response);
-                    fetch(
-                        `/api/conservation_status/${vm.conservation_status_id}/internal_conservation_status.json`
-                    ).then(
-                        (response) => {
-                            vm.$emit('refreshFromResponse', response);
-                        },
-                        (error) => {
-                            console.log(error);
-                        }
-                    );
-                    vm.$router.push({ path: '/internal/conservation-status' }); //Navigate to dashboard after creating Amendment request
-                },
-                (error) => {
-                    console.log(error);
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.amendingProposal = true;
+            }).then(async (response) => {
+                const data = await response.json();
+                if (!response.ok) {
+                    vm.errorString = data;
+                    return;
                 }
-            );
+                swal.fire({
+                    title: 'Sent',
+                    text: 'An email has been sent to proponent with the request to amend this Proposal',
+                    icon: 'success',
+                    customClass: {
+                        confirmButton: 'btn btn-primary',
+                    },
+                });
+                vm.amendingProposal = true;
+                vm.close();
+                fetch(
+                    `/api/conservation_status/${vm.conservation_status_id}/internal_conservation_status.json`
+                ).then(
+                    async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
+                        vm.$emit('refreshFromResponse', response);
+                    },
+                    (error) => {
+                        console.log(error);
+                    }
+                );
+                vm.$router.push({ path: '/internal/conservation-status' }); //Navigate to dashboard after creating Amendment request
+            });
         },
         addFormValidations: function () {
             let vm = this;
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
index 2d3be91f..1e5b440f 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_propose_delist.vue
@@ -15,7 +15,7 @@
                         name="delistForm"
                         novalidate
                     >
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div class="col-sm-12">
@@ -139,18 +139,10 @@ export default {
                 effective_to: new Date().toISOString().split('T')[0],
             },
             delistingProposal: false,
-            errors: false,
-            validation_form: null,
             errorString: '',
-            successString: '',
-            success: false,
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             return `Propose Delist Conservation Status CS${this.conservation_status_id}`;
         },
@@ -177,7 +169,7 @@ export default {
             this.delist = {
                 effective_to: new Date().toISOString().split('T')[0],
             };
-            this.errors = false;
+            this.errorString = '';
             $('.was-validated').removeClass('was-validated');
         },
         validateForm: function () {
@@ -192,7 +184,7 @@ export default {
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let delist = JSON.parse(JSON.stringify(vm.delist));
             vm.delistingProposal = true;
             if (vm.processing_status == 'Approved') {
@@ -206,21 +198,22 @@ export default {
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify(delist),
                     }
-                ).then(
-                    (response) => {
-                        vm.delistingProposal = false;
+                )
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.close();
                         vm.$emit('refreshFromResponse', response);
                         vm.$router.push({
                             path: '/internal/conservation-status/',
                         }); //Navigate to dashboard after propose delist.
-                    },
-                    (error) => {
-                        vm.errors = true;
+                    })
+                    .finally(() => {
                         vm.delistingProposal = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
+                    });
             } else {
                 vm.close();
             }
diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
index 418aa802..83c43d05 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/proposal_proposed_decline.vue
@@ -10,7 +10,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="declineForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div class="col-sm-12">
@@ -114,18 +114,10 @@ export default {
             form: null,
             decline: {},
             decliningProposal: false,
-            errors: false,
-            validation_form: null,
             errorString: '',
-            successString: '',
-            success: false,
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             return `Decline Conservation Status CS${this.conservation_status_id}`;
         },
@@ -156,12 +148,12 @@ export default {
         close: function () {
             this.isModalOpen = false;
             this.decline = {};
-            this.errors = false;
+            this.errorString = '';
             $('.has-error').removeClass('has-error');
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let decline = JSON.parse(JSON.stringify(vm.decline));
             vm.decliningProposal = true;
             if (
@@ -180,21 +172,22 @@ export default {
                         },
                         body: JSON.stringify(decline),
                     }
-                ).then(
-                    (response) => {
-                        vm.decliningProposal = false;
+                )
+                    .then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
+                        }
                         vm.close();
                         vm.$emit('refreshFromResponse', response);
                         vm.$router.push({
                             path: '/internal/conservation-status/',
                         }); //Navigate to dashboard after propose decline.
-                    },
-                    (error) => {
-                        vm.errors = true;
+                    })
+                    .finally(() => {
                         vm.decliningProposal = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
+                    });
             }
         },
     },
diff --git a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
index de797b4a..8c570153 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/agenda_datatable.vue
@@ -11,9 +11,6 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="agendaForm">
-                        <alert v-if="showError" type="danger"
-                            ><strong>{{ errorString }}</strong></alert
-                        >
                         <div>
                             <div class="col-md-12">
                                 <ul
@@ -278,18 +275,12 @@ export default {
                 api_endpoints.community_agenda_conservation_status_paginated_internal,
             for_agenda: true,
             form: null,
-            errors: false,
-            errorString: '',
         };
     },
     computed: {
         csrf_token: function () {
             return helpers.getCookie('csrftoken');
         },
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             return 'Agenda (Add Conservation Status)';
         },
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
index 19e19575..ca037acb 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/amendment_request.vue
@@ -11,7 +11,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="amendForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div class="col-sm-12">
@@ -87,7 +87,6 @@ import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FileField2 from '@/components/forms/filefield.vue';
 
-import { helpers } from '@/utils/hooks.js';
 export default {
     name: 'AmendmentRequest',
     components: {
@@ -116,16 +115,11 @@ export default {
                 amendment_request_documents: [],
             },
             reason_choices: {},
-            errors: false,
             errorString: '',
             validation_form: null,
         };
     },
     computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         delete_url: function () {
             return this.amendment.id
                 ? '/api/ocr_amendment_request/' +
@@ -170,7 +164,7 @@ export default {
                 reason_id: null,
                 occurrence_report: this.occurrence_report_id,
             };
-            this.errors = false;
+            this.errorString = '';
             $(this.$refs.reason).val(null).trigger('change');
             $('.has-error').removeClass('has-error');
 
@@ -189,7 +183,7 @@ export default {
         },
         sendData: function () {
             let vm = this;
-            vm.errors = false;
+            vm.errorString = '';
             let amendment = JSON.parse(JSON.stringify(vm.amendment));
             let formData = new FormData();
             var files = vm.$refs.filefield.files;
@@ -211,8 +205,13 @@ export default {
                 headers: {
                     'Content-Type': 'multipart/form-data',
                 },
-            }).then(
-                () => {
+            })
+                .then(async (response) => {
+                    const data = await response.json();
+                    if (!response.ok) {
+                        vm.errorString = data;
+                        return;
+                    }
                     swal.fire({
                         title: 'Sent',
                         text: 'An email has been sent to proponent with the request to amend this Proposal',
@@ -226,23 +225,19 @@ export default {
 
                     fetch(
                         `/api/occurrence_report/${vm.occurrence_report_id}`
-                    ).then(
-                        (response) => {
-                            vm.$emit('refreshFromResponse', response);
-                        },
-                        (error) => {
-                            console.log(error);
+                    ).then(async (response) => {
+                        const data = await response.json();
+                        if (!response.ok) {
+                            vm.errorString = data;
+                            return;
                         }
-                    );
-                    vm.$router.push({ path: '/internal/occurrence' }); //Navigate to dashboard after creating Amendment request
-                },
-                (error) => {
-                    console.log(error);
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.amendingProposal = true;
-                }
-            );
+                        vm.$emit('refreshFromResponse', data);
+                        vm.$router.push({ path: '/internal/occurrence' }); //Navigate to dashboard after creating Amendment request
+                    });
+                })
+                .finally(() => {
+                    vm.amendingProposal = false;
+                });
         },
         addFormValidations: function () {
             let vm = this;
diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
index f9665676..88a3a0ba 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_tenure_modal.vue
@@ -10,7 +10,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="modalForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <alert
@@ -346,10 +346,6 @@ export default {
         };
     },
     computed: {
-        showError: function () {
-            const vm = this;
-            return vm.errors;
-        },
         modalTitle: function () {
             var action = this.modal_action;
             if (typeof action === 'string' && action.length > 0) {
@@ -436,26 +432,17 @@ export default {
                 };
                 fetch(url, payload)
                     .then(async (response) => {
+                        const data = await response.json();
                         if (!response.ok) {
-                            return await response.json().then((json) => {
-                                throw new Error(json);
-                            });
+                            vm.errorString = data;
+                            return;
                         }
-                        return response.json();
-                    })
-                    .then((data) => {
                         vm.$emit('refreshFromResponse', data);
                         vm.close();
                     })
-                    .catch((error) => {
-                        vm.errors = true;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    })
                     .finally(() => {
                         vm.updatingEntry = false;
                     });
-            } else {
-                //
             }
         },
         isAlwaysReadOnly(fieldName) {
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
index 4a71ce31..b9c7b42e 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/make_public.vue
@@ -11,9 +11,6 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="makePublicForm">
-                        <alert v-if="showError" type="danger"
-                            ><strong>{{ errorString }}</strong></alert
-                        >
                         <div class="row mb-3">
                             <label
                                 for="distribution_publishing"
@@ -165,7 +162,7 @@
                         style="margin-top: 5px"
                         disabled
                     >
-                        Submit
+                        Make Public
                         <span
                             class="spinner-border spinner-border-sm"
                             role="status"
@@ -216,18 +213,12 @@ export default {
             updatingPublishing: false,
             isModalOpen: false,
             form: null,
-            errors: false,
-            errorString: '',
         };
     },
     computed: {
         csrf_token: function () {
             return helpers.getCookie('csrftoken');
         },
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             return 'Make Public';
         },
@@ -288,11 +279,23 @@ export default {
                     },
                     body: data,
                 }
-            ).then(
-                async (response) => {
-                    vm.updatingPublishing = false;
-                    vm.species_community.publishing_status =
-                        await response.json();
+            )
+                .then(async (response) => {
+                    const data = await response.json();
+                    if (!response.ok) {
+                        swal.fire({
+                            title: 'Error',
+                            text:
+                                'Publishing settings cannot be updated because of the following error: ' +
+                                data,
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        return;
+                    }
+                    vm.species_community.publishing_status = data;
                     vm.species_community_original.publishing_status =
                         helpers.copyObject(
                             vm.species_community.publishing_status
@@ -304,28 +307,12 @@ export default {
                         customClass: {
                             confirmButton: 'btn btn-primary',
                         },
-                    }).then(() => {
-                        vm.close();
-                    });
-                },
-                (error) => {
-                    var text = helpers.apiVueResourceError(error);
-                    swal.fire({
-                        title: 'Error',
-                        text:
-                            'Publishing settings cannot be updated because of the following error: ' +
-                            text,
-                        icon: 'error',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
-                        },
                     });
-                    vm.species_community.publishing_status = helpers.copyObject(
-                        vm.species_community_original.publishing_status
-                    );
+                    vm.close();
+                })
+                .finally(() => {
                     vm.updatingPublishing = false;
-                }
-            );
+                });
         },
         ok: function () {
             let vm = this;
@@ -344,30 +331,22 @@ export default {
                         cancelButton: 'btn btn-secondary',
                     },
                     reverseButtons: true,
-                }).then(
-                    (swalresult) => {
-                        if (swalresult.isConfirmed) {
-                            //send with make public set to true
-                            if (
-                                this.species_community.group_type ===
-                                'community'
-                            ) {
-                                vm.species_community.publishing_status.community_public = true;
-                            } else {
-                                vm.species_community.publishing_status.species_public = true;
-                            }
-                            let data = JSON.stringify(
-                                vm.species_community.publishing_status
-                            );
-                            vm.updatePublishing(data);
+                }).then((swalresult) => {
+                    if (swalresult.isConfirmed) {
+                        //send with make public set to true
+                        if (this.species_community.group_type === 'community') {
+                            vm.species_community.publishing_status.community_public = true;
                         } else {
-                            vm.updatingPublishing = false;
+                            vm.species_community.publishing_status.species_public = true;
                         }
-                    },
-                    (error) => {
-                        console.error('Error:', error);
+                        let data = JSON.stringify(
+                            vm.species_community.publishing_status
+                        );
+                        vm.updatePublishing(data);
+                    } else {
+                        vm.updatingPublishing = false;
                     }
-                );
+                });
             } else {
                 swal.fire({
                     title: 'Error',
@@ -385,7 +364,6 @@ export default {
         },
         close: function () {
             this.isModalOpen = false;
-            this.errors = false;
         },
     },
 };

From 8ff7b984918ac173b2a90f5b6684f6304d4e1a1b Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 15:31:20 +0800
Subject: [PATCH 111/138] Remove unused files.

---
 .../species_communities/amendment_request.vue | 305 ------------------
 .../proposal_proposed_decline.vue             | 283 ----------------
 2 files changed, 588 deletions(-)
 delete mode 100755 boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
 delete mode 100755 boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue

diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
deleted file mode 100755
index b2ce44b1..00000000
--- a/boranga/frontend/boranga/src/components/internal/species_communities/amendment_request.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-<template lang="html">
-    <div id="internal-proposal-amend">
-        <modal
-            transition="modal fade"
-            title="Amendment Request"
-            large
-            @ok="ok()"
-            @cancel="cancel()"
-        >
-            <div class="container-fluid">
-                <div class="row">
-                    <form class="form-horizontal" name="amendForm">
-                        <alert v-if="showError" type="danger"
-                            ><strong>{{ errorString }}</strong></alert
-                        >
-                        <div class="col-sm-12">
-                            <div class="row">
-                                <div class="col-sm-offset-2 col-sm-8">
-                                    <div class="form-group">
-                                        <label
-                                            class="control-label pull-left"
-                                            for="Name"
-                                            >Reason</label
-                                        >
-                                        <select
-                                            ref="reason"
-                                            v-model="amendment.reason"
-                                            class="form-control"
-                                            name="reason"
-                                        >
-                                            <option
-                                                v-for="r in reason_choices"
-                                                :value="r.key"
-                                            >
-                                                {{ r.value }}
-                                            </option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-sm-offset-2 col-sm-8">
-                                    <div class="form-group">
-                                        <label
-                                            class="control-label pull-left"
-                                            for="Name"
-                                            >Details</label
-                                        >
-                                        <textarea
-                                            id="amendment_text"
-                                            v-model="amendment.text"
-                                            class="form-control"
-                                            name="name"
-                                        ></textarea>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </modal>
-    </div>
-</template>
-
-<script>
-import modal from '@vue-utils/bootstrap-modal.vue';
-import alert from '@vue-utils/alert.vue';
-
-import { helpers } from '@/utils/hooks.js';
-export default {
-    name: 'AmendmentRequest',
-    components: {
-        modal,
-        alert,
-    },
-    props: {
-        proposal_id: {
-            type: Number,
-        },
-    },
-    data: function () {
-        let vm = this;
-        return {
-            isModalOpen: false,
-            form: null,
-            amendment: {
-                reason: '',
-                reason_id: null,
-                amendingProposal: false,
-                proposal: vm.proposal_id,
-            },
-            reason_choices: {},
-            errors: false,
-            errorString: '',
-            validation_form: null,
-        };
-    },
-    computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.amendForm;
-        vm.fetchAmendmentChoices();
-        vm.addFormValidations();
-        this.$nextTick(() => {
-            vm.eventListerners();
-        });
-        //console.log(validate);
-    },
-    methods: {
-        ok: function () {
-            let vm = this;
-            if ($(vm.form).valid()) {
-                vm.sendData();
-            }
-        },
-        cancel: function () {
-            let vm = this;
-            vm.close();
-        },
-        close: function () {
-            this.isModalOpen = false;
-            this.amendment = {
-                reason: '',
-                reason_id: null,
-                proposal: this.proposal_id,
-            };
-            this.errors = false;
-            $(this.$refs.reason).val(null).trigger('change');
-            $('.has-error').removeClass('has-error');
-
-            this.validation_form.resetForm();
-        },
-        fetchAmendmentChoices: function () {
-            let vm = this;
-            fetch('/api/amendment_request_reason_choices.json').then(
-                async (response) => {
-                    vm.reason_choices = await response.json();
-                },
-                (error) => {
-                    console.log(error);
-                }
-            );
-        },
-        sendData: function () {
-            let vm = this;
-            vm.errors = false;
-            // if(vm.amendment.text){
-            //     vm.amendment.text= vm.formatText(vm.amendment.text)
-            // }
-            // console.log(vm.amendment.text);
-            let amendment = JSON.parse(JSON.stringify(vm.amendment));
-            fetch('/api/amendment_request.json', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(amendment),
-            }).then(
-                () => {
-                    swal(
-                        'Sent',
-                        'An email has been sent to proponent with the request to amend this Proposal',
-                        'success'
-                    );
-                    vm.amendingProposal = true;
-                    vm.close();
-                    fetch(
-                        `/api/proposal/${vm.proposal_id}/internal_proposal.json`
-                    ).then(
-                        (response) => {
-                            vm.$emit(
-                                'refreshFromResponse',
-                                response,
-                                vm.documents
-                            );
-                        },
-                        (error) => {
-                            console.log(error);
-                        }
-                    );
-                    vm.$router.push({ path: '/internal' }); //Navigate to dashboard after creating Amendment request
-                },
-                (error) => {
-                    console.log(error);
-                    vm.errors = true;
-                    vm.errorString = helpers.apiVueResourceError(error);
-                    vm.amendingProposal = true;
-                }
-            );
-        },
-        formatText: function (text) {
-            let s = text.replace(/\n/g, '<br/>');
-            s = s.replace(/[\u2018|\u2019|\u201A]/g, "'");
-            // smart double quotes
-            s = s.replace(/[\u201C|\u201D|\u201E]/g, '"');
-            // ellipsis
-            s = s.replace(/\u2026/g, '...');
-            // dashes
-            s = s.replace(/[\u2013|\u2014]/g, '-');
-            // circumflex
-            s = s.replace(/\u02C6/g, '^');
-            // open angle bracket
-            s = s.replace(/\u2039/g, '<');
-            // close angle bracket
-            s = s.replace(/\u203A/g, '>');
-            // spaces
-            s = s.replace(/[\u02DC|\u00A0]/g, ' ');
-            return s;
-        },
-        addFormValidations: function () {
-            let vm = this;
-            vm.validation_form = $(vm.form).validate({
-                rules: {
-                    reason: 'required',
-                },
-                messages: {
-                    reason: 'field is required',
-                },
-                showErrors: function (errorMap, errorList) {
-                    $.each(this.validElements(), function (index, element) {
-                        var $element = $(element);
-                        $element
-                            .attr('data-original-title', '')
-                            .parents('.form-group')
-                            .removeClass('has-error');
-                    });
-                    // destroy tooltips on valid elements
-                    $('.' + this.settings.validClass).tooltip('destroy');
-                    // add or update tooltips
-                    for (var i = 0; i < errorList.length; i++) {
-                        var error = errorList[i];
-                        $(error.element)
-                            .tooltip({
-                                trigger: 'focus',
-                            })
-                            .attr('data-original-title', error.message)
-                            .parents('.form-group')
-                            .addClass('has-error');
-                    }
-                },
-            });
-        },
-        eventListerners: function () {
-            let vm = this;
-
-            // Intialise select2
-            $(vm.$refs.reason)
-                .select2({
-                    theme: 'bootstrap',
-                    allowClear: true,
-                    placeholder: 'Select Reason',
-                })
-                .on('select2:select', function (e) {
-                    var selected = $(e.currentTarget);
-                    vm.amendment.reason = selected.val();
-                    vm.amendment.reason_id = selected.val();
-                })
-                .on('select2:unselect', function (e) {
-                    var selected = $(e.currentTarget);
-                    vm.amendment.reason = selected.val();
-                    vm.amendment.reason_id = selected.val();
-                });
-
-            // let amendmentTextField = $('#amendment_text');
-            // amendmentTextField.on(
-            //   'paste',
-            //   (e) => {
-            //       //console.log("plain text only");
-            //       // cancel paste
-            //       e.preventDefault();
-            //       // get text representation of clipboard
-            //       let text = (e.originalEvent || e).clipboardData.getData('text/plain');
-            //       //let transformedText = text.replace(/\n/g,'<br/>')
-            //       let s = text.replace(/\n/g,'<br/>')
-            //         s = s.replace(/[\u2018|\u2019|\u201A]/g, "\'");
-            //         // smart double quotes
-            //         s = s.replace(/[\u201C|\u201D|\u201E]/g, "\"");
-            //         // ellipsis
-            //         s = s.replace(/\u2026/g, "...");
-            //         // dashes
-            //         s = s.replace(/[\u2013|\u2014]/g, "-");
-            //         // circumflex
-            //         s = s.replace(/\u02C6/g, "^");
-            //         // open angle bracket
-            //         s = s.replace(/\u2039/g, "<");
-            //         // close angle bracket
-            //         s = s.replace(/\u203A/g, ">");
-            //         // spaces
-            //         s = s.replace(/[\u02DC|\u00A0]/g, " ");
-            //       //console.log(s)
-            //       // insert text manually
-            //       document.execCommand("insertHTML", false, s);
-            //   });
-        },
-    },
-};
-</script>
-
-<style lang="css"></style>
diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue b/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
deleted file mode 100755
index cb4450ea..00000000
--- a/boranga/frontend/boranga/src/components/internal/species_communities/proposal_proposed_decline.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<template lang="html">
-    <div id="proposal-proposed-decline">
-        <modal
-            transition="modal fade"
-            :title="title"
-            large
-            @ok="ok()"
-            @cancel="cancel()"
-        >
-            <div class="container-fluid">
-                <div class="row">
-                    <form class="form-horizontal" name="declineForm">
-                        <alert v-if="showError" type="danger"
-                            ><strong>{{ errorString }}</strong></alert
-                        >
-                        <div class="col-sm-12">
-                            <div class="form-group">
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <label
-                                            v-if="check_status()"
-                                            class="control-label"
-                                            for="Name"
-                                            >Details</label
-                                        >
-                                        <label
-                                            v-else
-                                            class="control-label"
-                                            for="Name"
-                                            >Provide Reason for the proposed
-                                            decline
-                                        </label>
-                                        <textarea
-                                            v-model="decline.reason"
-                                            style="width: 70%"
-                                            class="form-control"
-                                            name="reason"
-                                        ></textarea>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <label
-                                            v-if="check_status()"
-                                            class="control-label"
-                                            for="Name"
-                                            >CC email</label
-                                        >
-                                        <label
-                                            v-else
-                                            class="control-label"
-                                            for="Name"
-                                            >Proposed CC email</label
-                                        >
-                                        <input
-                                            v-model="decline.cc_email"
-                                            type="text"
-                                            style="width: 70%"
-                                            class="form-control"
-                                            name="cc_email"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <template #footer>
-                <div>
-                    <button
-                        type="button"
-                        class="btn btn-secondary me-2"
-                        @click="cancel"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        v-if="decliningProposal"
-                        type="button"
-                        disabled
-                        class="btn btn-primary"
-                        @click="ok"
-                    >
-                        Processing
-                        <span
-                            class="spinner-border spinner-border-sm"
-                            role="status"
-                            aria-hidden="true"
-                        ></span>
-                        <span class="visually-hidden">Loading...</span>
-                    </button>
-                    <button
-                        v-else
-                        type="button"
-                        class="btn btn-primary"
-                        @click="ok"
-                    >
-                        Ok
-                    </button>
-                </div>
-            </template>
-        </modal>
-    </div>
-</template>
-
-<script>
-import modal from '@vue-utils/bootstrap-modal.vue';
-import alert from '@vue-utils/alert.vue';
-import { helpers, api_endpoints } from '@/utils/hooks.js';
-export default {
-    name: 'DeclineProposal',
-    components: {
-        modal,
-        alert,
-    },
-    props: {
-        proposal_id: {
-            type: Number,
-            required: true,
-        },
-        processing_status: {
-            type: String,
-            required: true,
-        },
-    },
-    data: function () {
-        return {
-            isModalOpen: false,
-            form: null,
-            decline: {},
-            decliningProposal: false,
-            errors: false,
-            validation_form: null,
-            errorString: '',
-            successString: '',
-            success: false,
-        };
-    },
-    computed: {
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
-        title: function () {
-            return this.processing_status == 'With Approver'
-                ? 'Decline'
-                : 'Proposed Decline';
-        },
-    },
-    mounted: function () {
-        let vm = this;
-        vm.form = document.forms.declineForm;
-        vm.addFormValidations();
-    },
-    methods: {
-        ok: function () {
-            let vm = this;
-            if ($(vm.form).valid()) {
-                vm.sendData();
-            }
-        },
-        cancel: function () {
-            this.close();
-        },
-        close: function () {
-            this.isModalOpen = false;
-            this.decline = {};
-            this.errors = false;
-            $('.has-error').removeClass('has-error');
-            this.validation_form.resetForm();
-        },
-        check_status: function () {
-            let vm = this;
-            if (vm.processing_status == 'With Approver') return true;
-            else return false;
-        },
-        sendData: function () {
-            let vm = this;
-            vm.errors = false;
-            let decline = JSON.parse(JSON.stringify(vm.decline));
-            vm.decliningProposal = true;
-            if (vm.processing_status != 'With Approver') {
-                fetch(
-                    helpers.add_endpoint_json(
-                        api_endpoints.proposals,
-                        vm.proposal_id + '/proposed_decline'
-                    ),
-                    {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(decline),
-                    }
-                ).then(
-                    (response) => {
-                        vm.decliningProposal = false;
-                        vm.close();
-                        vm.$emit('refreshFromResponse', response);
-                        vm.$router.push({ path: '/internal' }); //Navigate to dashboard after propose decline.
-                    },
-                    (error) => {
-                        vm.errors = true;
-                        vm.decliningProposal = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
-            } else {
-                fetch(
-                    helpers.add_endpoint_json(
-                        api_endpoints.proposals,
-                        vm.proposal_id + '/final_decline'
-                    ),
-                    {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify(decline),
-                    }
-                ).then(
-                    (response) => {
-                        vm.decliningProposal = false;
-                        vm.close();
-                        vm.$emit('refreshFromResponse', response);
-                    },
-                    (error) => {
-                        vm.errors = true;
-                        vm.decliningProposal = false;
-                        vm.errorString = helpers.apiVueResourceError(error);
-                    }
-                );
-            }
-        },
-        addFormValidations: function () {
-            let vm = this;
-            vm.validation_form = $(vm.form).validate({
-                rules: {
-                    reason: 'required',
-                },
-                messages: {
-                    arrival: 'field is required',
-                    departure: 'field is required',
-                    campground: 'field is required',
-                    campsite: 'field is required',
-                },
-                showErrors: function (errorMap, errorList) {
-                    $.each(this.validElements(), function (index, element) {
-                        var $element = $(element);
-                        $element
-                            .attr('data-original-title', '')
-                            .parents('.form-group')
-                            .removeClass('has-error');
-                    });
-                    // destroy tooltips on valid elements
-                    $('.' + this.settings.validClass).tooltip('destroy');
-                    // add or update tooltips
-                    for (var i = 0; i < errorList.length; i++) {
-                        var error = errorList[i];
-                        $(error.element)
-                            .tooltip({
-                                trigger: 'focus',
-                            })
-                            .attr('data-original-title', error.message)
-                            .parents('.form-group')
-                            .addClass('has-error');
-                    }
-                },
-            });
-        },
-    },
-};
-</script>
-
-<style lang="css">
-input[type='text'],
-select {
-    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-}
-</style>

From 5e056afb15d05355aae3a08be94fdac44374e6a2 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Wed, 18 Dec 2024 15:31:34 +0800
Subject: [PATCH 112/138] Update error handling code.

---
 .../species_communities/species_rename.vue    | 55 ++++++++-----------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
index 3965f9be..5ef4047f 100644
--- a/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
+++ b/boranga/frontend/boranga/src/components/internal/species_communities/species_rename.vue
@@ -11,7 +11,7 @@
             <div class="container-fluid">
                 <div class="row">
                     <form class="form-horizontal" name="renameSpeciesForm">
-                        <alert v-if="showError" type="danger"
+                        <alert v-if="errorString" type="danger"
                             ><strong>{{ errorString }}</strong></alert
                         >
                         <div>
@@ -106,7 +106,6 @@ export default {
             submitSpeciesRename: false,
             isModalOpen: false,
             form: null,
-            errors: false,
             errorString: '',
         };
     },
@@ -114,10 +113,6 @@ export default {
         csrf_token: function () {
             return helpers.getCookie('csrftoken');
         },
-        showError: function () {
-            var vm = this;
-            return vm.errors;
-        },
         title: function () {
             return this.new_rename_species != null
                 ? 'Rename Species ' +
@@ -145,7 +140,7 @@ export default {
             let vm = this;
             vm.removeSpecies(vm.new_rename_species.id);
             this.isModalOpen = false;
-            this.errors = false;
+            this.errorString = '';
         },
         removeSpecies: function (species_id) {
             try {
@@ -177,25 +172,25 @@ export default {
                     },
                     body: JSON.stringify(payload),
                 }
-            ).then(
-                async () => {
+            )
+                .then(async (response) => {
+                    const data = await response.json();
+                    if (!response.ok) {
+                        swal.fire({
+                            title: 'Submit Error',
+                            text: data,
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        return;
+                    }
                     return true;
-                },
-                (err) => {
-                    var errorText = helpers.apiVueResourceError(err);
-                    swal.fire({
-                        title: 'Submit Error',
-                        text: errorText,
-                        icon: 'error',
-                        customClass: {
-                            confirmButton: 'btn btn-primary',
-                        },
-                    });
+                })
+                .finally(() => {
                     vm.submitSpeciesRename = false;
-                    vm.saveError = true;
-                    return false;
-                }
-            );
+                });
             return result;
         },
         sendData: async function () {
@@ -238,8 +233,8 @@ export default {
                         cancelButton: 'btn btn-secondary',
                     },
                     reverseButtons: true,
-                }).then(
-                    async (swalresult) => {
+                })
+                    .then(async (swalresult) => {
                         if (swalresult.isConfirmed) {
                             //---save and submit the new rename species
                             let new_species = vm.new_rename_species;
@@ -286,12 +281,10 @@ export default {
                                 );
                             }
                         }
+                    })
+                    .finally(() => {
                         vm.submitSpeciesRename = false;
-                    },
-                    () => {
-                        vm.submitSpeciesRename = false;
-                    }
-                );
+                    });
             }
         },
     },

From 90794a9b043fa05f5e97af58f81969711dcb5a78 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 19 Dec 2024 09:45:02 +0800
Subject: [PATCH 113/138] Get vue-select working in vue3.

---
 boranga/frontend/boranga/package-lock.json    | 471 +++++++++++-------
 boranga/frontend/boranga/package.json         |   5 +-
 .../src/components/common/SelectFilter.vue    |  11 +-
 .../src/components/common/component_map.vue   |   2 +-
 boranga/frontend/boranga/src/main.js          |   3 +-
 5 files changed, 312 insertions(+), 180 deletions(-)

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index 50323591..9c67ac39 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -38,11 +38,14 @@
                 "vite-plugin-externals": "^0.6.2",
                 "vite-plugin-static-copy": "^2.2.0",
                 "vue": "^3.4",
-                "vue-router": "^4.0"
+                "vue-router": "^4.0",
+                "vue-select": "^4.0.0-beta.6"
             },
             "devDependencies": {
                 "@rollup/plugin-commonjs": "^28.0.1",
                 "@rollup/plugin-inject": "^5.0.5",
+                "@types/jquery": "^3.5.32",
+                "@types/select2": "^4.0.63",
                 "eslint": "^9.16.0",
                 "eslint-config-prettier": "^9.0.0",
                 "eslint-plugin-prettier": "^5.0.1",
@@ -547,9 +550,9 @@
             }
         },
         "node_modules/@eslint/js": {
-            "version": "9.16.0",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.16.0.tgz",
-            "integrity": "sha512-tw2HxzQkrbeuvyj1tG2Yqq+0H9wGoI2IMk4EOsQeX+vmd75FtJAzf+gTA69WF+baUKRYQ3x2kbLE08js5OsTVg==",
+            "version": "9.17.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.17.0.tgz",
+            "integrity": "sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==",
             "dev": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -646,9 +649,9 @@
             }
         },
         "node_modules/@jridgewell/gen-mapping": {
-            "version": "0.3.5",
-            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-            "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+            "version": "0.3.8",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+            "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
             "peer": true,
             "dependencies": {
                 "@jridgewell/set-array": "^1.2.1",
@@ -762,9 +765,9 @@
             }
         },
         "node_modules/@rollup/plugin-commonjs": {
-            "version": "28.0.1",
-            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.1.tgz",
-            "integrity": "sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==",
+            "version": "28.0.2",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.2.tgz",
+            "integrity": "sha512-BEFI2EDqzl+vA1rl97IDRZ61AIwGH093d9nz8+dThxJNH8oSoB7MjWvPCX3dkaK1/RCJ/1v/R1XB15FuSs0fQw==",
             "dev": true,
             "dependencies": {
                 "@rollup/pluginutils": "^5.0.1",
@@ -810,9 +813,9 @@
             }
         },
         "node_modules/@rollup/pluginutils": {
-            "version": "5.1.3",
-            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
-            "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
+            "version": "5.1.4",
+            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
+            "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
             "dev": true,
             "dependencies": {
                 "@types/estree": "^1.0.0",
@@ -832,9 +835,9 @@
             }
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.0.tgz",
-            "integrity": "sha512-wLJuPLT6grGZsy34g4N1yRfYeouklTgPhH1gWXCYspenKYD0s3cR99ZevOGw5BexMNywkbV3UkjADisozBmpPQ==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.1.tgz",
+            "integrity": "sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==",
             "cpu": [
                 "arm"
             ],
@@ -844,9 +847,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.0.tgz",
-            "integrity": "sha512-eiNkznlo0dLmVG/6wf+Ifi/v78G4d4QxRhuUl+s8EWZpDewgk7PX3ZyECUXU0Zq/Ca+8nU8cQpNC4Xgn2gFNDA==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.1.tgz",
+            "integrity": "sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==",
             "cpu": [
                 "arm64"
             ],
@@ -856,9 +859,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.0.tgz",
-            "integrity": "sha512-lmKx9yHsppblnLQZOGxdO66gT77bvdBtr/0P+TPOseowE7D9AJoBw8ZDULRasXRWf1Z86/gcOdpBrV6VDUY36Q==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.1.tgz",
+            "integrity": "sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==",
             "cpu": [
                 "arm64"
             ],
@@ -868,9 +871,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.0.tgz",
-            "integrity": "sha512-8hxgfReVs7k9Js1uAIhS6zq3I+wKQETInnWQtgzt8JfGx51R1N6DRVy3F4o0lQwumbErRz52YqwjfvuwRxGv1w==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.1.tgz",
+            "integrity": "sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==",
             "cpu": [
                 "x64"
             ],
@@ -880,9 +883,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-arm64": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.0.tgz",
-            "integrity": "sha512-lA1zZB3bFx5oxu9fYud4+g1mt+lYXCoch0M0V/xhqLoGatbzVse0wlSQ1UYOWKpuSu3gyN4qEc0Dxf/DII1bhQ==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.1.tgz",
+            "integrity": "sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==",
             "cpu": [
                 "arm64"
             ],
@@ -892,9 +895,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-x64": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.0.tgz",
-            "integrity": "sha512-aI2plavbUDjCQB/sRbeUZWX9qp12GfYkYSJOrdYTL/C5D53bsE2/nBPuoiJKoWp5SN78v2Vr8ZPnB+/VbQ2pFA==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.1.tgz",
+            "integrity": "sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==",
             "cpu": [
                 "x64"
             ],
@@ -904,9 +907,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.0.tgz",
-            "integrity": "sha512-WXveUPKtfqtaNvpf0iOb0M6xC64GzUX/OowbqfiCSXTdi/jLlOmH0Ba94/OkiY2yTGTwteo4/dsHRfh5bDCZ+w==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.1.tgz",
+            "integrity": "sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==",
             "cpu": [
                 "arm"
             ],
@@ -916,9 +919,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.0.tgz",
-            "integrity": "sha512-yLc3O2NtOQR67lI79zsSc7lk31xjwcaocvdD1twL64PK1yNaIqCeWI9L5B4MFPAVGEVjH5k1oWSGuYX1Wutxpg==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.1.tgz",
+            "integrity": "sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==",
             "cpu": [
                 "arm"
             ],
@@ -928,9 +931,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.0.tgz",
-            "integrity": "sha512-+P9G9hjEpHucHRXqesY+3X9hD2wh0iNnJXX/QhS/J5vTdG6VhNYMxJ2rJkQOxRUd17u5mbMLHM7yWGZdAASfcg==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.1.tgz",
+            "integrity": "sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==",
             "cpu": [
                 "arm64"
             ],
@@ -940,9 +943,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.0.tgz",
-            "integrity": "sha512-1xsm2rCKSTpKzi5/ypT5wfc+4bOGa/9yI/eaOLW0oMs7qpC542APWhl4A37AENGZ6St6GBMWhCCMM6tXgTIplw==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.1.tgz",
+            "integrity": "sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==",
             "cpu": [
                 "arm64"
             ],
@@ -951,10 +954,22 @@
                 "linux"
             ]
         },
+        "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.28.1.tgz",
+            "integrity": "sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==",
+            "cpu": [
+                "loong64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
         "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.0.tgz",
-            "integrity": "sha512-zgWxMq8neVQeXL+ouSf6S7DoNeo6EPgi1eeqHXVKQxqPy1B2NvTbaOUWPn/7CfMKL7xvhV0/+fq/Z/J69g1WAQ==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.1.tgz",
+            "integrity": "sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==",
             "cpu": [
                 "ppc64"
             ],
@@ -964,9 +979,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.0.tgz",
-            "integrity": "sha512-VEdVYacLniRxbRJLNtzwGt5vwS0ycYshofI7cWAfj7Vg5asqj+pt+Q6x4n+AONSZW/kVm+5nklde0qs2EUwU2g==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.1.tgz",
+            "integrity": "sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==",
             "cpu": [
                 "riscv64"
             ],
@@ -976,9 +991,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.0.tgz",
-            "integrity": "sha512-LQlP5t2hcDJh8HV8RELD9/xlYtEzJkm/aWGsauvdO2ulfl3QYRjqrKW+mGAIWP5kdNCBheqqqYIGElSRCaXfpw==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.1.tgz",
+            "integrity": "sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==",
             "cpu": [
                 "s390x"
             ],
@@ -988,9 +1003,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.0.tgz",
-            "integrity": "sha512-Nl4KIzteVEKE9BdAvYoTkW19pa7LR/RBrT6F1dJCV/3pbjwDcaOq+edkP0LXuJ9kflW/xOK414X78r+K84+msw==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz",
+            "integrity": "sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==",
             "cpu": [
                 "x64"
             ],
@@ -1000,9 +1015,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.0.tgz",
-            "integrity": "sha512-eKpJr4vBDOi4goT75MvW+0dXcNUqisK4jvibY9vDdlgLx+yekxSm55StsHbxUsRxSTt3JEQvlr3cGDkzcSP8bw==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.1.tgz",
+            "integrity": "sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==",
             "cpu": [
                 "x64"
             ],
@@ -1012,9 +1027,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.0.tgz",
-            "integrity": "sha512-Vi+WR62xWGsE/Oj+mD0FNAPY2MEox3cfyG0zLpotZdehPFXwz6lypkGs5y38Jd/NVSbOD02aVad6q6QYF7i8Bg==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.1.tgz",
+            "integrity": "sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==",
             "cpu": [
                 "arm64"
             ],
@@ -1024,9 +1039,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.0.tgz",
-            "integrity": "sha512-kN/Vpip8emMLn/eOza+4JwqDZBL6MPNpkdaEsgUtW1NYN3DZvZqSQrbKzJcTL6hd8YNmFTn7XGWMwccOcJBL0A==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.1.tgz",
+            "integrity": "sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==",
             "cpu": [
                 "ia32"
             ],
@@ -1036,9 +1051,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.0.tgz",
-            "integrity": "sha512-Bvno2/aZT6usSa7lRDL2+hMjVAGjuqaymF1ApZm31JXzniR/hvr14jpU+/z4X6Gt5BPlzosscyJZGUvguXIqeQ==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.1.tgz",
+            "integrity": "sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==",
             "cpu": [
                 "x64"
             ],
@@ -1243,10 +1258,9 @@
             }
         },
         "node_modules/@types/eslint": {
-            "version": "9.6.1",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
-            "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
-            "peer": true,
+            "version": "8.56.12",
+            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
+            "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
             "dependencies": {
                 "@types/estree": "*",
                 "@types/json-schema": "*"
@@ -1268,9 +1282,18 @@
             "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
         },
         "node_modules/@types/geojson": {
-            "version": "7946.0.14",
-            "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-            "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+            "version": "7946.0.15",
+            "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
+            "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA=="
+        },
+        "node_modules/@types/jquery": {
+            "version": "3.5.32",
+            "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
+            "integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==",
+            "dev": true,
+            "dependencies": {
+                "@types/sizzle": "*"
+            }
         },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
@@ -1278,14 +1301,29 @@
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
         },
         "node_modules/@types/node": {
-            "version": "22.10.1",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
-            "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
+            "version": "22.10.2",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
+            "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
             "peer": true,
             "dependencies": {
                 "undici-types": "~6.20.0"
             }
         },
+        "node_modules/@types/select2": {
+            "version": "4.0.63",
+            "resolved": "https://registry.npmjs.org/@types/select2/-/select2-4.0.63.tgz",
+            "integrity": "sha512-/DXUfPSj3iVTGlRYRYPCFKKSogAGP/j+Z0fIMXbBiBtmmZj0WH7vnfNuckafq9C43KnqPPQW2TI/Rj/vTSGnQQ==",
+            "dev": true,
+            "dependencies": {
+                "@types/jquery": "*"
+            }
+        },
+        "node_modules/@types/sizzle": {
+            "version": "2.3.9",
+            "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
+            "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
+            "dev": true
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -1587,6 +1625,45 @@
                 "url": "https://github.com/sponsors/epoberezkin"
             }
         },
+        "node_modules/ajv-formats": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+            "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+            "peer": true,
+            "dependencies": {
+                "ajv": "^8.0.0"
+            },
+            "peerDependencies": {
+                "ajv": "^8.0.0"
+            },
+            "peerDependenciesMeta": {
+                "ajv": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/ajv-formats/node_modules/ajv": {
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+            "peer": true,
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^3.0.1",
+                "json-schema-traverse": "^1.0.0",
+                "require-from-string": "^2.0.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+            "peer": true
+        },
         "node_modules/ajv-keywords": {
             "version": "3.5.2",
             "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
@@ -1703,9 +1780,9 @@
             }
         },
         "node_modules/browserslist": {
-            "version": "4.24.2",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
-            "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
+            "version": "4.24.3",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz",
+            "integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1722,9 +1799,9 @@
             ],
             "peer": true,
             "dependencies": {
-                "caniuse-lite": "^1.0.30001669",
-                "electron-to-chromium": "^1.5.41",
-                "node-releases": "^2.0.18",
+                "caniuse-lite": "^1.0.30001688",
+                "electron-to-chromium": "^1.5.73",
+                "node-releases": "^2.0.19",
                 "update-browserslist-db": "^1.1.1"
             },
             "bin": {
@@ -1755,9 +1832,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001686",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
-            "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
+            "version": "1.0.30001688",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001688.tgz",
+            "integrity": "sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1774,6 +1851,22 @@
             ],
             "peer": true
         },
+        "node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
         "node_modules/chokidar": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2064,9 +2157,9 @@
             }
         },
         "node_modules/debug": {
-            "version": "4.3.7",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-            "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+            "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
             "dev": true,
             "dependencies": {
                 "ms": "^2.1.3"
@@ -2147,9 +2240,9 @@
             "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.71",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
-            "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
+            "version": "1.5.73",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.73.tgz",
+            "integrity": "sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==",
             "peer": true
         },
         "node_modules/enhanced-resolve": {
@@ -2278,9 +2371,9 @@
             }
         },
         "node_modules/eslint": {
-            "version": "9.16.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.16.0.tgz",
-            "integrity": "sha512-whp8mSQI4C8VXd+fLgSM0lh3UlmcFtVwUQjyKCFfsp+2ItAIYhlq/hqGahGqHE6cv9unM41VlqKk2VtKYR2TaA==",
+            "version": "9.17.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.17.0.tgz",
+            "integrity": "sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==",
             "dev": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
@@ -2288,7 +2381,7 @@
                 "@eslint/config-array": "^0.19.0",
                 "@eslint/core": "^0.9.0",
                 "@eslint/eslintrc": "^3.2.0",
-                "@eslint/js": "9.16.0",
+                "@eslint/js": "9.17.0",
                 "@eslint/plugin-kit": "^0.2.3",
                 "@humanfs/node": "^0.16.6",
                 "@humanwhocodes/module-importer": "^1.0.1",
@@ -2297,7 +2390,7 @@
                 "@types/json-schema": "^7.0.15",
                 "ajv": "^6.12.4",
                 "chalk": "^4.0.0",
-                "cross-spawn": "^7.0.5",
+                "cross-spawn": "^7.0.6",
                 "debug": "^4.3.2",
                 "escape-string-regexp": "^4.0.0",
                 "eslint-scope": "^8.2.0",
@@ -2443,22 +2536,6 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/eslint/node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dev": true,
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
         "node_modules/esniff": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
@@ -2609,6 +2686,12 @@
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
             "dev": true
         },
+        "node_modules/fast-uri": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
+            "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==",
+            "peer": true
+        },
         "node_modules/fastq": {
             "version": "1.17.1",
             "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -3077,9 +3160,9 @@
             "dev": true
         },
         "node_modules/magic-string": {
-            "version": "0.30.14",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
-            "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
+            "version": "0.30.15",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.15.tgz",
+            "integrity": "sha512-zXeaYRgZ6ldS1RJJUrMrYgNJ4fdwnyI6tVqoiIhyCyv5IVTK9BU8Ic2l253GGETQHxI4HNUwhJ3fjDhKqEoaAw==",
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.5.0"
             }
@@ -3241,9 +3324,9 @@
             "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
         },
         "node_modules/node-releases": {
-            "version": "2.0.18",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-            "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+            "version": "2.0.19",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+            "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
             "peer": true
         },
         "node_modules/normalize-path": {
@@ -3620,6 +3703,15 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/require-from-string": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+            "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/resolve-from": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3652,9 +3744,9 @@
             "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
         },
         "node_modules/rollup": {
-            "version": "4.28.0",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.0.tgz",
-            "integrity": "sha512-G9GOrmgWHBma4YfCcX8PjH0qhXSdH8B4HDE2o4/jaxj93S4DPCIDoLcXz99eWMji4hB29UFCEd7B2gwGJDR9cQ==",
+            "version": "4.28.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.1.tgz",
+            "integrity": "sha512-61fXYl/qNVinKmGSTHAZ6Yy8I3YIJC/r2m9feHo6SwVAVcLT5MPwOUFe7EuURA/4m0NR8lXG4BBXuo/IZEsjMg==",
             "dependencies": {
                 "@types/estree": "1.0.6"
             },
@@ -3666,24 +3758,25 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.28.0",
-                "@rollup/rollup-android-arm64": "4.28.0",
-                "@rollup/rollup-darwin-arm64": "4.28.0",
-                "@rollup/rollup-darwin-x64": "4.28.0",
-                "@rollup/rollup-freebsd-arm64": "4.28.0",
-                "@rollup/rollup-freebsd-x64": "4.28.0",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.28.0",
-                "@rollup/rollup-linux-arm-musleabihf": "4.28.0",
-                "@rollup/rollup-linux-arm64-gnu": "4.28.0",
-                "@rollup/rollup-linux-arm64-musl": "4.28.0",
-                "@rollup/rollup-linux-powerpc64le-gnu": "4.28.0",
-                "@rollup/rollup-linux-riscv64-gnu": "4.28.0",
-                "@rollup/rollup-linux-s390x-gnu": "4.28.0",
-                "@rollup/rollup-linux-x64-gnu": "4.28.0",
-                "@rollup/rollup-linux-x64-musl": "4.28.0",
-                "@rollup/rollup-win32-arm64-msvc": "4.28.0",
-                "@rollup/rollup-win32-ia32-msvc": "4.28.0",
-                "@rollup/rollup-win32-x64-msvc": "4.28.0",
+                "@rollup/rollup-android-arm-eabi": "4.28.1",
+                "@rollup/rollup-android-arm64": "4.28.1",
+                "@rollup/rollup-darwin-arm64": "4.28.1",
+                "@rollup/rollup-darwin-x64": "4.28.1",
+                "@rollup/rollup-freebsd-arm64": "4.28.1",
+                "@rollup/rollup-freebsd-x64": "4.28.1",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.28.1",
+                "@rollup/rollup-linux-arm-musleabihf": "4.28.1",
+                "@rollup/rollup-linux-arm64-gnu": "4.28.1",
+                "@rollup/rollup-linux-arm64-musl": "4.28.1",
+                "@rollup/rollup-linux-loongarch64-gnu": "4.28.1",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.28.1",
+                "@rollup/rollup-linux-riscv64-gnu": "4.28.1",
+                "@rollup/rollup-linux-s390x-gnu": "4.28.1",
+                "@rollup/rollup-linux-x64-gnu": "4.28.1",
+                "@rollup/rollup-linux-x64-musl": "4.28.1",
+                "@rollup/rollup-win32-arm64-msvc": "4.28.1",
+                "@rollup/rollup-win32-ia32-msvc": "4.28.1",
+                "@rollup/rollup-win32-x64-msvc": "4.28.1",
                 "fsevents": "~2.3.2"
             }
         },
@@ -3963,16 +4056,16 @@
             }
         },
         "node_modules/terser-webpack-plugin": {
-            "version": "5.3.10",
-            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
-            "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
+            "version": "5.3.11",
+            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.11.tgz",
+            "integrity": "sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==",
             "peer": true,
             "dependencies": {
-                "@jridgewell/trace-mapping": "^0.3.20",
+                "@jridgewell/trace-mapping": "^0.3.25",
                 "jest-worker": "^27.4.5",
-                "schema-utils": "^3.1.1",
-                "serialize-javascript": "^6.0.1",
-                "terser": "^5.26.0"
+                "schema-utils": "^4.3.0",
+                "serialize-javascript": "^6.0.2",
+                "terser": "^5.31.1"
             },
             "engines": {
                 "node": ">= 10.13.0"
@@ -3996,6 +4089,59 @@
                 }
             }
         },
+        "node_modules/terser-webpack-plugin/node_modules/ajv": {
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+            "peer": true,
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^3.0.1",
+                "json-schema-traverse": "^1.0.0",
+                "require-from-string": "^2.0.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+            "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+            "peer": true,
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3"
+            },
+            "peerDependencies": {
+                "ajv": "^8.8.2"
+            }
+        },
+        "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+            "peer": true
+        },
+        "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
+            "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
+            "peer": true,
+            "dependencies": {
+                "@types/json-schema": "^7.0.9",
+                "ajv": "^8.9.0",
+                "ajv-formats": "^2.1.1",
+                "ajv-keywords": "^5.1.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
         "node_modules/terser/node_modules/commander": {
             "version": "2.20.3",
             "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -4240,16 +4386,6 @@
                 "node": ">= 8.0.0"
             }
         },
-        "node_modules/vite-plugin-eslint/node_modules/@types/eslint": {
-            "version": "8.56.12",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
-            "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
-            "dev": true,
-            "dependencies": {
-                "@types/estree": "*",
-                "@types/json-schema": "*"
-            }
-        },
         "node_modules/vite-plugin-eslint/node_modules/picomatch": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -4452,6 +4588,14 @@
                 "vue": "^3.2.0"
             }
         },
+        "node_modules/vue-select": {
+            "version": "4.0.0-beta.6",
+            "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.6.tgz",
+            "integrity": "sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==",
+            "peerDependencies": {
+                "vue": "3.x"
+            }
+        },
         "node_modules/watchpack": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
@@ -4590,19 +4734,6 @@
             "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.1.tgz",
             "integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ=="
         },
-        "node_modules/yaml": {
-            "version": "2.6.1",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
-            "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
-            "optional": true,
-            "peer": true,
-            "bin": {
-                "yaml": "bin.mjs"
-            },
-            "engines": {
-                "node": ">= 14"
-            }
-        },
         "node_modules/yocto-queue": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index 4a2a7876..5edb0640 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -42,7 +42,8 @@
         "vite-plugin-externals": "^0.6.2",
         "vite-plugin-static-copy": "^2.2.0",
         "vue": "^3.4",
-        "vue-router": "^4.0"
+        "vue-router": "^4.0",
+        "vue-select": "^4.0.0-beta.6"
     },
     "engines": {
         "node": ">= 20.0.0",
@@ -56,6 +57,8 @@
     "devDependencies": {
         "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-inject": "^5.0.5",
+        "@types/jquery": "^3.5.32",
+        "@types/select2": "^4.0.63",
         "eslint": "^9.16.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.1",
diff --git a/boranga/frontend/boranga/src/components/common/SelectFilter.vue b/boranga/frontend/boranga/src/components/common/SelectFilter.vue
index 22fb35f6..d1c20260 100644
--- a/boranga/frontend/boranga/src/components/common/SelectFilter.vue
+++ b/boranga/frontend/boranga/src/components/common/SelectFilter.vue
@@ -7,7 +7,7 @@
             class="text-secondary mb-1"
             >{{ title }}</label
         >
-        <!-- <VueSelect
+        <v-select
             :id="`select-filter-${id}`"
             ref="vueSelectFilter"
             v-model="selectedFilterItem"
@@ -41,16 +41,13 @@
                 })
             "
         >
-        </VueSelect>
-        -->
+        </v-select>
     </div>
 </template>
 
 <script>
-// import { VueSelect } from 'vue-select';
 export default {
     name: 'SelectFilter',
-    // components: { VueSelect },
     props: {
         id: {
             type: String,
@@ -232,8 +229,8 @@ export default {
 };
 </script>
 
-<style scoped>
-/* @import 'vue-select/dist/vue-select.css'; */
+<style>
+@import 'vue-select/dist/vue-select.css';
 
 * {
     --vs-dropdown-z-index: 9001 !important;
diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 8b0ce978..851617b1 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -5743,7 +5743,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 @import '../../../../../static/boranga/css/map.css';
 @import 'ol-ext/dist/ol-ext.css';
 
diff --git a/boranga/frontend/boranga/src/main.js b/boranga/frontend/boranga/src/main.js
index 94218e7f..9d9cf45e 100755
--- a/boranga/frontend/boranga/src/main.js
+++ b/boranga/frontend/boranga/src/main.js
@@ -5,6 +5,7 @@ import App from './App.vue';
 import router from './router';
 import helpers from '@/utils/helpers';
 import { extendMoment } from 'moment-range';
+import VueSelect from 'vue-select';
 
 import _ from 'lodash';
 window._ = _;
@@ -63,5 +64,5 @@ window.fetch = ((originalFetch) => {
     };
 })(fetch);
 
-app.use(router);
+app.component('v-select', VueSelect).use(router);
 router.isReady().then(() => app.mount('#app'));

From 54c1a1b206380f6c4a2c2ef8f4e900f15db01b55 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 19 Dec 2024 10:25:13 +0800
Subject: [PATCH 114/138] Fix map error.

---
 .../src/components/common/component_map.vue   | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 851617b1..587511d0 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -4760,13 +4760,14 @@ export default {
 
             const mapLayers = this.map.getLayers();
             mapLayers.getArray().map((layer) => {
-                if (Object.prototype.hasOwnProperty.call(layer, 'getSource')) {
-                    const source = layer.getSource();
-                    if (source) {
-                        layers.push(layer);
-                    }
+                // Not all types of layer have a getSource method
+                try {
+                    layer.getSource().getFeatures();
+                    layers.push(layer);
+                } catch {
+                    //
                 }
-            });
+            }, layers);
 
             return layers;
         },
@@ -4777,7 +4778,17 @@ export default {
             const features = [];
             this.getLayersWithFeatures().map((layer) => {
                 if (Object.prototype.hasOwnProperty.call(layer, 'getSource')) {
-                    features.push(...layer.getSource().getFeatures());
+                    let source = layer.getSource();
+                    if (
+                        source &&
+                        Object.prototype.hasOwnProperty.call(
+                            source,
+                            'getFeatures'
+                        )
+                    ) {
+                        console.log('Getting features from layer', layer);
+                        features.push(...layer.getSource().getFeatures());
+                    }
                 }
             });
 

From 42f385e4f5e10087d376650c76005cc26428a42f Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 19 Dec 2024 14:20:18 +0800
Subject: [PATCH 115/138] Remove unused import.

---
 .../internal/conservation_status/amendment_request.vue           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
index 15918779..6b35451a 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/amendment_request.vue
@@ -93,7 +93,6 @@ import modal from '@vue-utils/bootstrap-modal.vue';
 import alert from '@vue-utils/alert.vue';
 import FileField2 from '@/components/forms/filefield.vue';
 
-import { helpers } from '@/utils/hooks.js';
 export default {
     name: 'AmendmentRequest',
     components: {

From f8865cd56f2acd08a85ebdad73d8d39367899dfc Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Thu, 19 Dec 2024 14:52:29 +0800
Subject: [PATCH 116/138] More work getting map working for vue 3.

---
 .../src/components/common/component_map.vue   | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 587511d0..0b9cacc8 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -42,7 +42,6 @@
                 </div>
             </div>
         </div>
-
         <div
             :id="map_container_id"
             class="d-flex justify-content-center"
@@ -1596,6 +1595,9 @@
 </template>
 
 <script>
+// @Karsten: TODO - I could not get transform working in vue 3
+// When the transform interaction is activated, the selected feature seems
+// to become unselected
 import { v4 as uuid } from 'uuid';
 import { api_endpoints, helpers } from '@/utils/hooks';
 
@@ -2029,7 +2031,8 @@ export default {
             cursorInLeftHalfOfMap: true,
             cursorInBottomHalfOfMap: true,
             showToastCloseButton: false,
-
+            editableLayersArray: [],
+            activeEditLayer: null,
             mapMarker: '../../static/boranga_vue/src/assets/map-marker.svg',
         };
     },
@@ -2325,17 +2328,13 @@ export default {
             });
         },
         activeEditLayerName: function () {
-            const layer = this.editableLayers().find((layer) => {
-                return layer.get('editing') === true;
-            });
-            return layer?.getProperties().name;
+            if (!this.activeEditLayer) {
+                return null;
+            }
+            return this.activeEditLayer.getProperties().name;
         },
         isEditingALayer: function () {
-            const editableLayers = this.editableLayers().filter((layer) => {
-                return layer.get('editing') === true;
-            });
-
-            return editableLayers.length > 0;
+            return Boolean(this.activeEditLayer);
         },
         vectorLayersArray: function () {
             return Object.values(this.vectorLayers);
@@ -3255,7 +3254,7 @@ export default {
 
                                 // A bit clunky but this makes it so when switching editing modes the feature selection styles get properly set
                                 const mode = this.mode;
-                                const subMode = this.submode;
+                                const subMode = this.subMode;
                                 this.callSetMode('layer');
                                 this.callSetMode(mode, subMode);
                             } else {
@@ -3737,7 +3736,7 @@ export default {
             // select interaction working on "singleclick"
             const selectSingleClick = new Select({
                 style: vm.basicSelectStyle,
-                layers: vm.additionLayersArray,
+                layers: vm.additionLayersArray, // @Karsten TODO ??
                 wrapX: false,
                 condition: function () {
                     // Prevent the interaction's standard select event
@@ -3746,6 +3745,7 @@ export default {
             });
             selectSingleClick.on('select', (evt) => {
                 if (vm.transforming) {
+                    console.log('ignoring select event while transforming');
                     return;
                 }
                 $.each(evt.selected, function (idx, feature) {
@@ -5494,9 +5494,10 @@ export default {
         },
         editableLayers: function () {
             const layers = this.getLayersWithFeatures();
-            return layers.filter((layer) => {
+            this.editableLayersArray = layers.filter((layer) => {
                 return layer.get('can_edit');
             });
+            return this.editableLayersArray;
         },
         vectorLayerDefinitions: function () {
             return this.additionalLayersDefinitions.concat(
@@ -5550,12 +5551,14 @@ export default {
                 btn.addClass('btn-danger');
                 $(toggleButton).attr('title', 'Layer Editing: On');
                 layer.set('editing', true);
+                this.activeEditLayer = layer;
             } else {
                 btn.removeClass('btn-danger');
                 btn.removeClass('btn-success');
                 img.removeClass('svg-green');
                 $(toggleButton).attr('title', 'Layer Editing: Off');
                 layer.set('editing', false);
+                this.activeEditLayer = null;
             }
         },
         /**
@@ -5753,11 +5756,11 @@ export default {
     },
 };
 </script>
-
 <style>
 @import '../../../../../static/boranga/css/map.css';
 @import 'ol-ext/dist/ol-ext.css';
-
+</style>
+<style scoped>
 #featureToast {
     position: absolute;
 }

From 4d1cb9bd029543c2ddb4d838765abba6d432c41d Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 09:00:33 +0800
Subject: [PATCH 117/138] Remove duplicate > character and fix some error
 handling.

---
 .../internal/occurrence/bulk_import_schema.vue   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index 58fc020e..c897b672 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -290,7 +290,6 @@
                                                 title="Mandatory Column"
                                                 >*</span
                                             >
-                                            >
                                             <small
                                                 class="d-block text-capitalize mb-0"
                                                 :class="
@@ -1830,7 +1829,10 @@ export default {
                 `${api_endpoints.occurrence_report_bulk_import_schemas}${this.schema.id}/validate/`
             )
                 .then(async (response) => {
-                    const data = await response.json();
+                    if (!response.ok) {
+                        throw response;
+                    }
+                    const data = await response.text();
                     swal.fire({
                         title: 'Schema Validated Successfully',
                         text: data,
@@ -1841,12 +1843,20 @@ export default {
                         },
                     });
                 })
-                .catch((error) => {
+                .catch(async (response) => {
+                    let error = null;
+                    try {
+                        error = await response.json();
+                    } catch {
+                        error = await response.text();
+                    }
                     let errors = null;
                     if (Object.hasOwn(error, 'data')) {
                         errors = error.data;
                     } else if (Object.hasOwn(error, 'body')) {
                         errors = error.body;
+                    } else {
+                        errors = error;
                     }
                     let error_message_string = 'Something went wrong :-(';
                     if (errors instanceof Object) {

From d490a3a82eb735670ccec0153f2d6acbccf98cc9 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 10:03:39 +0800
Subject: [PATCH 118/138] Fix meetings datatable search.

---
 .../src/components/internal/meetings/meetings_datatable.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
index 4b778ba8..c455a6f2 100644
--- a/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
+++ b/boranga/frontend/boranga/src/components/internal/meetings/meetings_datatable.vue
@@ -232,7 +232,7 @@ export default {
                 orderable: true,
                 searchable: true,
                 visible: true,
-                name: 'location',
+                name: 'location__room_name',
             };
         },
         column_title: function () {

From a98ae140fa7e6a5f07ef49f7362b51e4de72a7f2 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 10:24:11 +0800
Subject: [PATCH 119/138] Allow sending back to assessor from proposed for
 agenda, ready for agenda and deferred status without the applicable workflow
 having to be set (as a CS may be deferred without an applicable workflow
 selected which would cause a CS to be stuck as deferred forever).

---
 .../conservation_status/conservation_status.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index b9609f1e..bc73d030 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -1252,7 +1252,6 @@ export default {
         canSendBackToAssessor: function () {
             return (
                 this.conservation_status_obj &&
-                this.conservation_status_obj.approval_level == 'minister' &&
                 [
                     constants.PROPOSAL_STATUS.PROPOSED_FOR_AGENDA.TEXT,
                     constants.PROPOSAL_STATUS.READY_FOR_AGENDA.TEXT,
@@ -2203,6 +2202,22 @@ export default {
                     .on('select2:select', function (e) {
                         let data = e.params.data.id;
                         vm.selected_referral = data;
+                        if (
+                            vm.selected_referral ==
+                            vm.conservation_status_obj.submitter.email
+                        ) {
+                            swal.fire({
+                                title: 'Referral Error',
+                                text: 'You cannot refer a proposal to the submitter.',
+                                icon: 'error',
+                                customClass: {
+                                    confirmButton: 'btn btn-primary',
+                                },
+                            });
+                            $(vm.$refs.referees).val(null).trigger('change');
+                            vm.selected_referral = null;
+                            return;
+                        }
                         vm.$nextTick(() => {
                             vm.$refs.referral_text.focus();
                         });

From eeed639dcf8a4dc03f3b183094571cfe054c6381 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 10:29:17 +0800
Subject: [PATCH 120/138] Fix inability for CS approver to unlock and modify CS
 with Declined status.

---
 .../internal/conservation_status/conservation_status.vue         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
index bc73d030..1344c429 100644
--- a/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
+++ b/boranga/frontend/boranga/src/components/internal/conservation_status/conservation_status.vue
@@ -98,6 +98,7 @@
                                                 'Approved',
                                                 'Closed',
                                                 'DeListed',
+                                                'Declined',
                                             ].includes(
                                                 conservation_status_obj.processing_status
                                             )

From 6f1a788c9387a0632916e9441449c8b8ae413610 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 10:34:52 +0800
Subject: [PATCH 121/138] Stop users from referring to the submitter.

---
 .../internal/occurrence/occurrence_report.vue  | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
index b2eecf01..028f60f3 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_report.vue
@@ -1720,6 +1720,24 @@ export default {
                 .on('select2:select', function (e) {
                     let data = e.params.data.id;
                     vm.selected_referral = data;
+                    if (
+                        vm.selected_referral ==
+                        vm.occurrence_report.submitter.email
+                    ) {
+                        swal.fire({
+                            title: 'Referral Error',
+                            text: 'You cannot refer a proposal to the submitter.',
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'btn btn-primary',
+                            },
+                        });
+                        $(vm.$refs.department_users)
+                            .val(null)
+                            .trigger('change');
+                        vm.selected_referral = null;
+                        return;
+                    }
                     vm.$nextTick(() => {
                         vm.$refs.referral_text.focus();
                     });

From 2e61b4b43415d8ac8e4fea6d1e54d5106e27f91e Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 10:43:23 +0800
Subject: [PATCH 122/138] Fix activate occurrence (a successful response has en
 empty repsonse so can only call response.json() when there is a validation
 error.

---
 .../boranga/src/components/internal/occurrence/occurrence.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
index 15a5f841..527445ed 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence.vue
@@ -659,8 +659,8 @@ export default {
                     'Content-Type': 'application/json',
                 },
             }).then(async (response) => {
-                const data = await response.json();
                 if (!response.ok) {
+                    const data = await response.json();
                     swal.fire({
                         title: 'Activate Error',
                         text: data,

From c5f2a44417e8f1b3c56afbd8c682994e09d5ebe5 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 11:22:36 +0800
Subject: [PATCH 123/138] Fix selectedOccurrenceIds watcher not firing (in Vue
 3 to watch array items or object properties the watcher must be 'deep'.

---
 .../occurrence/occurrence_combine.vue         | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
index b4743fc4..5418e117 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
@@ -34,7 +34,6 @@
                     :main-occurrence-id="main_occurrence_obj.id"
                 />
             </div>
-
             <template v-if="occ_combine_data.combine_ids.length >= 2">
                 <alert
                     type="primary"
@@ -963,8 +962,8 @@ export default {
         };
     },
     watch: {
-        isModalOpen: function () {
-            if (this.isModalOpen) {
+        isModalOpen(newVal) {
+            if (newVal) {
                 let vm = this;
 
                 vm.getKeyContactIds();
@@ -994,15 +993,18 @@ export default {
                 });
             }
         },
-        selectedOccurrenceIds: function () {
-            let vm = this;
-            vm.occ_combine_data.combine_ids = vm.selectedOccurrenceIds;
-            vm.getKeyContactIds();
-            vm.getDocumentIds();
-            vm.getThreatIds();
-            vm.getSiteIds();
-            vm.getTenureIds();
-            vm.checkFormValues();
+        selectedOccurrenceIds: {
+            handler(newVal) {
+                let vm = this;
+                vm.occ_combine_data.combine_ids = newVal;
+                vm.getKeyContactIds();
+                vm.getDocumentIds();
+                vm.getThreatIds();
+                vm.getSiteIds();
+                vm.getTenureIds();
+                vm.checkFormValues();
+            },
+            deep: true,
         },
     },
     mounted: function () {

From a675399b93dd77bafe7beebd955474d86170137e Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 11:27:57 +0800
Subject: [PATCH 124/138] Reset the selected occurrences when the modal is
 displayed.

---
 .../src/components/internal/occurrence/occurrence_combine.vue  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
index 5418e117..b86a6a8b 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/occurrence_combine.vue
@@ -965,7 +965,8 @@ export default {
         isModalOpen(newVal) {
             if (newVal) {
                 let vm = this;
-
+                vm.selectedOccurrences = [vm.main_occurrence_obj];
+                vm.selectedOccurrenceIds = [vm.main_occurrence_obj.id];
                 vm.getKeyContactIds();
                 vm.getDocumentIds();
                 vm.getThreatIds();

From 412072c0462475712451baef0b4309e5e229ca09 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 11:35:24 +0800
Subject: [PATCH 125/138] Show disabled master schema switch for appropriate
 users.

---
 .../components/internal/occurrence/bulk_import_schema.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index c897b672..0b034369 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -139,10 +139,7 @@
                                                 title="This is a Master Schema. When copied by an Occurrence Approver, any columns from the master will be locked."
                                             ></i
                                         ></label>
-                                        <div
-                                            v-if="schema.can_user_toggle_master"
-                                            class="col-sm-1"
-                                        >
+                                        <div class="col-sm-1">
                                             <div
                                                 class="form-check form-switch form-switch-lg"
                                                 style="transform: scale(1.3)"
@@ -152,6 +149,9 @@
                                                     v-model="schema.is_master"
                                                     class="form-check-input"
                                                     type="checkbox"
+                                                    :disabled="
+                                                        !schema.can_user_toggle_master
+                                                    "
                                                     @change="save()"
                                                 />
                                             </div>

From c6bd6dd6042e3d54b0cfc4be67f45b105da4777c Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 11:47:13 +0800
Subject: [PATCH 126/138] Fix issue with copy not displaying the details of the
 new schema copy.

---
 .../internal/occurrence/bulk_import_schema.vue        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
index 0b034369..eccca58b 100644
--- a/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
+++ b/boranga/frontend/boranga/src/components/internal/occurrence/bulk_import_schema.vue
@@ -1966,10 +1966,13 @@ export default {
                             showConfirmButton: false,
                             timer: 1500,
                         });
-                        this.$router.push(
-                            `/internal/occurrence-report/bulk_import_schema/${data.id}`
-                        );
-                        this.fetchBulkImportSchema();
+                        this.$router
+                            .push({
+                                path: `/internal/occurrence-report/bulk_import_schema/${data.id}`,
+                            })
+                            .then(() => {
+                                this.fetchBulkImportSchema();
+                            });
                     }
                 })
                 .catch((error) => {

From 9f066942fc8814ae638b2677c57fc6ede1f38825 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 12:08:50 +0800
Subject: [PATCH 127/138] Fix issue with deleting feature.

---
 .../src/components/common/component_map.vue   | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 0b9cacc8..f9b3e0de 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -4096,8 +4096,11 @@ export default {
             return processedGeometry;
         },
         removeModelFeatures: function () {
+            console.log('Removing model features');
             let vm = this;
             let cannot_delete_features = [];
+            console.log('selectedFeatureIds', vm.selectedFeatureIds);
+            console.log('Selected features:', vm.selectedFeatures());
             const features = vm.selectedFeatures().filter((feature) => {
                 if (
                     [undefined, false].includes(
@@ -4115,7 +4118,9 @@ export default {
                     cannot_delete_features.push(feature.getProperties().id);
                 }
             });
+            console.log('Features to delete:', features);
 
+            console.log('Cannot delete features:', cannot_delete_features);
             if (cannot_delete_features.length > 0) {
                 vm.errorMessageProperty(null);
                 vm.errorMessageProperty(
@@ -4125,6 +4130,8 @@ export default {
                 );
             }
 
+            console.log('Removing feature from layer');
+
             const layersWithFeatures = vm.getLayersWithFeatures();
             layersWithFeatures.map((layer) => {
                 const source = layer.getSource();
@@ -4777,19 +4784,7 @@ export default {
         getMapFeatures: function () {
             const features = [];
             this.getLayersWithFeatures().map((layer) => {
-                if (Object.prototype.hasOwnProperty.call(layer, 'getSource')) {
-                    let source = layer.getSource();
-                    if (
-                        source &&
-                        Object.prototype.hasOwnProperty.call(
-                            source,
-                            'getFeatures'
-                        )
-                    ) {
-                        console.log('Getting features from layer', layer);
-                        features.push(...layer.getSource().getFeatures());
-                    }
-                }
+                features.push(...layer.getSource().getFeatures());
             });
 
             return features;
@@ -4816,7 +4811,7 @@ export default {
         selectedFeatures: function () {
             let vm = this;
             const features = vm.getMapFeatures();
-
+            console.log('features:', features);
             return features.filter((feature) => {
                 return vm.selectedFeatureIds.includes(
                     feature.getProperties().id

From 778c319a41cdaeb75eacf059788c2c01ae1cce91 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 14:56:41 +0800
Subject: [PATCH 128/138] Fix issue with info tool only displaying when showing
 all layers.

---
 .../src/components/common/component_map.vue   | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index f9b3e0de..4aab7923 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -2033,6 +2033,7 @@ export default {
             showToastCloseButton: false,
             editableLayersArray: [],
             activeEditLayer: null,
+            optionalLayersActive: false,
             mapMarker: '../../static/boranga_vue/src/assets/map-marker.svg',
         };
     },
@@ -2084,15 +2085,6 @@ export default {
                 this.undoredo_forSketch.getStack('redo').length > 0
             );
         },
-        optionalLayersActive: function () {
-            if (this.optionalLayers.length == 0) {
-                return false;
-            }
-            let visible_layers = this.optionalLayers.filter(
-                (layer) => layer.values_.visible === true
-            );
-            return visible_layers.length > 0;
-        },
         featureCount: function () {
             this.defaultQueryLayerName;
             this.defaultProcessedGeometryLayerName;
@@ -2346,6 +2338,18 @@ export default {
                 this.errorMessageProperty(null);
             }
         },
+        optionalLayers: {
+            handler: function (newVal) {
+                if (newVal.length == 0) {
+                    return false;
+                }
+                let visibleLayers = newVal.filter(
+                    (layer) => layer.values_.visible === true
+                );
+                this.optionalLayersActive = visibleLayers.length > 0;
+            },
+            deep: true,
+        },
     },
     created: function () {
         let initialisers = [
@@ -3288,7 +3292,7 @@ export default {
             });
 
             // Add a button to show/hide the layers
-            const button = $('<div class="toggleVisibility" title="show/hide">')
+            const button = $('<div title="show/hide" style="cursor: pointer;">')
                 .text('Show/hide all')
                 .click(() => {
                     const a = this.map
@@ -3736,7 +3740,7 @@ export default {
             // select interaction working on "singleclick"
             const selectSingleClick = new Select({
                 style: vm.basicSelectStyle,
-                layers: vm.additionLayersArray, // @Karsten TODO ??
+                layers: vm.vectorLayersArray,
                 wrapX: false,
                 condition: function () {
                     // Prevent the interaction's standard select event

From 146f4e24f2ac9f342849d8ecaa6237279c7564b7 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 15:39:04 +0800
Subject: [PATCH 129/138] Final static build fixes.

---
 boranga/frontend/boranga/vite.config.js | 4 +++-
 boranga/templates/boranga/base.html     | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/boranga/frontend/boranga/vite.config.js b/boranga/frontend/boranga/vite.config.js
index bd6f2014..aaa9f1b0 100644
--- a/boranga/frontend/boranga/vite.config.js
+++ b/boranga/frontend/boranga/vite.config.js
@@ -29,7 +29,9 @@ export default defineConfig({
     plugins: [
         vue(),
         eslint(),
-        svgLoader(),
+        svgLoader({
+            defaultImport: 'url',
+        }),
         viteStaticCopy({
             // Had to do this to get the relative paths to work
             // Probably a better way but I couldn't figure it out
diff --git a/boranga/templates/boranga/base.html b/boranga/templates/boranga/base.html
index f3415b93..c6a23ad0 100755
--- a/boranga/templates/boranga/base.html
+++ b/boranga/templates/boranga/base.html
@@ -22,7 +22,7 @@
 
   <link rel="stylesheet" href="{% static 'boranga/css/base.css' %}?v={{ build_tag }}" />
   {% if not use_vite_dev_server %}
-  <link rel="stylesheet" href="{% static 'boranga_vue/css/index.css' %}?v={{ build_tag }}" />
+  <link rel="stylesheet" href="{% static 'boranga_vue/css/main.css' %}?v={{ build_tag }}" />
   {% endif %}
 {% endblock %}
 
@@ -42,7 +42,7 @@
     {% if use_vite_dev_server %}
         <script type="module" src="{% vite_asset_url vue3_entry_script %}?v={{ build_tag }}"></script>
     {% else %}
-        <script type="module" src="{% static 'boranga_vue/js/index.js' %}?v={{ build_tag }}"></script>
+        <script type="module" src="{% static 'boranga_vue/js/main.js' %}?v={{ build_tag }}"></script>
     {% endif %}
 {% endblock %}
 

From bdaf63d2f39826fade0492505867267be87d5864 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 15:43:24 +0800
Subject: [PATCH 130/138] npm update.

---
 boranga/frontend/boranga/package-lock.json | 244 +++++++++++----------
 1 file changed, 130 insertions(+), 114 deletions(-)

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index 9c67ac39..06cf2ddb 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -102,9 +102,9 @@
             }
         },
         "node_modules/@esbuild/aix-ppc64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
-            "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.1.tgz",
+            "integrity": "sha512-rHKbvBIQEe46PUybicWHsWmStdB3fvHi7CKa36Ip6xUqEr61BmGcnrYohXRNswU9zP/okYLXMzIW6D0neeNv6Q==",
             "cpu": [
                 "ppc64"
             ],
@@ -117,9 +117,9 @@
             }
         },
         "node_modules/@esbuild/android-arm": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
-            "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.1.tgz",
+            "integrity": "sha512-gKHsqtULVpVfsffGLaU/W4Jx+DLU8BLOQtvBrg+R22tz422VMgBK5moQ/ELDTRPR7Tqt9gLNk13XlvOFinXSzQ==",
             "cpu": [
                 "arm"
             ],
@@ -132,9 +132,9 @@
             }
         },
         "node_modules/@esbuild/android-arm64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
-            "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.1.tgz",
+            "integrity": "sha512-0jrWbRDWSPNSmt0HDp4qhWHeL69BL3YSSCGlwNn4logcOijz7nLMsHLT1g5Kb9A8T3dCjX+5qekr5zkH+gbqxQ==",
             "cpu": [
                 "arm64"
             ],
@@ -147,9 +147,9 @@
             }
         },
         "node_modules/@esbuild/android-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
-            "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.1.tgz",
+            "integrity": "sha512-FafSki3AkovwnU7zSMDyMKP93Fre1E+c7/mVErP46Y+63RiU2fvKekgpMuLkABDGLGahB/DD0PkPm0YAINmH0Q==",
             "cpu": [
                 "x64"
             ],
@@ -162,9 +162,9 @@
             }
         },
         "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
-            "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.1.tgz",
+            "integrity": "sha512-hJU5uPOQ0SBZ+0OZVx9dkpNyS0Cj1O7sjmqFMeQdp5ATYzCHhMD0CREHgq59eB0AFtCYDBoNcZXNJPwEZ/XDpA==",
             "cpu": [
                 "arm64"
             ],
@@ -177,9 +177,9 @@
             }
         },
         "node_modules/@esbuild/darwin-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
-            "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.1.tgz",
+            "integrity": "sha512-siNAX65WSBKU7c+XJEKByMruE/JsHY9HU+n5BIMiNlo5axVbWwGXN4HhJQzOlY4TtOwSt3LRbS0zuI5SOjgoyg==",
             "cpu": [
                 "x64"
             ],
@@ -192,9 +192,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
-            "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.1.tgz",
+            "integrity": "sha512-Kkl8APGvkp1S1g9tttiicChe49p+A3198sISIVcUGECqDPFXk9hSmVrUmaoCZWKo/zGK9TgLczLRLXduuhLplw==",
             "cpu": [
                 "arm64"
             ],
@@ -207,9 +207,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
-            "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.1.tgz",
+            "integrity": "sha512-7hm+A84yjna/LTVLad+8iG5cB/Ik+M/ekSrN4ALs9GolbwcyvtjSD+xoPhFFAg8D7xVu0JdDIoNNZ6+KWLcPoQ==",
             "cpu": [
                 "x64"
             ],
@@ -222,9 +222,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
-            "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.1.tgz",
+            "integrity": "sha512-USovmgDDpiWs16nRCH/NmRfQUJEaGGDPHqK6+pGzuMZOfoe0MAciJRMu1AKP3Ky4gnpuQcXv7aPHpX0IwLWRhA==",
             "cpu": [
                 "arm"
             ],
@@ -237,9 +237,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
-            "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.1.tgz",
+            "integrity": "sha512-hjv91wG/3V8oKFa6yAew5wFYc+8usgOL/VH6cNEqFtqpWf8RDmwMIRnTmqwxGJ9/9H5ib3KZfgcIgYwoX7F9VQ==",
             "cpu": [
                 "arm64"
             ],
@@ -252,9 +252,9 @@
             }
         },
         "node_modules/@esbuild/linux-ia32": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
-            "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.1.tgz",
+            "integrity": "sha512-TwspFcPJpYyBqDcoqSLBBaoGRGiPWkjH5V4raiFQ6maAkBho/rfQvtVpNPkLHEwnPlVSdl4HkHZ3n7NvvtU10w==",
             "cpu": [
                 "ia32"
             ],
@@ -267,9 +267,9 @@
             }
         },
         "node_modules/@esbuild/linux-loong64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
-            "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.1.tgz",
+            "integrity": "sha512-BS3gcpF33m9hiVFeMCF2+LTdkEr/JljXZGQrlR0Bb7B3pn+uQrAJebclIGar+r8BDJ2yvX9bN4GmMPIKdS20EA==",
             "cpu": [
                 "loong64"
             ],
@@ -282,9 +282,9 @@
             }
         },
         "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
-            "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.1.tgz",
+            "integrity": "sha512-X35vI7EufAX17Nqo6XoD89/HSlPJUB5zJ1UKeTiGOLXpOaz7zo+t1trSQOoq2Gr8usOX++S77VUw6L2wTMc2cA==",
             "cpu": [
                 "mips64el"
             ],
@@ -297,9 +297,9 @@
             }
         },
         "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
-            "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.1.tgz",
+            "integrity": "sha512-I+XQCBhTIXKqyLFDcyMP9Dp0u0fx2TiH3BTh4iIg58/a5hmS3l3Yr2AHG8gEsmjUA7WGfKy2ZqxsaVud15iI1w==",
             "cpu": [
                 "ppc64"
             ],
@@ -312,9 +312,9 @@
             }
         },
         "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
-            "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.1.tgz",
+            "integrity": "sha512-wK7f0cK/Mq2x42ImYAr+OWzyv4OQUQj/RcKvbxcEoe46LFCa4w08Cqow9zX8vN9SE8BScm4NGYT7CO0G8UBrTA==",
             "cpu": [
                 "riscv64"
             ],
@@ -327,9 +327,9 @@
             }
         },
         "node_modules/@esbuild/linux-s390x": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
-            "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.1.tgz",
+            "integrity": "sha512-47oImRwZavr5qEvEHNPcdly8LuFp3i4xrqT9mNbUn4ZKbwyegVp10k1E1YARiOim8ggfPAPABhPqXdS1NJOAnw==",
             "cpu": [
                 "s390x"
             ],
@@ -342,9 +342,9 @@
             }
         },
         "node_modules/@esbuild/linux-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
-            "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.1.tgz",
+            "integrity": "sha512-8qkGHVK1hH819iH7c9OsQsfUhJ0cgznoGT6vHRNxvNFPhcn0Y7HXLS0ndpY1sUkSM+umIdknz6vEqgPk6pbyIA==",
             "cpu": [
                 "x64"
             ],
@@ -356,10 +356,25 @@
                 "node": ">=18"
             }
         },
+        "node_modules/@esbuild/netbsd-arm64": {
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.1.tgz",
+            "integrity": "sha512-lH+bWKi8aCvlDu0vDVcZV4ENiHjVus3SQFueeydJ/mSfKywQ3LnbSjJ8PUgj+3dllq1OTFCGgh+x/14hrULVrg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
         "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
-            "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.1.tgz",
+            "integrity": "sha512-OdjqCVKtJuxRk9gPit/iI4/wSCGOnCcuPkgkT8Pt+0vM63QUOBd5oNX2umXUBr4bYTpSCL/aGxrAb3qENcqA4g==",
             "cpu": [
                 "x64"
             ],
@@ -372,9 +387,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-arm64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
-            "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.1.tgz",
+            "integrity": "sha512-wy2psEw0wc+xbSB4Et3XZaONClCagOlQTsqRJaLtCcPggnuZMfb17c5T5w6RO6pFF5J2SWoM7+MJuWUEzvQN+Q==",
             "cpu": [
                 "arm64"
             ],
@@ -387,9 +402,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
-            "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.1.tgz",
+            "integrity": "sha512-GClG42X5JYHoQU5Jry0u+uN2vmKOwrifl10IvDBXtkxyGr9oqOJyrd2U+H2ZoZGNIt21d7WcVJJmJq3I3fl+5g==",
             "cpu": [
                 "x64"
             ],
@@ -402,9 +417,9 @@
             }
         },
         "node_modules/@esbuild/sunos-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
-            "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.1.tgz",
+            "integrity": "sha512-a0VfBsFPrlFKxzXuJ4nP0ia3jEbzBk/JW2wEW44dwr0RDOr/Y1+d+EJgT6L3h8y9X8ctig7ks0rWlbjkPn6PcA==",
             "cpu": [
                 "x64"
             ],
@@ -417,9 +432,9 @@
             }
         },
         "node_modules/@esbuild/win32-arm64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
-            "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.1.tgz",
+            "integrity": "sha512-HqeXG1ttUnENzcGlPr0ouQHk8PQIoWi3thXElmafH1pVxC94sYdBVQregb2Qz7l1BmooUIOnzCGPCT4Oma0yTg==",
             "cpu": [
                 "arm64"
             ],
@@ -432,9 +447,9 @@
             }
         },
         "node_modules/@esbuild/win32-ia32": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
-            "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.1.tgz",
+            "integrity": "sha512-uA0iNg5jSy9XMiugX8Qtm3p9uUl9hi4JbOY18KnFBNTB+GsfJIWrDpE1cRFZrSHePiZs9cAwnprILpAKJWuYig==",
             "cpu": [
                 "ia32"
             ],
@@ -447,9 +462,9 @@
             }
         },
         "node_modules/@esbuild/win32-x64": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
-            "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.1.tgz",
+            "integrity": "sha512-wekV0z60AyaD8yYgRtxckqvGzzVaQmQRAhNrR352KzXLfhc4peh3UBMMmtYHbOqml6KblKy7oihC1eaZS68vRw==",
             "cpu": [
                 "x64"
             ],
@@ -580,9 +595,9 @@
             }
         },
         "node_modules/@fortawesome/fontawesome-free": {
-            "version": "6.7.1",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.1.tgz",
-            "integrity": "sha512-ALIk/MOh5gYe1TG/ieS5mVUsk7VUIJTJKPMK9rFFqOgfp0Q3d5QiBXbcOMwUvs37fyZVCz46YjOE6IFeOAXCHA==",
+            "version": "6.7.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+            "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
             "engines": {
                 "node": ">=6"
             }
@@ -1832,9 +1847,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001688",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001688.tgz",
-            "integrity": "sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA==",
+            "version": "1.0.30001690",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
+            "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -2240,9 +2255,9 @@
             "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.73",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.73.tgz",
-            "integrity": "sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==",
+            "version": "1.5.75",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.75.tgz",
+            "integrity": "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q==",
             "peer": true
         },
         "node_modules/enhanced-resolve": {
@@ -2312,9 +2327,9 @@
             }
         },
         "node_modules/esbuild": {
-            "version": "0.24.0",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
-            "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
+            "version": "0.24.1",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.1.tgz",
+            "integrity": "sha512-bHNW57YAKNh1VSbXP33EL9DevtRuT10czGhL9ynKpOAeBMNAkzsP8FSNoFTbU3abQB7kOb+JqUc89FqlZNbEeQ==",
             "hasInstallScript": true,
             "bin": {
                 "esbuild": "bin/esbuild"
@@ -2323,30 +2338,31 @@
                 "node": ">=18"
             },
             "optionalDependencies": {
-                "@esbuild/aix-ppc64": "0.24.0",
-                "@esbuild/android-arm": "0.24.0",
-                "@esbuild/android-arm64": "0.24.0",
-                "@esbuild/android-x64": "0.24.0",
-                "@esbuild/darwin-arm64": "0.24.0",
-                "@esbuild/darwin-x64": "0.24.0",
-                "@esbuild/freebsd-arm64": "0.24.0",
-                "@esbuild/freebsd-x64": "0.24.0",
-                "@esbuild/linux-arm": "0.24.0",
-                "@esbuild/linux-arm64": "0.24.0",
-                "@esbuild/linux-ia32": "0.24.0",
-                "@esbuild/linux-loong64": "0.24.0",
-                "@esbuild/linux-mips64el": "0.24.0",
-                "@esbuild/linux-ppc64": "0.24.0",
-                "@esbuild/linux-riscv64": "0.24.0",
-                "@esbuild/linux-s390x": "0.24.0",
-                "@esbuild/linux-x64": "0.24.0",
-                "@esbuild/netbsd-x64": "0.24.0",
-                "@esbuild/openbsd-arm64": "0.24.0",
-                "@esbuild/openbsd-x64": "0.24.0",
-                "@esbuild/sunos-x64": "0.24.0",
-                "@esbuild/win32-arm64": "0.24.0",
-                "@esbuild/win32-ia32": "0.24.0",
-                "@esbuild/win32-x64": "0.24.0"
+                "@esbuild/aix-ppc64": "0.24.1",
+                "@esbuild/android-arm": "0.24.1",
+                "@esbuild/android-arm64": "0.24.1",
+                "@esbuild/android-x64": "0.24.1",
+                "@esbuild/darwin-arm64": "0.24.1",
+                "@esbuild/darwin-x64": "0.24.1",
+                "@esbuild/freebsd-arm64": "0.24.1",
+                "@esbuild/freebsd-x64": "0.24.1",
+                "@esbuild/linux-arm": "0.24.1",
+                "@esbuild/linux-arm64": "0.24.1",
+                "@esbuild/linux-ia32": "0.24.1",
+                "@esbuild/linux-loong64": "0.24.1",
+                "@esbuild/linux-mips64el": "0.24.1",
+                "@esbuild/linux-ppc64": "0.24.1",
+                "@esbuild/linux-riscv64": "0.24.1",
+                "@esbuild/linux-s390x": "0.24.1",
+                "@esbuild/linux-x64": "0.24.1",
+                "@esbuild/netbsd-arm64": "0.24.1",
+                "@esbuild/netbsd-x64": "0.24.1",
+                "@esbuild/openbsd-arm64": "0.24.1",
+                "@esbuild/openbsd-x64": "0.24.1",
+                "@esbuild/sunos-x64": "0.24.1",
+                "@esbuild/win32-arm64": "0.24.1",
+                "@esbuild/win32-ia32": "0.24.1",
+                "@esbuild/win32-x64": "0.24.1"
             }
         },
         "node_modules/escalade": {
@@ -3160,9 +3176,9 @@
             "dev": true
         },
         "node_modules/magic-string": {
-            "version": "0.30.15",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.15.tgz",
-            "integrity": "sha512-zXeaYRgZ6ldS1RJJUrMrYgNJ4fdwnyI6tVqoiIhyCyv5IVTK9BU8Ic2l253GGETQHxI4HNUwhJ3fjDhKqEoaAw==",
+            "version": "0.30.17",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+            "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.5.0"
             }
@@ -4268,9 +4284,9 @@
             }
         },
         "node_modules/vite": {
-            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.3.tgz",
-            "integrity": "sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==",
+            "version": "6.0.4",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.4.tgz",
+            "integrity": "sha512-zwlH6ar+6o6b4Wp+ydhtIKLrGM/LoqZzcdVmkGAFun0KHTzIzjh+h0kungEx7KJg/PYnC80I4TII9WkjciSR6Q==",
             "dependencies": {
                 "esbuild": "^0.24.0",
                 "postcss": "^8.4.49",

From 82935fcee1e333c5d1ae286199a4405358340015 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Fri, 20 Dec 2024 16:17:47 +0800
Subject: [PATCH 131/138] Fix issues with new esbuild version.

---
 boranga/frontend/boranga/package-lock.json | 217 ++++++++++-----------
 boranga/frontend/boranga/package.json      |   5 +-
 2 files changed, 104 insertions(+), 118 deletions(-)

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index 06cf2ddb..260dc1af 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -19,6 +19,7 @@
                 "datatables.net-buttons": "^3.0.0",
                 "datatables.net-buttons-bs5": "^3.0.0",
                 "datatables.net-responsive-bs5": "^3.0.2",
+                "esbuild": "0.24.0",
                 "jquery": "^3.7.1",
                 "jquery-validation": "^1.21.0",
                 "jszip": "^3.9",
@@ -33,7 +34,7 @@
                 "sortablejs": "^1.15.6",
                 "sweetalert2": "11.4.8",
                 "uuid": "^11.0",
-                "vite": "^6.0.3",
+                "vite": "^6.0",
                 "vite-plugin-commonjs": "^0.10.4",
                 "vite-plugin-externals": "^0.6.2",
                 "vite-plugin-static-copy": "^2.2.0",
@@ -102,9 +103,9 @@
             }
         },
         "node_modules/@esbuild/aix-ppc64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.1.tgz",
-            "integrity": "sha512-rHKbvBIQEe46PUybicWHsWmStdB3fvHi7CKa36Ip6xUqEr61BmGcnrYohXRNswU9zP/okYLXMzIW6D0neeNv6Q==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+            "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
             "cpu": [
                 "ppc64"
             ],
@@ -117,9 +118,9 @@
             }
         },
         "node_modules/@esbuild/android-arm": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.1.tgz",
-            "integrity": "sha512-gKHsqtULVpVfsffGLaU/W4Jx+DLU8BLOQtvBrg+R22tz422VMgBK5moQ/ELDTRPR7Tqt9gLNk13XlvOFinXSzQ==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+            "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
             "cpu": [
                 "arm"
             ],
@@ -132,9 +133,9 @@
             }
         },
         "node_modules/@esbuild/android-arm64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.1.tgz",
-            "integrity": "sha512-0jrWbRDWSPNSmt0HDp4qhWHeL69BL3YSSCGlwNn4logcOijz7nLMsHLT1g5Kb9A8T3dCjX+5qekr5zkH+gbqxQ==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+            "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
             "cpu": [
                 "arm64"
             ],
@@ -147,9 +148,9 @@
             }
         },
         "node_modules/@esbuild/android-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.1.tgz",
-            "integrity": "sha512-FafSki3AkovwnU7zSMDyMKP93Fre1E+c7/mVErP46Y+63RiU2fvKekgpMuLkABDGLGahB/DD0PkPm0YAINmH0Q==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+            "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
             "cpu": [
                 "x64"
             ],
@@ -162,9 +163,9 @@
             }
         },
         "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.1.tgz",
-            "integrity": "sha512-hJU5uPOQ0SBZ+0OZVx9dkpNyS0Cj1O7sjmqFMeQdp5ATYzCHhMD0CREHgq59eB0AFtCYDBoNcZXNJPwEZ/XDpA==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+            "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
             "cpu": [
                 "arm64"
             ],
@@ -177,9 +178,9 @@
             }
         },
         "node_modules/@esbuild/darwin-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.1.tgz",
-            "integrity": "sha512-siNAX65WSBKU7c+XJEKByMruE/JsHY9HU+n5BIMiNlo5axVbWwGXN4HhJQzOlY4TtOwSt3LRbS0zuI5SOjgoyg==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+            "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
             "cpu": [
                 "x64"
             ],
@@ -192,9 +193,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.1.tgz",
-            "integrity": "sha512-Kkl8APGvkp1S1g9tttiicChe49p+A3198sISIVcUGECqDPFXk9hSmVrUmaoCZWKo/zGK9TgLczLRLXduuhLplw==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+            "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
             "cpu": [
                 "arm64"
             ],
@@ -207,9 +208,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.1.tgz",
-            "integrity": "sha512-7hm+A84yjna/LTVLad+8iG5cB/Ik+M/ekSrN4ALs9GolbwcyvtjSD+xoPhFFAg8D7xVu0JdDIoNNZ6+KWLcPoQ==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+            "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
             "cpu": [
                 "x64"
             ],
@@ -222,9 +223,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.1.tgz",
-            "integrity": "sha512-USovmgDDpiWs16nRCH/NmRfQUJEaGGDPHqK6+pGzuMZOfoe0MAciJRMu1AKP3Ky4gnpuQcXv7aPHpX0IwLWRhA==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+            "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
             "cpu": [
                 "arm"
             ],
@@ -237,9 +238,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.1.tgz",
-            "integrity": "sha512-hjv91wG/3V8oKFa6yAew5wFYc+8usgOL/VH6cNEqFtqpWf8RDmwMIRnTmqwxGJ9/9H5ib3KZfgcIgYwoX7F9VQ==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+            "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
             "cpu": [
                 "arm64"
             ],
@@ -252,9 +253,9 @@
             }
         },
         "node_modules/@esbuild/linux-ia32": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.1.tgz",
-            "integrity": "sha512-TwspFcPJpYyBqDcoqSLBBaoGRGiPWkjH5V4raiFQ6maAkBho/rfQvtVpNPkLHEwnPlVSdl4HkHZ3n7NvvtU10w==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+            "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
             "cpu": [
                 "ia32"
             ],
@@ -267,9 +268,9 @@
             }
         },
         "node_modules/@esbuild/linux-loong64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.1.tgz",
-            "integrity": "sha512-BS3gcpF33m9hiVFeMCF2+LTdkEr/JljXZGQrlR0Bb7B3pn+uQrAJebclIGar+r8BDJ2yvX9bN4GmMPIKdS20EA==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+            "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
             "cpu": [
                 "loong64"
             ],
@@ -282,9 +283,9 @@
             }
         },
         "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.1.tgz",
-            "integrity": "sha512-X35vI7EufAX17Nqo6XoD89/HSlPJUB5zJ1UKeTiGOLXpOaz7zo+t1trSQOoq2Gr8usOX++S77VUw6L2wTMc2cA==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+            "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
             "cpu": [
                 "mips64el"
             ],
@@ -297,9 +298,9 @@
             }
         },
         "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.1.tgz",
-            "integrity": "sha512-I+XQCBhTIXKqyLFDcyMP9Dp0u0fx2TiH3BTh4iIg58/a5hmS3l3Yr2AHG8gEsmjUA7WGfKy2ZqxsaVud15iI1w==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+            "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
             "cpu": [
                 "ppc64"
             ],
@@ -312,9 +313,9 @@
             }
         },
         "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.1.tgz",
-            "integrity": "sha512-wK7f0cK/Mq2x42ImYAr+OWzyv4OQUQj/RcKvbxcEoe46LFCa4w08Cqow9zX8vN9SE8BScm4NGYT7CO0G8UBrTA==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+            "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
             "cpu": [
                 "riscv64"
             ],
@@ -327,9 +328,9 @@
             }
         },
         "node_modules/@esbuild/linux-s390x": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.1.tgz",
-            "integrity": "sha512-47oImRwZavr5qEvEHNPcdly8LuFp3i4xrqT9mNbUn4ZKbwyegVp10k1E1YARiOim8ggfPAPABhPqXdS1NJOAnw==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+            "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
             "cpu": [
                 "s390x"
             ],
@@ -342,9 +343,9 @@
             }
         },
         "node_modules/@esbuild/linux-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.1.tgz",
-            "integrity": "sha512-8qkGHVK1hH819iH7c9OsQsfUhJ0cgznoGT6vHRNxvNFPhcn0Y7HXLS0ndpY1sUkSM+umIdknz6vEqgPk6pbyIA==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+            "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
             "cpu": [
                 "x64"
             ],
@@ -356,25 +357,10 @@
                 "node": ">=18"
             }
         },
-        "node_modules/@esbuild/netbsd-arm64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.1.tgz",
-            "integrity": "sha512-lH+bWKi8aCvlDu0vDVcZV4ENiHjVus3SQFueeydJ/mSfKywQ3LnbSjJ8PUgj+3dllq1OTFCGgh+x/14hrULVrg==",
-            "cpu": [
-                "arm64"
-            ],
-            "optional": true,
-            "os": [
-                "netbsd"
-            ],
-            "engines": {
-                "node": ">=18"
-            }
-        },
         "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.1.tgz",
-            "integrity": "sha512-OdjqCVKtJuxRk9gPit/iI4/wSCGOnCcuPkgkT8Pt+0vM63QUOBd5oNX2umXUBr4bYTpSCL/aGxrAb3qENcqA4g==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+            "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
             "cpu": [
                 "x64"
             ],
@@ -387,9 +373,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-arm64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.1.tgz",
-            "integrity": "sha512-wy2psEw0wc+xbSB4Et3XZaONClCagOlQTsqRJaLtCcPggnuZMfb17c5T5w6RO6pFF5J2SWoM7+MJuWUEzvQN+Q==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+            "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
             "cpu": [
                 "arm64"
             ],
@@ -402,9 +388,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.1.tgz",
-            "integrity": "sha512-GClG42X5JYHoQU5Jry0u+uN2vmKOwrifl10IvDBXtkxyGr9oqOJyrd2U+H2ZoZGNIt21d7WcVJJmJq3I3fl+5g==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+            "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
             "cpu": [
                 "x64"
             ],
@@ -417,9 +403,9 @@
             }
         },
         "node_modules/@esbuild/sunos-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.1.tgz",
-            "integrity": "sha512-a0VfBsFPrlFKxzXuJ4nP0ia3jEbzBk/JW2wEW44dwr0RDOr/Y1+d+EJgT6L3h8y9X8ctig7ks0rWlbjkPn6PcA==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+            "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
             "cpu": [
                 "x64"
             ],
@@ -432,9 +418,9 @@
             }
         },
         "node_modules/@esbuild/win32-arm64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.1.tgz",
-            "integrity": "sha512-HqeXG1ttUnENzcGlPr0ouQHk8PQIoWi3thXElmafH1pVxC94sYdBVQregb2Qz7l1BmooUIOnzCGPCT4Oma0yTg==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+            "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
             "cpu": [
                 "arm64"
             ],
@@ -447,9 +433,9 @@
             }
         },
         "node_modules/@esbuild/win32-ia32": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.1.tgz",
-            "integrity": "sha512-uA0iNg5jSy9XMiugX8Qtm3p9uUl9hi4JbOY18KnFBNTB+GsfJIWrDpE1cRFZrSHePiZs9cAwnprILpAKJWuYig==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+            "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
             "cpu": [
                 "ia32"
             ],
@@ -462,9 +448,9 @@
             }
         },
         "node_modules/@esbuild/win32-x64": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.1.tgz",
-            "integrity": "sha512-wekV0z60AyaD8yYgRtxckqvGzzVaQmQRAhNrR352KzXLfhc4peh3UBMMmtYHbOqml6KblKy7oihC1eaZS68vRw==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+            "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
             "cpu": [
                 "x64"
             ],
@@ -2327,9 +2313,9 @@
             }
         },
         "node_modules/esbuild": {
-            "version": "0.24.1",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.1.tgz",
-            "integrity": "sha512-bHNW57YAKNh1VSbXP33EL9DevtRuT10czGhL9ynKpOAeBMNAkzsP8FSNoFTbU3abQB7kOb+JqUc89FqlZNbEeQ==",
+            "version": "0.24.0",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+            "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
             "hasInstallScript": true,
             "bin": {
                 "esbuild": "bin/esbuild"
@@ -2338,31 +2324,30 @@
                 "node": ">=18"
             },
             "optionalDependencies": {
-                "@esbuild/aix-ppc64": "0.24.1",
-                "@esbuild/android-arm": "0.24.1",
-                "@esbuild/android-arm64": "0.24.1",
-                "@esbuild/android-x64": "0.24.1",
-                "@esbuild/darwin-arm64": "0.24.1",
-                "@esbuild/darwin-x64": "0.24.1",
-                "@esbuild/freebsd-arm64": "0.24.1",
-                "@esbuild/freebsd-x64": "0.24.1",
-                "@esbuild/linux-arm": "0.24.1",
-                "@esbuild/linux-arm64": "0.24.1",
-                "@esbuild/linux-ia32": "0.24.1",
-                "@esbuild/linux-loong64": "0.24.1",
-                "@esbuild/linux-mips64el": "0.24.1",
-                "@esbuild/linux-ppc64": "0.24.1",
-                "@esbuild/linux-riscv64": "0.24.1",
-                "@esbuild/linux-s390x": "0.24.1",
-                "@esbuild/linux-x64": "0.24.1",
-                "@esbuild/netbsd-arm64": "0.24.1",
-                "@esbuild/netbsd-x64": "0.24.1",
-                "@esbuild/openbsd-arm64": "0.24.1",
-                "@esbuild/openbsd-x64": "0.24.1",
-                "@esbuild/sunos-x64": "0.24.1",
-                "@esbuild/win32-arm64": "0.24.1",
-                "@esbuild/win32-ia32": "0.24.1",
-                "@esbuild/win32-x64": "0.24.1"
+                "@esbuild/aix-ppc64": "0.24.0",
+                "@esbuild/android-arm": "0.24.0",
+                "@esbuild/android-arm64": "0.24.0",
+                "@esbuild/android-x64": "0.24.0",
+                "@esbuild/darwin-arm64": "0.24.0",
+                "@esbuild/darwin-x64": "0.24.0",
+                "@esbuild/freebsd-arm64": "0.24.0",
+                "@esbuild/freebsd-x64": "0.24.0",
+                "@esbuild/linux-arm": "0.24.0",
+                "@esbuild/linux-arm64": "0.24.0",
+                "@esbuild/linux-ia32": "0.24.0",
+                "@esbuild/linux-loong64": "0.24.0",
+                "@esbuild/linux-mips64el": "0.24.0",
+                "@esbuild/linux-ppc64": "0.24.0",
+                "@esbuild/linux-riscv64": "0.24.0",
+                "@esbuild/linux-s390x": "0.24.0",
+                "@esbuild/linux-x64": "0.24.0",
+                "@esbuild/netbsd-x64": "0.24.0",
+                "@esbuild/openbsd-arm64": "0.24.0",
+                "@esbuild/openbsd-x64": "0.24.0",
+                "@esbuild/sunos-x64": "0.24.0",
+                "@esbuild/win32-arm64": "0.24.0",
+                "@esbuild/win32-ia32": "0.24.0",
+                "@esbuild/win32-x64": "0.24.0"
             }
         },
         "node_modules/escalade": {
diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index 5edb0640..322b08ed 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -37,13 +37,14 @@
         "sortablejs": "^1.15.6",
         "sweetalert2": "11.4.8",
         "uuid": "^11.0",
-        "vite": "^6.0.3",
+        "vite": "^6.0",
         "vite-plugin-commonjs": "^0.10.4",
         "vite-plugin-externals": "^0.6.2",
         "vite-plugin-static-copy": "^2.2.0",
         "vue": "^3.4",
         "vue-router": "^4.0",
-        "vue-select": "^4.0.0-beta.6"
+        "vue-select": "^4.0.0-beta.6",
+        "esbuild": "0.24.0"
     },
     "engines": {
         "node": ">= 20.0.0",

From 56d58c96bdde106506b162f6a966a1a563d3c9ff Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 30 Dec 2024 11:23:52 +0800
Subject: [PATCH 132/138] Some build fixes.

---
 boranga/frontend/boranga/package-lock.json | 1003 +++++++++++++-------
 boranga/frontend/boranga/package.json      |    8 +-
 2 files changed, 659 insertions(+), 352 deletions(-)

diff --git a/boranga/frontend/boranga/package-lock.json b/boranga/frontend/boranga/package-lock.json
index 260dc1af..ca69e1ec 100644
--- a/boranga/frontend/boranga/package-lock.json
+++ b/boranga/frontend/boranga/package-lock.json
@@ -36,8 +36,10 @@
                 "uuid": "^11.0",
                 "vite": "^6.0",
                 "vite-plugin-commonjs": "^0.10.4",
+                "vite-plugin-eslint2": "^5.0.3",
                 "vite-plugin-externals": "^0.6.2",
                 "vite-plugin-static-copy": "^2.2.0",
+                "vite-svg-loader": "^5.1.0",
                 "vue": "^3.4",
                 "vue-router": "^4.0",
                 "vue-select": "^4.0.0-beta.6"
@@ -51,9 +53,7 @@
                 "eslint-config-prettier": "^9.0.0",
                 "eslint-plugin-prettier": "^5.0.1",
                 "eslint-plugin-vue": "^9.32.0",
-                "prettier": "^3.3",
-                "vite-plugin-eslint": "^1.8.1",
-                "vite-svg-loader": "^5.1.0"
+                "prettier": "^3.3"
             },
             "engines": {
                 "node": ">= 20.0.0",
@@ -357,6 +357,21 @@
                 "node": ">=18"
             }
         },
+        "node_modules/@esbuild/netbsd-arm64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
+            "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
         "node_modules/@esbuild/netbsd-x64": {
             "version": "0.24.0",
             "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
@@ -466,7 +481,6 @@
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
             "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
-            "dev": true,
             "dependencies": {
                 "eslint-visitor-keys": "^3.4.3"
             },
@@ -484,7 +498,6 @@
             "version": "3.4.3",
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
             "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-            "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             },
@@ -496,7 +509,6 @@
             "version": "4.12.1",
             "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
             "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
-            "dev": true,
             "engines": {
                 "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
             }
@@ -505,7 +517,6 @@
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz",
             "integrity": "sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==",
-            "dev": true,
             "dependencies": {
                 "@eslint/object-schema": "^2.1.5",
                 "debug": "^4.3.1",
@@ -519,7 +530,6 @@
             "version": "0.9.1",
             "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.9.1.tgz",
             "integrity": "sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==",
-            "dev": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.15"
             },
@@ -531,7 +541,6 @@
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
             "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
-            "dev": true,
             "dependencies": {
                 "ajv": "^6.12.4",
                 "debug": "^4.3.2",
@@ -554,7 +563,6 @@
             "version": "9.17.0",
             "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.17.0.tgz",
             "integrity": "sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==",
-            "dev": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
@@ -563,7 +571,6 @@
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.5.tgz",
             "integrity": "sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==",
-            "dev": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
@@ -572,7 +579,6 @@
             "version": "0.2.4",
             "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz",
             "integrity": "sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==",
-            "dev": true,
             "dependencies": {
                 "levn": "^0.4.1"
             },
@@ -592,7 +598,6 @@
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
             "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
-            "dev": true,
             "engines": {
                 "node": ">=18.18.0"
             }
@@ -601,7 +606,6 @@
             "version": "0.16.6",
             "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
             "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
-            "dev": true,
             "dependencies": {
                 "@humanfs/core": "^0.19.1",
                 "@humanwhocodes/retry": "^0.3.0"
@@ -614,7 +618,6 @@
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
             "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
-            "dev": true,
             "engines": {
                 "node": ">=18.18"
             },
@@ -627,7 +630,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
             "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-            "dev": true,
             "engines": {
                 "node": ">=12.22"
             },
@@ -640,7 +642,6 @@
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
             "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
-            "dev": true,
             "engines": {
                 "node": ">=18.18"
             },
@@ -817,7 +818,6 @@
             "version": "5.1.4",
             "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
             "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
-            "dev": true,
             "dependencies": {
                 "@types/estree": "^1.0.0",
                 "estree-walker": "^2.0.2",
@@ -836,9 +836,9 @@
             }
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.1.tgz",
-            "integrity": "sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz",
+            "integrity": "sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==",
             "cpu": [
                 "arm"
             ],
@@ -848,9 +848,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.1.tgz",
-            "integrity": "sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.29.1.tgz",
+            "integrity": "sha512-CaRfrV0cd+NIIcVVN/jx+hVLN+VRqnuzLRmfmlzpOzB87ajixsN/+9L5xNmkaUUvEbI5BmIKS+XTwXsHEb65Ew==",
             "cpu": [
                 "arm64"
             ],
@@ -860,9 +860,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.1.tgz",
-            "integrity": "sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.1.tgz",
+            "integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==",
             "cpu": [
                 "arm64"
             ],
@@ -872,9 +872,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.1.tgz",
-            "integrity": "sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.29.1.tgz",
+            "integrity": "sha512-j/Ej1oanzPjmN0tirRd5K2/nncAhS9W6ICzgxV+9Y5ZsP0hiGhHJXZ2JQ53iSSjj8m6cRY6oB1GMzNn2EUt6Ng==",
             "cpu": [
                 "x64"
             ],
@@ -884,9 +884,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-arm64": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.1.tgz",
-            "integrity": "sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.29.1.tgz",
+            "integrity": "sha512-91C//G6Dm/cv724tpt7nTyP+JdN12iqeXGFM1SqnljCmi5yTXriH7B1r8AD9dAZByHpKAumqP1Qy2vVNIdLZqw==",
             "cpu": [
                 "arm64"
             ],
@@ -896,9 +896,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-x64": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.1.tgz",
-            "integrity": "sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.29.1.tgz",
+            "integrity": "sha512-hEioiEQ9Dec2nIRoeHUP6hr1PSkXzQaCUyqBDQ9I9ik4gCXQZjJMIVzoNLBRGet+hIUb3CISMh9KXuCcWVW/8w==",
             "cpu": [
                 "x64"
             ],
@@ -908,9 +908,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.1.tgz",
-            "integrity": "sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.29.1.tgz",
+            "integrity": "sha512-Py5vFd5HWYN9zxBv3WMrLAXY3yYJ6Q/aVERoeUFwiDGiMOWsMs7FokXihSOaT/PMWUty/Pj60XDQndK3eAfE6A==",
             "cpu": [
                 "arm"
             ],
@@ -920,9 +920,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.1.tgz",
-            "integrity": "sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.29.1.tgz",
+            "integrity": "sha512-RiWpGgbayf7LUcuSNIbahr0ys2YnEERD4gYdISA06wa0i8RALrnzflh9Wxii7zQJEB2/Eh74dX4y/sHKLWp5uQ==",
             "cpu": [
                 "arm"
             ],
@@ -932,9 +932,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.1.tgz",
-            "integrity": "sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.29.1.tgz",
+            "integrity": "sha512-Z80O+taYxTQITWMjm/YqNoe9d10OX6kDh8X5/rFCMuPqsKsSyDilvfg+vd3iXIqtfmp+cnfL1UrYirkaF8SBZA==",
             "cpu": [
                 "arm64"
             ],
@@ -944,9 +944,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.1.tgz",
-            "integrity": "sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.29.1.tgz",
+            "integrity": "sha512-fOHRtF9gahwJk3QVp01a/GqS4hBEZCV1oKglVVq13kcK3NeVlS4BwIFzOHDbmKzt3i0OuHG4zfRP0YoG5OF/rA==",
             "cpu": [
                 "arm64"
             ],
@@ -956,9 +956,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.28.1.tgz",
-            "integrity": "sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.29.1.tgz",
+            "integrity": "sha512-5a7q3tnlbcg0OodyxcAdrrCxFi0DgXJSoOuidFUzHZ2GixZXQs6Tc3CHmlvqKAmOs5eRde+JJxeIf9DonkmYkw==",
             "cpu": [
                 "loong64"
             ],
@@ -968,9 +968,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.1.tgz",
-            "integrity": "sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.29.1.tgz",
+            "integrity": "sha512-9b4Mg5Yfz6mRnlSPIdROcfw1BU22FQxmfjlp/CShWwO3LilKQuMISMTtAu/bxmmrE6A902W2cZJuzx8+gJ8e9w==",
             "cpu": [
                 "ppc64"
             ],
@@ -980,9 +980,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.1.tgz",
-            "integrity": "sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.29.1.tgz",
+            "integrity": "sha512-G5pn0NChlbRM8OJWpJFMX4/i8OEU538uiSv0P6roZcbpe/WfhEO+AT8SHVKfp8qhDQzaz7Q+1/ixMy7hBRidnQ==",
             "cpu": [
                 "riscv64"
             ],
@@ -992,9 +992,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.1.tgz",
-            "integrity": "sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.29.1.tgz",
+            "integrity": "sha512-WM9lIkNdkhVwiArmLxFXpWndFGuOka4oJOZh8EP3Vb8q5lzdSCBuhjavJsw68Q9AKDGeOOIHYzYm4ZFvmWez5g==",
             "cpu": [
                 "s390x"
             ],
@@ -1004,9 +1004,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz",
-            "integrity": "sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.29.1.tgz",
+            "integrity": "sha512-87xYCwb0cPGZFoGiErT1eDcssByaLX4fc0z2nRM6eMtV9njAfEE6OW3UniAoDhX4Iq5xQVpE6qO9aJbCFumKYQ==",
             "cpu": [
                 "x64"
             ],
@@ -1016,9 +1016,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.1.tgz",
-            "integrity": "sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.29.1.tgz",
+            "integrity": "sha512-xufkSNppNOdVRCEC4WKvlR1FBDyqCSCpQeMMgv9ZyXqqtKBfkw1yfGMTUTs9Qsl6WQbJnsGboWCp7pJGkeMhKA==",
             "cpu": [
                 "x64"
             ],
@@ -1028,9 +1028,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.1.tgz",
-            "integrity": "sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.29.1.tgz",
+            "integrity": "sha512-F2OiJ42m77lSkizZQLuC+jiZ2cgueWQL5YC9tjo3AgaEw+KJmVxHGSyQfDUoYR9cci0lAywv2Clmckzulcq6ig==",
             "cpu": [
                 "arm64"
             ],
@@ -1040,9 +1040,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.1.tgz",
-            "integrity": "sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.29.1.tgz",
+            "integrity": "sha512-rYRe5S0FcjlOBZQHgbTKNrqxCBUmgDJem/VQTCcTnA2KCabYSWQDrytOzX7avb79cAAweNmMUb/Zw18RNd4mng==",
             "cpu": [
                 "ia32"
             ],
@@ -1052,9 +1052,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.1.tgz",
-            "integrity": "sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.29.1.tgz",
+            "integrity": "sha512-+10CMg9vt1MoHj6x1pxyjPSMjHTIlqs8/tBztXvPAx24SKs9jwVnKqHJumlH/IzhaPUaj3T6T6wfZr8okdXaIg==",
             "cpu": [
                 "x64"
             ],
@@ -1067,177 +1067,176 @@
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
             "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-            "dev": true,
             "engines": {
                 "node": ">=10.13.0"
             }
         },
         "node_modules/@turf/area": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/area/-/area-7.1.0.tgz",
-            "integrity": "sha512-w91FEe02/mQfMPRX2pXua48scFuKJ2dSVMF2XmJ6+BJfFiCPxp95I3+Org8+ZsYv93CDNKbf0oLNEPnuQdgs2g==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/area/-/area-7.2.0.tgz",
+            "integrity": "sha512-zuTTdQ4eoTI9nSSjerIy4QwgvxqwJVciQJ8tOPuMHbXJ9N/dNjI7bU8tasjhxas/Cx3NE9NxVHtNpYHL0FSzoA==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/meta": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/bbox": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-7.1.0.tgz",
-            "integrity": "sha512-PdWPz9tW86PD78vSZj2fiRaB8JhUHy6piSa/QXb83lucxPK+HTAdzlDQMTKj5okRCU8Ox/25IR2ep9T8NdopRA==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-7.2.0.tgz",
+            "integrity": "sha512-wzHEjCXlYZiDludDbXkpBSmv8Zu6tPGLmJ1sXQ6qDwpLE1Ew3mcWqt8AaxfTP5QwDNQa3sf2vvgTEzNbPQkCiA==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/meta": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/boolean-disjoint": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-disjoint/-/boolean-disjoint-7.1.0.tgz",
-            "integrity": "sha512-JapOG03kOCoGeYMWgTQjEifhr1nUoK4Os2cX0iC5X9kvZF4qCHeruX8/rffBQDx7PDKQKusSTXq8B1ISFi0hOw==",
-            "dependencies": {
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/line-intersect": "^7.1.0",
-                "@turf/meta": "^7.1.0",
-                "@turf/polygon-to-line": "^7.1.0",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-disjoint/-/boolean-disjoint-7.2.0.tgz",
+            "integrity": "sha512-xdz+pYKkLMuqkNeJ6EF/3OdAiJdiHhcHCV0ykX33NIuALKIEpKik0+NdxxNsZsivOW6keKwr61SI+gcVtHYcnQ==",
+            "dependencies": {
+                "@turf/boolean-point-in-polygon": "^7.2.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/line-intersect": "^7.2.0",
+                "@turf/meta": "^7.2.0",
+                "@turf/polygon-to-line": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/boolean-intersects": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-intersects/-/boolean-intersects-7.1.0.tgz",
-            "integrity": "sha512-gpksWbb0RT+Z3nfqRfoACY3KEFyv2BPaxJ3L76PH67DhHZviq3Nfg85KYbpuhS64FSm+9tXe4IaKn6EjbHo20g==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-intersects/-/boolean-intersects-7.2.0.tgz",
+            "integrity": "sha512-GLRyLQgK3F14drkK5Qi9Mv7Z9VT1bgQUd9a3DB3DACTZWDSwfh8YZUFn/HBwRkK8dDdgNEXaavggQHcPi1k9ow==",
             "dependencies": {
-                "@turf/boolean-disjoint": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
+                "@turf/boolean-disjoint": "^7.2.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/meta": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/boolean-point-in-polygon": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.1.0.tgz",
-            "integrity": "sha512-mprVsyIQ+ijWTZwbnO4Jhxu94ZW2M2CheqLiRTsGJy0Ooay9v6Av5/Nl3/Gst7ZVXxPqMeMaFYkSzcTc87AKew==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.2.0.tgz",
+            "integrity": "sha512-lvEOjxeXIp+wPXgl9kJA97dqzMfNexjqHou+XHVcfxQgolctoJiRYmcVCWGpiZ9CBf/CJha1KmD1qQoRIsjLaA==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/invariant": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
                 "point-in-polygon-hao": "^1.1.0",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/boolean-point-on-line": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-7.1.0.tgz",
-            "integrity": "sha512-Kd83EjeTyY4kVMAhcW3Lb8aChwh24BUIhmpE9Or8M+ETNsFGzn9M7qtIySJHLRzKAL3letvWSKXKQPuK1AhAzg==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-point-on-line/-/boolean-point-on-line-7.2.0.tgz",
+            "integrity": "sha512-H/bXX8+2VYeSyH8JWrOsu8OGmeA9KVZfM7M6U5/fSqGsRHXo9MyYJ94k39A9kcKSwI0aWiMXVD2UFmiWy8423Q==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/invariant": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/boolean-within": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/boolean-within/-/boolean-within-7.1.0.tgz",
-            "integrity": "sha512-pgXgKCzYHssADQ1nClB1Q9aWI/dE1elm2jy3B5X59XdoFXKrKDZA+gCHYOYgp2NGO/txzVfl3UKvnxIj54Fa4w==",
-            "dependencies": {
-                "@turf/bbox": "^7.1.0",
-                "@turf/boolean-point-in-polygon": "^7.1.0",
-                "@turf/boolean-point-on-line": "^7.1.0",
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/boolean-within/-/boolean-within-7.2.0.tgz",
+            "integrity": "sha512-zB3AiF59zQZ27Dp1iyhp9mVAKOFHat8RDH45TZhLY8EaqdEPdmLGvwMFCKfLryQcUDQvmzP8xWbtUR82QM5C4g==",
+            "dependencies": {
+                "@turf/bbox": "^7.2.0",
+                "@turf/boolean-point-in-polygon": "^7.2.0",
+                "@turf/boolean-point-on-line": "^7.2.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/invariant": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/helpers": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
-            "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.2.0.tgz",
+            "integrity": "sha512-cXo7bKNZoa7aC7ydLmUR02oB3IgDe7MxiPuRz3cCtYQHn+BJ6h1tihmamYDWWUlPHgSNF0i3ATc4WmDECZafKw==",
             "dependencies": {
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/intersect": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/intersect/-/intersect-7.1.0.tgz",
-            "integrity": "sha512-T0VhI6yhptX9EoMsuuBETyqV+edyq31SUC8bfuM6kdJ5WwJ0EvUfQoC+3bhMtCOn60lHawrUuGBgW+vCO8KGMg==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/intersect/-/intersect-7.2.0.tgz",
+            "integrity": "sha512-81GMzKS9pKqLPa61qSlFxLFeAC8XbwyCQ9Qv4z6o5skWk1qmMUbEHeMqaGUTEzk+q2XyhZ0sju1FV4iLevQ/aw==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/meta": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/meta": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "polygon-clipping": "^0.15.3",
-                "tslib": "^2.6.2"
+                "polyclip-ts": "^0.16.8",
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/invariant": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
-            "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.2.0.tgz",
+            "integrity": "sha512-kV4u8e7Gkpq+kPbAKNC21CmyrXzlbBgFjO1PhrHPgEdNqXqDawoZ3i6ivE3ULJj2rSesCjduUaC/wyvH/sNr2Q==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/line-intersect": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-7.1.0.tgz",
-            "integrity": "sha512-JI3dvOsAoCqd4vUJ134FIzgcC42QpC/tBs+b4OJoxWmwDek3REv4qGaZY6wCg9X4hFSlCKFcnhMIQQZ/n720Qg==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-7.2.0.tgz",
+            "integrity": "sha512-GhCJVEkc8EmggNi85EuVLoXF5T5jNVxmhIetwppiVyJzMrwkYAkZSYB3IBFYGUUB9qiNFnTwungVSsBV/S8ZiA==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
                 "sweepline-intersections": "^1.5.0",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
             }
         },
         "node_modules/@turf/meta": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.1.0.tgz",
-            "integrity": "sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.2.0.tgz",
+            "integrity": "sha512-igzTdHsQc8TV1RhPuOLVo74Px/hyPrVgVOTgjWQZzt3J9BVseCdpfY/0cJBdlSRI4S/yTmmHl7gAqjhpYH5Yaw==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
                 "@types/geojson": "^7946.0.10"
             },
             "funding": {
@@ -1245,14 +1244,14 @@
             }
         },
         "node_modules/@turf/polygon-to-line": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/@turf/polygon-to-line/-/polygon-to-line-7.1.0.tgz",
-            "integrity": "sha512-FBlfyBWNQZCTVGqlJH7LR2VXmvj8AydxrA8zegqek/5oPGtQDeUgIppKmvmuNClqbglhv59QtCUVaDK4bOuCTA==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@turf/polygon-to-line/-/polygon-to-line-7.2.0.tgz",
+            "integrity": "sha512-9jeTN3LiJ933I5sd4K0kwkcivOYXXm1emk0dHorwXeSFSHF+nlYesEW3Hd889wb9lZd7/SVLMUeX/h39mX+vCA==",
             "dependencies": {
-                "@turf/helpers": "^7.1.0",
-                "@turf/invariant": "^7.1.0",
+                "@turf/helpers": "^7.2.0",
+                "@turf/invariant": "^7.2.0",
                 "@types/geojson": "^7946.0.10",
-                "tslib": "^2.6.2"
+                "tslib": "^2.8.1"
             },
             "funding": {
                 "url": "https://opencollective.com/turf"
@@ -1262,6 +1261,7 @@
             "version": "8.56.12",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
             "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
+            "peer": true,
             "dependencies": {
                 "@types/estree": "*",
                 "@types/json-schema": "*"
@@ -1606,7 +1606,6 @@
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
             "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-            "dev": true,
             "peerDependencies": {
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
@@ -1678,7 +1677,6 @@
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
             "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-            "dev": true,
             "dependencies": {
                 "color-convert": "^2.0.1"
             },
@@ -1715,14 +1713,20 @@
         "node_modules/argparse": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
         },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-            "dev": true
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+        },
+        "node_modules/bignumber.js": {
+            "version": "9.1.2",
+            "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz",
+            "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==",
+            "engines": {
+                "node": "*"
+            }
         },
         "node_modules/binary-extensions": {
             "version": "2.3.0",
@@ -1738,8 +1742,7 @@
         "node_modules/boolbase": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-            "dev": true
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
         },
         "node_modules/bootstrap": {
             "version": "5.3.3",
@@ -1763,7 +1766,6 @@
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dev": true,
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -1827,7 +1829,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-            "dev": true,
             "engines": {
                 "node": ">=6"
             }
@@ -1856,7 +1857,6 @@
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
             "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dev": true,
             "dependencies": {
                 "ansi-styles": "^4.1.0",
                 "supports-color": "^7.1.0"
@@ -1915,7 +1915,6 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dev": true,
             "dependencies": {
                 "color-name": "~1.1.4"
             },
@@ -1926,8 +1925,7 @@
         "node_modules/color-name": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "node_modules/color-parse": {
             "version": "2.0.2",
@@ -1963,7 +1961,6 @@
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
             "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-            "dev": true,
             "engines": {
                 "node": ">= 10"
             }
@@ -1977,8 +1974,7 @@
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-            "dev": true
+            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
         },
         "node_modules/core-util-is": {
             "version": "1.0.3",
@@ -1989,7 +1985,6 @@
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
             "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-            "dev": true,
             "dependencies": {
                 "path-key": "^3.1.0",
                 "shebang-command": "^2.0.0",
@@ -2003,7 +1998,6 @@
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
             "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-            "dev": true,
             "dependencies": {
                 "boolbase": "^1.0.0",
                 "css-what": "^6.1.0",
@@ -2019,7 +2013,6 @@
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
             "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-            "dev": true,
             "dependencies": {
                 "mdn-data": "2.0.30",
                 "source-map-js": "^1.0.1"
@@ -2032,7 +2025,6 @@
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
             "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-            "dev": true,
             "engines": {
                 "node": ">= 6"
             },
@@ -2056,7 +2048,6 @@
             "version": "5.0.5",
             "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
             "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
-            "dev": true,
             "dependencies": {
                 "css-tree": "~2.2.0"
             },
@@ -2069,7 +2060,6 @@
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
             "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
-            "dev": true,
             "dependencies": {
                 "mdn-data": "2.0.28",
                 "source-map-js": "^1.0.1"
@@ -2082,8 +2072,7 @@
         "node_modules/csso/node_modules/mdn-data": {
             "version": "2.0.28",
             "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
-            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
-            "dev": true
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
         },
         "node_modules/csstype": {
             "version": "3.1.3",
@@ -2161,7 +2150,6 @@
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
             "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-            "dev": true,
             "dependencies": {
                 "ms": "^2.1.3"
             },
@@ -2177,14 +2165,12 @@
         "node_modules/deep-is": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-            "dev": true
+            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
         },
         "node_modules/dom-serializer": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
             "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-            "dev": true,
             "dependencies": {
                 "domelementtype": "^2.3.0",
                 "domhandler": "^5.0.2",
@@ -2198,7 +2184,6 @@
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
             "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -2210,7 +2195,6 @@
             "version": "5.0.3",
             "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
             "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-            "dev": true,
             "dependencies": {
                 "domelementtype": "^2.3.0"
             },
@@ -2222,10 +2206,9 @@
             }
         },
         "node_modules/domutils": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-            "dev": true,
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.1.tgz",
+            "integrity": "sha512-xWXmuRnN9OMP6ptPd2+H0cCbcYBULa5YDTbMm/2lvkWvNA3O4wcW+GvzooqBuNM8yy6pl3VIAeJTUUWUbfI5Fw==",
             "dependencies": {
                 "dom-serializer": "^2.0.0",
                 "domelementtype": "^2.3.0",
@@ -2241,15 +2224,15 @@
             "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.75",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.75.tgz",
-            "integrity": "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q==",
+            "version": "1.5.76",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.76.tgz",
+            "integrity": "sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==",
             "peer": true
         },
         "node_modules/enhanced-resolve": {
-            "version": "5.17.1",
-            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-            "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+            "version": "5.18.0",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz",
+            "integrity": "sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==",
             "peer": true,
             "dependencies": {
                 "graceful-fs": "^4.2.4",
@@ -2271,9 +2254,9 @@
             }
         },
         "node_modules/es-module-lexer": {
-            "version": "1.5.4",
-            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
-            "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw=="
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
+            "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ=="
         },
         "node_modules/es5-ext": {
             "version": "0.10.64",
@@ -2363,7 +2346,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-            "dev": true,
             "engines": {
                 "node": ">=10"
             },
@@ -2375,7 +2357,6 @@
             "version": "9.17.0",
             "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.17.0.tgz",
             "integrity": "sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==",
-            "dev": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.12.1",
@@ -2513,7 +2494,6 @@
             "version": "8.2.0",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
             "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
-            "dev": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
@@ -2529,7 +2509,6 @@
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
             "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
-            "dev": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -2555,7 +2534,6 @@
             "version": "10.3.0",
             "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
             "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
-            "dev": true,
             "dependencies": {
                 "acorn": "^8.14.0",
                 "acorn-jsx": "^5.3.2",
@@ -2572,7 +2550,6 @@
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
             "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
-            "dev": true,
             "dependencies": {
                 "estraverse": "^5.1.0"
             },
@@ -2608,7 +2585,6 @@
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
             "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -2684,8 +2660,7 @@
         "node_modules/fast-levenshtein": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-            "dev": true
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
         },
         "node_modules/fast-uri": {
             "version": "3.0.3",
@@ -2694,9 +2669,9 @@
             "peer": true
         },
         "node_modules/fastq": {
-            "version": "1.17.1",
-            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-            "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+            "version": "1.18.0",
+            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
+            "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
             "dependencies": {
                 "reusify": "^1.0.4"
             }
@@ -2719,7 +2694,6 @@
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
             "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
-            "dev": true,
             "dependencies": {
                 "flat-cache": "^4.0.0"
             },
@@ -2742,7 +2716,6 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
             "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-            "dev": true,
             "dependencies": {
                 "locate-path": "^6.0.0",
                 "path-exists": "^4.0.0"
@@ -2758,7 +2731,6 @@
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
             "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
-            "dev": true,
             "dependencies": {
                 "flatted": "^3.2.9",
                 "keyv": "^4.5.4"
@@ -2770,8 +2742,7 @@
         "node_modules/flatted": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
-            "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
-            "dev": true
+            "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA=="
         },
         "node_modules/fs-extra": {
             "version": "10.1.0",
@@ -2826,7 +2797,6 @@
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
             "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-            "dev": true,
             "dependencies": {
                 "is-glob": "^4.0.3"
             },
@@ -2844,7 +2814,6 @@
             "version": "14.0.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
             "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-            "dev": true,
             "engines": {
                 "node": ">=18"
             },
@@ -2888,7 +2857,6 @@
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
             "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-            "dev": true,
             "engines": {
                 "node": ">= 4"
             }
@@ -2902,7 +2870,6 @@
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
             "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-            "dev": true,
             "dependencies": {
                 "parent-module": "^1.0.0",
                 "resolve-from": "^4.0.0"
@@ -2918,7 +2885,6 @@
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
             "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-            "dev": true,
             "engines": {
                 "node": ">=0.8.19"
             }
@@ -2983,8 +2949,7 @@
         "node_modules/isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-            "dev": true
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
         },
         "node_modules/jest-worker": {
             "version": "27.5.1",
@@ -3032,7 +2997,6 @@
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
             "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-            "dev": true,
             "dependencies": {
                 "argparse": "^2.0.1"
             },
@@ -3043,8 +3007,7 @@
         "node_modules/json-buffer": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-            "dev": true
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
         },
         "node_modules/json-parse-even-better-errors": {
             "version": "2.3.1",
@@ -3060,8 +3023,7 @@
         "node_modules/json-stable-stringify-without-jsonify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-            "dev": true
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
         },
         "node_modules/jsonfile": {
             "version": "6.1.0",
@@ -3089,7 +3051,6 @@
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-            "dev": true,
             "dependencies": {
                 "json-buffer": "3.0.1"
             }
@@ -3103,7 +3064,6 @@
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
             "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-            "dev": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1",
                 "type-check": "~0.4.0"
@@ -3133,7 +3093,6 @@
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
             "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-            "dev": true,
             "dependencies": {
                 "p-locate": "^5.0.0"
             },
@@ -3157,8 +3116,7 @@
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-            "dev": true
+            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
         },
         "node_modules/magic-string": {
             "version": "0.30.17",
@@ -3171,8 +3129,7 @@
         "node_modules/mdn-data": {
             "version": "2.0.30",
             "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-            "dev": true
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
         },
         "node_modules/merge-stream": {
             "version": "2.0.0",
@@ -3241,7 +3198,6 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dev": true,
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -3287,8 +3243,7 @@
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-            "dev": true
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
         },
         "node_modules/nanoid": {
             "version": "3.3.8",
@@ -3310,8 +3265,7 @@
         "node_modules/natural-compare": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-            "dev": true
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
         },
         "node_modules/neo-async": {
             "version": "2.6.2",
@@ -3342,7 +3296,6 @@
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
             "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-            "dev": true,
             "dependencies": {
                 "boolbase": "^1.0.0"
             },
@@ -3379,7 +3332,6 @@
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
             "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-            "dev": true,
             "dependencies": {
                 "deep-is": "^0.1.3",
                 "fast-levenshtein": "^2.0.6",
@@ -3396,7 +3348,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
             "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-            "dev": true,
             "dependencies": {
                 "yocto-queue": "^0.1.0"
             },
@@ -3411,7 +3362,6 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
             "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-            "dev": true,
             "dependencies": {
                 "p-limit": "^3.0.2"
             },
@@ -3431,7 +3381,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-            "dev": true,
             "dependencies": {
                 "callsites": "^3.0.0"
             },
@@ -3453,7 +3402,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-            "dev": true,
             "engines": {
                 "node": ">=8"
             }
@@ -3462,7 +3410,6 @@
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
             "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-            "dev": true,
             "engines": {
                 "node": ">=8"
             }
@@ -3488,7 +3435,6 @@
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
             "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-            "dev": true,
             "engines": {
                 "node": ">=12"
             },
@@ -3497,20 +3443,20 @@
             }
         },
         "node_modules/point-in-polygon-hao": {
-            "version": "1.2.3",
-            "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.3.tgz",
-            "integrity": "sha512-uZsWylGd8nthIYS8F7aSyM7Pot+4L/bgXheJcCNdRr4eLpsM/rMb3hIi5SqNxAVjUoDDao3QzCtdaVDzmeF9Cw==",
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.4.tgz",
+            "integrity": "sha512-x2pcvXeqhRHlNRdhLs/tgFapAbSSe86wa/eqmj1G6pWftbEs5aVRJhRGM6FYSUERKu0PjekJzMq0gsI2XyiclQ==",
             "dependencies": {
                 "robust-predicates": "^3.0.2"
             }
         },
-        "node_modules/polygon-clipping": {
-            "version": "0.15.7",
-            "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.7.tgz",
-            "integrity": "sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==",
+        "node_modules/polyclip-ts": {
+            "version": "0.16.8",
+            "resolved": "https://registry.npmjs.org/polyclip-ts/-/polyclip-ts-0.16.8.tgz",
+            "integrity": "sha512-JPtKbDRuPEuAjuTdhR62Gph7Is2BS1Szx69CFOO3g71lpJDFo78k4tFyi+qFOMVPePEzdSKkpGU3NBXPHHjvKQ==",
             "dependencies": {
-                "robust-predicates": "^3.0.2",
-                "splaytree": "^3.1.0"
+                "bignumber.js": "^9.1.0",
+                "splaytree-ts": "^1.0.2"
             }
         },
         "node_modules/postcss": {
@@ -3557,7 +3503,6 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
             "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-            "dev": true,
             "engines": {
                 "node": ">= 0.8.0"
             }
@@ -3717,7 +3662,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-            "dev": true,
             "engines": {
                 "node": ">=4"
             }
@@ -3745,9 +3689,9 @@
             "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
         },
         "node_modules/rollup": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.1.tgz",
-            "integrity": "sha512-61fXYl/qNVinKmGSTHAZ6Yy8I3YIJC/r2m9feHo6SwVAVcLT5MPwOUFe7EuURA/4m0NR8lXG4BBXuo/IZEsjMg==",
+            "version": "4.29.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.29.1.tgz",
+            "integrity": "sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==",
             "dependencies": {
                 "@types/estree": "1.0.6"
             },
@@ -3759,25 +3703,25 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.28.1",
-                "@rollup/rollup-android-arm64": "4.28.1",
-                "@rollup/rollup-darwin-arm64": "4.28.1",
-                "@rollup/rollup-darwin-x64": "4.28.1",
-                "@rollup/rollup-freebsd-arm64": "4.28.1",
-                "@rollup/rollup-freebsd-x64": "4.28.1",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.28.1",
-                "@rollup/rollup-linux-arm-musleabihf": "4.28.1",
-                "@rollup/rollup-linux-arm64-gnu": "4.28.1",
-                "@rollup/rollup-linux-arm64-musl": "4.28.1",
-                "@rollup/rollup-linux-loongarch64-gnu": "4.28.1",
-                "@rollup/rollup-linux-powerpc64le-gnu": "4.28.1",
-                "@rollup/rollup-linux-riscv64-gnu": "4.28.1",
-                "@rollup/rollup-linux-s390x-gnu": "4.28.1",
-                "@rollup/rollup-linux-x64-gnu": "4.28.1",
-                "@rollup/rollup-linux-x64-musl": "4.28.1",
-                "@rollup/rollup-win32-arm64-msvc": "4.28.1",
-                "@rollup/rollup-win32-ia32-msvc": "4.28.1",
-                "@rollup/rollup-win32-x64-msvc": "4.28.1",
+                "@rollup/rollup-android-arm-eabi": "4.29.1",
+                "@rollup/rollup-android-arm64": "4.29.1",
+                "@rollup/rollup-darwin-arm64": "4.29.1",
+                "@rollup/rollup-darwin-x64": "4.29.1",
+                "@rollup/rollup-freebsd-arm64": "4.29.1",
+                "@rollup/rollup-freebsd-x64": "4.29.1",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.29.1",
+                "@rollup/rollup-linux-arm-musleabihf": "4.29.1",
+                "@rollup/rollup-linux-arm64-gnu": "4.29.1",
+                "@rollup/rollup-linux-arm64-musl": "4.29.1",
+                "@rollup/rollup-linux-loongarch64-gnu": "4.29.1",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.29.1",
+                "@rollup/rollup-linux-riscv64-gnu": "4.29.1",
+                "@rollup/rollup-linux-s390x-gnu": "4.29.1",
+                "@rollup/rollup-linux-x64-gnu": "4.29.1",
+                "@rollup/rollup-linux-x64-musl": "4.29.1",
+                "@rollup/rollup-win32-arm64-msvc": "4.29.1",
+                "@rollup/rollup-win32-ia32-msvc": "4.29.1",
+                "@rollup/rollup-win32-x64-msvc": "4.29.1",
                 "fsevents": "~2.3.2"
             }
         },
@@ -3869,7 +3813,6 @@
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
             "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-            "dev": true,
             "dependencies": {
                 "shebang-regex": "^3.0.0"
             },
@@ -3881,7 +3824,6 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
             "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-            "dev": true,
             "engines": {
                 "node": ">=8"
             }
@@ -3934,10 +3876,10 @@
             "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
             "deprecated": "Please use @jridgewell/sourcemap-codec instead"
         },
-        "node_modules/splaytree": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
-            "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A=="
+        "node_modules/splaytree-ts": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/splaytree-ts/-/splaytree-ts-1.0.2.tgz",
+            "integrity": "sha512-0kGecIZNIReCSiznK3uheYB8sbstLjCZLiwcQwbmLhgHJj2gz6OnSPkVzJQCMnmEz1BQ4gPK59ylhBoEWOhGNA=="
         },
         "node_modules/string_decoder": {
             "version": "1.1.1",
@@ -3951,7 +3893,6 @@
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
             "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-            "dev": true,
             "engines": {
                 "node": ">=8"
             },
@@ -3963,7 +3904,6 @@
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
             "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-            "dev": true,
             "dependencies": {
                 "has-flag": "^4.0.0"
             },
@@ -3975,7 +3915,6 @@
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
             "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
-            "dev": true,
             "dependencies": {
                 "@trysound/sax": "0.2.0",
                 "commander": "^7.2.0",
@@ -4179,7 +4118,6 @@
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
             "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-            "dev": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1"
             },
@@ -4269,11 +4207,11 @@
             }
         },
         "node_modules/vite": {
-            "version": "6.0.4",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.4.tgz",
-            "integrity": "sha512-zwlH6ar+6o6b4Wp+ydhtIKLrGM/LoqZzcdVmkGAFun0KHTzIzjh+h0kungEx7KJg/PYnC80I4TII9WkjciSR6Q==",
+            "version": "6.0.6",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.6.tgz",
+            "integrity": "sha512-NSjmUuckPmDU18bHz7QZ+bTYhRR0iA72cs2QAxCqDpafJ0S6qetco0LB3WW2OxlMHS0JmAv+yZ/R3uPmMyGTjQ==",
             "dependencies": {
-                "esbuild": "^0.24.0",
+                "esbuild": "^0.24.2",
                 "postcss": "^8.4.49",
                 "rollup": "^4.23.0"
             },
@@ -4359,59 +4297,33 @@
                 "magic-string": "^0.30.11"
             }
         },
-        "node_modules/vite-plugin-eslint": {
-            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/vite-plugin-eslint/-/vite-plugin-eslint-1.8.1.tgz",
-            "integrity": "sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==",
-            "dev": true,
-            "dependencies": {
-                "@rollup/pluginutils": "^4.2.1",
-                "@types/eslint": "^8.4.5",
-                "rollup": "^2.77.2"
-            },
-            "peerDependencies": {
-                "eslint": ">=7",
-                "vite": ">=2"
-            }
-        },
-        "node_modules/vite-plugin-eslint/node_modules/@rollup/pluginutils": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
-            "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
-            "dev": true,
+        "node_modules/vite-plugin-eslint2": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/vite-plugin-eslint2/-/vite-plugin-eslint2-5.0.3.tgz",
+            "integrity": "sha512-kbjjbSyxSYK1oK0kOnSVs2er8DhqNbVA5pNN21SJo8AldQIOgG4LVQvwp6ISYMDXQaaBMOCrmXFTfGkQUjIZ1g==",
             "dependencies": {
-                "estree-walker": "^2.0.1",
-                "picomatch": "^2.2.2"
+                "@rollup/pluginutils": "^5.1.3",
+                "debug": "^4.3.7"
             },
             "engines": {
-                "node": ">= 8.0.0"
-            }
-        },
-        "node_modules/vite-plugin-eslint/node_modules/picomatch": {
-            "version": "2.3.1",
-            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-            "dev": true,
-            "engines": {
-                "node": ">=8.6"
+                "node": ">=18"
             },
             "funding": {
-                "url": "https://github.com/sponsors/jonschlinkert"
-            }
-        },
-        "node_modules/vite-plugin-eslint/node_modules/rollup": {
-            "version": "2.79.2",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
-            "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
-            "dev": true,
-            "bin": {
-                "rollup": "dist/bin/rollup"
+                "url": "https://github.com/sponsors/modyqyw"
             },
-            "engines": {
-                "node": ">=10.0.0"
+            "peerDependencies": {
+                "@types/eslint": "^7.0.0 || ^8.0.0 || ^9.0.0",
+                "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0",
+                "rollup": "^2.0.0 || ^3.0.0 || ^4.0.0",
+                "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
             },
-            "optionalDependencies": {
-                "fsevents": "~2.3.2"
+            "peerDependenciesMeta": {
+                "@types/eslint": {
+                    "optional": true
+                },
+                "rollup": {
+                    "optional": true
+                }
             }
         },
         "node_modules/vite-plugin-externals": {
@@ -4478,7 +4390,6 @@
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
             "integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
-            "dev": true,
             "dependencies": {
                 "svgo": "^3.0.2"
             },
@@ -4486,6 +4397,405 @@
                 "vue": ">=3.2.13"
             }
         },
+        "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
+            "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/android-arm": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
+            "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/android-arm64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
+            "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/android-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
+            "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
+            "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
+            "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
+            "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
+            "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-arm": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
+            "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
+            "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
+            "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
+            "cpu": [
+                "ia32"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
+            "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
+            "cpu": [
+                "loong64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
+            "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
+            "cpu": [
+                "mips64el"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
+            "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
+            "cpu": [
+                "ppc64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
+            "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
+            "cpu": [
+                "riscv64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
+            "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
+            "cpu": [
+                "s390x"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/linux-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
+            "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
+            "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/openbsd-arm64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
+            "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
+            "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
+            "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
+            "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
+            "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
+            "cpu": [
+                "ia32"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/@esbuild/win32-x64": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
+            "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/vite/node_modules/esbuild": {
+            "version": "0.24.2",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
+            "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+            "hasInstallScript": true,
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "optionalDependencies": {
+                "@esbuild/aix-ppc64": "0.24.2",
+                "@esbuild/android-arm": "0.24.2",
+                "@esbuild/android-arm64": "0.24.2",
+                "@esbuild/android-x64": "0.24.2",
+                "@esbuild/darwin-arm64": "0.24.2",
+                "@esbuild/darwin-x64": "0.24.2",
+                "@esbuild/freebsd-arm64": "0.24.2",
+                "@esbuild/freebsd-x64": "0.24.2",
+                "@esbuild/linux-arm": "0.24.2",
+                "@esbuild/linux-arm64": "0.24.2",
+                "@esbuild/linux-ia32": "0.24.2",
+                "@esbuild/linux-loong64": "0.24.2",
+                "@esbuild/linux-mips64el": "0.24.2",
+                "@esbuild/linux-ppc64": "0.24.2",
+                "@esbuild/linux-riscv64": "0.24.2",
+                "@esbuild/linux-s390x": "0.24.2",
+                "@esbuild/linux-x64": "0.24.2",
+                "@esbuild/netbsd-arm64": "0.24.2",
+                "@esbuild/netbsd-x64": "0.24.2",
+                "@esbuild/openbsd-arm64": "0.24.2",
+                "@esbuild/openbsd-x64": "0.24.2",
+                "@esbuild/sunos-x64": "0.24.2",
+                "@esbuild/win32-arm64": "0.24.2",
+                "@esbuild/win32-ia32": "0.24.2",
+                "@esbuild/win32-x64": "0.24.2"
+            }
+        },
         "node_modules/vue": {
             "version": "3.5.13",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
@@ -4696,7 +5006,6 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-            "dev": true,
             "dependencies": {
                 "isexe": "^2.0.0"
             },
@@ -4716,7 +5025,6 @@
             "version": "1.2.5",
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
             "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -4739,7 +5047,6 @@
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-            "dev": true,
             "engines": {
                 "node": ">=10"
             },
diff --git a/boranga/frontend/boranga/package.json b/boranga/frontend/boranga/package.json
index 322b08ed..2764da74 100644
--- a/boranga/frontend/boranga/package.json
+++ b/boranga/frontend/boranga/package.json
@@ -23,6 +23,7 @@
         "datatables.net-buttons": "^3.0.0",
         "datatables.net-buttons-bs5": "^3.0.0",
         "datatables.net-responsive-bs5": "^3.0.2",
+        "esbuild": "0.24.0",
         "jquery": "^3.7.1",
         "jquery-validation": "^1.21.0",
         "jszip": "^3.9",
@@ -39,12 +40,13 @@
         "uuid": "^11.0",
         "vite": "^6.0",
         "vite-plugin-commonjs": "^0.10.4",
+        "vite-plugin-eslint2": "^5.0.3",
         "vite-plugin-externals": "^0.6.2",
         "vite-plugin-static-copy": "^2.2.0",
         "vue": "^3.4",
         "vue-router": "^4.0",
         "vue-select": "^4.0.0-beta.6",
-        "esbuild": "0.24.0"
+        "vite-svg-loader": "^5.1.0"
     },
     "engines": {
         "node": ">= 20.0.0",
@@ -64,8 +66,6 @@
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-vue": "^9.32.0",
-        "prettier": "^3.3",
-        "vite-plugin-eslint": "^1.8.1",
-        "vite-svg-loader": "^5.1.0"
+        "prettier": "^3.3"
     }
 }

From bef8db0e1c4135d082b1edae9b2bd2bbf643a31a Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 30 Dec 2024 11:24:15 +0800
Subject: [PATCH 133/138] Use newever vite-plugin-eslint2 package.

---
 boranga/frontend/boranga/vite.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/boranga/frontend/boranga/vite.config.js b/boranga/frontend/boranga/vite.config.js
index aaa9f1b0..dc5ccab1 100644
--- a/boranga/frontend/boranga/vite.config.js
+++ b/boranga/frontend/boranga/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
-import eslint from 'vite-plugin-eslint';
+import eslint from 'vite-plugin-eslint2';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import svgLoader from 'vite-svg-loader';
 

From a7a465d9d4c7aaffefeb9a6ba88e8efdb920ee98 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 30 Dec 2024 11:24:56 +0800
Subject: [PATCH 134/138] Give node more memory as required to complete build.
 Install newer gdal version.

---
 Dockerfile | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index ecb7f918..1109574a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -15,7 +15,8 @@ ENV DEBIAN_FRONTEND=noninteractive \
     SITE_DOMAIN='dbca.wa.gov.au' \
     OSCAR_SHOP_NAME='Parks & Wildlife' \
     BPAY_ALLOWED=False \
-    NODE_MAJOR=20
+    NODE_MAJOR=20 \
+    NODE_OPTIONS=--max_old_space_size=4096
 
 FROM builder_base_boranga as apt_packages_boranga
 
@@ -27,17 +28,15 @@ RUN --mount=type=cache,target=/var/cache/apt apt-get update && \
     apt-get upgrade -y && \
     apt-get install --no-install-recommends -y \
     binutils \
-    ca-certificates \
     bzip2 \
+    ca-certificates \
     curl \
     g++ \
     gcc \
-    gdal-bin \
     git \
     graphviz \
     htop \
     ipython3 \
-    libgdal-dev \
     libgraphviz-dev \
     libmagic-dev \
     libpq-dev \
@@ -47,11 +46,11 @@ RUN --mount=type=cache,target=/var/cache/apt apt-get update && \
     patch \
     postgresql-client \
     python3-dev \
-    python3-gdal \
     python3-pil \
     python3-pip \
     python3-setuptools \
     python3-venv \
+    software-properties-common \
     sqlite3 \
     ssh \
     sudo \
@@ -62,6 +61,15 @@ RUN --mount=type=cache,target=/var/cache/apt apt-get update && \
     rm -rf /var/lib/apt/lists/* && \
     update-ca-certificates
 
+RUN add-apt-repository ppa:ubuntugis/ubuntugis-unstable
+
+RUN --mount=type=cache,target=/var/cache/apt apt-get update && \
+    apt-get upgrade -y && \
+    apt-get install --no-install-recommends -y \
+    gdal-bin \
+    libgdal-dev \
+    python3-gdal
+
 FROM apt_packages_boranga as node_boranga
 
 # install node
@@ -123,8 +131,6 @@ RUN cd /app/boranga/frontend/boranga; npm ci --omit=dev && \
 
 FROM build_vue_boranga as launch_boranga
 
-RUN $VIRTUAL_ENV_PATH/bin/python manage.py collectstatic --noinput
-
 EXPOSE 8080
 HEALTHCHECK --interval=1m --timeout=5s --start-period=10s --retries=3 CMD ["wget", "-q", "-O", "-", "http://localhost:8080/"]
 CMD ["/startup.sh"]

From 68605cf266aca87d4f0c2e86a0e061538785b7e6 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Mon, 30 Dec 2024 13:52:35 +0800
Subject: [PATCH 135/138] Move collect static after vue build so built files
 are available when DEBUG=False.

---
 Dockerfile | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 1109574a..b18d5944 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -119,17 +119,17 @@ RUN $VIRTUAL_ENV_PATH/bin/pip3 install --upgrade pip && \
 # RUN patch /usr/local/lib/python3.8/dist-packages/django/contrib/gis/geos/libgeos.py /app/libgeos.py.patch
 # RUN rm /app/libgeos.py.patch
 
-FROM python_dependencies_boranga as collectstatic_boranga
-
-RUN touch /app/.env && \
-    $VIRTUAL_ENV_PATH/bin/python manage.py collectstatic --noinput
-
-FROM collectstatic_boranga as build_vue_boranga
+FROM python_dependencies_boranga as build_vue_boranga
 
 RUN cd /app/boranga/frontend/boranga; npm ci --omit=dev && \
     cd /app/boranga/frontend/boranga; npm run build
 
-FROM build_vue_boranga as launch_boranga
+FROM build_vue_boranga as collectstatic_boranga
+
+RUN touch /app/.env && \
+    $VIRTUAL_ENV_PATH/bin/python manage.py collectstatic --noinput
+
+FROM collectstatic_boranga as launch_boranga
 
 EXPOSE 8080
 HEALTHCHECK --interval=1m --timeout=5s --start-period=10s --retries=3 CMD ["wget", "-q", "-O", "-", "http://localhost:8080/"]

From 8b05f69260158ecb46ed866df18e7f4d09abda01 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 31 Dec 2024 10:23:31 +0800
Subject: [PATCH 136/138] Fix a couple of issues with shapefile upload.

---
 .../src/components/common/component_map.vue        | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/boranga/frontend/boranga/src/components/common/component_map.vue b/boranga/frontend/boranga/src/components/common/component_map.vue
index 4aab7923..9ff4dedf 100644
--- a/boranga/frontend/boranga/src/components/common/component_map.vue
+++ b/boranga/frontend/boranga/src/components/common/component_map.vue
@@ -2427,13 +2427,6 @@ export default {
             } else {
                 console.log('Done initializing map (no refresh)');
             }
-            // Priya calling this event from mounted as its only been triggered from loadMapFeatures() which is coomented at the moment
-            // vm.map.dispatchEvent({
-            //     type: 'features-loaded',
-            //     details: {
-            //         loaded: true,
-            //     },
-            // });
         });
     },
     methods: {
@@ -4256,7 +4249,7 @@ export default {
                 vm.layerSources[vm.defaultQueryLayerName];
             // If no geometry name is provided, assume the geometry is the proposals object itself
             const geometry_name =
-                vm.getLayerDefinitionByName(toSource).geometry_name || null;
+                vm.getLayerDefinitionByName(toSource)?.geometry_name || null;
 
             console.log(`Loading features to source ${toSource}`, proposals);
             let opacities = [];
@@ -4741,7 +4734,10 @@ export default {
                     // so calling this will remove the file list from the front end
                     vm.$refs.shapefile_document.get_documents();
                     vm.$nextTick(() => {
-                        vm.loadMapFeatures([data]);
+                        vm.loadMapFeatures(
+                            [data],
+                            this.queryLayerDefinition.name
+                        );
                         vm.displayAllFeatures();
                         swal.fire(
                             'Success',

From 52a3255f7614d129821705dbfeaac444751e68b4 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 31 Dec 2024 10:24:40 +0800
Subject: [PATCH 137/138] Ignore .eslintcache

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 028a9d93..be235d54 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,6 +50,7 @@ htmlcov/
 .coverage
 .coverage*
 .cache
+.eslintcache
 nosetests.xml
 coverage.xml
 *,cover
@@ -107,4 +108,4 @@ git_history_recent
 *.xls*
 *.DAV
 
-private-media/
\ No newline at end of file
+private-media/

From 73ad0e0ca5c23596dec27ac7fc24dfb3f5152021 Mon Sep 17 00:00:00 2001
From: Oak McIlwain <oak.mcilwain@dbca.wa.gov.au>
Date: Tue, 31 Dec 2024 10:26:21 +0800
Subject: [PATCH 138/138] Application seems to function fine without the gdal
 package installed (it isn't present in leases, morringlicensing, pbsv2 and
 they work fine also) Maybe because we install python3-gdal at the OS level.

---
 requirements.txt | 1 -
 1 file changed, 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 68565a81..991107ee 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -16,7 +16,6 @@ django-countries~=7.5
 django-cron==0.6.0 # This project is no longer maintained
 django-dynamic-fixture==3.1.3
 django-filter~=24.3
-gdal==3.8.4
 openpyxl~=3.1
 datapackage~=1.15
 python-dateutil~=2.8